WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Icons and aria-label

for

From: Date: Jun 20, 2019 5:00PM

Thanks to both of you, That's so enlightening.

Also, I reply to the question in UX StackExchange liking to this thread
https://ux.stackexchange.com/questions/85426/is-an-aria-label-necessary-on-icon-fonts-with-additional-context/126433#126433



On Thu, Jun 20, 2019 at 12:33 PM Birkir R. Gunnarsson <
<EMAIL REMOVED> > wrote:

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