htmlaccessibilitywai-ariasection508

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

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

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