It’s no secret that for most human beings in the 21st century, the internet is a critical tool in daily life. Most experiences on the World Wide Web were designed with the assumption that the audience can see, hear, and move without impairment. Unfortunately, this means that for folks with visual, auditory, motor, or cognitive disabilities, surfing the web can often range from difficult to impossible.
As creators, we have the power and the responsibility to make sure all users are able to engage with the web experiences we design and build. And if that weren’t enough, we also want to protect our clients from lawsuits based on failure to comply with the Americans With Disabilities Act (ADA). Website compliance litigation has increased significantly over the last few years, with high profile cases including Target, Amazon, Nike, Dominos, Beyonce, and the Golden State Warriors. In many of these cases, millions of dollars in damages have been sought, and while most companies settle, Dominos took their case to trial and lost.
Fortunately, designing and building accessible websites is not terribly difficult. While there is no official, legally recognized definition of what makes a website ADA compliant, there is a set of rules that have become the de facto industry standard: the Web Content Accessibility Guidelines, or WCAG. Based on how many court cases have turned out, it is now generally accepted that websites must reach at least level AA on the WCAG 2.1 standards to comply with the ADA. To see how this actually applies to websites, we’ll break down three main areas of accessibility concerns and how the WCAG recommendations address them.
1. Use of color for text and UI components
For users with poor vision or color blindness/weakness, we have to make sure text, links, buttons, icons, and other user interface components have enough contrast with background elements so that they remain legible and identifiable. According to the WCAG, these elements need to have a contrast ratio of 4.5:1 for smaller text/elements, or at least 3:1 for larger text. There are great resources available that measure the contrast ratio between colors- we like contrast-ratio.com. For example, here you can see a situation where gray text is too light to appear against a white background.
It’s also important to remember that we can’t rely on color alone to communicate important information. Instead, we need to incorporate text labels, decorations (underline, bold, etc.) or icons to help make things clear.
2. Support for non-visual usage (screen readers)
Users that can’t see the screen at all rely on software that “reads” the webpage aloud. These screen readers describe the user interface (navigation, form fields, etc.), read text content, and describe images using their “alt” tag descriptions. To get a better idea of how this works, check out this video demo.
These screens readers can only be accurate if the website’s content and coding are compatible, so there are a few bases that need to be covered:
- All image tags need to have an “alt” attribute that could describe the image to someone who can’t see it:
<img src=“the-dress.jpg” alt=“A blue and black dress that can be perceived as white and gold”> - Important text information should not be included inside images
- Videos need captioning or text transcript
- Use semantic HTML tags - <h1>, <h2> etc. for headings, <label> for form labels, etc.
There are also things we can do that just make life easier for screen reader users- for example, instead of having to listen to a long list of top navigation links every time a page is loaded, we can add a link that allows users to skip over the navigation and jump to where the current page’s content begins.
3. Support for non-cursor input (mouse / trackpad)
Users with motor disabilities may not be able to use a mouse or trackpad to move a cursor around the screen. Instead, these users rely on keyboard input (or voice commands that trigger keyboard input) to interact with a website. Without being able to move a cursor around a page, users have to sequentially highlight each element (using the tab key), so focus states are important to visually let users know what element is currently selected. Often, links tucked away inside navigation menus can become inaccessible, so it’s important to make sure menus either open automatically when tab focus shifts inside the menu, or can be opened with an action (enter key press on the menu link/button).
Don’t let accessibility be an afterthought
There are popular plugins such as accessiBe that will attempt to automatically fix accessibility problems, or at least let users change aspects of a site to suit their needs. However, these solutions are just band-aids over the root problem. To truly offer an on-brand web experience that will be great for everyone, these accessibility approaches should be taken into account before the first pixel is even placed.