CODEWITHSUNDEEP
htmlaccessibilitywai-ariawcagwcag2.0
ms87
ms87

Reputation: 17492

WCAG Compliance - Element with role="button" and no content

I'm trying to develop a WCAG compliant web app, currently codesniffer is giving me lots of:

This element has a role of "button" but does not have a name available to an accessibility API. Valid names are: element content.

From this HTML:

<span unselectable="on" class="k-select" aria-label="abcd" role="button"  alt="abcd" title="abcd" value="abcd">
  <span class="k-icon k-i-calendar"></span>
</span>

Setting alt, value, title and aria-label seem to do no good. How can I have a WCAG compliant element with role="button" with no text inside it?

Upvotes: 2

Views: 2469

Answers (2)

aardrian
aardrian

Reputation: 9009

Adam is right to convert this to a <button>. That is the best approach from the start and also means you can dump the role="button". It also means you get accessibility of interaction for free (you don't have to listen for a Space bar or Enter key, for example).

Instead of trying to make the <button> itself have the accessible name, put it on the icon. If you do that consistently, you can be certain the icon always has an accessible name, regardless of whether or not it is in a control like a button or a link.

So consider this HTML:

<button class="k-select">
  <span class="k-icon k-i-calendar">Calendar</span>
</button>

Now you have a normal button that has not been jury-rigged with attributes to try to make it accessible. The icon, on the other hand, has text within it now, and that becomes the accessible name.

Now apply this CSS rule to visually hide that text:

.k-icon {
  position: absolute;
  top: auto;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE 6/7 */
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  white-space: nowrap; /* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe */
}

I usually have this as a utility class (.visually-hidden) so that I can apply it wherever.

FontAwesome talks about an approach similar to this on its site for making its icons accessible.

With this approach, you do not need any ARIA, any one-off code solutions, nor any script. This works for your icons first (the real issue) and means when those icons are used elsewhere (links, buttons, etc) they are accessible.

Also, neither alt nor value is valid for a button. aria-label is unnecessary. Definitely avoid title.

Upvotes: 4

Adam
Adam

Reputation: 18807

You can use a button element with the aria-label and title attributes :

 <button class="k-select" role="button"
        aria-label="alternative for screen readers"
        title="alternative for other users"
        value="abcd">
   <span class="k-icon k-i-calendar"></span>
 </button>

Upvotes: 3

Related Questions