ADA WCAG Compliance Checklist for a Public Website

You’ve already taken the first steps towards a compliant website! Just the fact that you’re here means you’re committed to doing the right thing. There is no turning back now. What we’ll give you is a high-level framework targeting Level AA conformance principles from a business perspective. And you’re not in this alone. Now is the time to recruit everyone who contributes to the website. This is a team effort.

Think of it this way, the physical spaces we occupy need to have multiple and alternate ways to access. Stairs, ramps and elevators are not just a matter of personal preference, but of necessity to accommodate a variety of abilities. The same ADA law, Title III of Americans with Disabilities Act (ADA) treats websites the same as public accommodations. It’s a legal requirement, not an option. 

The law doesn’t specify how to ensure your site is accessible. There is a lot flexibility in how to approach accessibility, probably so much that most folks don’t know where they stand. Once you get through understanding at a high level, you may need an expert opinion on any gray areas or best practices.  The first step is understanding the guidelines.

The WCAG 2.1 guidelines by the international World Wide Web Consortium (W3C) are the most commonly used standard. There are several layers comprised of overall principles, general guidelines, testable success criteria and best practices. 

We’ll start here with an understanding at the highest level. Once you and your team are working at the high level, drill down to continue honing your understanding and compliance.

For more info on how to conduct an assessment, check out The Basics of Manually Testing a Website for ADA.

Perceivable  

This is the most obvious principle. All content must be perceptible by everyone by their preferred method, whether that be visually or with text and audio. Basically, this means designers and authors must acknowledge and remove any bias they have when developing content for the web. 

Some examples include:

Text Alternatives: Provide text for non-text content. 

Time-Based Media: Audio and Visual media require transcripts or captions.

If you’re linking out to third-party hosting sites, provide the transcript or captions. And, make it easy for a user to get back to your site.

Adaptable

Assistive devices have ability to navigate, filter and consume content in ways visual users can’t and don’t because they can comprehend complex displays at a glance. Assistive devices navigate in a linear way with keyboard strokes.  Assistive technologies filter out sets of code tags and present the page in easily digestible snapshots. In a few keystrokes, an assistive device can read the page as a table of contents or index all the links to quickly discern where to go next. 

The easiest way to achieve this principle is to use the markup language as semantically intended. For example, don’t use heading tags to style text to look a certain way. Apply heading tags to text as if the page had a table of contents. 

If you’re formatting a table, use table html tags rather than nested div tags. Assistive technologies know how to navigate table headings, rows and cells with table tags. 

Distinguishable

Make it easier for users to discern content by providing alternate ways to convey information. How is this different than the Perceivable principle? Perceivable refers to the content itself, whereas Distinguishable refers to how the content is rendered on the page. 

For example, color alone is not acceptable to indicate a link. You need to have two different ways to indicate a link such as change color and underline, or box around it to indicate change in focus. 

Not all of these may apply to your website, but here are some specific requirements:

• Audio that automatically plays for more than 3 seconds can be paused.
• Text and images of text must have a contrast ratio of at least 4.5:1.
• Text may be resized in native browser by 200%.
• Content can be seen without scrolling in two ways. Using responsive design provides a flexible layout and flow.
• Non-Text items, such as icons, have at least 3:1 contrast ratio.
• If your authoring tool lets you override default text style properties, ensure your text meets the following:

1. Line height (line spacing) to at least 1.5 times the font size
2. Spacing following paragraphs to at least 2 times the font size
3. Letter spacing (tracking) to at least 0.12 times the font size
4. Word spacing to at least 0.16 times the font size

Operable

All functionality of your website must be navigated by keyboard alone. Put your mouse away and try using your website with only your keyboard tab and arrow keys. How easy is it to get around? As easy as your designers’ three clicks or less mantra? If you find you’re stuck on a page and have to use your mouse to move away, you’ve created what’s called a keyboard trap. That can be a show-stopper for most assistive users. 

Timed elements 

Any content that blinks, pops up like a notification, scrolls or auto-updates must have a way to pause, stop or hide. This is just plain good usability for all. Also, do not flash content more than 3 times in 1 second. Not just annoying, this is known to trigger seizures in people with photosensitive epilepsy. Moviegoers have been issued warnings that popular movies such as the new Star Wars and Incredibles 2 may cause seizures.

Navigable

This guideline ensures that you are providing easy ways to get to content on the page. Imagine if a user had to go through an entire menu every time they needed to find a page. 

Here are some examples: 

• Provide a method to skip over repeated blocks of content.
• Add titles to webpages.
• The keyboard order of navigation matches the visual presentation and makes sense.
• Headings and links are labeled with descriptive context.
• Provide multiple ways to get to a webpage, i.e. menu or search.
• When using a keyboard, there is clear visual indication where you are. 
• If you’re using swiping, pinching, tapping or shaking, make sure you have keyboard alternatives.

Readable

There are certain conventions that we’ve come to expect in website design. We read from left to right, so we expect menus to be on the left or on top. Search is commonly found in upper right and we expect the footer and terms and conditions to be at the bottom. Unless there is really good reason to break convention, try to avoid it. It will often lead to an inaccessible site. 

Here are some common gaps:

• Specify the default language using the language attribute in the code. 
• Navigation is consistent page to page.
• Changing input or focus does not change context.
• Make it easy to prevent and correct mistakes for data entry.
• Provide instructions and requirements for data entry.
• If errors are detected, describe the error in alternative text as well as on screen.
• Allow users to reverse, check or confirm data entry before submitting.

Robust & Compatible

Probably the vaguest for the average person to understand, this addresses challenges in maintaining custom coding, APIs and third-party integration that developers face. In general, custom code is challenging to maintain. Any code that breaks convention will be difficult to ensure accessibility. 

You’re off and running now! Check out The Basics of Manually Testing a Website for ADA for some tips to get started. Did your website clearly meet all the success criteria? Either consider yourself lucky or more likely, you missed something. Most websites have known accessibility issues and as technology evolves and content changes, new issues are constantly introduced.  

If you’re unclear whether your site is meets criteria or how the criteria is applicable, no worries, you can still be compliant. We can help you answer those questions. To get a complimentary homepage ADA scan by Adally CLICK HERE