Easy creative tips

(Untitled)

Jul 25, 2024

If you're looking at the essence, accessible content can be defined by:

  1. It is a possibility to comprehend. All information must be presented in a way that are easily understood by users, no matter which user agent (browsers or screen readers or any other software) they operate or what limitations they may have.
  2. Operating. Visitors need to be able to navigate around the website and utilize each function, even if they don't have an ordinary mouse.
  3. Short and simple. Content, forms menus, links and various other elements of a website should be understood by the users.
  4. Robust. A variety of devices, such as screen readers, software that allows for voice recognition, as well as braille readers, must all be able to comprehend your text.

But, how do you make accessibility be made a key element of the process? What factors should you take into consideration and how to adapt to an existing website? What tools can be used to check for access to the internet?

Consider accessibility as a top priority

Websites that are accessible start with the right mindset. It is crucial to bring everyone in the process - the designer as well as the owner of the company, the content manager, etc. - all in the same room.

One of the most efficient methods to learn about accessibility is to try out the sites you enjoy using the aid of a screen reader. VoiceOver is a great option for Windows users, and VoiceOver is ideal for Mac users. It is possible to follow the usual steps to search for a site or blog post and add the item to the shopping cart as well as gain a better understanding of how to use it in a fresh way.

Screenshot of Storefront, our accessible theme.

If you're using the WordPress themes directory, the task is already done for you; browse using the tag "Accessibility" and you'll find a wide selection of options. If you're working on your own theme, and are looking for accessibility guidelines You can look up The WordPress Theme Handbook has in-depth, clear accessibility guidelines to help you get started in the right direction.

While you go to build your website, test things constantly. It's much easier to make adjustments in the process rather than rebuilding after your website is finished!

The tools to make eCommerce available

It's crucial to have the proper tools in order to build an eCommerce website that's easy to access. Below, you'll find several great alternatives for testing one or two of these. A few are discussed in the discussion of particular accessibility issues later on in this blog post.

 Screen Reader Test:

General Testing Of Accessibility

Color Checks:

WordPress The Plugins are:

Website visitor using a braille reader tool on his computer.

How Do You Create a Website for eCommerce that is Usable

Accessible Images accessible images

In order to help customers with visual impairments navigate around your website's images You must ensure that you include alt text for every image. Screen readers use alt text in order to "read" the image (tip: Google does, too!). If you're a developer, ensure that every picture element has an alt attribute. If you're a website administrator then you can make use of the basic WordPress functionality to create quick alt text for pictures that you upload.

An excellent place to start is to consider the intent of your picture.

     1. Does it convey straightforward information, e.g. an image or a single symbol?

If you do this make sure you define the image in a manner that allows your audience to picture it. The appropriate alt text would be, "Woman pushing a stroller across the street."

     2. Does it convey complex information, e.g. an infographic or chart?

In the case of complex images they may be difficult to convey the content in a concise way; you may require an extensive description. There are many ways to achieve this, including referring to an area on the website that contains an explanation of the complicated image in more detail. Discover more on how to handle this.

     3. Can it be used only as a decorational feature, e.g. an element of a flower used in the layout of the site?

Be sure that screen readers do not miss ornamental elements, in the form of an empty alt attribute

In the best case scenario the best case scenario, you'll probably be employing images with attractive elements in the CSS instead of your HTML.

If you're inclined to insert keywords into your alt text for SEO reasons keep in mind that Google is a user-friendly company that puts a high value on. It's more important to ensure that alt attributes do well in describing your picture rather than listing keywords.

One of the main things to remember when putting links on your site is to be sure to inform the users of your website about what is going to occur once they hit. Even if they are reading the hyperlink in a non-context (which happens frequently with some types of screens readers) They should be aware of the next step.

A few examples of bad link text:

  • To learn more regarding our candles, click here.
  • Get our size chart to determine your ideal size.

Some examples of good text for links:

  • For more details regarding our candles, please visit the Candle FAQs.
  • In order to find the perfect size, download our sizing chart in PDF format.

