a11y in Real Life: Excessive Labeling and ARIA

Do a quick Google image search for “may contain nuts”. Once you get past the sophomoric humor, you’ll see several photos pointing out labels on nut products saying they may contain nuts. It’s the result of all kinds of lawsuits and the inevitable legislation meant to protect food suppliers from more lawsuits. It’s a classic example of the American legal system in action, but it’s also a great example of why ARIA should be used sparingly, if at all, when building accessible websites.

If you look at this image of a bag of almonds, you’ll notice the ingredients lists one thing: almonds. You may be thinking, “I’d sure hope so!” You’d be correct in assuming a bag of almonds has only one ingredient. You should be able to safely assume that the bag contains almonds, and if you’re allergic to almonds, you’d avoid said bag, right? While we may laugh and joke about these labels, they are there for a reason. Someone, somewhere, got it wrong and had a bad time. Now we have to have labels that make it really clear.

Overdoing It

This practice of over-explaining works well for products, but is terrible for accessible websites. When considering using ARIA, remember the golden rule of ARIA: if possible, don’t. Use semantic HTML and let traditional technology do the work for you.

Using a button as an example, you may be tempted to do this:

<div class="button" role="button">Menu</div>

You see this a lot with menu buttons. Don’t do this. Divs are not buttons and should never be used as such. While this may be accessible, it is bad practice. An improved version might be this:

<a class="button" role="button">Menu</a>

This is much better, but still flawed. I won’t complain though because anchor tags being used as buttons is such a defacto standard that screen readers handle them like champs. We can do better.

<button class="button" role="button">Menu</button>

We’ve reached our “may contain nuts” conclusion. This is what happens when you try to graft semantic HTML on to a previously inaccessible system without really thinking it through. It’s a great effort, and is pretty accessible. The problem now is you have a screen reader announcing a button twice. If this is a regular practice, the user will get confused quickly and think the site is broken. They’ll leave, and you’ve just lost your client a potential customer.

Instead, we need to simplify our HTML and just let the semantic elements do their job:

<button>Menu</button>

Notice that I’ve even removed the CSS class. This has nothing to do with accessibility, but further illustrates the point. Just style the <button> element. If you have multiple button styles, then add the necessary CSS classes.

Back To Reality

The example given is an extreme one, but not entirely uncommon. It’s what happens when good intentions go bad. Some more realistic examples come from image use and the ALT attribute. Keyword stuffing issues aside, ALT attributes can also fall victim to this over-explaining problem. The ALT attribute is only to be used when there is text in the image that needs alternative means of being conveyed to the user. It is not meant to be descriptive (ie: a photo of beautiful red roses), as is the common misconception. If your image is purely decorative, a quality writer has already described the image. Adding the ALT attribute description is overkill, and impedes screen reader users.

The ALT attribute is its own article and is the subject of much debate between SEO experts and accessibility advocates. Just consider this information when building your ALT attributes.

When making your site more accessible, wanting to use ARIA is a good thing. Just remember, it isn’t always necessary. Don’t over do it. Otherwise your bag of almonds may contain nuts.