By In the US, over 61 million individuals live with disabilities (CDC). Excluding such a large portion of the population represents an enormous missed opportunity in terms of business. Building accessible websites is paramount for moral and legal reasons. Offering accessible design as part of your web design services is a major value-add for your clients and can surely set you apart from your competitors.
Digital accessibility starts with building an incredible website. Download the “6-Step guide for selling website services to local businesses” to start delivering accessibility to your clients today.
In this article, we’ll introduce key points from the Americans With Disabilities Act (ADA) and showcase some websites that incurred accessibility lawsuits. Additionally, we’ll provide some tips and best practices that’ll help you avoid costly legal issues and ensure your client’s websites stay accessible to users.
Why is web accessibility important?
Web accessibility is a critical issue to consider when developing sites for your clients because inaccessible websites risk excluding visitors living with disabilities like hearing or vision impairment. Not only is this a form of discrimination, but it limits your client’s business growth by excluding a group of potential customers.
What’s more, digital accessibility can be a legal issue. The Americans With Disabilities Act (ADA) stipulates that failing to make accommodations for individuals with disabilities is a form of discrimination. As such, website accessibility lawsuits are becoming more and more common. In 2022, over 3,200 website accessibility lawsuits were filed in the US (Codemantra). For non-compliant businesses, these lawsuits represent enormous legal fees, fines, and bad press for failing to provide an accessible website.
What is the Americans with Disabilities Act (ADA)
The Americans with Disabilities Act was developed to protect individuals living with disabilities from experiencing discrimination. The ADA was signed into law in 1990 and prohibits discrimination in employment, transportation, places of public accommodation (stores, restaurants, office buildings, etc.), communications, and more. Under the ADA, websites and other communications platforms are required to make accommodations for individuals living with disabilities.
The Web Content Accessibility Guidelines (WCAG) were developed by the Web Accessibility Initiative (WAI) to set an international standard for web content accessibility. It was created in an effort to comply with the ADA and improve the web browsing experience for individuals with disabilities. These guidelines help web designers think through the different accommodations that need to be made for individuals with disabilities to ensure they can browse websites freely. They are the gold standard when it comes to designing accessible websites.
Real-world examples of web accessibility lawsuits
If you think the chances of being affected by a web accessibility lawsuit are low, think again. These lawsuits are becoming increasingly common and can impact businesses of any size. Here are some recent examples to be aware of.
Domino’s Pizza vs. Guillermo Robles
In 2016, a blind man named Guillermo Robles filed a lawsuit against the pizza chain Domino's after several unsuccessful attempts to order a custom pizza through its online platform. Even with the assistance of screen-reader software, Robles could not place an order online. Robles cited the ADA in the lawsuit, insisting that Domino’s has an obligation to make its website accessible for individuals with disabilities given that it’s a business with physical locations (places of public accommodation).
Domino’s fought back, claiming that there are no clear guidelines for accommodating the ADA on web platforms because they did not exist in their current form when the law was instated in 1990.
Ultimately, the Supreme Court sided with Robles. In June 2021, a judge ruled that Domino’s had violated the ADA by failing to provide a website that was fully accessible, and the company was ordered to make its site compliant with WCAG 2.0 standards.
Mary Conner vs. Parkwood Entertainment
In 2019, a class action lawsuit was filed against Beyoncé’s Parkwood Entertainment company, claiming that the website beyonce.com is in violation of the ADA for failing to accommodate visually impaired visitors.
The lawsuit argues that the website, a highly visual platform, failed to provide adequate alternative text on images throughout the site, making it impossible for blind visitors using screen reading software to adequately interpret or make purchases through the website. The lawsuit also lists other complaints about the website, including a lack of accessible navigational links and menus. The outcome of this lawsuit is still pending.
Gil vs. Winn-Dixie
A 2017 lawsuit against the grocery retailer Winn-Dixie accused the company of violating the ADA. Plaintiff Juan Carlos Gil brought forth the lawsuit after his screen reader was unable to interpret the website, preventing him from ordering products or accessing his account rewards. The plaintiff argued that the website should be considered a place of public accommodation, and thus, it must follow ADA guidelines.
Unfortunately, courts ultimately ruled in favor of Winn-Dixie, stating that customers who were unable to use the website could simply visit a storefront. However, despite winning the lawsuit, Winn-Dixie has committed to bringing its website into compliance with WCAG 2.0 standards to ensure it is fully accessible in the future.
National Association of the Deaf vs. Harvard + MIT
In 2015, The National Association of the Deaf (NAD), in partnership with individual plaintiffs, filed lawsuits against both Harvard and MIT. These lawsuits asserted that each university violated the ADA for failing to make free online content equally accessible for deaf and hard-of-hearing individuals.
After multiple attempts by both universities to have these website accessibility lawsuits dismissed, their motions were repeatedly rejected by courts. In 2020, both lawsuits reached settlements in which both Harvard and MIT are required to update publicly available online content to be equally accessible for individuals with hearing loss.
Website design tips and best practices for accessibility
Web accessibility is important from a moral standpoint. With an ADA compliant website, your clients can avoid discriminating against a portion of the population. Moreover, an inaccessible website excludes them from the benefits of your client’s products or services. Follow these website design tips to ensure you account for digital accessibility when designing websites.
1. Understanding WCAG 2.1 guidelines
Understanding the WCAG 2.1 guidelines is the first step to creating an ADA compliant website. The guidelines outline recommended accommodations for individuals with a wide range of disabilities, including vision impairment, blindness, hearing loss, photosensitivity, and more. The document is evolving, so anyone working in web development should stay informed on web accessibility standards and be prepared to adapt as new standards are introduced.
The WCAG guidelines are very detailed, but some essential elements of an accessible website include the following:
- Alt text that provides adequate descriptions of website images and visual elements
- Strong color contrast between website text and backgrounds
- The ability to browse a website using a keyboard (without a mouse or trackpad)
- Closed captioning on video content
- And more…
We’ll dig into each of these elements in more detail below, but this is just the beginning of what it takes to create an accessible website. Review the WCAG 2.1 guidelines to ensure any website you build for clients is compliant.
2. Designing for keyboard accessibility
Website visitors with vision impairment or motor disabilities may struggle to use a computer mouse or trackpad. Instead, these individuals rely on keyboard accessibility to navigate websites. The following are key components of a keyboard accessible website.
Keyboard focus
Keyboard focus elements are items like buttons, links, checkboxes, or fields that can be triggered or activated using a keyboard. On a keyboard accessible website, a user can control each of these elements solely through the keyboard. Keyboard focus refers to a visual indication that a particular element is selected, such as a colored outline around a text field or button. This focus indicator is essential for helping individuals identify which element of the website they are manipulating at any given time.
Tab order
The tab key is used to navigate from one keyboard focus element to the next. Logical tab order is critical for maintaining a positive user experience for individuals relying on keyboard accessibility features. In most cases, the tab order should be consistent with the visual flow of the page. In other words, elements should be selected in the order they appear on the page. However, the most intuitive tab order may vary depending on the page’s design.
No keyboard traps
The phrase “keyboard trap” refers to errors that may occur when navigating a website with a keyboard. For instance, if a user cannot navigate away from a particular focus element, that would be considered a keyboard trap. It’s crucial to thoroughly test every aspect of a website, including pop-up windows, widgets, galleries, and more, to ensure the site is free of keyboard traps. Don’t forget to test for keyboard traps on empty state pages, too, as they are essential for the browsing experience.
3. Providing alt text for images
“Alt text,” or alternative text, is a descriptive phrase or sentence embedded in the metadata of images on a website. Individuals with vision impairment use screen reader software to browse websites, and these screen readers rely on alt text to describe the visual elements of a website. Alt text should be included on every non-ornamental image on a site, including editorial images, graphs, infographics, diagrams, illustrations, and icons.
Tips for creating effective alt text
In most cases, the alt text should be short and to the point while providing context for the image. For example, let’s say you’re describing a photo of two dogs playing tug on a website about Labrador Retrievers. An example of effective alt text would be “Two Labradors play tug.” This text describes the image accurately while providing context by specifying the breed of the dogs in the image.
For more complex visuals, such as diagrams or graphs, two or three sentences of alt text may be required to communicate what the graph is showing. For instance, if the graph shows a Labrador Retriever's average weight based on age, the alt text might say, “A graph shows that Labrador Retrievers typically weigh X pounds at four months, X pounds at nine months...”
When writing alt text, ensure the description provides sufficient information for someone to understand what the image is communicating, even if they can’t see it.
4. Using appropriate color contrast
Incorporating adequate color contrast between text and webpage backgrounds is essential to web accessibility. When color contrast isn’t strong enough, visually impaired users may struggle to read and navigate the site effectively. Not only does this make for a terrible user experience, but it leaves the site owner vulnerable to a website accessibility lawsuit.
If the color contrast on a site is too subtle, those with vision impairment may struggle to read text, leading to a poor user experience. The WCAG 2.1 guidelines recommend a contrast ratio of 4.5:1 for normal text and a contrast ratio of 3:1 for large text on a website.
The WCAG 2.1 guidelines also provide recommendations around color contrast. If you’re unsure whether the font color and background color of a site you design offers sufficient contrast, you can use online tools the check. A quick Google search for “website accessibility checker” will provide several options. Remember to prioritize color contrast over trendy colors or designs when providing website design services to clients.
5. Avoiding inaccessible content
All content on a website needs to be accessible to individuals with disabilities, hence the color contrast and alt text requirements. If a website hosts video content, the videos should have audio descriptions or captions to make the content accessible for users with hearing impairment. Fortunately, many transcription services are available to help transcribe video content, and services like Rev and Otter Ai make it easy and affordable to source video captions.
With so many website visitors browsing on mobile devices these days, even individuals without hearing impairment appreciate captions on videos. Captions enable users to consume video content in public spaces where audio may be disruptive or hard to hear. With this in mind, including captions on your videos may increase your views by making them easier to consume.
6. Testing website accessibility
It’s one thing to design an accessible website and another to browse it as someone relying on accessibility features. Testing website accessibility is essential to ensure the site is truly functional for individuals with disabilities. Not only will this protect your clients from website accessibility lawsuits, but it will prevent them from inadvertently excluding customers with disabilities.
Website accessibility checkers are a great way to pinpoint accessibility issues with a client’s site. Tools like EqualWeb and AccessiBe are just a couple of examples of the numerous accessibility checkers out there. These tools scan websites and identify compliance issues which you can then fix to ensure the website is ADA-compliant.
Different accessibility checkers use different compliance standards as a basis for their scans, so ensure you select one that scans for ADA and WCAG 2.1 compliance. Otherwise, the checker may not catch all the accessibility issues you need to consider.
Frequently asked questions
What is an accessibility lawsuit?
A website accessibility lawsuit is a lawsuit against a website owner whose site fails to comply with the ADA guidelines around web accessibility. Namely, a business or individual can be sued if their website isn’t accessible to individuals with disabilities.
What is the largest accessibility lawsuit?
The largest accessibility lawsuit to date was the National Federation of the Blind v. Target Corporation. The lawsuit settled for $6 million in 2018.
