To wrap up 2024, our engineers have identified the top five accessibility hurdles the DubBot app reported to our clients.
#1 Color Contrast
SC 1.4.3 Contrast (Minimum) Level AA
Have you ever struggled to read a website on your phone outdoors? Proper contrast makes reading easier for everyone, from print to digital signs and even closed captions. A 4.5:1 contrast ratio is ideal.
Color contrast directly impacts content readability for users with visual impairments, such as color blindness or low vision, making it crucial to ensure everyone can access the content on your website or digital documents.
By prioritizing color contrast, you make your website accessible to a broader audience. This small change can have a considerable impact.
For more information, please read the Help Center documentation titled "Ensure proper Color contrast."
#2 Links must have discernible text
SC 2.4.4: Link Purpose (In Context) Level A
You're in an upscale marketplace with beautiful surroundings and colorful artwork on the walls. You've come in to get a loaf of Artesian bread. As you begin to walk through the market, you notice that the aisles are marked with labels like "Item 16," "Special Offer," or "Look here." That's not very helpful; it does not describe what items you'll find on the aisle. And certainly makes it more difficult to find what you're looking for.
This same difficulty occurs when links are not crafted with clear, concise, and easily discernible text, or the surrounding content offers little to no assistance guiding users toward the link's intended purpose / destination.
S.C. 2.4.4 states that users should be able to determine the purpose of a link from the link text or the link text and its context.
Screen reader users need clear and concise link labels to understand where a link leads, and users with cognitive disabilities benefit from discernible links and surrounding context to help avoid confusion.
Links created with discernible text and surrounded by discernible content help users quickly understand the link's purpose and decide whether to click it.
#3 Ensure that links with the same accessible name serve a similar purpose
SC 2.4.9: Link Purpose (Link Only) Level AAA
While browsing the shelves at the library, you come across a row of books, all with the same title, "Web Accessibility in the 21st Century." You pull one from the shelf, open it up, and the topic is climate change and conservation.❓You select another from the row, and its topic is oceanography. 🤔 You decide to try again and pull a third book from the shelf. You open it up, and finally, you find the book about web accessibility in the 21st century. Since these books all have the same title, one would have expected them to have the same topic, correct?
Users should expect this when they visit a webpage and find links with the same name. For example, if two links have the same name, such as "read more on this subject," they must describe the same purpose to prevent user confusion.
One way to accomplish this is to add an aria-label attribute with the appropriate descriptive text to your link.
<a aria-label="Read more about Web Accessibility in the 21st Century">read more on this subject</a>
The text inside the aria-label will be read by the screen reader instead of the link text "read more on this subject."
This technique helps people who use screen readers or other assistive technologies understand where they're going and what they'll find.
For more information on using aria attributes for link purpose, read "Technique ARIA8: Using aria-label for link purpose" from the W3C.
#4 Missing ALT text
SC 1.1.1: Non-text Content Level A
Imagine there is a solution that helps screen reader users, hearing-impaired users, and sighted users with just a few words or sentences. That’s ALT text!
ALT text is probably one of the most versatile accessibility attributes out there. Picture this! (pun intended😉) ALT text describes images for people who use screen reader technology; it's an alternative to audio files for hearing-impaired people, and ALT text is visible when a link to an image is broken.
The most famous examples of good ALT text are the images from the James Webb Telescope. To quote Tim Rhue, an education specialist at the Space Telescope Science Institute, "Space is for everyone. It shouldn't matter who you are."
For more information about ALT text, see the Help Center documentation titled "Alternative Text for Images."
#5 Ensure aria-hidden elements are not focusable nor contain focusable elements
SC 4.1.2: Name, Role, Value (Level A)
You’re perusing the new local bookstore and have found two hard-to-find books on the history of accessibility. You start looking for the checkout counter but can’t find it. You ask several other customers, and they point and say, “It's right over there.” You continue looking everywhere—you just can’t find it.
Wow, what an extremely frustrating and irritating experience that would be.
That’s the same feeling an assistive technology user would have when trying to locate a "Checkout" button or a search field - an interactive element that should receive focus and be announced via a screen reader.
When an element has aria-hidden="true," it will not be presented to screen reader users but will be visible to sighted users. Using aria-hidden="true" will remove the entire element from the accessibility API. Therefore, never use aria-hidden="true" on elements that receive focus.
So there they are—the top five accessibility hurdles discovered by DubBot in 2024. By addressing these challenges, our clients have made their websites more inclusive for everyone because a truly accessible website is one that everyone can use, regardless of their abilities.
