« Back to Blog

Top 10 Most Common Web Accessibility Mistakes

In our experience helping companies ensure web compliance, we run into 10 common accessibility mistakes. Ken Nakata, Director, Accessibility Consulting Practice at Cyxtera, discusses.

The importance of web accessibility standards has been recognized around the world. Making sure your company is compliant with the latest standards can help you gain valuable market share and avoid the risk of costly litigation, settlements and loss of reputation and business.

In our experience helping companies ensure web compliance, we run into 10 common accessibility mistakes. These are largely focused on the human factor of creating content instead of the framework for web accessibility.

  1. Image alt text – Providing equivalent text via the ALT attribute for an IMG tag is an area where we see many issues.
    a. The text is too limited to accurately provide an equivalent description.
    b. The text is too verbose and draws attention away from the primary purpose of the image.
    c. No ALT tag is provided at all which results in the IMG source being read to the user.
    d. Text is provided for an image that is purely decorative and should have an empty ALT attribute.
    e. Image maps include regions that are not properly labeled with an ALT attribute.

  2. Not providing a visual indication of current focus – Keyboard only users and screen magnification users rely on knowing where the current input focus is placed within the page. All too often, a page author fails to take into consideration the keyboard only user and deliberately or inadvertently hides this visual indication, typically by setting the outline style property to none. {outline: none}

  3. Failure to use proper labels – When elements are not labeled properly assistive technology will not be able to programmatically link the label with its input elements. This can make it difficult for users to understand the purpose of the input element. Some assistive technologies will try to auto-correct for this failure and, while many times successful, there are also many times an input element will be mislabeled with this method, which can lead to additional issues or confusion.

  4. Non-descriptive text for hyperlinks – Many times link text will not provide enough detail to allow for the understanding of the link’s purpose out of context. For example, links may be present on the page that use the text ‘click me’, ‘click here’. Since assistive technology can allow for users to find, sort and quickly navigate to the links on a page the text used for that link is important.

  5. Link areas are too small – A closely related issue is that web pages sometimes include ‘clickable’ target areas that are too small to allow users with dexterity issues to successfully navigate to and select those types of links with a mouse.

  6. Tables markup – Often tables are used for layout yet the page author fails to consider the way the data will be linearized which can lead to confusion for the user. Another situation could be that data tables are lacking in the proper mark-up to allow a user to obtain the information required to fully understand the data that is contained within a specific data cell. Often a simple data table will be presented in a way that requires a complex data table, yet the required markup is not included which creates accessibility issues.

  7. Proper use of header tags – All too often a page with considerable content will lack header tags which help the user to understand the relationship of the page content as well as provide a means to easily navigate through the page. When H1 through H6 tags are implemented, they are typically incorrectly used for a formatting only purpose.

  8. Color combinations – Using color combinations within the content that fall outside the allowable contrast ratios is a problem. We also see the mistake of using color as the only means of conveying information.

  9. Embedding non-accessible documents – Users will often embed PDF or other types of inaccessible documents.

  10. Same descriptive text for different resources – Mistake number ten using the same descriptive text for links that point to different resources.

If any of these mistakes hit too close to home, get our paper on the four accessibility issues that attract web accessibility litigation by clicking here.