E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 5 (In chronological order)

From: Date: Thu, Jun 20 2019 12:47PM
Subject: Icons and aria-label
No previous message | Next message →

Hi!!!

I am working in a project were we use Icons for different proposes.

In an alert to show a warning icon:

*<i class="fa fa-warning" aria-label="Warning - "></i> My message*


In a list of resources to show the resource type:

*<i class="fa fa-warning" aria-label="PDF"></i> My resource*


Or in a scenario that reinforces the message:

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


Or more complex situations

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

The question is, It is this the usage of aria-label correct here? Should I
use another mechanism?

I am checking this with different screen reader and looks correct but then
I ended with this question in UX StackExchange that made me doubt.

https://ux.stackexchange.com/questions/85426/is-an-aria-label-necessary-on-icon-fonts-with-additional-context

Also, anyone has preferences between:

*<button><i class="fa fa-close" aria-label="Close"></i></button>*

and

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

being sr-only the typical class to show content in a screen reader but not
in visual outputs.


Thanks!!!

From: Patrick H. Lauke
Date: Thu, Jun 20 2019 12:58PM
Subject: Re: Icons and aria-label
← Previous message | Next message →

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

From: Birkir R. Gunnarsson
Date: Thu, Jun 20 2019 1:33PM
Subject: Re: Icons and aria-label
← Previous message | Next message →

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

From: Date: Thu, Jun 20 2019 5:00PM
Subject: Re: Icons and aria-label
← Previous message | Next message →

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

From: Birkir R. Gunnarsson
Date: Thu, Jun 20 2019 7:18PM
Subject: Re: Icons and aria-label
← Previous message | No next message

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

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