Menu
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?
727
To fix an empty button error, you will need to find the button that is being flagged and add descriptive text to it. You will need to either: add text content within an empty <button> element, add a value attribute to an <input> that is missing one, or add alternative text to a button image.
Empty aria-label should absolutely be avoided as it can cause screen readers to do unpredictable things.
The [aria-label] text is read instead of any content inside the element, including otherwise accessible text. In addition to icons, it can be useful when the context of a link or button might be apparent to sighted users, but confusing for visually impaired users.
aria-label allows us to specify a string to be used as the accessible label. This overrides any other native labeling mechanism, such as a label element — for example, if a button has both text content and an aria-label , only the aria-label value will be used.
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.
122
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
