Accessibility & Inclusion

Six Accessibility Basics to Address the Most Common Web Errors

August 25, 2022 5 minute read

Understand the six accessibility basics that can transform your website into an accessible platform. Avoid common pitfalls and embrace inclusivity.

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 2022 study conducted by WebAIM (Web Accessibility In Mind) found that a massive 96.8% of all home pages tested had a minimum of one error, per the Web Content Accessibility Guidelines (WCAG) 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.

1. Low contrast text and graphics

While low contrast text and graphics can sometimes look visually appealing, some people, including those with a visual impairment or those who lose color sensitivity due to aging, cannot read text if the color of the text is too close to the background color. Instead, consider more user-friendly alternatives to this that are more easily perceived by all people. And when in doubt, a quick way to check if your text has an adequate color contrast is to use our free Color Contrast Checker. Simply select your background and text colors and see whether your color contrast ratio complies with the WCAG standards.

2. Missing alternative text for images

Alternative text (alt text), found in the HTML code, describes the purpose of the image or graphic so people who have a visual impairment that use screen readers and search engines can understand the image. Images that are not accompanied by alt text can cause significant problems for some visitors when they try to interact with websites. If the image shows useful information about the topic or how to interact with a page, it needs alt text. Keep it concise and avoid keyword stuffing. If the image is decorative and does not have a purpose, the image should be reconsidered or the alt text should be ‘null’ (alt=""). Review our guide on how to write good alt text.

3. Empty links

An empty hyperlink is a link that does not have any associated content. It lacks text that explains what will happen if the user selects the link. This link context is important, especially for screen readers or people who rely solely on a keyboard to navigate the internet. When a user navigates to an empty link, the focus indicator might disappear and the user won't know where they are on the page. 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.

4. Missing form input labels

When form inputs do not have an associated label describing what information to enter, 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.

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.

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.

Making your website accessible

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 AA regulations? We'd be happy to offer a complimentary website accessibility scan to help you take the first step to achieving compliance.