The Americans with Disabilities Act (ADA) was passed in 1990 to protect the civil rights of individuals with disabilities. This important legislation made it illegal to discriminate against those with disabilities in all areas of public life, including jobs, schools, transportation, and all public and private places open to the public.
A key part of the ADA is the requirement that public accommodations must provide equal access to their goods, services and facilities to people with disabilities. This applies to all businesses and organizations that provide goods or services directly to the public. Crucially, it also applies to websites, meaning that all websites must be accessible to those with disabilities.
If your website is not fully accessible, you could be violating the ADA. This exposes your business to potential legal action and penalties. Fortunately, there are steps you can take to ensure your website complies with ADA website accessibility standards. Read on to learn about the most common ADA website compliance mistakes and how to avoid them.
Lack of Alt Text for Images
One of the most common mistakes is failing to provide descriptive alternative text for all images on a website. Screen reader software used by the visually impaired relies on alt text to describe images to users. If alt text is missing or poorly written, these users will not get important information conveyed by the images.
To avoid this issue, provide detailed, descriptive alt text for every image on your site. Alt text should summarize the content and function of the image, not just describe it visually. Be sure to actually describe what information the image conveys rather than just saying “photo of our office” for example.
No Text Equivalents for Non-Text Elements
Along with images, things like audio, video and multimedia presentations must have text equivalents on your site. This means providing audio descriptions of video elements, transcripts for audio files, and text descriptions of any important visuals shown on videos or multimedia on your site.
Ensuring these text equivalents exist on your site will allow those with visual or hearing impairments to access the information conveyed through these non-text elements.
Inaccessible Forms
Web forms present a few different ADA compliance challenges. Form elements like text fields, dropdowns, checkboxes, radio buttons and more must all be coded properly so they can be navigated and used by those relying on assistive technologies like screen readers.
This includes making sure form fields have proper labels that can be read by screen readers, providing instructions when needed, and allowing forms to be navigated and used only with a keyboard (no mouse required).
Complex Navigation/Website Structure
Navigating a website can prove challenging for users with disabilities if it is not coded correctly. Complex or confusing website structures, navigation menus that are difficult to bypass, or lack of logical focus order on page elements can all cause problems.
Ensure your website navigation scheme is logical, consistent, and intuitive. Use skip navigation links that allow bypassing repetitive elements. Structure page elements in a logical focus order that follows how content is presented visually on the page. And don’t require use of a mouse to navigate (keyboard-only navigation must be possible).
Color Contrast Issues
Visually impaired users often rely on high color contrast to be able to read text and identify information on a web page. If color contrast is poor, they may be unable to use your site effectively.
Check that all text meets at least AAA level minimum color contrast standards. Tools like WebAIM’s color contrast checker can identify contrast issues. Avoid conveying information with color alone, use legible standard fonts with adequate spacing, and make sure background colors and images don’t interfere with text visibility.
No Keyboard Focus Indicator
As mentioned above, keyboard navigation must be possible on all website pages and functions. Visually impaired users cannot rely on a mouse for navigation, so it’s essential that the current keyboard focus location be highly visible as they tab through page elements.
This requires a visible keyboard focus indicator (typically a colored outline around the element in focus). If this indicator is missing or difficult to see, keyboard navigation can become confusing or impossible.
Auto-Playing Audio/Video
Videos or audio that plays automatically upon loading a webpage can disorient and confuse users with visual or hearing impairments. Automatically playing media also risks interfering with screen readers.
To avoid this issue, make sure no media plays automatically on your site. All audio/video should be user-initiated. Provide easy to find on/off controls for media as well as transcripts/audio descriptions when needed.
Inaccessible PDFs, Documents, and Multimedia
When PDFs, documents like Word or PowerPoint files, multimedia, and other non-HTML content are present on a site, they must also be made accessible. This includes providing text equivalents for images, proper headings structure, alt text for charts/graphs, proper reading order, and more.
Make sure to optimize these types of documents for accessibility before placing them on your website. If you cannot make a document accessible, consider providing an HTML alternative that conveys the same information accessibly.
Missing Link Context
For screen reader users, providing clear link context is vital for understanding where site links will lead. Links make sense visually because users can see where they are located on the page, but screen reader users don’t get this contextual visual information.
To avoid confusing link text like “click here” or “read more”, always provide descriptive link text. Write link text that provides a clear indication of the destination, such as “Learn more about our company history” rather than just “company history”.
Poor Semantic HTML Structure
Using proper HTML elements gives semantic structure to website content. This is key for screen reader users understanding content. Elements like headings, lists, paragraphs, captions, etc. all provide semantic meaning when used correctly.
Make sure to use the correct HTML elements for different content types rather than formatting everything as generic divs or spans. Structure content in a logical hierarchy using heading levels. Break content into paragraphs, use lists when appropriate, and ensure tables have proper captions and markup.
No Language Indicated
Users relying on screen readers or other assistive technologies configure their devices to properly handle page content based on the language. If no language is indicated, content may not be interpreted or pronounced correctly.
Make sure to declare the language of the page (such as English, Spanish, etc.) using HTML lang attributes. This ensures devices handle content appropriately for the declared language.
By being aware of these common ADA website compliance mistakes, you can utilize tools like AllAccessible to audit your own site for issues and take steps to provide an accessible user experience. Ensuring your website complies with ADA standards provides equal access for all your site visitors and customers. Conducting ongoing accessibility testing and making improvements will help keep your site compliant as you add new content or make updates over time.