There are occasions nevertheless, it's advantageous or even necessary to include links with text like "Read more." An illustration of this is a grid of the most recent blog posts that you have on your website Each short section of content ends with an "Read More" link. What do you do in that case?

The best option would be to utilize the label-aria attribute. This permits you to include the name you want to use to your link. The link that has the attribute aria label attribute may appear as following:

A poor solar installation can make your upfront investment evaporate. Here are 15 crucial concerns you ought to ask any solar company before you decide to trust their record. [Read more...]

However, what happens when you wish to connect to an image? In the case of images, the alt attribute is your hyperlink's message. For instance, if you've created a mockup of your free eBook download be sure to set the alt attribute to say something along the lines of "eBook about choosing the right shade of lipstick to match your skin." This tells the visitors on your website about the image and the contents which will appear upon clicking on it.

Accessible Fonts Accessible Fonts

One of the first things you need to take into consideration is font size. It's essential to ensure that your text can easily be comprehended by those blind in one way or have trouble seeing smaller font sizes. There isn't a specific minimum font size the best starting point is 16px for in the text body.

It is usually up to users' browsers to alter the size of fonts, that they can do by expanding the font's size or by zooming into a web page and using responsive design. It's important to create your site in a way that allows a user to zoom up to 200% without being restricted from accessing or viewing content from your site. In particular, you would want to stop truncated and overlaid text as the font size changes. One of the best ways to test this is test the font yourself. Find instructions for each browser on this page.

Take into consideration the font choices that you choose, as well. The fonts that are curly or complicated are often very difficult to read and ideal for use only occasionally (such for a signature ornamental element). Limit your fonts to a few on your site so that the information is not confusing and easier to understand.

An example of the Ishihara Color Blindness Test – circles filled with dots and numbers in different colors.
The Ishihara Color Blindness Test, often used to test for color blindness.

Accessible Colors

Different people do not see color exactly the same. It is estimated that around 8 per cent of all people and 0.5 percent of women are suffering from at the very least one form of of color-blindness. Therefore, your site should be fully functional and suitable for use in grayscale. You can use tools like Google's Chrome extension Grayscale Black and White to check.

Contrast is one of the main factors in accessibility to the internet. Look at the fonts used on backgrounds or images as well as the contrast between components (such as images or buttons) that are close each other.

Ideally, you'll need a luminosity of 4.5:1 for body text, and 3:1 for texts that are large. Contrast tester is a fantastic tool for testing background against. background and checking your preferences in color using grayscale.

A key rule to bear in mind is: Don't rely on colors alone. Shapes and symbols can be a powerful way to convey the similar message.

In the case above, if your contact form error message appears red, you may also consider adding an exclamation mark or stop point symbol to attract attention in the event that your site visitors' have colorblindness to red and green. The use of textures and patterns is also fantastic ways to display the difference.

accessible headings

Be aware that headings aren't simply there in order to look good It's because they're an essential structural element of the page's content. Using proper heading elements allow users to find the sections and headings on a webpage and to navigate efficiently.

What could a good heading structure be as?

"h1>" should be used for indicating the topic of the page. This code is only used one time per page. It could be the title of a blog entry or the title of an item, such as.

The h2> and

These elements are utilized to present different parts of the content beneath.

Here's a good example heading style to use for blog posts:

What are the benefits of choosing a stainless steel water bottle Water bottles are perfect to take camping. They are utilized for boiling water in the wilderness. They're sturdy and can withstand the elements. Water bottles made of stainless steel will keep beverages colder and last longer. Stainless steel water bottles are the safest alternative. They aren't releasing chemicals, as most plastic bottles release. They aren't corrosive like the other metals. They can be washed in the dishwasher.

As you can see, it is organized a way that a site visitor or screen reader could quickly comprehend the contents of each page.

Accessible Forms Accessible Forms

Formulations can be difficult for screen readers. But, they're usually the way that you'll gather data about payments, specific information about the product and leads. That's why it's essential to ensure that your forms are accessible and simple to access.

