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?

Solution 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.

Solution 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.