10 Tips to Make Your Website ADA-Compliant

What are the Website Content Accessibility Guidelines?

In October of 2019 the U.S. Supreme Court rejected an appeal by Domino's Pizza regarding website compliance with the Americans With Disabilities act. Per The Motley Fool, the case against Domino's can now go to trial, which has "far-reaching implications for all businesses" because their websites must be accessible to people with disabilities.

Web Content Accessibility Guidelines (WCAG) are a set of recommendations by the World Wide Web Consortium (W3C), an international group which maintains Web standards. Although formally a recommendation, WCAG is now the law in other countries such as UK and Canada. So American companies that do business globally will soon feel the impact.

What Does Accessibility Mean?

The idea is to make websites accessible to people with disabilities, especially those with vision and mobility impairments. Web designers take a number of approaches, including optimizing for assistive technologies like text-to-speech screen readers.

Below are listed 10 quick fixes to get your website WCAG compliant. Follow the links at the end for more reading. If you have a large business with global Web presence, contact a Web accessibility specialist.

Do These 10 Things to Make Your Website WCAG Compliant

1) Add alternate text ("alt text") to all images.

To enable screen reader technologies, ensure all images have accompanying alternate text ("alt text"). This is accomplished by editing your HTML code. If you use a content management system like WordPress, you only need to update the image once in the WordPress media library. Alt text is a short description of the image. If the image is roses.jpg, the alt text is "bouquet of roses."

2) Add subtitles to videos.

To assist vision and hearing-impaired users, add captions (subtitles) to all videos. Provide alternate methods for viewing videos. For example, if the file is video-only, provide a separate audio description. If it is audio-only, provide a text file (e.g., transcript, lyrics).

3) Ensure high contrast between text and background.

For easier visibility, ensure high contrast between foreground text and background color. Text should have a contrast ratio of 7:1. Large headings may have a contrast ratio of 4.5:1. When placing text over an image, use simple, non-distracting backgrounds.

Free color contrast checker: https://webaim.org/resources/contrastchecker/

4) Website can be navigated using keyboard alone.

To assist users with limited vision or limited eye-hand coordination, make the entire website navigable using a keyboard alone. Hint: The keyboard "Tab" key jumps to the next link on the page, or next field within a form. "Shift-Tab" jumps backwards. Check to see the Tab key works as expected.

5) No flashing lights.

Some types of seizures may be triggered by lights which flash at more than three times per second, especially red lights. Avoid use of flashing graphics. Blinking images (slower, less than 3x per second) are not recommended because they may be distracting.

6) Don't use color alone for messaging.

Ensure users with visual color deficiencies can access information that is conveyed by color. For example, when error-checking a form, if the form only says "fill in the field marked in red" then you need to add a text prompt too ("fill in your ZIP code").

7) Use correct code (HTML, CSS).

To ensure future compatibility with screen readers and other adaptive technology, always use correct, updated code. The current version of HTML is five (HTML5), which deprecates many old familiar tags like Bold and Italic. Per W3Schools, "use Bold only as a last resort!" As part of your accessibility update, replace your Bold, Italics and other outdated HTML 4 code:

<B>...</B> is now <strong>...</strong>, and <I>...</I> is now <em>...</em>, etc.

8) Make text readable.

The language on the page should be easily identifiable. Use short, common words and short sentences. Content should be readable by users with a lower secondary (ninth grade) education. When more technical material is presented, provide an easier alternative. For example, a readable summary of a complex research article.

9) Allow user to pause, stop or hide motion on page.

Allow users to stop any flashing, blinking or scrolling information (like a scrolling banner). Avoid updating the page (auto-refresh) without first prompting the user. Avoid timed actions like jumping to a new page after X seconds. These guidelines allow all users enough time to read the information and take required action.

10) Include navigation which tells users where they are.

Design your website so it is simple and easy to use. Ensure that users always know where they are and can easily navigate to other parts of the site. WCAG recommends adding a navigation bar (aka, "top-level menu") and a distinct heading on each page.

More Information

The Web Accessibility Initiative Home page is here: https://www.w3.org/WAI/

The latest version of WCAG is 2.1 (June 2018). There are three levels of compliance, A, AA and AAA. Businesses are expected to meet level "double-A" compliance: https://www.w3.org/TR/WCAG21/

Free accessibility scan: https://www.adascan.com/

Contact the author: [email protected]