The Americans with Disabilities Act, or the ADA, was passed in 1990 and is a civil rights law that prevents discrimination based on disabilities. An essential and relevant part of this act includes the Standards for Accessible Design. This requires, by law, that all electronic and information technology to be ADA compliant. This includes eCommerce websites.

But what does this mean, and what does it look like? As a leader in the web and app design and development industry with over a decade of experience, Fyresite is here to break down the intricacies of ADA compliance.

The Importance of ADA Compliance

Outside of the obvious benefits of having your website accessible to any and all potential customers, ADA compliance also keeps you legally compliant. Businesses that are open to the public fall under Title III of the Americans with Disabilities Act and require that businesses open to the public be accessible to all. This includes eCommerce stores.

Inclusive Design and Development

The ADA does not have a specific outline on what it means to design or build for inclusion. However, in legal precedent, courts often use the Web Content Accessibility Guidelines (WCAG) as the gold standard. WCAG has three levels of accessibility design, levels A, AA, and AAA. According to the University of California, websites should aim for fulfilling the Level AA requirements.

Since Level AA requirements are the gold standard of ADA compliance, we will be reviewing what these requirements are, instead of the requirements for all 3 levels. Level A requirements are incorporated into the Level AA requirements. If you are interested in learning more about the WCAG and their levels, you can do so here.

Level AA Requirements

Level AA is typically considered by the legal system to be the optimal level of accessibility for ADA compliance. All of the Level A requirements are included in these requirements.

Non-Text Content

All non-text content needs to have an alternative. For images, this is alternative text.

All embedded content has a text alternative, frames and iframes are titled appropriately. Form buttons have a descriptive value, and inputs have associated text labels.

Time Based (Video, Audio) Content

Captions should be provided for all live and pre recorded media that is not an alternative for text. Audio descriptions should be there for all pre recorded content, unless the video is decorative or there is not relevant visual content associated.

Adaptable Content

Your content should be able to be presented in different ways without losing any information or structure.

Semantic mark-up should be utilized to designate and differentiate between different types of text. Tables use data cells that are associated with any relevant headers and captions. The reading, navigation, and code order all makes sense and is user intuitive.

Instructions can’t rely on sound or visual cues/descriptions (square button, red button, etc). Page orientation is not restricted unless necessary. There is an appropriate autocomplete feature for all relevant forms with user information.

Distinguishable Content

All content elements should be distinct from each other, making it easy to see and tell differences.

Text color should contrast with the background color, and hyperlinked material should not be only distinguished with color. If using color, there should be another distinguishing factor, such as underlining or bolding the hyperlink. All audio that is longer than 3 seconds needs to have controls (mute, pause, etc.). Text, images of text need to have a minimum 4.5:1 ratio. Text that is larger 18.66 pixels and bolded needs a contrast ratio of at least 3:1.

The page and text also need to remain legible when zoomed in, requiring a responsive design. Images of text are avoided unless they are essential, such as a logo. Adjusting the space between words should not impact functionality. Pop-up/additional information should be able to be closed via keyboard keys, and should not disappear when users interact with it, or until it has been dismissed.

Operational

All interfaces and operations should be accessible to all users.

This includes allowing keyboard shortcuts, not having any keyboard “traps”, where the keyboard is locked or unable to be used, and allow the user to disable keyboard commands/change the buttons for a keyboard command.

Decorative image of a braille keyboard

Adequate Timing

Users need adequate time to read and interact with content.

If a page has a time limit shorter than 20 hours that is optional (required time limits such as auctions are allowed), it needs to be adjustable. Content with movement longer than 5 seconds needs to have an option to be paused, hidden, or stopped.

Content flashes, which have been known to cause seizures, can not flash more than 3 times per second.

Navigation

Sites need to provide multiple ways to find a page on. An option should be allowed for skipping repeated page elements, such as navigation. Link text is used to inform users where the hyperlink will take them, headings and labels are informative, and there is an indicator to show where the keyboard is focused and not covered or obscured when using keyboard shortcuts.

Functionality

This refers to functionality through keyboard inputs.

All non-essential gestures (such as pinching the screen or dragging) should be able to be done with a single click. Functionality features that require the user to use movement, such as shaking the screen, can be disabled and done with a single click.

Interface elements, like buttons, need to include the visible text in the accessible alternative. The target size for such elements is 24px by 24px.

Readable and Predictable

For our purposes, readable means that the language used is clearly outlined in the coding of the page.

Predictable means that the way the website looks and operates is intuitive. Focusing on a page element or inputting/interacting with information should not change the page. Navigation, identification, and help access should all be consistent across the site.

Mistake Resistant

There should be guides in place to help users avoid mistakes. This looks like allowing autocomplete on forms, avoiding cognitive function tests for authentication unless they can be skipped or allow assistance, and offering suggestions to fix input errors.

Compatible

All content on your site should be compatible with other technologies, including tech made for assistance.

HTML should facilitate accessibility, and ARIA should be used where HTML is unavailable or insufficient. If there is a status message on screen, it needs to be announced to screen reading users.

How Does This Relate to ECommerce?

After reading through all the important measures to take to make your site ADA compliant and accessible to everyone, you may still be wondering; how does this relate to running an eCommerce store?

While these may not be directly related to the products being sold or the functionality of selling products, it is still important. What may seem insignificant to one person is the difference between being able and being unable to use a site.

Want Help Building an Accessible and ADA Compliant ECommerce Website?

Overwhelmed about what it means to make your eCommerce website ADA compliant? Reach out to an expert. Contact Fyresite to get started today!