In 2021, thousands of U.S. businesses faced web accessibility lawsuits — and that number is expected to rise in 2022.
The Americans with Disabilities Act (ADA) requires organizations to provide accommodations for people with disabilities, and the Justice Department has repeatedly confirmed that the ADA applies to websites. While the ADA doesn’t include a technical standard for web accessibility, many international laws are based on the Web Content Accessibility Guidelines (WCAG), the consensus standards for developing accessible web content. WCAG is frequently cited in ADA lawsuits, court decisions, and structured settlements.
And while compliance is important, brands have other reasons to build a better web experience for all users. About 1 billion people worldwide live with some form of disability, and following WCAG can dramatically improve your website’s reach. Accessible websites are often cheaper to maintain and perform better in search engine rankings.
In other words, if your brand hasn’t focused on digital accessibility, it’s time to start. Below, we’ll look at six common WCAG conformance issues that create a poor experience for users with disabilities. For more guidance, download our free Definitive Website Accessibility Checklist.
1. Missing Alternative Text for Images
Image alternative text (also called alt text) provides a description of non-text content, ensuring that people who cannot perceive the content visually can enjoy an equivalent experience. If someone accesses your website with a screen reader (software that converts text to audio or braille output), the alt text provides another way to understand the visuals.
Unfortunately, many designers and developers miss the opportunity to provide alternative text. In WebAIM (Web Accessibility In Mind)’s 2021 analysis of the internet’s top one million websites, 26% of all home pages had missing alt text.
Make sure your alt text is accurate, descriptive, and useful. Provide a clear description of each image using the first words that come to mind, using plain language. Images that are purely decorative (such as dividers) do not require alt text.
Read: 5 Steps for Writing Alt Text for Accessibility
2. Poor Color Contrast
For people with low vision, color blindness, and other conditions, low-contrast text can be difficult to read. WCAG 2.1 Level AA guidelines recommend a color contrast ratio (the difference in light between text and background elements) of at least 4.5:1 for regular text and 3:1 for large-scale text.
Many designers don’t consider accessibility when deciding how to present text. WebAIM’s 2021 analysis found that 86.4% of homepages had low-contrast text that failed to meet WCAG thresholds. In many cases, this accessibility issue can be addressed easily; tools like the free Color Contrast Accessibility Validator to help with remediation.
Read: The Basics and Importance of Color Contrast for Web Accessibility
3. Keyboard Accessibility Oversights
Many people browse the web without a mouse. Keyboard accessibility barriers can prevent these users from interacting with your website — and severe issues may stop people from regaining control of their browser or assistive software.
Among other times, keyboard accessibility issues may occur when a website uses third-party widgets, improper WAI-ARIA markup (which we’ll address below), or poor visual focus indicators. You can perform a basic accessibility test by accessing your website without a mouse, but if your content is complex or dynamic, you’ll want to perform a full accessibility audit to find (and fix) barriers that affect keyboard users.
Read: Why Keyboard Traps Are One of the Most Frustrating Accessibility Issues
4. Ignoring Heading Tags
Heading and subheadings help to structure your content — and if you’re writing a lot of text (as we’re doing in this article), they’re indispensable.
Headings need to use a logical order (H2 tags divide the content under an H1 tag into smaller sections, while H3 tags divide each H2 into smaller sections, and so on). They should also clearly describe the content. For example, in this piece, we’re using an H2 heading tag for each accessibility mistake. This allows readers to scan the page to find the information they want to read.
Heading tags are useful for people who use assistive technologies to browse the internet, and they’re also an important search engine optimization (SEO) signal.
Read: How Headings Help People with Disabilities Navigate a Website
5. Missing Video Captions and Transcripts
Videos can keep your audience engaged, but any content that requires a specific type of sensory perception can create barriers for some users. About 15% of American adults report some degree of hearing loss, and many web users prefer to browse without audio — if you provide captions and transcripts, you’ll provide these users with a better experience.
Make sure your captions and transcripts provide all of the details needed to understand your content. For example, if a video contains important sound effects, provide a description of those sounds.
When adding video content to your website, avoid using autoplay and make sure your media player is accessible. Wherever possible, give users the option to turn captions off or adjust the size, color, and font of the text.
Read: Tips for Making Multimedia Accessible for People With Hearing Disabilities
6. Misusing WAI-ARIA
WAI-ARIA (Web Accessibility Initiative — Accessible Rich Internet Applications) is a specification that provides semantic definition for certain types of on-page elements. If your website has dynamic content, correct usage of WAI-ARIA can make the content more useful for people who use screen readers and other assistive technologies.
However, the first rule of WAI-ARIA is to avoid using it: If you can accurately define your content with semantic HTML5, then do so. Improper use of WAI-ARIA can create accessibility barriers, but since most developers don’t use assistive technologies regularly, they might not notice improper syntax or other mistakes.
With that said, ARIA serves an important purpose for certain types of content. If you use WAI-ARIA, work closely with your accessibility partner and test your markup regularly.
Read: 5 Common Misconceptions About WAI-ARIA and Accessibility
To correct website compliance issues, audit your content
In this article, we’ve listed some of the most common WCAG violations — but to find all of the issues that affect real-life users, you’ll need to test your content for WCAG conformance.
The Bureau of Internet Accessibility uses a four-point hybrid testing methodology that combines manual and automated tests, providing a clear path to earning (and maintaining) compliance. Get started with a free, confidential WCAG 2.1 Level AA graded report or contact us to learn how we can help your website meet its accessibility goals.
