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

html accessibility wai-aria section508 htmlbutton
Christine picture Christine · Jan 15, 2016 · Viewed 10.7k times · Source

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?

Answer

stringy picture stringy · Jan 16, 2016

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.

Related questions

The purpose of using "aria-labelledby" on already labeled input elements?

Many ARIA demonstration websites use code such as: <label for="name" id="label-name">Your Name</label> <input id="name" aria-labelledby="label-name" type="text"> But what's the purpose of using aria-labelledby attribute in this case? …

Read More
Can someone explain the HTML5 aria-* attribute?

I wanted to know what the aria-* attributes are used for. What values can they have, and are they defined values or can I create my own values?

Read More
When to use the disabled attribute vs the aria-disabled attribute for HTML elements?

I'm trying to make a form accessible. Should I make my inputs have both disabled and aria-disabled attributes, or just one? <label for="textbox1">Input</label> <input id="textbox1" type="text" name="Text Box" disabled&…

Read More