Every year since 2019, the Institute for Disability Research, Policy, and Practice’s WebAIM project has published an analysis of the top million home pages on the internet, evaluating them for accessibility flaws. While there’s evidence that the web is getting slightly more accessible — the number of accessibility errors decreased by 15.6% between February of 2020 and the same month in 2021 — the fact remains that more than 97% of home pages still showed violations of Web Content Accessibility Guidelines (WCAG) in WebAIM’s 2021 analysis.
By definition, these accessibility errors have “notable end user impact.” They’re creating barriers. That’s not just an ethical issue; it also has bottom-line effects. There’s no good reason to limit your audience. To broaden the reach of your content, check for the accessibility problems listed below.
Here are the top five most common website accessibility issues, according to the 2021 WebAIM Millions report.
1. Improper Text Contrast
According to WCAG 2.2 success criteria 1.4.3, online text must have a minimum contrast ratio of at at least 4.5:1. The first value in this ratio refers to the brightness of the lighter color, while the second measures the brightness of the darker shade.
WebAIM reports that 86.4% of the home pages they studied included contrast ratios lower than 4.5:1, defined as “low-contrast.” That can make the text illegible to people with even moderately low vision. If you find low-contrast text on your website, adjust color scales to reach at least the 4.5:1 threshold. When in doubt, remember that black text on a white background has a contrast ratio of 21:1. Another option is to switch to large-scale text, defined as 14 point bold or 18 point fonts. According to WCAG 2.2, large-scale text has a lower minimum contrast of 3:1.
2. Omitting Alternative Text for Images
As we’ve mentioned in previous blogs, alternative text — also known as alt text — is a crucial accessibility feature that should be included in all images. WCAG 2.2’s very first guideline instructs webmasters 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.” The most common use of alt text is to describe images, which is especially important when images contain links. Without alt text, someone using a screen reader won’t know where the link leads.
WebAIM found that 60.6% of the top million home pages on the internet had missing alt text on images in February 2021. Half of the images that were missing alt text were linked. But it’s not enough to ensure that all the images on your site include alt text; that text must also be useful. Avoid these eight common alt text mistakes to ensure greater reach for your content.
3. Missing Input Labels on Forms
Success criterion 3.3.2 of WCAG 2.2 asks webmasters to include labels or instructions “when content requires user input.” On forms, this requirement is satisfied by the HTML attribute <label> or, using WAI-ARIA specifications, aria-label or aria-labelledby. Without these labels, users of assistive devices don’t know what the site is asking for; the instruction is missing.
Despite the centrality of form input labels for basic functionality, 54.4% of home pages featured forms without labels in 2021. Of the 4.4 million form inputs on those million pages, 45% lacked labels, which is an improvement over 2020’s 55% and 2019’s 59%. If you post forms on your site, remember to include input label attributes.
4. Links Without Text
“Empty links” are links that don’t include a descriptive text element, which screen readers use to convey the destination of a link. This is clearly a core navigation feature; empty links are frequently confusing for visitors using screen readers. Empty links also featured in an accessibility lawsuit against Kraft Heinz in 2021.
WebAIM found empty links on 51.3% of the sites it studied that year. The solution is to avoid using font icons as replacements for text. Include descriptive text in the HTML of every link. In addition, avoid ambiguous link text and ensure all links function with a keyboard in the absence of a mouse.
Read: Quick Guide to Accessible Hyperlinks.
5. Failure to Specify Language
Screen readers typically stick to the user’s default language, but multilingual users may switch between languages. In order to pronounce the text legibly, the screen reader needs to make the same adjustment. Webmasters specify language using the HTML lang attribute, which becomes especially important if a site switches languages mid-page. Success criterion 3.1.1 of WCAG 2.2 requires pages to specify these languages, both at the level of the whole page and on a passage-by-passage basis.
Missing document language is the fifth most common accessibility error WebAIM discovered in 2021, with 28.9% of the home pages in the study featuring this mistake. When designing your website, don’t neglect your lang designations.
Find and Correct Accessibility Errors on Your Website
There’s a reason so many of the sites in the WebAIM study make accessibility errors: These flaws often go unnoticed by webmasters. The key to improving access on any website is to make accessibility a design philosophy from the start. If your site’s already established, the next best option is a comprehensive compliance audit from the Bureau of Internet Accessibility.
We use a combination of digital assessment tools and expert staff — testers who reflect your site users’ diversity — to uncover the hidden design features that create unacceptable barriers to use. We also offer training and staffing services to help your team eliminate these accessibility flaws. Get started with a free WCAG compliance report from the Bureau of Internet Accessibility.
