6 Areas to Optimize for Better Web Accessibility on E-Commerce Websites

Did you know that:

• At least one billion people, i.e. 15% of the world’s population, have a recognized disability?
• In countries with life expectancies higher than 70 years of age, people spend 5% of their lifespan living with a disability.
• Globally, the extended market of people with disabilities is estimated at 3 billion. This population controls an incremental $6.9 trillion in annual disposable income.

From a business perspective and as an e-commerce website that’s looking to improve revenue, you need to ensure that your site is accessible to attract and convert shoppers who have disabilities.

Apart from doing ethical business, governmental regulations should motivate e-commerce businesses to make their website accessible to all potential customer, including those with visual or hearing disabilities.

The Department of Justice published the Americans with Disabilities Act (ADA) Standards for Accessible Design in September, 2010. These standards are applicable to all commercial and public entities that have “places of public accommodation,” including the internet. As per the ADA standards, all electronic and information technology must be accessible to people with disabilities.

However, most e-commerce entrepreneurs aren’t sure how to achieve this, hampering their intent to design and/or optimize their portal for accessibility.

In fact, according to recent reports, small businesses are increasingly being hit with ADA lawsuits for being “sitting ducks” and not making their websites accessible to those with disabilities.

If you’re facing this issue, you’ve come to the right place. Read on to know more.

Accessibility Encourages Inclusion

Incorporating web accessibility or optimizing for it entails designing the website for the inclusion of all users. While this concept isn’t new to the web world, it is gaining traction in modern times. It is based on the idea of the World Wide Web Consortium’s (W3C’s) Web Accessibility Initiative, which states that web content and technology should be usable by everyone regardless of their abilities, age, economic condition, educational background, location, language, and so on.

In keeping with this, e-commerce websites need to focus on the needs of people with disabilities that include auditory, cognitive, neurological, physical, speech, and visual impairments. This should be done with the objective of proving content to and serving the needs of anyone who may have trouble interacting with a website.

Here are few areas of your e-commerce website that should be optimized in order to maximize accessibility for disabled users.

1. Text Content

Ideally, website pages should have a contrast ratio of at least 4.5:1 for text. Your e-commerce store should be equipped with a text size selector as well. The text should be clearly visible, without getting cut off or overlapping if visitors enlarge it.

Using plain text is advisable as it can be read with a screen reader, converted into Braille, and used with assistive technologies to communicate site content. It, therefore, makes sense to include descriptions, captions, and summaries in plain text throughout the e-commerce website. Text helps in other ways as well:

The W3C recommends using an “img” tag alt attribute to convey the meaning of an image to disabled visitors. For example, if there’s an image of an arrow that links to a downloadable PDF containing product details, you can use “Download Product Details” as the alt text.

If an image/graphic needs a description of more than 100 characters (the maximum limit for an alt attribute), add text descriptions or captions to convey its message in plain text.

Incorporate closed captioning for videos. This will enable all users to use the video content available on your website.

Provide a plain text transcript of the entire page, if possible. If this cannot be done, make RSS feeds available with complete page content. This way, visitors will be able to employ assistive technologies that can read the page content to them.

2. Media

To get this aspect right, focus on the following aspects:

• Visitors should be able to control media players via the keyboard.
• If autoplay is enabled, it should stop after every three seconds. Visitors should be able to play/pause or stop it, while also being able to increase or decrease the volume.
• Don’t rely on automatic captions. Write them yourself for best results. Ensure they are suitable for the respective audio content.
• Ensure all the necessary sounds effects and contexts are included in the captions (for example, sounds of thunder or an email notifications).
• Visitors should be able to understand and identify who is speaking at a given time.
• There should be transcript, which is easy to find and provides visual information.

For example, see image below.

 

3. Navigation

Navigating an e-commerce can be a challenge for disabled visitors. Hence, it is necessary to ensure that your site can be navigated with the keyboard. This means visitors should be able to use all website functionalities without the help of a mouse.

Also, navigation should allow users to take their time to navigate and complete forms/fields or questionnaires.

Here are a few factors to consider with respect to keyboard control:

• All the buttons on the website (particularly on the check-out page) should be prominently placed so they’re clearly visible and easily usable.
• Provide horizontal scrolling to read sentences, where necessary.
• Make it easy to tab to and away from all website elements. The selected element should stand out from the rest.
• Visitors should be able to tab to a drop-down list and scroll through it using the arrow keys.
• Image links should be prominent and activated by pressing the Enter button.

The following factors should be considered as far as filling forms/field is concerned:

• All forms should as for the bare minimum customer details, and be easily accessible through keyboard.
• Instructions for filling the form, entering passwords, and monetary details should be mentioned right at the top of the form.
• Form labels should be positioned correctly for left-to-right readers.
• Necessary fields should be indicated clearly without relying only on color.
• The required indicators should be included in the marked up field label or legend.
• The required date and phone number formats should be included in the marked up field label.
• The forms should be easily noticeable and come with clear guidance.

 

4. Colors

It is crucial to have a high level of contrast between the foreground and background elements of your e-commerce website. The most common and effective options are black text on a white background, and white text on a black background.

It is suggested to maintain a contrast ratio of 7:1 or higher to meet the contrast recommendation of normal-sized text. As mentioned, even a 4.5:1 color contrast ratio makes normal text sufficiently accessible.

To check what’s the contrast ratio is on your site, simply insert the HEX codes of the colors you’re using into this free Contrast Ratio tool.

5. Links

Web links are generally indicated with the help of colors. Links that have been clicked appear in a color that’s different from those that have already been clicked. However, to make your e-commerce site accessible, you will need to use labels so they stand out. Moreover, it should be clear that a particular element is a link, even if some visitors cannot see it in color.

6. Tables

Potential customers using assistive technologies when visiting your website should be able to access its content without hassle. It is, therefore, recommended that the data tables you use be in HTML format, rather than images. Including proper column headers can also prove helpful.

You should also ensure to never use tables for creating the page layout or structure as tables can hinder visitors from accessing content.

Take Proactive Measures Now

Whether you’re a new e-commerce website that’s looking to incorporate web accessibility into your site design or an established e-store that wants to optimize certain areas to enable accessibility, you’re on the right track.

An accessible website will help you widen your business’s reach, convert customers more easily, and establish your name as a brand with a conscience. Use tools such as accessiBe to make sure your website does not discriminate among its visitors, and adheres to the necessary compliance and laws.

accessiBe is a web accessibility tool driven by AI, which is triggered on your site by installing a simple Javascript code. The AI then analyzes every component of your site that needs to be accessible and ADA compliant, such as the ones discussed on this article, and within 24 it ensures your site is accessible to people with disabilities.

Remember, there are customers out there that need your e-commerce website to meet their specific needs. Make it a point to tap them before your competition does.

Conclusion

The ultimate aim behind making your e-commerce website accessible is to empower not only the disabled, but everyone out there to access your website. Do what’s necessary to understand and apply the ADA, WCAG, and other norms to it. After this, assess your website’s accessibility quotient regularly. Doing so is will make your business practices ethical as well as profitable since your website will be optimized for every single user that shops online. The pointers mentioned above may not be exhaustive, but will help you in taking the steps to enable higher number of conversions and profits.