10 tips for designing an ADA compliant website

Accessibility isn't just a buzz word in the tech world—it's a law, a responsibility, and simply the right thing to do. And, it's good for business. The Americans with Disabilities Act prevents discrimination against American with disabilities, dictating that businesses need to provide reasonable accommodations for those that need it, and these rules extend to digital properties online, too. Welcome to the world of ADA compliant web design.

Note: If this is all new to you, check out our primer on ADA and what it means for your website.

It's important to make sure that your website is ADA compliant and easily accessible for those with visual, hearing, or other impairments. Here are our 10 tips for making sure your website is doing accessibility right:

1. Use alt text for images. People with visual impairment rely on screen readers to read them what's on your website. While screen readers can easily read all HTML text on your page, they can't summarize what's in your images. Adding a simple but descriptive line of image alt-text in your code makes it so a screen reader can describe to the site visitor what your images are depicting. It typically falls to the design or content lead to create alt text copy that complements the rest of the page. Bonus: Adding alt text is also good for SEO.
2. Caption videos. Along the same lines, adding captions to video content on your site is an easy way to help those with hearing impairment enjoy your site more completely. While it's never too late to add captions, if you tackle this task in the design stage, you can make sure your captions aren't repeating HTML text that's already on the page.  
3. Pay attention to color. Did you know that color-blindness affect 4.5% of the world's population? When you're picking colors for your website—especially button/call-to-action colors, make sure that you're not relying only on color. For example, if green is representing an affirmative response and red a negative response, how would a color-blind visitor to your site know where to click?
4. Keep contrast in mind. People with visual impairment often have a hard time with low-contrast color combinations. When choosing your site's color palette, aim for high-contrast color combinations. For example, pale yellow buttons with white text are a no-go for accessibility.
5. Focus on font (and font size). Another way to accommodate site visitors with limited visual ability is to make sure you choose a clear, easy to read font that's not too small in size. A responsive design can also help visitors scale copy for easier reading.
6. Use color, text, and icons together. Especially in places where you're asking a site visitor to take action, show them what you want them to do in multiple ways. Use color, HTML text, and informative icons in concert, which casts a wider net for people who interpret information in different ways. And, always label UI-related icons based on the task they perform, not the image they portray. For example, your pencil icon should have a line of text (or hover-state text) that says "Edit."
7. Use headings correctly. Build your content using standard headings (H1, H2, H3) to ensure that screen readers can easily scan your page and jump to different sections. And, just like adding alt text, using headings correctly helps search engines pull accurate keywords out of your site, driving SEO traffic.
8. Leave enough white space. Ample white space makes it easy for people with mobility or fine motor skill challenges to tap/click where they intend to, especially in mobile environments.
9. Use navigate-by-keyboard functionality. People with dexterity or mobility challenges are unlikely to navigate your site with a mouse. Make sure that your site's hierarchy can also be navigated (and navigated logically) by keyboard command.
10. Keep the copy simple. Always strive to keep your site's copy simple, straightforward, and conversational. Good content managers should be skilled in writing with succinct sentences, a logical paragraph structure, and abbreviated length to better communicate with those who have cognitive disabilities or are reading your site in a language other than their primary one.

Need help applying these principles to your site? Want a quick audit to find out where you stand and what to do next? Drop us a line and we can help you identify accessibility issues, make your site compliant, and help your business be accessible to more customers! And if you're looking for more info about our accessibility approach, learn about some of the tools we use to solve compliance issues.