10 Tips for Ensuring Your Site is ADA Accessible

What do Beyonce, Domino’s, and Harvard all have in common?

They’ve all been sued for failing to make their websites properly accessible per the Americans with Disabilities Act, or ADA. The Domino’s and Beyonce sites didn’t adequately cater to the blind, while Harvard’s vast catalog of online courses and lectures weren’t captioned for the deaf.

And it’s not just the titans of pizza, pop, and PhDs being made to pay. In the period spanning 2018 and 2019, more than 2,200 of these lawsuits were filed in federal court, the majority of which targeted small- and medium-sized businesses. The trend shows no signs of slowing, either.

But making your organization’s website ADA accessible isn’t just about avoiding a lawsuit. Think of the millions of potential customers who are going elsewhere because they can’t use your site. ADA accessibility is win-win for everyone.

Here’s how we approach it at North Street.

5 Considerations for Design

1. Color contrast: Users with poor vision may find it hard to read text on a background if the color contrast is low (i.e., gray text on a black background). WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. This also applies to buttons. You can check the contrast ratio of any two colors here: Contrast Ratio Resource.
2. Text + image contrast: Similar to color contrast, text should be legible when positioned on an image. Everyone loves a full screen photo, but the text on top of that photo needs to be readable.
3. Visual cues: Color is often used for visual cues (the most obvious example is a traffic light). However, since some users may be color blind or have other visual impairments, it’s important to include additional cues that don’t rely on color alone (i.e., while a stop sign is red, it’s also octagonal in shape and says STOP in all caps). A website specific example would be a form field — if someone fills out a field incorrectly, the line can be highlighted in red, but there should also be an icon (i.e., exclamation point) or text (e.g., “Please enter a valid email address”).
4. Include labels with form fields: Very often a form field’s label and input text are one and the same, meaning that when you go to type a response the label disappears. Form labels should always be visible when a user is interacting with a form. A great example can be found on the NS contact page, where the field label looks like the input text, but moves out of the way and remains visible when you go to type: https://www.dropbox.com/s/78abmw2yoas1kxe/form.mov?dl=0
5. Include alternative text (alt text) with images: Screen readers literally read the contents of a web page to a user. Images can be made “readable” by including a brief description, or alt text. This text is not visible to users viewing the site—and thus won’t disrupt the layout—but will be picked up by screen readers, providing additional context for the user.

5 Considerations for Development

1. Brush up on guidelines: The WCAG Guidelines are the benchmark that the web design industry uses, with inadequate WGAC 2.1 AA adherence being the basis of most lawsuit claims.
2. Run basic tests: We recommend checking out the WAVE testing tool. It allows web developers to scan a website and get feedback on any errors or warnings that don’t pass WCAG guidelines.
3. Add labels for accessibility devices to remedy issues found in scan: ARIA labels allow for a web developer to add key information and direction that is available only to users who are using accessible options to navigate the website, such as through a screen reader. Like alt text, these labels do not affect the visuals of the site.
4. Advanced testing: Chrome Lighthouse is a suite of tests that runs in Google’s Chrome browser and checks site speed, mobile usability, and accessibility.
5. Browse the site through a screen reader: NVA and VoiceOver screen readers can be set up on your PC/Mac to browse your site as a visually impaired person would. If you can’t get around, then you know you’ve got work to do.

It’s important to note that there’s no such thing as an official ADA certification for websites, and so “compliance” is a gray area open to interpretation. But by following the tips above, you’re definitely helping to build a more accessible web.