WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Icons and aria-label

for

From: Patrick H. Lauke
Date: Jun 20, 2019 12:58PM

On 20/06/2019 19:47, Raúl Martín wrote:

> *<i class="fa fa-warning" aria-label="Warning - "></i> My message*
...
> <div aria-label="4 out of 5 ratings">
> * <i class="fas fa-star"></i>*
> * <i class="fas fa-star"></i>*
> * <i class="fas fa-star"></i>*
> * <i class="fas fa-star"></i>*
> * <i class="fa fa-star"></i>*
>
> *</div>*


Some browser/AT combos will announce the label, but it's flaky and not
really as intended. See
https://developer.paciellogroup.com/blog/2017/07/short-note-on-aria-label-aria-labelledby-and-aria-describedby/

> Or in a scenario that reinforces the message:
>
> *<button><i class="fa fa-close" aria-hidden="true"></i> Close</button>*

That's appropriate, as it prevents the icon font (which FontAwesome will
inject as a character either ::before or ::after that <i>) from being
announced by AT, and avoiding odd output/announcements when that
character was mapped to a letter/character that normally gets voiced by AT.

[...]

> Also, anyone has preferences between:
>
> *<button><i class="fa fa-close" aria-label="Close"></i></button>*

Add the aria-label to the button, not the <i>

> *<button><i class="fa fa-close" aria-hidden="true"></i> <span
> class="sr-only">Close</span></button>*

End result (once the first was corrected and set on button) is the same
for AT users. with the second variant, you have the option of unhiding
the visually hidden sr-only text for certain users if they want (e.g. if
you wanted to offer a toggle to show "icons and text labels", you could
very easily simply make the sr-only spans display rather than hide them).

P
--
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke