Website on a laptop screen
Back to all insights
Category
Digital Experiences

How to make sure your website is ADA compliant

Lindsay Wilson
Jul, 2020
10 mins

Keeping a website up-to-date and within spec of all the ever-changing guidelines is no easy task. One such aspect of website management that is often overlooked, but is mandatory, is adherence to ADA Compliance. It ensures that people with disabilities have the same opportunities as anyone else, online included. With that in mind, we’ve gone ahead and put together some tips to ensure your website is on its way to ADA compliance.

What is ADA?

ADA stands for Americans with Disabilities Act and was put forth in 1990 to ensure that individuals with disabilities enjoy the same opportunities and support as everybody else. This wide-ranging act covers obvious things such as wheelchair accessibility for public buildings, but it also applies to website accessibility, too.

Who makes the rules for ADA compliance?

The W3C, or World Wide Web Consortium, partnered with various stakeholders to create the Web Content Accessibility Guidelines as a guide for website developers to follow in order to ensure their content is accessible by all. The WCAG for short, is in its second iteration and is organized within the following four pillars each with three levels of compliance: A, AA, and AAA

  1. Perceivable
  2. Operable
  3. Understandable
  4. Robust

As of right now, the ADA does not specify a set of technical standards to follow in order to make a website accessible, but this does not mean you should ignore accessibility altogether. There is currently no law or regulation mandating digital accessibility, but in any recent court case rulings in the US, WCAG 2.0 AA is continuously cited as providing an acceptable level for any user with a disability.

How do I make my website ADA compliant?

The task of making your website ADA compliant doesn't have to be as daunting as you might think. Broken up into the four principles below, we outline the WCAG 2.0 guidelines and give you an overview of what you can do to make your website adhere to the level AA standard for each.

Principle 1: Perceivable

Information and user interface components must be presentable to users in ways they can perceive.

1.1 Text Alternatives

Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

Read about WCAG 1.1

1.2 Time-based Media

Provide alternatives for time-based media.

Read about WCAG 1.2

1.3 Adaptable

Create content that can be presented in different ways (for example simpler layout) without losing information or structure.

Read about WCAG 1.3

1.4 Distinguishable

Make it easier for users to see and hear content including separating foreground from background.

Read about WCAG 1.4

This section ensures web media is usable by all. Recommendations are given outlining how content can be presented in alternative forms without a loss of meaning or coherence, for example, adding captions to videos.

Tips

  • All images on your website should include a text-equivalent, called an Alt tag. These tags will be used by screen readers and should help a user who may not see the image understand it’s contents. This should not be used for SEO purposes and should accurately describe the contents of the image
New England Inns & Resorts website screenshot
A descriptive Alt tag on an image
  • All text content should have a contrast ratio between the foreground and background colors of at least 4.5:1 for normal text and 3:1 for large text. You can use WebAim's Contrast Checker to test. This ensures visually impaired users can read your content.
  • A user should be able to resize text on the page without breaking the layout. Some users need to view the content much larger than 100%.
Red Jacket Resorts website sceenshot
Viewing a website at 100%
Red Jacket Resorts website sceenshot
Viewing a website at 150%

Principle 2: Operable

User interface components and navigation must be operable.

2.1 Keyboard Accessible

Make all functionality available from a keyboard.

Read about WCAG 2.1

2.2 Enough Time

Provide users enough time to read and use content.

Read about WCAG 2.2

2.3 Seizures

Don’t design content in a way that is known to cause seizures.

Read about WCAG 2.3

2.4 Navigable

Provide ways to help users navigate, find content, and determine where they are.

Read about WCAG 2.4

This category gives guidelines to ensure the functionality of your website does not create problems for users.

Tips

  • Ensure the keyboard focus is always visible so a user knows where they are on the page at all times.
The Boston Yacht Haven website screenshot
Visible keyboard focus on a main navigation link
  • Ensure that all functionality can be controlled with just the keyboard and that there are no keyboard traps hindering a user from moving freely around the page, for example, when opening a modal containing a booking widget, a user should be able to easily return to where they were previously within the page.
  • Tabbable elements are in an appropriate sequence and don't jump a user around the page unexpectedly.
  • Don't place important messaging on your home page within an auto-scrolling carousel as this content could easily be missed or not consumed within the time frame set between slides.
  • Provide users with a ‘Skip to main content’ link to allow them to bypass tabbing through your navigation on every page and allow them to easily jump straight to the content area.
Sun Peaks Resort website screenshot
Example of a 'Skip to main content' tabbable link
  • Include a descriptive page title as a Heading 1 tag <h1> and use subsequent heading tags in a correct hierarchy. This provides assistive technology with more ways to scan and navigate page content.
  • Ensure sections of pages are marked up correctly and form input fields are labelled with descriptive text. This allows assistive technologies to understand the structure of the document and how items are paired to visual labels.
  • Every link’s purpose should be distinguishable from the link text alone. This can be achieved by adding descriptive hidden text to ‘Read more’ links that is only visible to screen readers.
Jaypeak Resort website screenshot
Example of visually hidden link text for a screen reader

Principle 3: Understandable

Information and the operation of user interface must be understandable.

3.1 Readable

Make text content readable and understandable.

Read about WCAG 3.1

3.2 Predictable

Make Web pages appear and operate in predictable ways.

Read about WCAG 3.2

3.3 Input Assistance

Help users avoid and correct mistakes.

Read about WCAG 3.3

This section contains guidelines to ensure your text content can be read by users and assistive technology, and to ensure that information necessary for understanding it is available.

Tips

  • Ensure the 'lang' and 'dir' attributes are added to the main HTML tag, ie lang="en" dir="ltr". This tells technology information about the language used in the document.
  • Content should be presented in a consistent manner from page to page so a user does not get confused with the layout changing dramatically.
  • Use correct markup for form submission errors so assistive technology can understand what is wrong and where.

Principle 4: Robust

Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

4.1 Compatible

Maximize compatibility with current and future user agents, including assistive technologies.

Read about WCAG 4.1

This section is the smallest and most technical. Guidelines here are to ensure your code follows current web standards and is understandable by assistive technologies.

  • Use standard, semantic HTML tags that are universally recognized by browsers. This ensures that as assistive technologies change over time, they will be able to understand your website's code.
  • Supplement your HTML with Accessible Rich Internet Applications (ARIA) attributes to help assistive technologies understand the structure of your pages and the interaction between elements. A screen reader should be able to understand that your Book Now button opens your booking widget and that a specific region on the document contains dynamically loaded content controlled by form element filtering.

And that’s it! By making sure your website adheres to WCAG level AA, you will ensure that people of all walks of life can seamlessly access your website without issue.

Useful Links

  1. WAVE Web Accessibility Evaluation Tool
    This excellent tool can be used to help identity WCAG errors on your website and suggest ways to fix them
  2. Siteimprove
    A paid subscription service that provides in depth scan results and actionable insights on your website on how to improve your accessibility rating
  3. WebAIM Contrast Checker
    Use this tool to test if your contrast ratios pass the WCAG AA standards
Lindsay Wilson

Lindsay Wilson

Web Developer