Marc Avila , Founder & Strategic Advisor, 3 Media Web Reading estimate: 5 minutes
How to Make Your Website Accessible and ADA Compliant
Editorial note: updated in January 2024.
Making products and services accessible to customers with physical and cognitive impairments and disabilities applies to more than physical spaces and brick-and-mortar businesses. Website owners also have a responsibility to make online spaces and platforms accessible to a diverse user base, and the Americans with Disabilities Act has established guidelines to make sure that websites and online businesses are compliant.
According to the Centers for Disease Control and Prevention (CDC), over 61 million Americans (or roughly one in four) live with some type of disability. Of the six types of disabilities measured by the CDC, at least four can interfere with an individual’s ability to access and fully interact with a website: visual, cognition, mobility and hearing.
As a result, many web users rely on assistive devices and software like voice and text readers to access website content and services. To make your online services and digital products available to a broader audience, your website and content should be designed and organized to make it accessible and easy to understand for both humans and the technology they rely on!
Is Your Website Accessible and ADA Compliant?
The core principles that make a website accessible for users with disabilities or injuries align with a good user experience overall. From simple navigation to uncluttered design and page layouts, accessibility can (and should) be built into the general design process.
What makes a website accessible and compliant with the standards set forth by the Americans with Disabilities Act? Answer a few basic questions:
Can someone with a visual, auditory, cognitive, or physical impairment perceive and understand your site’s content, tools and navigation?
Will assistive technology and software like text readers be able to clearly and accurately interpret and translate your site’s content to the user?
Is your site “operable?” In other words, can a user with limited or no access to a mouse or touch screen access and fully enjoy all of the site’s features using just the keyboard? Can the site be navigated easily and intuitively without a mouse and with assistive devices and software?
Is your site’s design and layout consistent, intuitive and user-friendly throughout the entire site?
Is the contrast ratio between the text and page background acceptable?
Can the text be scaled without throwing the page layout out of whack/can the text be enlarged as needed without distortion?
Are you currently using or considering plug-ins, video content or design elements that may not work for users with specific impairments?
Accessibility Tools of the Trade
A good rule of thumb is to try to anticipate how a user with specific impairments might need to adjust the elements on the page to successfully understand and access its features. Evaluating an existing site for accessibility may be a bit labor-intensive and involve some good old-fashioned QA testing, but there are a few tools available to help you streamline the process:
Perform a page audit with Lighthouse to find accessibility and performance issues.
Evaluate site-wide accessibility with WAVE.
Stumped by the whole contrast ratio thing? There’s a tool for that!
Five Steps to Make Your Website More Accessible (It’s Easier Than You Think)
Here are some of the things to keep in mind when optimizing new and existing websites for accessibility:
1. Pick Your Graphics and Images with Care
Clever memes, videos and visual storytelling elements like infographics. They may do a great job of summarizing content and delivering more site traffic, but when it comes to accessibility, not all images and graphics are created equal. Keep it simple and avoid flashing images and complicated plug-ins, and remember to include clear text captions for all images and videos for users that rely on text reading software.
Pro tip: Alt-text captions for images allow text reading software to describe the images for visually impaired users, so they should be deployed across your site for every image to make your site accessible to the millions of Americans suffering from some form of vision loss or impairment. (The National Institutes of Health estimates that instances of vision loss and blindness are expected to double by 2050).
2. Mind Your Fonts
For casual web users, font choice primarily comes down to a matter of aesthetic taste and style. And while the wrong font style and size can give the average internet user a headache or temporary case of eye strain, the wrong type of font can determine whether a visually impaired user can read or access your site’s content at all. Keep the page background light and use a simple font in a dark color to prevent eye strain for users with sensitive eyes. A few good choices for readable and user-friendly fonts include:
Georgia
Open Sans
Quicksand
3. Provide Clear Instructions
Everyone has dealt with the frustration that comes with a pop-up ad or window that seems impossible to close, or a form or call to action that doesn’t make sense or makes the user jump through too many hoops. For web users with disabilities, these problems are more than just a mere nuisance. They can make the site impossible to use and deprive them of the ability to access critical information and services. Create simple and intuitive navigation and instructions for your site navigation and features, clearly identify page elements, break up large blocks of text, and make it easy for users to move around the page and find what they’re looking for with just a few touches of the keyboard.
4. Make Sure Your Site Uses Standard HTML Tags
Text readers that translate written page content to audio can’t understand or translate complicated code and image files. If your site runs on an open source CMS like WordPress, you’re most likely covered. Just make sure that your site’s documents are all text-based so that they can be read and translated accordingly.
5. Check Your Keyboard Navigation
A general rule of thumb when it comes to good UX design is that a simple, easy-to-navigate website with a clear and intuitive layout is the way to go. But if your site offers content like videos that run on auto-play or slide-through presentations, make sure to include a feature that allows users who rely exclusively on keyboard navigation to pause and slow down any video or auto-play content.
Staying on Top of ADA Compliance Issues and Requirements
In web design, as in life, the only constant is change. As software and web design best practices change and evolve at lightning speed, it’s important to make sure that the needs of users with accessibility issues are taken into account. The best way to do this is to make accessibility an integral part of your design and customer service experience. Check out one of our favorite examples from the Cape Organization for the Rights of the Disabled.
Website Accessibility and ADA Compliance is Not Just the Law. It’s Also Good Business.
Building an accessible website isn’t just about complying with the law (and doing the right thing); it’s also a no-brainer from a business perspective. From visually impaired customers to home-bound seniors, millions of Americans rely on online access for everything from interpersonal communications to shopping and paying their bills.
At the end of the day, making your website accessible and ADA-compliant ultimately comes down to broadening and enhancing the user experience to accommodate users with specific needs and requirements, so that they can fully access and interact with everything your website has to offer.
Topics
Discover More
Touchstone Energy® Achieves WebOps Excellence to Better Serve Their Members
Yulia Popova
Reading estimate: 2 minutes
Opt In Now For a Faster Build Pipeline on Front-End Sites
Steve Persch
Reading estimate: 2 minutes
Pantheon Increases PHP Memory Limits for Performance and Elite Plans
Rachel Whitton
Reading estimate: 2 minutes