Home Business Making Your ECommerce Website ADA Compliant: 5 Tips

Making Your ECommerce Website ADA Compliant: 5 Tips

by Tom Rider

The Americans with Disabilities Act (ADA) is a civil rights law that was passed in 1990 to prevent the discrimination of those with physical and mental disability. The act meant that new opportunities opened for those living with a disability, in terms of employment, business and web accessibility.

When the ADA was first created, eCommerce websites weren’t necessarily considered; a lot of the ADA concerned removing physical barriers that prevent those with disability from gaining equal opportunity.

Modern business has changed dramatically, which led the application of ADA to eCommerce being in an odd grey area. In the past, website users have filed lawsuits against websites that weren’t seen as being ADA compliant, leaving business owners both seriously concerned and confused as to what clarity the ADA could provide that would tell them how to make their website compliant.

For a quick summary, your website needs to be user friendly for the blind, deaf, motor impaired and others who navigate websites by using screen readers and various other forms of assistive technologies. Modern business owners want to be ethical and of course, want to avoid lawsuits, yet are still often unsure what changes they need to make to become compliant. Therefore, we’ve compiled this list, highlighting the five best ways you can make your eCommerce site ADA compliant.

1. Clear Colour Contrast

Your web and graphic design also influence how accessible your website is. This concerns anyone who suffers from colour vision deficiencies or general vision impairment.

Now that screen resolution has improved and will continue to improve, designers take the opportunity to make use of thinner typefaces or lighter colours. Thin typefaces and poor colour contrast become even harder to see if a site isn’t mobile responsive. Screen resolution advancements have been positive for the non-disabled users, but have at times made surfing the web more difficult for those with disabilities.

Your website needs to have a clear contrast between text and background colours: if one is light, the other needs to be darker. The greater the difference, the more legible the content becomes. Here are a few ways to improve contrast:

  • Adjust text darkness and background lightness or vice versa
  • Increase font size or font weight
  • Apply a drop shadow to your text
  • Underline and embolden links or other important parts of text to show emphasis

2. Give All of Your Media Accurate Alt Tags

To help visual and hearing impaired users on your website, your media needs to be paired with accurate alt tags. This allowed visually impaired users to consume media by using screen reader tools.

Supporting text and subtitles with audio or video content helps hearing impaired users consume that information. Subtitles are great for user experience as users with disabilities can still consume a video at the same speed as those not using subtitles.

The entirety of your site’s content needs to be available in text format. Screen readers are the solution to many other types of impairment. It’s important that your alt tags are accurate. You can’t be lax with them. You need to always ask yourself, “would this tag also make sense for a user with a disability?”

3. Keyboard Accessibility

For users who have motor disabilities, it’s important your site is keyboard accessible.

You should be able to achieve the same functionality on your website with a mouse or without. This means a user should be able to navigate between different buttons, links, forms and other controls using the ‘tab’ key, spacebar key and directional keystrokes.

When navigating a website, there should be focus indicators to let a user know which link or button they are currently hovering on. To make focus indicators more pronounced, add CSS that makes the focus indicator contrast with the background. You might want to make the focus indicator align with your site design.

3a. Navigation Order

When cycling through your website with the tab key, is the navigation logical and efficient? For Western readers, navigation should go from left to right, top to bottom. Typically, navigation will go like this: header > primary navigation > page navigation > footer.

3b. Skip Navigation Links

If your site navigation is overcomplicated, this can be taxing on a user with a disability, especially if they have to do it multiple times. Therefore, you should have ‘skip navigation links’ early within a user’s navigation pathway, so they can easily jump to the part of the page they’d like to access. These links are usually displayed at the top of the page.

4. Suggestion Area

Technology is always changing to help disabled users surf the web more easily, completely new pieces of technology are being invented to support users with disabilities. It’s important to keep yourself as aware as possible, as well as know whether your site can be optimized in anyway.

To do this, why not have a suggestion area or suggestion box directly on one of your web pages? The point is that it’s a lot easier than having to email or call your business, as that may be more difficult for someone with disabilities.

5. Adhere to WCAG Guidelines

Web Content Accessibility Guidelines (WCAG) are the technical standard and a set of recommendations mostly for users living with disability. Currently there have been two releases of WCAG.

WCAG 2.0 is based on the following four POUR principles: perceivable, operable, understandable and robust. Each principle has a few guidelines that business owners should implement to achieve WCAG and ADA compliance.

Perceivable makes sure that any user with an impaired sense (touch, sight and sound) isn’t disadvantaged when using your site.

Operable ensures that any users with motor-skill difficulties aren’t disadvantaged when using your site.

Understandable is pretty self-explanatory: your users need to be able to understand your site. You need to use clear terminology, instructions are as simplified as possible and complex issues are thoroughly explained.

Robust means that your site is compatible with various user agents and assistive technologies. Ideally you want your site to minimize the need for assistive technology and still be compatible even if no other solution is required.

What’s most important is that you understand what these guidelines mean for the user, rather than only updating the technical changes that need to be made. Web accessibility and ADA compliance will continue to change and improve. Making your website friendly to users with disabilities will play a huge role in the future of eCommerce. Doing so will make your business more credible, ethical and open your site up to a wider range of consumers—it’s a win-win. The earlier you update your website, the better. You’ll find it a lot easier to adapt to any changes when any guidelines are updated.

We hope you enjoyed this article and found it informative. If you’re looking for a company to help you make your website ADA compliant, look no further than the web development experts at CodeClouds.