The web is a beautiful and wonderful place filled with valuable information, pictures of cats, and magical stories. As someone who works in the industry, I find a special joy landing on a site that is well designed with nice interactions and subtle animation. But what if I couldn’t see any of it? What if I didn’t have the ability to visually target something and click it with my cursor or tap it with my finger? What if a robot had to tell me the information on the page?
The web is a much different place for a visually impaired user. In a recent session with our friend Kevin, one of his quotes hit me in the face like a brick as he tested an ecommerce site: “...if I were trying to buy this pair of pants, I’d have given up by now.” Watching Kevin try to navigate this site using only his keyboard and Apple’s VoiceOver was fascinating and enlightening.
This is the first in a series of articles that will share some of the things a couple other Sparkboxers and I have learned and basic techniques that we are putting in place to help users like Kevin experience less frustration and get to the information they need. I will focus on people using Apple’s VoiceOver, but much of the findings are pretty universal. In this article, I will focus specifically on aria-label and our experience around it based on our findings from several sessions with Kevin.
Aria Label
Aria (Accessible Rich Internet Applications) attributes are not some magic thing that W3C is hiding from everyone. But for some reason, we don’t see them much on a lot of websites.
As Kevin explored our client’s site, he came across a button on the site that read “ADD TO CART.” VoiceOver took this and spelled out “A-D-D to cart.”
The code looked something like this:
<button href=”#” class=“button—primary”>Add to Cart</button>Because there was no aria attribute attached to the button, VoiceOver was reading “ADD” as an acronym. This was kind of perplexing because even though the text was being changed to uppercase via CSS, it still read as “Add to Cart” in the DOM. So VoiceOver was reading the rendered text, rather than what was in the DOM.
We add aria-label to the HTML:
<button href=”#” class=“button—primary” aria-label=”Add to cart”>Add to Cart</button>Now VoiceOver sees the label and knows exactly what to speak out to a visually impaired user.
aria-label can also effectively be put into place in UIs that use icons for buttons.
Eg:
<button href=”settings” class=”gear-icon—wrapper” aria-label=”settings”><span class=”gear-icon”></span></button>It’s Just that Easy
Using the aria-label attribute is such an easy way to make your website more accessible to users who need screen readers. After applying this practice to our site and bringing Kevin back, I felt like much less of a jerk watching him use our site than I did before.
Check out my next article where I’ll talk about improving large, complex menus!