The best place to begin is to begin by creating labels even if placeholders are present! The label must inform the users the fields they need to fill in (e.g. Email Address) while the placeholder should describe how to fill in the fields (e.g. [email protected]). It is the main component for a screen reader to comprehend the contents of your app.

Check that all required fields are clearly marked and that instructions (especially for formatting specifications regarding dates, numbers or other details.) are outlined in a way that's easy to understand.

It is also essential to make sure that the forms you create are easy to use that they are able to be navigated and filled out using using keyboards. As a programmer, make sure you are cautious when making use of Javascript for manipulating information on forms, when making forms available and changing elements. A misuse of Javascript is among the main causes of forms not being accessible completely.

Accessible Video Accessible Video

Videos can be a fantastic opportunity to present your product and highlight the advantages of it and also share the opinions of customers. Importantly, you should ensure that your videos are easily accessible, and easy to access!

One way to do this is adding captions to your videos to assist people who have hearing impairments or are difficult to hear. It is recommended that the University of Washington provides great guidelines for add captions to your video yourself. But, if you are working with an experienced video editor for the video, you can simply ask them to add captions.

The inclusion of audio descriptions is an essential step for those who are blind be able to comprehend what's happening within the video. Add an audio track which explains important video content particularly the parts of the film that don't have narration. Also, you can utilize transcripts for a summary of all audio content and describe the video itself.

Also, it is worth looking at the video player. Be sure the one that you pick supports closed captions and provides the capability to switch audio descriptions off and on. Be sure to ensure that every button in the player are operated with a screen reader or keyboard.

Keyboard Navigation Keyboard Navigation

This topic has been covered in a few paragraphs on this subject previously, but it's crucial to be sure that your website is executed using just a keyboard. This is especially beneficial for those with impairments with their motors, which could cause problems using traditional mouse.

As the tab button can be used to move around the page It is essential that the navigation of your website's pages is constructed in a manner that follows the visual flow within the page (left from right to left, top to the bottom). Make sure to test your site to ensure it is possible to navigate with Tab in the order listed below:

  1. Header
  2. Main navigation menu
  3. All navigational and link pages
  4. Footer

Also take the time to review the custom application, widgets, and plug-ins. Make sure they can easily be exited via the Escape button, and to adhere to the correct accessibility guidelines that apply to widgets.

The main thing to remember is test to test, then take a chance! Make sure you take your time going through all pages on your keyboard and be sure they're simple to use.

 Downloads accessible via HTTP0

If you are selling digital downloads through your eCommerce website, you need to ensure that downloads can be downloaded.

A different way of making PDFs more accessible is to incorporate PDF tags which provide a subtle and logical description of the content that's accessible to screen users. Adobe Acrobat provides a great instruction on making PDFs more accessible.

It is important to keep an eye on other aspects we have discussed previously including font size, contrast and the color of your digital download designs.

Woman with hearing aid using a laptop on a couch.

 accessible courses

In creating online courses, be sure to think about concepts such as captions for videos as well as transcripts for audio. You should think about the possibility of making your course accessible with a range of formats, including audio, video as well as texts, to ensure that there is an option for everyone. A lot of the principles for design mentioned above can also be applied to your teaching.

It's important that you provide various options for communication with your students. A non-verbal person may not be able contact you and ask questions, and blind students may not be able to answer inquiries online with ease. It's the same with submitting any assignments or coursework. Make sure you are flexible to your students, and be able to work with them in order to help them get the best value from your course.

**

In the end, when it comes to creating an accessible online shop, it's crucial to spend your time and understand the ways that disabled customers can interact with your website. If you've got a solid knowledge of this, you'll be able to consider accessibility at the entire development process and ultimately provide an excellent user experience to your customers.

If you're seeking more information, WordPress provides a great web accessibility handbookthat contains even more test tools, best development techniques, as well as recommendations for store owners.

Article was first seen on here