Everything You Need to Know About ADA Compliance & Websites
It’s 2019 and the world has drastically changed since 1990. And yet, George H.W. Bush signed the ADA on July 26, 1990 and it 100% did not take websites into consideration – at the time.
Fast forward to today and Title III of the Americans with Disabilities Act “prohibits discrimination on the basis of disability in the activities of places of public accommodations (businesses that are generally open to the public and that fall into one of 12 categories listed in the ADA, such as restaurants, movie theaters, schools, day care facilities, recreation facilities, and doctors’ offices) and requires newly constructed or altered places of public accommodation—as well as commercial facilities (privately owned, nonresidential facilities such as factories, warehouses, or office buildings)—to comply with the ADA Standards.”
U.S courts are now considering websites as “places of public accommodations.”
What does that mean for your business? Well, it means you have to do something. And not the kind of something that ends up on the intern’s desk, then given to seven people to split the work and then before you know it, it’s the end of the year, nothing has been done, and you have a lawsuit because your website is anything but accessible. Sounds extreme – but it’s happened before and will happen again to many businesses that hit snooze on this very important issue.
A website is accessible when it can be enjoyed fully and equally by all people including those with disabilities – accessing content, navigating easily, engaging with various elements, etc. So on top of beautiful UX website design, you’ll have to take accessibility into consideration.
In order to assess whether a website is accessible, U.S. courts have been using the Web Content Accessibility Guidelines (WCAG) 2.0 Level AA as the standard. It’s made up of 38 requirements and if you meet all 38, you’re great! If not, your site can still become accessible.
To clarify, WCAG has three levels. Level A criteria should be the easiest to meet without much change to your website (example of Level A criteria: you can’t identify something by color, like “press red button to stop” – most websites don’t do this). Level AA criteria is a little more involved and will most likely require changes (example of Level AA criteria: the contrast level between your text and background must be between a specific ratio – many websites don’t meet this criteria but it can be easily changed). Level AAA is the most strict (example of Level AAA criteria: very dark colors on very light backgrounds – most websites will not achieve this ratio). Your goal should be Level AA (which means you meet all Level A and AA criteria), while working to understand Level AAA as there might be criteria that you can still meet.
So, What’s Legally Required?
Unfortunately, there is no explicit web accessibility law for businesses in the U.S. which means there is no exact answer. However, looking at past lawsuits and past DOJ Title III website actions will show you the steps you can take to comply with WCAG 2.0 AA guidelines. Also, it’s important to note that private entities have flexibility when it comes to web accessibility. That being said, just stating “I tried my best” in court without any genuine effort to show for it won’t get you off the hook.
Let’s dive into the various parts of WCAG. The sections below were created by attorney Kris Rivenburgh in his article The ADA Checklist: Website Compliance Guidelines for 2019 in Plain English. He did a fantastic job of describing some key points to Level A and AA – we couldn’t say it better so we’re sharing this lawyer’s insight.
Alternatives
- 1.1 Alt Text: Images and non-text content needs alt-text (alternative text). (exceptions include CAPTCHA, decorative images, and more).
- 2.1 Video & Audio Alternatives: Videos and audio files should have a transcript below the media clearly labeled and linked.
- 2.2 Closed Captioning: Videos with sound should have closed captioning (“subtitles”).
- 2.3 Audio Description: For videos, add an alternative video including audio description of info not shown in original video’s soundtrack or include text (there are exceptions).
- 2.4 Live Captions: Live video presentations should have closed captions.
- 2.5 Audio Description: Audio description is optional under 1.2.3 level A but not in 1.2.5 AA.
Presentation
- 3.1 Website Structure: Proper markup techniques must be used to structure website content (this includes using correct heading tags and HTML for ordered and unordered lists, etc.).
- 3.2 Meaningful Order: Content should be presented in a meaningful order and sequence so it reads properly.
- 3.3 Sensory Characteristics: Detailed instructions shouldn’t be reliant on a single sensory ability.
- 4.1 Use of Color: Color alone should not be used to convey information.
- 4.2 Audio Control: Users must have the ability to pause, stop, or mute audio.
- 4.3 Color Contrast: The color contrast between all text and backgrounds must be at least a 4.5:11 ratio. Visit the WebAim contrast checker to check the contrast of your website text.
- 4.4 Text Resize: Users must be able to resize text up to 200% without negatively affecting ability to read or functionality.
- 4.5 Images of Text: Do not use Images of text unless necessary (exceptions include logo images).
User Control
- 1.1 Keyboard Only: Functions and content on a website must be completely accessible by keyboard only (i.e.: no mouse).
- 1.2 No Keyboard Trap: Users using only keyboard must never get stuck on any part of the website and should be able to navigate forwards and backwards.
- 2.1 Adjustable Time: If there are any time limits on the site, users must have ability to adjust it, turn it off, and extend it.
- 2.2 Pause, Stop, Hide: Any content that blinks, scrolls, or moves must have ability to be stopped, paused, or hidden.
- 3.1 Three Flashes or Less: Web pages must not contain any element that flashes more than three times in one second.
- 4.1 Skip Navigation Link: Users should be able to bypass a heading and go straight to main content by clicking a “skip to content” or “skip navigation” link.
Understandable
- 4.2 Page Titles: Website pages must have a unique and descriptive title.
- 4.3 Focus Order: Websites must be able to be navigated sequentially in a logical order that preserves meaning.
- 4.4 Link Anchor Text: The purpose of each link should be determined from the link text or anchor text (anchor text is the text that is hyperlinked). For example, don’t write “click here” and instead, do write “visit the WSI home page.”
- 4.5 Multiple Ways: There should be multiple ways to access various pages or information on the website (i.e.: navigation menu, search bar, breadcrumbs, links or buttons in content, sitemap, etc.).
- 4.6 Descriptive Headings and Labels: Headings and labels describe topic or purpose – they don’t need to be long but should be descriptive.
- 4.7 Focus Indicator: “User interface control” elements that receive focus from a keyboard user should indicate that focus on the current selected element (i.e.: add visible border around a text link).
- 1.1 Website Language: Set the language for your website.
- 1.2 Language Changes: Indicate any language change on any page or in any content.
Predictability
- 2.1 On Focus: When an element receives focus, it should not mean the context has changed. User must actively choose to activate an item before a change happens (like hitting “submit” on a form, opening a new window, going to a new page).
- 2.2 On Input: Just because a user inputted something into a field, does not mean anything should change (forms cannot auto-submit just because fields are filled out – users must click submission button).
- 2.3 Consistent Navigation: Navigation links should be kept the same across all webpages – same links, same order.
- 2.4 Consistent Identification: Components with the same functionality are identified consistently (but not necessarily identically). For example, two check marks can indicate two different things as long as their function differs – one indicates approved on one page but “included” on another. Another example is a “search” button on one webpage and a “find” button on another webpage may both have a field to enter a term and list topics in the website related to the term entered. In this case, they have the same functionality but are not labeled consistently.
- 3.1 Error Identification: Form errors should be easy to identify, understand, and correct.
- 3.2 Form Labels and Instructions: All input fields should be labeled so users know what input and format is expected.
- 3.3 Error Suggestions: Suggestions for correcting input errors should be provided when errors are detected.
- 3.4 Error Prevention on Important Forms (Legal, Financial, Data): Webpages with legal commitments, financial transactions, or other important data submissions, one of the following is true: 1.) submissions are reversible, 2.) the user has an opportunity to correct errors, and 3.) confirmation is available, allowing the user an opportunity to review and correct before submission.
- 1.1 Parsing: HTML code should be clean and free of errors, specifically missing bracket closes. Make sure all HTML elements are nested correctly.
- 1.2 Name, Role, Value: For all user components (including forms, links, components generated by scripts), the name, role, and value should all be able to be programmatically determined. Components should be compatible with assistive technology.
Got all that? Good. This was just a quick outline of ADA tips for websites. The WCAG is difficult to read, long, and not user friendly. But hopefully, these points will help get you on track towards a more ADA friendly site. You may have to make some compromises on website design, but hey, that’s life.
And to top it all off, there is actually another set of legal best practices to ADA compliance: training, having a web accessibility policy page, making web accessibility statement, appointing an accessibility coordinator, hiring independent consultant, and allowing feedback. Of course, for a small business, a coordinator or consultant might not make sense. But for a large business we recommend becoming more thorough with accessibility efforts.
Start Your Journey Towards an ADA Friendly Website
If you’re ready to begin your journey with ADA updates, you’ll need to do a few things:
1. Get an accessibility expert to manually review your site. (Pss… we can help you find that expert). It takes a lot of effort and hours which means those online automated services you just found on Google are SCAMS! Buyer beware – there is no “automatic” or “instant” accessibility scan. Manual reviews can cost anywhere from $1,000 to $12,000 depending on how heavy your site is. Sounds like a lot? Well, settlements on ADA websites can range from $5,000 to $50,000+.
2. Start implementing the changes from your review. Some changes are DIY-friendly, but you may find that others require a web development team for website design changes.