While web accessibility is undeniably an area filled with much complexity and many technical considerations, there are, in fact, only a handful of basic issues that are to blame for a staggering 97% of all website errors.
A study carried out this year by WebAIM found that a massive 96.8% of all home pages tested had a minimum of one error, per the Web Content Accessibility Guidelines (WCAG) 2.1 AA standards. In addition, the study also found that 96.5% of errors fell into one of of the six following categories:
- Low contrast text and graphics
- Missing Alternative Text for Images
- Empty Links
- Missing Form Input Labels
- Empty Buttons
- Missing Document Language
With the rise in accessibility lawsuits continuing apace, now is probably a good time to familiarize yourself with these very common and really rather easily dealt with accessibility basics, so that they don’t become a problem for your organization or website visitors in the future.
Accessibility Basic 1: Low Contrast Text and Graphics
Low contrast text and graphics can sometimes look visually appealing, but can be difficult to perceive for many visitors, such as those with low vision. Instead, consider more user-friendly alternatives to this that are more easily perceived by all people. Use a color contrast check tool if in doubt.
Accessibility Basic 2: Missing Alternative Text for Images
Images that are not accompanied by alternative text, or ‘‘alt text’’ can cause significant problems for some visitors, particularly those who rely on assistive technology like screen readers to interact with websites. Make sure to add an alt text (sometimes also called alt tag) to all images that describes the purpose of the image on the page. Bear in mind that if an image is decorative in nature, then the alt attribute can be empty, but the tag itself still needs to be present. Here’s our guide on how to write good alt text.
Accessibility Basic 3: Empty Links
Empty links provide no context to allow a screen reader to know what the link is about. Some designers have been known to create empty links that resemble buttons by adding a background image via CSS styles, for example. This is not an accessibility friendly practice, however, and empty links should therefore be avoided in all cases.
Accessibility Basic 4: Missing Form Input Labels
When form input labels do not have an associated label, screen readers are unable to read them. In such cases many users will be forced to navigate forwards or backwards to try and get some context on what the input actually means. This is something that can easily become confusing and may not even be possible when filling out more complex online forms. Either way the solution is a simple one: add a label associated with the search input.
Accessibility Basic 5: Empty Buttons
All website buttons require text that describes their function to users of assistive technology. If a button is empty or contains no text that describes its function, it will be a real barrier for many potential website visitors. In the case of image buttons, be sure to apply alt text that describes the function of the button in the same manner.
Accessibility Basic 6: Missing Document Language
If a web page is missing a language declaration, assistive devices will be unable to determine what language the page is being presented in, as it will not be outputting the required language attribute on the HTML tag. To avoid this issue, be sure to assign the proper language attribute value to your web pages.
What Next?
While achieving a 100% accessible website may be something that currently remains out of reach for many organizations, it is important to keep in mind that the overwhelming majority of issues that fall into the categories covered above can be dealt with both quickly and easily, especially when a little bit of foresight and intelligent planning is applied.
As pretty much anyone currently involved with web accessibility will tell you, achieving it is an ongoing journey, and not a final destination. By keeping on top of these six basic areas, however, you can help ensure that your organization has the most common problems factored in ahead of time, so that they don’t end up becoming a headache for you or your website visitors further down the road.
Get a complimentary web accessibility scan
Curious to see how your website stacks up to WCAG 2.1 AA regulations? We'd be happy to offer a complimentary website accessibility scan to help you take the first step to achieving compliance.
