I am building an app which has to be WCAG compliant. It requires about 12 buttons. Some of the buttons have only tooltips and icons but no labels. I haven't been able to find clear cut language in WCAG about this problem. Are titles necessary for buttons?

CodePudding user response：

Short Answer

You should add aria-label to your buttons.

Longer Answer

Buttons need a name that can be computed for accessibility. First to answer your questions:

Are titles necessary for buttons?

No

Should buttons have labels from WCAG point of view?

No once again, in fact they are probably not valid.

So what should I do?

Buttons don't need titles or <label>s (in fact a <label> on a button would probably not be valid without some WAI-ARIA).

But, they do need to have an accessible name, and I think this is the part that is causing confusion.

Because your buttons only have an icon and a tooltip, they probably / possibly do not have any text that is useful to assistive technology (such as a screen reader).

So when they reach a button with just an icon using a screen reader they will hear "button", with no indication of what the button is for!

The fix

There are several ways to approach this, but the easiest is aria-label.

WAI-ARIA is a set of attributes you can add to HTML elements to add extra meaning / semantics to make a page make more sense to assistive tech users.

The aria-label attribute, when used on an interactive element (such as a button, an anchor / hyperlink etc.), will indicate the the browser "hey, please present this as the accessible name for this element.".

So in your example, something similar to the following would ensure that the purpose of a button is clearly described:

<button aria-label="Add New Document">
  <!-- your icon -->
</button>

So instead of just saying "button" when focused it will now say "Add New Document, button".

CodePudding user response：

Short answer

Yes, your button must have so form of text label associated with it. But don't be confused with <label>, which is normally unneeded for a button.

Long answer

The answer isn't answered directly in WCAG, but this is a question of perception, which is the first WCAG core principle.

If your button has only an icon but no alternative text or label, it follows that screen reader users won't perceive your button. So, in the broad sense, yes, your button must have a kind of label.

You have several ways to set an accessible label, technically known as accessible name, to a button having no text itself:

• Attribute alt of <input type="image"/> or the <img/> which is inside the button
• aria-label or aria-labelledby attributes
• Visually hidden text

Don't be confused with <label> element. It's unneeded for a button, since a button usually carry its own accessible name. An <input type="text"/> need a separate <label> because it has typically no accessible name otherwise.

This may also be a question of understandability, which is the second WCAG principle.

Even for perfectly sighted people, are you sure that the meaning of your button without any text is crystal clear ? Few icons are known to be almost universally understood by everybody without any hint, any help, any tooltip, nothing. IN that quite small list you can certainly find multimedia buttons (play/pause/stop/record), parameters/settings wheel, power on/off, but probably not many more.

As a consequence, the question isn't only about having an accessible name for screen readers. It goes much beyond that.

To wrap up, yes, your button definitely must have some form of text label associated with it.