ADA Website Compliance in 2020: The Ultimate Checklist

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.

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.

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.

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.

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.