How to Optimize Your Website For Accessibility and ADA Compliance

The Internet and all its glory should be accessible by everyone who wants to use it, right? While compliance standards have been set in place, the web still isn’t completely accessible to those with visual, audial, cognitive and mobility impairments. In fact, 92% of US government websites fail to be compliant with the American Disability Act (ADA) standards, as do the majority of non-government sites – including ecommerce websites. How can people effectively shop on your site if they cannot access it?

There are approximately 61 million people living with a disability in America. This is about a quarter of the American population, and the vast majority of this group is online. Additionally, this group is estimated to have $645 billion in annual disposable income. It would be an injustice for your business to not properly serve this large group, as well as a huge missed opportunity.

What are the ADA Compliance Standards for Accessible Design?

The Department of Justice (DOJ) published the ADA Compliance Standards for Accessible Design back in 2010 for businesses to follow when designing and developing websites. ADA compliant web features allow more consumers to be able to engage with your website regardless of disability. While there are no clear rules, there are plenty of guidelines to follow broken down by three priorities or tiers established by WCAG 2.0. (Web Content Accessibility Guidelines).

Level A is the most basic level of web accessibility, Level AA addresses the largest barriers for users with disabilities and is the general standard, and Level AAA covers significant improvements to web accessibility. The DOJ and courts tend to rely on Level AA, and Level AAA is the most difficult to comply with (but the most accessible of them all).

The legal repercussions of not following ADA Compliance Standards

When a business is sued under ADA Title III, they are usually fined up to $55,000 for the first violation and $110,000 for each subsequent violation. While a lot of money can be at stake, your reputability and brand loyalty can be impacted as well.

Regardless of the type of your business, what you sell, or what your target audience is – your website should be ADA compliant. Media websites (FOX), entertainers (Beyonce), fast food chains (Burger King and Dominos), even universities (Harvard) have been sued for lack of accessibility within their websites and apps. And small businesses are held just as responsible as these large companies to comply with ADA laws. Under Title I of the ADA, any business with at least 15 full-time employees that operates for 20 or more weeks every year must comply.

The amount of website accessibility lawsuits tripled in 2018 compared to the previous year, and every year that number continues to rise. That being said, there’s no time like the present to make your website accessible.

Building around accessibility guidelines

Making your ecommerce website ADA compliant can cause restrictions on design, but a lot of these changes can actually be made in the development stages. Here are a few techniques that you can use to build accessibility into your website to ensure that all users can successfully navigate your website, explore your products, and ultimately, make a purchase with ease.

Writing alternative text for images

Images without alternative text are difficult for people who cannot see and use a screen reader. Alternative text can be read by a screen-reader and can explain what an image depicts. You can add an alt attribute to the <img> tag. When you have multiple product images, they still each need to be individually tagged. Best practice is to label it as the product name and descriptors (like color) and then include the type of photography shot it is.

Labeling forms clearly

Form fields should be simple and to the point. Labeling forms using words like Email or Name in a plain font (like Helvetica, Open Sans, Roboto, etc). This is important for both simple contact forms and for creating an accessible ecommerce checkout process.

Providing feedback for omissions and errors

In addition to simplifying the form fields, you’ll also need to make errors and important messages accessible to ensure the user effectively enters data. Errors should be presented to the user plainly without the usage of colors or other limiting factors. Instead, use asterisks (*) and an explanation to indicate a required input.

Supplying text transcripts

Users who have sight deficits often need the text on the screen read to them. If a website is made with a text transcript, screen readers can interpret the information on a web page. Text transcripts can be used for any type of media on your webpage or product listing.

Giving users control of media

Your users should have the ability to replay, pause, and advance any media on your web pages. Users should also be able to control the speed of videos and enable captions to be displayed.

Font sizes

The default font size is 16px. Users can shrink or enlarge the font size on most browsers to adjust to their needs. Users should be able to resize all text up on a webpage to 200% of the original size. Keep in mind that your site should be responsive to adjustments like these and not lose functionality when fonts are adjusted.

Keyboard controls

Many users with motor disabilities cannot use a mouse, so the keyboard is used for navigation control. You should consider the structure of your source code so that the reading and navigation order is correct. You should ensure that all elements can receive keyboard focus. The tab key is used to navigate through links, the enter or space key can be used to select an element, and the arrow keys can be used to move between menu options.

Contrast ratios

Contrast is a measure of the difference in perceived brightness between two colors to avoid illegibility. The minimum contrast ratio is 4.5:1. The exception to this is large text, logos, and incidental text. The contrast requirement for large text is 3:1. Incidental text is not required to meet the contrast requirements because the text can be inactive, decorative, hidden, or insignificant. Logos do not have to meet the accessibility criterion, so they do not have a contrast ratio requirement.

ADA Guidelines for Each Level of Conformity

Level A: This is the most basic level for ADA compliance. You need:

• Alternative text for images, form image buttons, etc. Images that don’t convey content or are decorative use null alternative text.
• Form buttons need descriptive values and form inputs need text labels.
• Frames and iframes should be titled.
• Form elements that require a specific format or value to provide information about errors.
• Transcripts and synchronized captions are provided for non-live audio.
• Semantic markup is used to designate headings, regions/landmarks, lists, emphasized or special text and it is used appropriately.
• Instructions should not rely on shape, size, or color-specific cues.

Level AA: Most businesses strive to be at this level because it is generally relied on by the Department of Justice and the courts. This level meets the standards of the Rehabilitation Act of 1973.

• Captions and pre-recorded audio descriptions should be provided for live video.
• Page headings and labels are informative and unique (No confusing duplicate labels).
• Each link should have a purpose and purpose can be determined from the link’s name, and each link should have a unique location.
• Navigation links that are repeated on web pages do not change order throughout a user’s experience.

Level AAA: This level satisfies all conformance factors, however, it is the most restrictive on design and functionality. Some examples of Level AAA standards include:

• Descriptive text transcripts for content with live audio
• Contrast ratios for images and text should be 7:1, font size is 18px or 14px(bold)
• All of a page’s functionality is available by keyboard
• Content should not have any time limits or constraints
• Users can disable non-essential animations, etc.

It is unlikely that you can fulfill all of the requirements for Level AAA, but experienced web designers and developers will be able to satisfy mostl. These lists do not cover all requirements. Here is a comprehensive list of WCAG guidelines for each level of ADA compliance.

Can ADA compliance benefit SEO?

SEO and ADA compliance can work together to create a better user experience. For example, using proper alternative text images can help your content be found in search (and image search!). Alternative text can include keywords and context for understanding the subject matter of an image or video. Search engines will look for these in order to determine your rank in a search. Although, make sure that you aren’t keyword stuffing and your alt text is still functional for users because that is the top priority.

Optimizing anchor text is another great example of how your SEO strategy benefits from following ADA compliance. Users who navigate the web by keyboard or screen reader often skip from link to link to browse a website. Anchor text should be accurate and relevant to the page that it directs to. Search engines like Google will check the anchor texts pointing to a page to learn more about the content on that site.

To sum it up, you need to adhere to ADA guidelines to provide the intended user experience for all users. There are many benefits to ADA compliance such as improving your site’s search performance to social inclusion and brand loyalty. It is very much possible to have a beautifully designed site with features that can be accessed by every customer, so do not feel like updating your website for compliance has to limit the overall design. Many beautifully designed websites are ADA compliant, and better yet, you’ll be serving more people than ever before.