Web accessibility helps to make the world wide web usable for everyone. However, many people don’t use the web in a traditional way, and this is often overlooked by web developers, designers and content authors. Many of the most common accessibility issues making sites difficult or impossible to use in a non-traditional way can be easily fixed. Research on programmatic accessibility issues (those commonly detectable by a program) and user-centric accessibility issues (those commonly detected by an accessibility expert) shows that these accessibility issues come up the most.
The most common accessibility issues are:
- Low contrast on text
- Missing alt text on images
- Missing link text
- Ambiguous link text
- Too many navigation links
- Empty form labels
- Unclear form controls
- Time-outs that can’t be controlled
Top 8 Most Common Accessibility Issues to Avoid and Solve
1. Low Contrast on Text
In WebAIM’s programmatic analysis of the top 1,000,000 homepages, low color contrast on text was the most common accessibility issue, affecting a shocking 85% of pages. The Web Content Accessibility Guidelines 2.0 (WCAG 2.0), the gold standard for web accessibility, requires contrast of at least 4.5:1 on typical text. This makes it discernible to all users, including those with low vision or color blindness.
Contrast is generally easy to fix. It can be fixed wherever individual problems occur, or it can be fixed site-wide by changing the theme. Use accessibility testing tools like a color contrast checker to make sure there is enough contrast between your text and other elements like the highlight or background. Remember that the theme may designate different colors for headings, captions, lists and other types of text.
2. Missing Alt Text on Images
This is another very common accessibility issue that is easy to fix. Detected in WebAIM’s study, missing image alternative text (alt text) appeared on 68% of websites. Older accessibility studies between 2006 and 2013 cite this problem multiple times as well, indicating that this is a known accessibility issue that has not gone away.
It is worth noting that, though alt text is helpful on any image, there are some exceptions to the requirement. WCAG 2.0 states in section 1.1.1: “If non-text content is pure decoration… it can be ignored by assistive technology.” If the image is purely decorative and does not inform the content or the experience, alt text may not be needed.
The easiest way to solve this common accessibility issue is to give all images clear and simple alt text when they are entered into the site. This means that anyone with the ability to enter content on the site — including bloggers, photographers, site administrators and everyone in between — should know the importance of accessibility and how to give alt text to images.
3. Missing Link Text
Links are one of the main ways we all get around the internet — we use links to enter sites, move through them, and go between them. If it isn’t clear where a link is, where it’s going, or how to activate it, moving around a site becomes much more difficult.
Missing link text means that there is no text used to represent a hyperlink. It might be just an image or a button, but someone who cannot visually see the site and uses a screenreader instead cannot interpret it as a link. This can be solved by either hyperlinking applicable text or including alt text for the link.
4. Ambiguous Link Text
You’ve probably seen link text that reads “click here” or “more information.” When a screenreader reads this, it does not tell the user what the link is for or where it goes. Instead of hyperlinking ambiguous text, it is better to use brief but informative text. This can be easily overlooked in the site’s design by creating ambiguous navigation links, or by content creators using ambiguous link text in blogs or other content pieces.
5. Too Many Navigation Links
Screenreaders and other assistive devices must read out or click through navigation links before getting to the main site content. If you have 50 navigation links at the top of your site, this presents obvious problems. A better way to do this might be using search bars, sub-navigations, or a skip navigation link. Skip navigation links allow users to skip the navigation and go directly to an anchor point, usually at the start of the site content. Since they cover so many departments and so much information, this accessibility issue is especially problematic for many local and state websites.
6. Empty Form Labels
Forms are one of the most common website functions users interact with. It can be as simple as a subscribe form requesting a user’s name and email, or as complex as a job application form. Forms are also one of the most common causes of accessibility issues.
Form labels tell screenreaders and their users what information a form field requires. These labels are not always clear or readable to a screenreader. Some websites use pre-filled text within a form field to show what it is for, and this can present problems to assistive devices. Go through your forms and ensure the form labels and inputs are clear.
7. Unclear Form Controls
Some form controls, such as “next page” or “submit,” are clear, but others are more ambiguous. A date selection tool, for example, might not be clearly expressed with a screen reader, or easily usable with assistive devices. A number of simple testing strategies will show you whether your form controls are accessible or not.
8. Time-Outs Cannot Be Controlled
For security purposes, many forms will expire after a set time period, especially purchasing forms. However, it often takes longer to use forms with a screenreader or another assistive device. Users must be able to know when the form is about to expire, and they must be able to extend the time limit when needed.
Fixing these top 8 most common accessibility issues means avoiding issues that over 90% of other sites face. While this alone doesn’t guarantee that your site will be accessible — remember that accessibility is about function, not form — it will go a long way towards that goal.