How to make sure your website is ADA compliant
Keeping a website up-to-date and within spec of all the ever-changing guidelines is no easy task. One such aspect of website management that is often overlooked, but is mandatory, is adherence to ADA Compliance. It ensures that people with disabilities have the same opportunities as anyone else, online included. With that in mind, we’ve gone ahead and put together some tips to ensure your website is on its way to ADA compliance.
What is ADA?
ADA stands for Americans with Disabilities Act and was put forth in 1990 to ensure that individuals with disabilities enjoy the same opportunities and support as everybody else. This wide-ranging act covers obvious things such as wheelchair accessibility for public buildings, but it also applies to website accessibility, too.
Who makes the rules for ADA compliance?
The W3C, or World Wide Web Consortium, partnered with various stakeholders to create the Web Content Accessibility Guidelines as a guide for website developers to follow in order to ensure their content is accessible by all. The WCAG for short, is in its second iteration and is organized within the following four pillars each with three levels of compliance: A, AA, and AAA.
- Perceivable
- Operable
- Understandable
- Robust
As of right now, the ADA does not specify a set of technical standards to follow in order to make a website accessible, but this does not mean you should ignore accessibility altogether. There is currently no law or regulation mandating digital accessibility, but in any recent court case rulings in the US, WCAG 2.0 AA is continuously cited as providing an acceptable level for any user with a disability.
How do I make my website ADA compliant?
The task of making your website ADA compliant doesn't have to be as daunting as you might think. Broken up into the four principles below, we outline the WCAG 2.0 guidelines and give you an overview of what you can do to make your website adhere to the level AA standard for each.
Principle 1: Perceivable
Information and user interface components must be presentable to users in ways they can perceive.
This section ensures web media is usable by all. Recommendations are given outlining how content can be presented in alternative forms without a loss of meaning or coherence, for example, adding captions to videos.
Tips
- All images on your website should include a text-equivalent, called an Alt tag. These tags will be used by screen readers and should help a user who may not see the image understand it’s contents. This should not be used for SEO purposes and should accurately describe the contents of the image
- All text content should have a contrast ratio between the foreground and background colors of at least 4.5:1 for normal text and 3:1 for large text. You can use WebAim's Contrast Checker to test. This ensures visually impaired users can read your content.
- A user should be able to resize text on the page without breaking the layout. Some users need to view the content much larger than 100%.
Principle 2: Operable
User interface components and navigation must be operable.
This category gives guidelines to ensure the functionality of your website does not create problems for users.
Tips
- Ensure the keyboard focus is always visible so a user knows where they are on the page at all times.
- Ensure that all functionality can be controlled with just the keyboard and that there are no keyboard traps hindering a user from moving freely around the page, for example, when opening a modal containing a booking widget, a user should be able to easily return to where they were previously within the page.
- Tabbable elements are in an appropriate sequence and don't jump a user around the page unexpectedly.
- Don't place important messaging on your home page within an auto-scrolling carousel as this content could easily be missed or not consumed within the time frame set between slides.
- Provide users with a ‘Skip to main content’ link to allow them to bypass tabbing through your navigation on every page and allow them to easily jump straight to the content area.
- Include a descriptive page title as a Heading 1 tag <h1> and use subsequent heading tags in a correct hierarchy. This provides assistive technology with more ways to scan and navigate page content.
- Ensure sections of pages are marked up correctly and form input fields are labelled with descriptive text. This allows assistive technologies to understand the structure of the document and how items are paired to visual labels.
- Every link’s purpose should be distinguishable from the link text alone. This can be achieved by adding descriptive hidden text to ‘Read more’ links that is only visible to screen readers.
Principle 3: Understandable
Information and the operation of user interface must be understandable.
This section contains guidelines to ensure your text content can be read by users and assistive technology, and to ensure that information necessary for understanding it is available.
Tips
- Ensure the 'lang' and 'dir' attributes are added to the main HTML tag, ie lang="en" dir="ltr". This tells technology information about the language used in the document.
- Content should be presented in a consistent manner from page to page so a user does not get confused with the layout changing dramatically.
- Use correct markup for form submission errors so assistive technology can understand what is wrong and where.
Principle 4: Robust
Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
This section is the smallest and most technical. Guidelines here are to ensure your code follows current web standards and is understandable by assistive technologies.
- Use standard, semantic HTML tags that are universally recognized by browsers. This ensures that as assistive technologies change over time, they will be able to understand your website's code.
- Supplement your HTML with Accessible Rich Internet Applications (ARIA) attributes to help assistive technologies understand the structure of your pages and the interaction between elements. A screen reader should be able to understand that your Book Now button opens your booking widget and that a specific region on the document contains dynamically loaded content controlled by form element filtering.
And that’s it! By making sure your website adheres to WCAG level AA, you will ensure that people of all walks of life can seamlessly access your website without issue.
Useful Links
- WAVE Web Accessibility Evaluation Tool
This excellent tool can be used to help identity WCAG errors on your website and suggest ways to fix them - Siteimprove
A paid subscription service that provides in depth scan results and actionable insights on your website on how to improve your accessibility rating - WebAIM Contrast Checker
Use this tool to test if your contrast ratios pass the WCAG AA standards
