WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Icons and aria-label

for

From: Birkir R. Gunnarsson
Date: Jun 20, 2019 7:18PM

Cool, always good to get correct accessibility info into the
mainstream knowledge bases.

On 6/20/19, Raúl Martín < <EMAIL REMOVED> > wrote:
> 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.
>> >> >> >> >>
> > > > >


--
Work hard. Have fun. Make history.