Data for this guide courtesy © WebAIM - The WebAIM Million
In 2019 and 2020, WebAIM surveyed the homepages for the top 1,000,000 websites and compiled a list of the six most common accessibility mistakes. This guide will illustrate what they are and how to fix them.
- Low contrast text
- Missing alternative text for images
- Empty links
- Missing form input labels
- Empty buttons
- Missing document language
📊 86.3% of homepages in 2020
From the WebAIM Contrast Checker:
WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.
| Contrast Ratio ✨ | AA | AAA |
|---|---|---|
| Normal Text | 4.5:1 | 7:1 |
| Large Text | 3:1 | 4.5:1 |
| UI Components | 3:1 | NA |
| Text Size ✨ | Point | Pixel |
|---|---|---|
| Normal Text (normal font weight) | 12pt | 16px |
| Large Text (bold font weight) | 14pt | 18.66px |
| Large Text (normal font weight) | 18pt | 24px |
📊 66% of homepages in 2020
<img src="https://picsum.photos/840/472" alt="Random placeholder photo from Lorem Picsum" />Alt text attributes can be included but have a null value, and screen readers will skip the image. Use this method when an image is decorative and reading the alt text doesn't add value for the user.
<img src="https://picsum.photos/840/472" alt="" /><img src="https://picsum.photos/840/472" />📊 59.9% of homepages in 2020
By default the anchor element href attribute takes a URL, media file, telephone number or email address. Links should also have text so screen readers tell the user what they are clicking on. Links shouldn't just say Read more, Learn more, etc. That text does not tell users where the link will take them.
<a href="https://webaim.org">Read more on WebAIM</a>It's common to add icon fonts or SVGs to links and omit the text. Wrap the link text in a <span></span> and hide it with screen reader friendly CSS. Add aria-label="hidden" so screen readers don't read the SVG. Using display: none; or visibility: hidden; removes it from the DOM, and screen readers won't read elements styled that way.
.screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
margin: -1;
clip: rect(0 0 0 0);
}<a href="https://webaim.org">
<span class="screen-reader-text">Read more on WebAIM</span>
<svg aria-label="hidden" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 10.935v2.131l-8 3.947v-2.23l5.64-2.783-5.64-2.79v-2.223l8 3.948zm-16 3.848l-5.64-2.783 5.64-2.79v-2.223l-8 3.948v2.131l8 3.947v-2.23zm7.047-10.783h-2.078l-4.011 16h2.073l4.016-16z"/></svg>
</a>📊 53.8% of homepages in 2020
Use the for="" attribute on the <label>, and use a matching id="" attribute on its <input>.
<label for="name">Full Name</label>
<input id="name" type="text" name="fullname" placeholder="Full Name" />When you want to hide the form label, use screen reader friendly CSS.
<label class="screen-reader-text" for="name">Full Name</label>
<input id="name" type="text" name="fullname" placeholder="Full Name" />If you aren't hiding form labels, they can also be wrapped around the form element.
<label for="name">Full Name
<input id="name" type="text" name="fullname" placeholder="Full Name" />
</label>📊 28.7% of homepages in 2020
For the purposes of this guide, buttons are similar to anchor tags (links) and also need text. If your button needs to link to something, you're better off using an anchor and styling it like a button.
There are three button types; submit and reset (forms), and button. The type="button" attribute doesn't have default functionality, so you can have it do just about anything.
<button type="button">Read More</button>Like links, it's common to use icon fonts and SVGs with the button element. Make sure to add button text and hide it with screen reader friendly CSS.
<button>
<span class="screen-reader-text">Read more</span>
<svg aria-label="hidden" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 10.935v2.131l-8 3.947v-2.23l5.64-2.783-5.64-2.79v-2.223l8 3.948zm-16 3.848l-5.64-2.783 5.64-2.79v-2.223l-8 3.948v2.131l8 3.947v-2.23zm7.047-10.783h-2.078l-4.011 16h2.073l4.016-16z"/></svg>
</button📊 28% of homepages in 2020
Add a language attribute to the <html> element so screen readers know which language to use when reading the site.
<html lang="en"></html>I encourage you to continue reading and learning about accessibilty. This topic goes far beyond what is outlined in this guide. Knowing that 98.1% of the websites surveyed had a detecable error implies that fixing these six things could have a vast improvement on overall web accessibility.
Cheers!
Angela 💕