WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Icons and aria-label

for

From: Birkir R. Gunnarsson
Date: Jun 20, 2019 1:33PM

aria-label only works reliably when the element has a role.
A <span> or <I> or ,div> elements do not have a role so screen readers
do not treat them consistently.
If the element should be an image, add role="img".
<I role="img" aria-label="warning" class ="fa fa something"></I>
Same with the composit star rating image
<div role="img" aria-label="4 out of 5 stars">
<I ...</I>
...
</div>
If you have an icon on a focusable element with a role, like a link or
a button, apply the aria-label directly t he focusable control.
<button aria-label="close"><I class="fa fa-close"></I></button>

SCreen reader text inside the button is marginally better, yes.



On 6/20/19, Patrick H. Lauke < <EMAIL REMOVED> > wrote:
> 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
> > > > >


--
Work hard. Have fun. Make history.