Is Your Website ADA Compliant?
What Does ADA Compliance Mean?
ADA is short for the Americans with Disabilities Act, which became law in 1990. It prohibits discrimination against individuals with disabilities in all areas of public life. The ADA, at least for Title III (private sector businesses), only applies to companies that employ 15 or more persons.
In January 2018, some new federal regulations will take effect. All federal institutions’ websites must meet AA compliance on all items in WCAG 2.0 by this time. We’ll get into what that means a little later.
Who Needs To Be Compliant?
The general consensus right now is that any business considered a “public accommodation” should have an ADA compliant web presence.
“Public accommodation” could apply to most things depending on who is making the interpretation. Generally, however, this would refer to B2C, retail, or any business the general public should be able to use, understand and access easily.
What Do I Become Compliant?
Here are all 61 guidelines laid out in WCAG 2.0 to either AA or AAA level!
Your site probably already meets many of these rules and others will take a web developer not too much time to accomplish. However, there are some items that are much more difficult to fix depending on the situation.
- Text must meet a minimum contrast ratio against the background, which can significantly impact your design.
- Your site must be fully navigable via keyboard only. This usually includes things like skip navigation buttons and can involve manually setting a tabindex everywhere.
- Your site should be navigable with screen reader software. This can be difficult to test and can involve some arduous fixes similar to what is necessary for keyboard navigation.
- Your site must handle text scaling up to 200% without causing horizontal scrolling or content-breaking layout issues. Once again, this may be more difficult to fix in some complex designs.
How Do I Check For These Requirements?
Various software tools can be used to test for ADA compliance:
- WAVE is a good start, but can produce a lot of false positives, particularly for contrast ratio issues.
- Lighthouse can help generate a report on potential issues.
- Manual testing for contrast ratio using this calculator.
- Manual testing with screen reader software
- Manual testing with keyboard only navigation
These automated tools will catch a lot of the simple issues, but manual testing is often still going to be required for almost all websites if you want to ensure you are meeting requirements.
SEO and ADA
With SEO playing such a significant role in online business growth today, it’s interesting to take a look at how closely best practices with SEO and ADA compliance are aligned. Search engines place value on web pages that can offer the highest value and best user-experience to readers, so it’s no surprise that the guidelines and best practices for both mirror each other so closely:
- Include alt text on all images
- Links should have a text description (not “click here”)
- Use text descriptions for all videos
- Make all PDFs available also in HTML format
- Use descriptive ghost text for forms
Basic Considerations for Managing ADA Compliance
Ultimately, when creating websites with ADA compliance top of mind, it’s important you think about users and how those with disabilities will actually be using the site. Below is a list of basic considerations that can serve as a simple checklist and guide for your business’ site:
- Provide every image, video or audio file, and plug-in with an alt tag
- Use detailed text descriptions to accompany complex graphics
- Alt descriptions should describe the purpose of the objects
- If an image is also used as a link, the alt tag should describe the graphic AND the link destination
- Include captions on videos
- Include audio descriptions and text transcripts
- Create a link to the video rather than embedding it in your web pages
- Data tables should have the column and row headers appropriately identified using the tag
- Table cells should be associated with the appropriate headers –with the id, headers, scope or axis HTML attributes
- Provide a link to a disability-accessible page where the plug-in can be downloaded
- When form controls are text input fields, use the LABEL element
Here is ADA checklist to help in the making and planning process.