In the spirit of curating end-of-year numbers, the DubBot engineers ran a query on all the accessibility issues encountered by our clients in 2023. Here's the top-ten list with a side of recommendations and best practices.
#1 Links with the same name must have a similar purpose
SC 2.4.9: Link Purpose (Link Only) Level AAA
Yes, we know that we’re starting with a AAA rule, and not everyone follows AAA. Most organizations concentrate on adhering to the current best practices of WCAG 2.2 AA. Regardless, the rule is that links in the content with the same description must have the same purpose or destination. In other words, where two links are on the same page using the same link text, the URLs must also be the same.
#2 Color Contrast
SC 1.4.3 Contrast (Minimum) Level AA
Have you ever tried to read a website on your cellphone while standing outside on a sunny day? If the developers of that website used proper contrast, that should have been a relatively easy task. Proper contrast makes all sorts of media easier to read for everyone - print, digital signage, and even closed captioning benefit from a 4.5:1 contrast ratio.
For more information, please see the Help Center documentation titled "Ensure proper Color contrast."
#3 Links must have discernible text
SC 2.4.4: Link Purpose (In Context) Level A
SC 4.1.2: Name, Role, Value Level A
It's a must for users, whether they're sighted or using a screen reader, to quickly figure out where a link will take them or what it will do. That's why discernible or descriptive link text is so important. Imagine surfing the web using a screen reader, looking for information on classic cars. You come across a group of images that are announced as links. However, there is no ALT text describing the image or the purpose or destination of the link. That's like having a GPS in your car that tells you to turn right but doesn't give you the street name. That's not very helpful; it does not let you know if you're going in the correct direction and is an excellent way to get lost. Website users must see, perceive (assistive technology users), and understand discernible text.
So, next time you add a link, think about it like giving driving directions – be specific, clear, and descriptive. It's not just about being accessible; it's about creating a space where everyone feels welcome.
For more information on discernible text and making links readable for assistive technology, see the Help Center documentation titled "Making your links "readable" for screen readers."
#4 Missing ALT text
SC 1.1.1: Non-text Content Level A
ALT text is 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 used as an alternative to audio files for people who are hearing impaired, 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 "Image Types and Alternative Text."
#5 Use supported ARIA attributes
SC 4.1.2: Name, Role, Value Level A
Okay, we're about to get "techie" on you. ARIA can be tricky, and this accessibility issue and #6 are no exception.
Not all ARIA role-attribute combinations are valid. Using the incorrect combination can create a barrier to accessibility. We discovered that the way YouTube programs logos to make "Subscribe" options pop out on "on-hover" is not accessible. It doesn't work with keyboard-only navigation, and here's why. A link without an href or other explicit role that would allow it to be focusable by a keyboard can not utilize an aria-label. This indicates that it should be read using a screen reader but that a user cannot access the element using just a keyboard.
#6 Certain ARIA roles must contain particular children roles
SC 1.3.1: Info and Relationships Level A
ARIA roles give assistive technologies information about how to handle an element. Some ARIA roles must contain specific child elements and roles to accomplish the intended function.
For example, if you use the ARIA role "menubar" to create a list of choices for your users, you must also use the associated children roles of menu, "menuitem," "menuitemcheckbox," and "menuitemradio" to give assistive technology users the ability to interact with the widget.
If you have a paid membership to HighEdWeb, you can access DubBot’s own Penny Kronz’s presentation "Knock knock... Who's there? ARIA (pronounced Are-EE-uh) ... ARIA who? ARIA wanting to learn about ARIA? If so, this session is for you!" If you are looking for an approachable introduction to ARIA basics, the why and when to use ARIA, and resources for learning more, Penny's presentation is right on the mark.
For more information on ARIA roles and assistive technology, see the Help Center documentation titled "Certain ARIA roles must contain particular children."
#7 Properly constructed lists
SC 1.3.1: Info and Relationships Level A
Making lists. We all do it. The list for the camping trip, the grocery list, the guest list. You grab a scrap of paper, scribble down a couple of items, and Ta-Da 🎉 Instant list. But when making a list in HTML, there is a rule to follow. Whether it's an unordered list (ul) or an ordered list (ol), make sure only to use <li> (ListItem) content elements. For example:
<ul>
<li>Apple Juice</li>
<li>Pancake Mix</li>
<li>Milk</li>
</ul>
#8 Ensures buttons have discernible text
SC 4.1.2: Name, Role, Value Level A
JJust like error #3, "Ensure links have discernible text," button elements and elements with the role="button" have to provide the destination, purpose, function, or action so users of assistive technology can choose to interact with it or not. Again, when creating discernible text for buttons, think of it like you are giving someone directions - be specific, clear, and descriptive.
And remember. If you use an image as your button, that image must have ALT text that describes the destination, purpose, function, or action of that button image.
#9 Frames must have an accessible name
SC 4.1.2: Name, Role, Value Level A
Now, let's talk frames and iframes. Just like a picture frame, frames and iframes are used to contain a separate piece of content. Typically, they are used to embed third-party content like a Google calendar. To make that frame or iframe accessible, you're going to want to add a valid title attribute that describes the contents of the frame. One thing to remember is that the title attribute only provides a label for the frame, not the content inside of the frame. So, if you have write permissions to the embedded content, give that content a title attribute identical to the frame title attribute. This is necessary because some screen readers substitute the frame title attribute with the embedded content title attribute.
For more information on accessible frames and iframes, see the Help Center documentation titled "Providing titles for iframes and frames."
#10 List items must be semantically correct
SC 1.3.1: Info and Relationships Level A
Yes, we realize that "semantically correct lists" sounds similar to #7, "properly constructed lists." But actually, there is a distinct difference.
When talking about being semantically correct, we refer to HTML elements that accurately describe what's contained in those elements. Clear as mud, right? Look again at this example:
<ul>
<li>Apple Juice</li>
<li>Pancake Mix</li>
<li>Milk</li>
</ul>
Wrapping the <li> tags inside of the <ul> open and close tags describes this list as an unordered list for users of assistive technology. And since this list is semantically correct, when the list is announced to the screen reader user, it will inform the user that it's an unordered list with three list items.
A properly structured list, #7 in our countdown, is a list that is constructed using the proper child elements. Here's an example of what not to do. We hope this clears things up.
<ul>
<h1>Do Not Do This</h1>
<p>Don't Do This Either</p>
</ul>
Happy New Year to you all. Here's to new beginnings, shared successes, and a prosperous 2024!
