Marc Avila , Founder & CEO, 3 Media Web September 10, 2019 Reading estimate: 5 minutes
How to Make Your Website Accessible and ADA Compliant
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 60 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:
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 topic of accessibility in web design doesn’t get the attention it should. But the core principles that make a website accessible for users with disabilities or injuries align with a good user experience overall. From simple and straightforward 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 clearly 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” - meaning 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!
Making Your Website More Accessible (It’s Easier Than You Think)
Here are some the things to keep in mind when optimizing new and existing websites for accessibility:
1. Be Mindful of Your Choice of Graphics and Images
Clever memes. Video and visual storytelling elements like info graphics. They may do a great job of delivering content and engaging 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 video 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 in order 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:
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 a disability, 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 a 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. 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 that 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 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.