Button with icon labelled with aria-label still an 'Empty Button' error

Question

A button with an aria-label:

<button type="button" class="btn btn-default dropdown-toggle"
  aria-expanded="false"
  aria-label="Sort">
  <i class="fa fa-arrows"></i>
</button>

is still identified as an accessibility error ('Empty Button') by WAVE. Any ideas?

Shortwinded

Dunno, but Nicholas C. Zakas came to the conclusion, that he was better off with forgoing ARIA altogether in such a case, and going with simple text content that gets hidden in a screenreader-friendly way was the better way to go. – Aerobatics

Answer 1

Older screenreaders/browsers dont make use of ARIA. Using visually-hidden text is a more robust method, as in the link CBroe left in the comment above.

Anima

Not accessible, though. Visually-hidden text is not a "robust method"; it's just a trick to make screen-readers read something not accessible. It won't give any help to other users (people with cognitive disabilities or not) to understand the meaning of this fa-arrows, which is usually used to move things, not to sort them. A not so well chosen icon, with no visual alternative. – Vaporimeter

Answer 2

You can add a title attribute conjointly with the aria-label attribute.

Do not try to hide text just to satisfy WAVE toolbar, this can't be read by people not using screen readers, and accessibility is not focusing only at blind people.

Do not remove the aria-label attribute because the title attribute is not always read by screen readers.

But, this might seem a bit naive, but you can consider writing the full text without hiding it.

<button type="button" class="btn btn-default dropdown-toggle">
  <i class="fa fa-arrows">Sort</i>
</button>

This is visually the best thing you can do to be fully accessible for everyone, not requiring the "standard" user to make any action to view what the button does inside a small tooltip.

Vaporimeter

Answer 3

You can use like this

<button type="button"><span class="icon-remove"></span><span class="sr-only">Close</span></button> 

make

.sr-only{display: None}

Techno

almost. setting display:none will hide "Close" from the screen reader unless that element has an ID and is referred to by another element's aria-labelledby. so you would need <button type="button" aria-labelledby="foo"><span class="icon-remove"></span><span id="foo" class="sr-only">Close</span></button> – Westberry

Yes, If you need the button to be read by screen reader add aria-labelledby, otherwise it would read as blank. – Techno

Answer 4

aria-label is a very widely supported way to add an accessible name to a button that already has a visible label for screen readers. A slightly more widely supported technique would be to use a title attribute instead of the aria-label. This would ensure compatibility with Dragon naturally speaking - which supports title very well. NOTE: this assumes a visible label exists - this is important (and often overlooked) for things like input fields.

If you would like a more up-to-date accessibility checker, use the aXe extensions from the company I work for (Deque Systems). Here is the Chrome aXe extension and the Firefox aXe extension

Beker