ADA Website Compliance in 2020: The Ultimate Checklist

Two Rivers Marketing
Jun 09, 2020

At Two Rivers Marketing, we put user experience at the core of everything we do and accessibility of digital content is a big part of giving users the best user experience (UX). With the increased focus on equal access of online content, we believe it’s a growing effort that is often consuming and overwhelming.

By now, you've likely heard about the 508 compliance regulations that have come to the forefront of the digital landscape. With recent lawsuits against high-profile brands such as Domino’s and Beyonce’, the digital team at Two Rivers Marketing recognizes the importance of doing things right. That’s why we have been working to assist our clients with these often complex and confusing website updates.

You may be asking yourself, “What does ADA website compliance mean for me?” or “What do I need to do?” Let's recap what we know.

A look back at WCAG 2.0

Let’s take a quick look back on the Website Compliance Accessibility Guidelines 2.0 (WCAG), established in 2008. The WCAG guidelines are a specific set of standards designed to make the web more accessible to people with disabilities. They remain the gold standard in 2020, with some new additions for our ever-evolving technologies. WCAG 2.0 was founded on four principles that remain at the core of the guidelines:

Perceivable usability - Website information and components must be presented to users in ways they can easily perceive.
Operable usability - Website components and navigation must allow users to operate the website with ease.
Understandable information and operational updates - Information and the operation of the website must be understandable. Users must be able to understand the information, as well as how to navigate through it.
Robust content - Content must be robust enough that it can be interpreted reliably by a wide variety of software, including assistive technology tools. Users must be able to access the content as technologies advance, no matter which device they choose.

Compliance within each of these four categories may require updates to your website. These updates may range from incorporating simple text alternatives that you can implement in a matter of minutes to larger updates that will require partnering with your development team. To meet the needs of different groups and different situations, the three levels of conformance are defined as: A (lowest), AA, and AAA (highest). Visit w3.org to learn more about the various levels of conformance.

What’s new with WCAG 2.1?

Since these guidelines were released — and due to changes to mobile technology, user experience, the advancement of artificial intelligence (AI) and augmented reality (AR) — new additions to the guidelines have been published.

These updates do not replace the previous requirements, but rather build upon them and are grouped heavily in five new areas:

1. Orientation: Landscape or portrait flexibility

Several updates are related to transitioning to or from landscape and portrait screen positions on mobile and tablet devices. Because some users are unable to flip their device, such as devices mounted on wheelchairs, your website should be operable in both orientations, no matter the position of the mobile device.

Testing orientation accessibility is easy. With your mobile device’s orientation lock turned off, rotate the device and check how your website renders. Does it flip? Does it format correctly? Is your font easily readable? Is your functionality limited? If you discover any errors or issues, you may need to address some changes in the CSS of your website.

2. Reflow: Magnification and mobile usability

Reflow is a powerful tool that recognizes when users zoom in and out of a website on their device. For sight-impaired users, reflow makes aspects of your website easier to see, without creating visual distortion or disrupting any navigation.

Reflow also reorganizes pages when screen sizes change, such as between desktop and mobile devices. This makes reflow ideal for mobile compatibility. If your website uses a responsive web page design, your site most likely already has reflow in place.

3. Content on hover or focus

Since many users with accessibility needs navigate websites using their keyboard, they require the ability to click between links — often using the tab, shift and enter button on their keyboards. If your navigation is only viewable when you hover over them with a mouse, and disappears otherwise, your site will no longer be compliant. Users who utilize a mouse or their keyboard should both be able to experience the full navigation.

Allowing menus to display on hover or click can solve this problem. Many accessible web page themes will already have this capability, and others can be changed within your website’s CSS code.

4. Label in name: Accuracy for screen readers

When the original set of guidelines were released, a large focus was placed on the usability for screen reading tools. But what are screen readers?

Screen readers are digital tools that read website information users through labels assigned to website elements, also called Accessible Names. For instance, a reader should be able to perceive what a button is on your website versus an image or a search bar. For that understanding to take place, an Accessible Name is required.

Most often, web elements are also visually described by text, such as “Request a Quote” for a button or “Search” for a search bar. The WCAG 2.1 rule dictates that the Accessible Name and the visual label of key elements be the same, so those using screen readers and spoken commands can accurately interpret and interact with the site.

5. Status messages: Telling what’s happening

Try to think of the last thing you purchased online. When you added an item to your shopping cart did you notice a change on the website? Did you see a new number in your shopping cart? These changes occur showing what you did as you interacted with website elements.

This criterion addresses these changes for screen readers, allowing users to hear status updates when they occur. Similar to the labels above, this can be accomplished by adding properties to status messages. With the correct designations implemented, screen readers will announce status changes.

What to update: WCAG 2.1 checklist

All of this technical language and understanding what you need to update can be confusing. To make it easier for you, Two Rivers Marketing has created an ADA website checklist to help you understand all the changes you may need to make. This checklist not only includes the 508 compliance regulations with the original WCAG 2.0 requirements but also includes updates that were added with version 2.1.

DOWNLOAD THE CHECKLIST