This content originally appeared on TPGi and was authored by TPGi
If you are just starting your digital accessibility journey, you may feel overwhelmed with all the information on the topic. Don’t worry: this article will help you understand some of the most common web accessibility issues you will encounter as you start reviewing and testing your website and applications for accessibility errors.
However, before diving into the most common web accessibility issues, it’s necessary to learn about the web content accessibility guidelines (commonly referred to as WCAG). The accessibility guidelines are curated by W3C and they are currently on version WCAG 2.1. Ensuring your company’s digital assets conform to WCAG 2.1 can help you provide inclusive user experiences to people with disabilities, such as screen reader users, keyboard users, or people with cognitive disabilities.
Thanks to our vast experience with helping companies ensure conformance across various digital products, we identified ten common accessibility issues that you need to focus on when conducting your accessibility audit.
Image alt text errors
Not including alternative text to images for screen reader users results in a confusing and negative user experience. Providing descriptive text via the alt attribute for an image tag is an area where we see many issues. For example:
- The text is too limited to accurately provide an equivalent description.
- The text is too verbose and draws attention away from the primary purpose of the image.
- No alt tag is provided at all, which results in the IMG source being read to the user.
- Text is provided for an image that is purely decorative and should have an empty alt attribute.
- Image maps include regions that are not properly labeled with an alt attribute.
Learn how to create inclusive alternative text with AmyJune’s #ID24 presentation, “Beyond 99 Red Balloons: A Pragmatic Guide to Alternative Text.”
Not providing a visual indication of the 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. (i.e., {outline: none})
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 assistive technology 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 for your users.
Non-descriptive text for hyperlinks
Many times, the 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 users to find, sort, and quickly navigate to the links on a page, the text used for that link is important for assistive technology users to quickly complete their tasks.
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.
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 users. Another situation could be that data tables are lacking in the proper markup to allow a screen reader 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.
Improper use of header tags
All too often, a page with considerable content will lack header tags that help screen reader users understand the relationship of the page content as well as provide a means to easily navigate through the page. When header tags (H1 – H6) are implemented, they are typically incorrectly used for visual formatting purposes only.
Color contrast
Using color combinations within the content that fall outside the WCAG 2.1 allowable contrast ratios of 4.5:1 is a major problem for color blind or low-vision individuals. We also see the mistake of using color as the only means of conveying information, for instance, adding emphasis on a word or section of a website. We created a free Color Contrast Checker to make it easy for you to find the perfect inclusive color scheme.
Embedding non-accessible documents
Users will often embed PDFs or other types of inaccessible documents. PDFs and other documents that are considered digital products (such as PowerPoints and Word documents) need to be made accessible for users with disabilities. Some of these programs have an accessibility checker built into the programs to help. You can review an on-demand webinar we hosted on how to make your PDFs accessible to learn more.
Same descriptive text for different resources
Using the same descriptive text for links that point to different resources. When focused on creating excellent user experiences, it’s best to make your descriptive text relevant and unique.
Some of the above accessibility issues can be detected through the use of automated accessibility testing tools like ARC. Start by scanning your website for free. When you are conducting an accessibility review of your website or digital assets, remember to keep the user experience at the forefront of your focus. As it’s nearly impossible to review your digital assets from every user perspective, it’s wise to make additional efforts and engage in usability testing.
If you have questions or need an accessibility audit, schedule a meeting to speak with one of our experts.
The post Top Ten Most Common Web Accessibility Issues appeared first on TPGi.
This content originally appeared on TPGi and was authored by TPGi
TPGi | Sciencx (2022-01-27T21:05:44+00:00) Top Ten Most Common Web Accessibility Issues. Retrieved from https://www.scien.cx/2022/01/27/top-ten-most-common-web-accessibility-issues/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.