Making accessible websites ensures that they are usable by the widest range of users, but also ensures your site is easier to read and navigate. It is important to make these changes to your websites to accommodate a variety of disabilities. Web creators and editor may have the best of intentions to ensure their content is accessible, but many common accessibility errors persist.
A survey by WebAIM shows that common accessibility issues and errors are prevalent in the top 1,000,000 websites. In fact, many popular websites also fall under this category.
Errors to avoid
1. Poor text colour contrast
According to WCAG 2.1 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 colour, while the second measures the brightness of the darker shade.
Use a colour contrast checker and if you find poor text contrast on your site, adjust colour scales to reach at least the 4.5:1 threshold.
Colour contrast for hyperlinks, if you do not underline your links (or provide some other non-color designator for links), that the links must be sufficiently different in contrast from the surrounding text. In order to be Level AA conformant, your page must have all of the following:
- A 4.5:1 contrast between the non-link text colour and the background.
- A 4.5:1 contrast between the link text colour and the background.
- A 3:1 contrast between the link text colour and the surrounding non-link text color.
Things you can adjust:
- Use black on white. Remember that black text on a white background has a contrast ratio of 21:1.
- Switch to large-scale text, defined as 14 point bold or 18 point fonts. According to WCAG 2.1, large-scale text has a lower minimum contrast of 3:1.
Learn more about colour contrast
Colour Contrast Analyser (CCA)
2. Missing or poor alt text for images
Alt text is most commonly used 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. Alternative text must give an accurate description of what the item is, so that the user’s assistive technology may convey what information is demonstrated by the item. This item is so important and often forgotten, it is the first guideline of WCAG 2.1 success criteria 1.1.1.
3. Improper hyperlink text
When including links in your content, use text that properly describes where the link will go. Using "click here" is not considered descriptive, and is ineffective for a screen reader user.
Just like sighted users scan the page for linked text, visually-impaired users can use their screen readers to scan for links. As a result, screen reader users often do not read the link within the context of the rest of the page. Using descriptive text properly explains the context of links to the screen reader user. Understanding WCAG success criteria 2.4.4.
The most unique content of the link should be presented first, as screen reader users will often navigate the links list by searching via the first letter.
For example, if you are pointing visitors to a page called "About Us":
- Try not to say: "Click here to learn about Queen's University."
- Instead, say: "Learn more about Queen's University."
4. Missing Input Labels on Forms
When form fields are not labeled appropriately, the screen reader user does not have the same cues available as the sighted user. It may be impossible to tell what type of content should be entered into a form field.
Each field in your form should have a descriptive label. This can be achieved by the HTML attribute <label> or, using WAI-ARIA specifications, aria-label or aria-labelledby.
As you are going through a form field, a person should be able to tab through the form and fill out all the fields before getting to the "Submit" button, or they may not even realize that additional fields exist. Essentially, the tab order should follow the visual order. Understanding WCAG success criteria 3.3.2.
Finally, the use of CAPTCHA is inaccessible and should not be used to validate submissions. WebAIM has a helpful summary of accessible alternatives (link is external) to CAPTCHA to keep forms free of spam submissions.
5. Missing headings or skipping heading levels
Screen reader users can use heading structure to navigate content. By using headings (<h1>, <h2>, etc.) correctly and strategically, the content of your website will be well-organized and easily interpreted by screen readers. Do not pick a header just because it looks good visually (which can confuse screen reader users). Understanding WCAG success criteria 1.3.1 and WCAG success criteria 2.4.6.
Examples of proper use of headings:
- Use <h1> for the primary title of the page. Avoid using an <h1> for anything other than the title of the website and the title of individual pages.
- Use headings to indicate and organize your content structure.
- Do not skip heading levels (e.g., go from an <h1> to an <h3>), as screen reader users will wonder if content is missing.