Followup On Unlabeled Widgets

After my previous post, about labels, @ted_drake commentedIs there a reason why you didn’t simply add text to the button?” which is a good question! The short answer is, we don’t want to render the text in the button. Instead we want to keep it a graphical icon.

But this question demands an emphasis:

WAI-ARIA is a last resort, it is designed to be a stopgap that augments conventional HTML markup. As HTML evolved, many of the problems ARIA solves have been eliminated. Often, if you are using ARIA you are making a mistake. As Ted continues to say: “…the first rule of ARIA is to not use it when there is a standard alternative.

So back to the issue of labeling controls and elements; aria-label is a last resort. The best option is rendered text, so the visual display is consistent with the accessible naming, for example <button>Press me</button>. After that there are two attributes that can be used, title and alt.

An image may have an alternative textual description, that is what the alt attribute is for. Almost any element may have a title attribute, which will provide a human readable name for the given object.

In fact, I was wrong in the earlier post. Instead of using aria-label, title would have sufficed. The only times aria-label should be used is when you don’t want a tooltip with the text to be visible on desktop, and for naming more complex composite widgets.

I just learned something new, I hope you did too!

Followup On Unlabeled Widgets

2 thoughts on “Followup On Unlabeled Widgets

  1. Hi Eitan, thanks for following up on this! I’m curious, though: In standard HTML, the title attribute causes a tooltip to be displayed by browsers once the mouse pointer is hovering over the item. Does this also happen now in the Firefox OS simulator, which runs within Firefox on the desktop?

  2. A third alternative would be to include actual text in the button, but to wrap it in something neutral like a span and use CSS to visually hide it (not display:none, as that nukes it out of the page for screenreaders as well, but something more subtle like positioning it off-screen, managing the overflow, clipping, etc).

Comments are closed.