The number of legal battles stemming from website accessibility issues is exploding. Between 2017 and 2018, the Federal Court experienced a 177% increase in accessibility-related lawsuits, according to Seyfarth Shaw, an extensive ADA Title III law resource. Whether there are issues with image descriptions and alt tags or navigation and design issues, an inaccessible website can put your organization at risk of legal action.
To help you determine if your site is at risk of litigation, we’re reviewing what ADA compliance is, where organizations go wrong, and how these errors can be avoided. Before we get started, it’s important to remember that creating an accessible website isn’t only about avoiding legal action; it’s about creating a resource that everyone can use; it’s about being compassionately inclusive. Plus, as a bonus, ADA compliance often leads to higher search ranking.
What is ADA Compliance & Website Accessibility?
ADA compliance is meeting the criteria outlined in Title III (and for government websites, Title II) of the Americans with Disabilities Act (ADA), which outlines accessibility requirements. More specifically, Title III of the ADA “prohibits discrimination on the basis of disability in the activities of public accommodation,” meaning state and local governments, businesses, and nonprofit organizations need to “provide goods, services, and programs to people with disabilities on an equal basis with the rest of the public.”
The number of legal battles stemming from website accessibility issues is exploding.
Website accessibility ensures that there are no barriers preventing people with disabilities from interacting and utilizing the content, products, programs, and services offered on a specific website. When website owners and developers take affirmative design and development steps, everyone has equal access to the information and functionality of a site.
What is Required to Make a Website ADA Compliant?
Organizations with ADA-compliant websites satisfy all of the Web Content Accessibility Guidelines (WCAG) success criteria with at least a level A conformance level. If that explanation sounds like a bunch of web-development-mixed-with-legalize gobbledygook, don’t worry, we’re about to unpack the digital-side of ADA compliance.
The design, content, and development need to be carefully considered to ensure organizations are meeting accessibility guidelines.
The WCAG are a set of web-accessibility guidelines put forth by the World Wide Web Consortium (W3C), an organization that has been endorsed by the ADA and sets international standards for the Internet. The WCAG guidelines explain how to make information (e.g., text, images, sounds, and code) more accessible to everyone. While the list of success criteria is extensive (61 collectively) WCAG guidelines are organized under four core principles:
- Perceivable: Information and user interface components must be presentable to users in ways they can perceive.
- Operable: User interface components and navigation must be operable.
- Understandable: Information and the operation of user interface must be understandable
- Robust: Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
From here, the W3C breaks down each principle into a set of guidelines (13 in all) and also assigns three different conformance levels, which include levels A, AA, and AAA.
Perceivable WCAG Guidelines
From video captions to background contrast, each small change makes a massive difference toward creating an inclusive website. The Perceivable Principle deals primarily with content alternatives, modifications, and responsive design. By following each guideline and its subsequent success criteria, website owners can ensure their website’s media is accessible to everyone. WCAG 2.0 Perceivable guidelines include:
- 1.1 Text Alternatives
- 1.2 Time-based Media
- 1.3 Adaptable
- 1.4 Distinguishable
Unpacking 1.1 Text Alternatives
The W3C asks website owners and developers to “Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.” One place to start is by tackling the imagery on your site. For purely decorative pictures, there is no need for alternative text. However, any image that adds more information to the content should have alt text, such as an image that conveys instructions, is used as a link, has text within it (avoid when possible), or shows data.
Unpacking 1.2 Time-based Media
To be ADA compliant, The WCAG asserts that webmasters, “Provide alternatives for time-based media.” As a general rule of thumb, all audio and video content should have a transcript. Video should also have a closed caption option. To ensure inclusivity and accessibility, include both the spoken information and relevant sounds (for example, the sound of a particular bird in a nature documentary), and descriptions of essential visuals (like a specific change of an animal in one environment to another).
Unpacking 1.3 Adaptable
The W3C requests that site owners “Create content that can be presented in different ways (for example, simpler layout) without losing information or structure.” To do so, use appropriate markup to specify functionality, signify headings (header text), and underscore meaning with smart and simple page structure. Code snippets should make content and any of its relevant features clear to everyone.
Unpacking 1.4 Distinguishable
Webmasters need to “Make it easier for users to see and hear content including separating foreground from background.” To ensure your content is distinguishable, ensure color isn’t the only visual means of conveying information, increase contrast ratios, and implement responsive design. Furthermore, your website should adapt to zoom settings without horizontal scrolling or cropped non-text content. Use progressive enhancement to help ensure that core functionality and content is available regardless of the device being used to see it.
Ensure color isn’t the only visual means of conveying information
Operable WCAG Guidelines
Many people with disabilities access the Internet every day without the use of a traditional mouse and keyboard. The WCAG’s operability guidelines help those who need to access a website with specialized equipment, need more time to navigate a page, and need to avoid flashing graphics. More specifically, the operability principle includes:
- 2.1 Keyboard Accessible
- 2.2 Time Adjustable
- 2.3 Seizures and Physical Reactions
- 2.4 Navigable
- 2.5 Input Modalities
Unpacking 2.1 Keyboard Accessible
The W3C starts to dip more into development with 2.1, noting website owners should “Make all functionality available from a keyboard.” From pause and play buttons to menus and collapsible accordions, your site should respond to keyboard controls (i.e., menu opens with the enter key, space bar pauses a video, etc.). The right code snippets will ensure those with disabilities and special needs can still access your site and navigate it via keyboard.
Unpacking 2.2 Time Adjustable
This guideline states that site owners should, “Provide users enough time to read and use content.” Therefore, auto-updating media, such as carousels and auto-play videos, should always show the play/stop buttons clearly. Any moving, blinking, or scrolling information should last for a minimum of five seconds to ensure enough time for the user to read the content.
Provide users enough time to read and use content
Unpacking 2.3 Seizures and Physical Reactions
Guideline 2.3 reads, “Do not design content in a way that is known to cause seizures.” If there is any accessibility rule that’s easy to follow, it’s this one. Do not display ads, banners, or any other images that flash or blink rapidly. Not only is it distracting, but it puts people with certain medical disorders at risk of a seizure.
Unpacking 2.4 Navigable
Making your website navigable means, “Provid[ing] ways to help users navigate, find content, and determine where they are.” There are a variety of critical aspects in 2.4, as creating an easily navigable site takes a lot of consideration.
First, you want to make all of the interactive elements (buttons, drop-downs, links) on your site clean and consistent. For those who need a more straightforward way to navigate your site, provide a site map in the footer. Moreover, on any web forms, input fields should be in close proximity to their respective labels. Headers and line spacing should be considered anywhere where the space between content can enhance understanding.
Unpacking 2.5 Input Modalities
W3C asked website owners to “Make it easier for users to operate functionality through various inputs beyond keyboard.” Basically, you want to ensure the functionality of your site is accessible through any device and works with a variety of multi and single point gestures (e.g., mouse and keyboard (multi) vs. single tap, double taps, long presses, etc. (touchscreen)).
Make it easier for users to operate functionality through various inputs beyond keyboard Understandable WCAG Guidelines
The Understandable principle aims to help everyone comprehend the content on a website and the actions that are to be taken to complete a particular task. From color coding feedback to consistent navigation, there are a variety of development initiatives that can help people with disabilities understand online content. The guidelines under the Understandable Principle include:
- 3.1 Readable
- 3.2 Predictable
- 3.3 Input Assistance
Unpacking 3.1 Readable
The W3C’s instructions say, “Make text content readable and understandable.” It’s important to group related material with short headings that clearly describe what’s to come. Appropriate headings also enable a more profound understanding. In a less technical sense, the actual content on your site is essential. Don’t make anything more complicated than it needs to be. Brevity can aid in comprehension.
Unpacking 3.2 Predictable
Consistency is not only essential to exceptional marketing, but it’s also vital to accessibility, which is why the WCAG asked site owners to, “Make web pages appear and operate in predictable ways.” Overlapping with many operability guidelines, 3.2 aims to keep digital elements such as links, buttons, navigation, labels, and instructions consistent throughout the site. Pay attention to colors, hover over action, and click style.
Make web pages appear and operate in predictable ways
Unpacking 3.3 Assistance
The WCAG guidelines read, “Help users avoid and correct mistakes.” When you’re designing a site that requires people to fill out information, your colors, labels, and layout should all add clarity for the user. For example, red highlights appear where form fields aren’t filled out appropriately, asterisks are used to mark essential information, and labels are included in your code to help those using screen readers understand what information required.
Robust WCAG Guideline
You’ve made it to the final principle, and it only contains one guideline. The Robust Principle encourages developers and site owners to write code that is “robust” enough to help assistive-technology users digest content effectively. Included in the Robust Principle is this single guideline:
- 4.1 Compatible
Unpacking 4.1 Compatible
W3G notes, “Maximize compatibility with current and future user agents, including assistive technologies.” Developers should use Web Accessibility Initiative–Accessible Rich Internet Applications (WAI-ARIA) and proper markup languages, tags, and attributes to provide information on the function and behavior of custom widgets and non-text page elements.
Do You Need to Be ADA-Compliant?
If you’re a public-sector agency, then 100% yes, your website needs to be ADA-compliant. Further, financial institutions, government websites, healthcare offices, and schools (including colleges, universities, and daycares) are typically at a higher risk of getting hit with a lawsuit.
However, there is no clear-cut law for ADA compliance for websites belonging to private-sector organizations. That being said, it’s critical that companies take a proactive approach to accessibility in order to help avoid legal ramifications, and quite frankly, to do the right thing.
ADA compliance needs to be taken seriously, as the threat of litigation is real. According to Seyfarth Shaw, the most common targets for lawsuits were:
- Retail (by far)
- Restaurants
- Hospitality
- Medical facilities
To reiterate, no industry is without the risk of an ADA lawsuit. For example, in 2019, a wave of 26 wineries recently got sued in New York.
Accessibility Made Easy
From proper page structure to appropriate contrast ratio, the success criteria for ADA compliance can be daunting. But don’t let WCAG’s guidelines overwhelm you. You can meet all of WCAG’s success criteria by reaching out to Werkbot Studios, an industry leader in ADA-compliant web development.
If you’re interested in learning more, request an ADA compliance audit and ask about our previous clients who made the inclusive transition to an accessible website.