ADA compliance for websites
In today’s digital age, creating an inclusive online experience is imperative, and this checklist serves as a valuable resource for website owners, developers, and designers. By following these guidelines, you can enhance the accessibility of your website, making it user-friendly for individuals with diverse abilities. This checklist covers key aspects to help you achieve ADA compliance and foster an inclusive online environment for all users.
Is ADA compliance mandatory for websites?
Legal interpretations suggest that courts may consider websites as places of public accommodation, making them subject to ADA requirements. In certain cases, courts have ruled in favor of ADA compliance for websites, with the WCAG Guidelines often being referenced as a set of standards to achieve accessibility. Although the ADA does not explicitly mention websites, businesses, and organizations are advised to actively consider making their websites accessible to ensure inclusivity and to mitigate legal risks.
Reach out for more information
How to make a website ADA compliant
To make a website ADA compliant, several key steps should be followed. First and foremost, adhere to the WCAG Guidelines, which provide a comprehensive set of standards for web accessibility. These guidelines can be a bit complicated to fully comprehend, so I highly recommend hiring an agency with experience making a website ADA compliant or choosing a theme that is sold as ADA compliant. Once you have a good foundation to work on, it is vital that users add content in accordance with the WCAG Guidelines as well. Simply adding the wrong text or an image without alt text could make your website non-compliant. We’ve put together an ADA Compliance Checklist to make adding new pages to your site easier.
Get your ADA Compliant Website NowADA Compliance Website Checklist
This checklist is intended for users adding content to an already compliant website to avoid breaking compliance. By prioritizing these considerations, website owners can create a more inclusive online environment in line with ADA compliance standards.
Alt Text
Always add concise yet descriptive alt text to images. Decorative elements like checkmarks should NOT have alt text.
Adding Emphasis
Always use <em> tags for itallics, not css or <i>. Be careful when copying and pasting from Word as it will add the wrong markup.
Adding Bold
Always use <strong> tags for bold, not css or <b>. Again, be careful when copying and pasting from Word as it will add the wrong markup.
Images of Text
Do not use images of text (unless it’s a logo or purely decorative). Images of text, like a logo, should have the full text included in the alt text.
Labels
Be sure your form fields have corresponding to the labels. Placeholder text does not satisfy the compliance requirements.
Links
Use visual elements, such as underlining or icons, to signify a link or use a change in contrast of 3:1 or greater.
Heading Tags
Every section of your website should have heading tags ordered in a meaningful sequence. In other words, start with a heading 1 and follow it with a heading 2, don't skip to heading 3 or 4. Heading 3s should always be nested under heading 2s.
Navigation
Provide more than one way to navigate to each web page whenever possible. Adding links in the footer, breadcrumbs, or an HTML sitemap can help achieve this.
Visual Elements
Ensure visual elements have a contrast ratio of at least 3:1 to meet AA standards. AA standards are what most companies are required to meet. (Government entities typically need to meet AAA standards.)
Text Contrast
Use a text contrast ratio of at least 4.5:1 to meet AA standards. Be careful when adding text over a background image.
Avoid Directional Text
Be careful not to add text like "fill out the form below" or "reference the image above" to your website.
Videos
Provide captions for multimedia content and ensure that any audio or video elements are accessible to individuals with hearing impairments. These can be easily added via YouTube or Vimeo.
More ADA compliant website requirements
If you already have a website and aren’t sure if it is compliant, we’ve also put together a list of ADA compliant website requirements and common mistakes. Reviewing this list will give you an idea if you need to consider redeveloping your site.
- Ensure your website can be navigated by a keyboard alone
- Make your website responsive, i.e. everything should work on phones, tablets, etc.
- Ensure all text is legible when your website is zoomed to 200%
- Use valid autocomplete attributes that correspond to the label on input fields
- Use visual elements, such as underlining or asterisk (*), to signify an error in a form
- Use em units, named font sizes, or percentages for font sizes
- Provide options for users to pause scrolling or automatic content
- Use techniques to show the user’s current location within your website such as:
- Breadcrumbs
- Site Map
- Visual cues in navigation
- Titles to indicate parent pages
- Specify language attribute in HTML (ex. <html lang=”fr”>)
Common WCAG Compliance Mistakes
Avoid these common mistakes to maintain universal design during your development process:
- Do not lock orientation to either portrait or landscape view
- Do not use CSS to create “headings.” Always use the HTML tags (ex. <h2>)
- Do not use CSS to add non-decorative images, use <img> tags
- Do not use :before or :after for non-decorative content
- Do not use color alone to signify a link or to show an error in a form
- Avoid setting overflow to hidden on absolute elements
- Avoid creating popups or modals with limited height properties and no scroll
- Avoid adding height properties to paragraphs
- Do not use CSS to turn off the visual focus indicator (ex. :focus {outline: none})
- Do not set time limits on user interaction
- Do not add anything that flashes more than three times in any one-second period
Tools for Checking ADA Compliance
Web Accessibility Evolution Tool
Simply enter your URL to see results.
Markup Validation Service
This validator checks the markup validity of web documents in HTML, XHTML, SMIL, MathML, etc.
Ready to transform your website into an inclusive online space?
Unlock the potential to reach a broader audience, enhance user experience, and mitigate legal risks.