The Americans with Disabilities Act (ADA) is one of America’s most powerful pieces of civil rights legislation. Most business owners are aware of physical accessibility requirements for your brick & mortar location, but you are also responsible for maintaining ADA compliance on your website.
Under the ADA, websites must be accessible across all devices. Failing to comply with ADA standards not only creates bad experiences for site visitors with disabilities but it can also lead to potential lawsuits.
What does ADA accessible mean?
The Americans with Disabilities Act (ADA) was created in 1990 to ensure that people with disabilities have the same opportunities as anyone else. Now that the internet has become a widely used resource for businesses and consumers, ADA compliance also applies to websites. This means that people who have disabilities that affect vision, hearing or physical capabilities need to be able to access and navigate through your website.
5 Easy Steps to be Compliant
1. Add Alt Text to Images
Text alternatives (“alt text”) are used to convey the purpose of an image, chart, illustration, etc.
All images that convey useful information for interacting or understanding web page content need alt text. When adding alt text to the images on your website, keep the text concise and descriptive. Provide users with contextual descriptions so everyone can understand what the image is showing.
Why you should add alt text to your images:
- For visually impaired users
The visually impaired frequently use screen readers to browse web pages. Screen readers are used to identify and interpret what is being displayed on the user’s screen. Alt text is needed to describe to users with screen readers what the image is on the webpage they are browsing. - If images fail to load
If for some reason, an image on your website fails to load, the alternative text will display in its place. - SEO practices
When search engines, such as Google and Bing crawl web pages, it is easy for them to understand text copy on a page. Search engines have a more difficult time reading images. Utilizing alt text to describe your image helps search engines give better results when performing an image search. Plus, it’s another spot where you can include helpful keywords.
2. Color Contrast
To be compliant with the ADA guidelines, websites must have sufficient contrast (more specifically, a ratio of 4.5:1) between text color and its background. Colors used to convey information on diagrams, maps and other image types must be distinguishable. This also applies to text that is on images, icons and buttons.
This especially can affect your website’s accessibility to:
- Users with low contrast sensitivity, commonly elderly people.
- Users with color blindness who can’t distinguish between certain colors.
3. Video Captions & Audio Transcripts
Users that are hearing-impaired, have poor quality audio or speak different languages frequently utilize text transcripts to comprehend video and audio functionalities.
Opportunities to make your video and audio files accessible:
- Add text transcript or other text-based material alongside the video/audio
- Include captions or a synchronized text transcript on the video
- Embed or display videos in a player that can be accessed by a screen reader. Examples: YouTube, Vimeo, QuickTime and iTunes
- Include a description of events or images showcased in the video
- Allow users to click “play” to start the file (don’t use autoplay)
4. Keyboard Access and Visual Focus
Users who are blind or have mobility issues rely on their keyboard or assistive technologies to interact and navigate the web. It’s important that users can access all content and functionality (links, forms and media controls) without using a mouse.
Check that your website allows for the following keyboard actions:
- Tab to all
Check that you can tab to all of your site’s elements including links, form fields, buttons and media player controls. - Tab away
Check that you can tab away from all of your site’s elements that you can tab into. - Tab order
Make sure the tab order follows the correct and logical reading order. For the English language it is top to bottom, left-to-right. - Visual focus
Make sure that the focus is clearly visible when you tab through your site’s elements. There should be a clear visual change to a particular element as you tab into it. - All functionality by keyboard
Check that you can access and utilize every functionality on your website with only the keyboard. Users shouldn’t need a mouse to activate actions, options or visible changes. - Drop-down menu
Make sure that after users tab into a drop-down menu, they can use the arrow keys to move through all the options. - Image links
Check that all images that are links have a clear visual focus and can be activated using the keyboard.
5. Forms, Labels and Errors
For your website’s forms to be accessible, labels, keyboard access, clear instructions and effective error handling are crucial. Form fields usually have visible labels for a text field. When forms are functioning properly, users can interact with them using only a keyboard, voice input, or screen reader.
Try filling out your website form with just a keyboard, and check the following:
- Labels
Check that labels are positioned correctly. Labels should generally be left of text boxes and drop-down lists, and right of radio buttons and checkboxes. - Required fields
Make sure that required/mandatory fields are clearly indicated. Required fields should not be indicated by only colored labels. - Instructions
Instructions should be listed before they are needed like at the top of the form or the section to which they relate. - Error handling
Check any forms that would display an error message. Try leaving required fields blank or entering incorrectly formatted information. Errors should provide clear and specific guidance.
If your website isn’t ADA compliant, you could be missing out on potential customers and making it difficult for users with disabilities to use your site. Website legal requirements can be confusing, but our team is here to help! Contact us today to learn about our support services.
