The vast majority of websites have accessibility issues that make them less useful — or in some cases, entirely unusable — for people with disabilities. In 2021, non-profit organization WebAIM.org reported that across the top one million websites, 97.4% of home pages had detectable issues.
For organizations of all sizes, that’s a major problem: The number of accessibility lawsuits continues to rise each year, and websites and mobile apps are major targets. To comply with the Americans with Disabilities Act and other non-discrimination laws, brands should fully conform with Web Content Accessibility Guidelines (WCAG) at Level AA.
Below, we’ll look at several common WCAG failures that can raise an organization’s risk of compliance violations (and provide quick tips for addressing those issues).
1. Missing image alt text
WCAG Success Criterion (SC) 1.1.1 requires that “all non-text content that is presented to the user has a text alternative that serves the equivalent purpose,” except in limited situations.
Image alternative text (also called alt text) is particularly important for fulfilling this requirement. Alt text provides users with a way to understand the purpose of images if they’re not able to perceive the content visually. Many people use screen readers, software that converts content to audio or braille; if images don’t contain alt text, the screen reader can’t tell the user what they’re missing.
That can be especially problematic if an image serves an important purpose. In WebAIM’s 2021 report, 60.6% of home pages had missing alternative text for images — and unlike many accessibility concerns, missing alternative text can be identified with a quick automated scan.
Fortunately, this is an easy problem to fix. By adding a few lines of descriptive alt text to your images, you can quickly improve the browsing experience for folks who use assistive technologies (and greatly improve your chances of compliance with non-discrimination laws).
Related: How Do I Know If an Image Needs Alt Text?
2. Poor color contrast ratios
Color contrast is the difference in light between text and its background. WCAG SC 1.4.3 requires normal text (including images of text) to meet a color contrast ratio of at least 4.5:1, while large text (18 points or larger, or 14 points or larger and bold) should have a contrast ratio of at least 3:1.
So, how does poor contrast affect accessibility? Many users have low vision, color vision deficiency (also called color blindness), or other disabilities that affect how they perceive color. When text has poor contrast with its background, users can’t read it easily.
Poor color contrast is one of the most common accessibility failures, and it’s also one of the easiest issues to address. The Bureau of Internet Accessibility offers the a11y® Color Contrast Accessibility Validator, a free instant-analysis tool for evaluating your website’s conformance and finding accessible color pairs.
Related: The Basics and Importance of Color Contrast for Web Accessibility
3. Missing captions and transcripts
WCAG SC 1.2.2 requires captions for “all prerecorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such.”
Some users can’t perceive audio or visual content — and some users would simply prefer to avoid multimedia. An estimated 85% of Facebook videos are watched with the sound muted, so adding captions and transcripts isn’t just a way to improve accessibility; it’s a way to make sure your audience receives your message.
Adding captions to your content is much easier if you prioritize accessibility when creating multimedia. Write captions when drafting your scripts and make sure a text alternative is available wherever your users see video (including on social media). Avoid burned-in (pre-rendered) captions, which are less useful for people who use screen readers and other assistive technologies.
Related: What Website Developers Need to Know About Closed Captions
4. “Keyboard traps" and other keyboard accessibility issues
WCAG SC 2.1.1 requires that “all functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user’s movement and not just the endpoints.”
Many people use the keyboard (with no mouse) to navigate the web. If a user can’t access part of your website by using common keyboard commands, their experience suffers.
Web forms and other interactive controls may have severe issues that cause “keyboard traps,” which lock the user’s focus on one element, preventing them from navigating the page. Keyboard traps are one of the most frustrating accessibility issues to encounter, but unfortunately, they’re fairly common.
Make sure your website is keyboard accessible. Here’s a quick guide to performing a basic accessibility test by reviewing your content without using your mouse.
Related: What is Keyboard Accessibility?
Make sure your website fully complies with non-discrimination laws
In this article, we’ve outlined some of the most common issues cited in web accessibility lawsuits, but this certainly isn’t a comprehensive list. To limit your chances of litigation, the safest course of action is to earn Level AA conformance with the latest version of WCAG (currently, WCAG 2.1, with WCAG 2.2 expected for release later in 2022).
Accessible web design provides a host of benefits apart from legal compliance, including enhanced brand sentiment, lower development costs, and improved search engine positioning. Get started by receiving a free, confidential WCAG 2.1 Level AA conformance report or contact our team for a consultation.
