WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Glyphicons and aria-label or alt=

for

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

From: Farough, David (CFP/PSC)
Date: Fri, Aug 14 2020 8:07AM
Subject: Glyphicons and aria-label or alt=
No previous message | Next message →

Good morning;
I have been testing a single page app which uses glyphicons.
The application requires a user to answer several questions and provides a score at the end.
Possible values are low, medium Medium high and High.
A glyphicon appears before your score and aria-label was used to label it as "your score".
I noticed that Jaws was not speaking the label, so I suggested using alt="your score" instead.
This did not work either.
This does work with NVDA for both methods.
With Jaws this worked best using IE11.
Chrome and Firefox did not work.

Am I missing something, or is this a Jaws bug?

Thanks for any suggestions or information on how best to use Glyphicons accessibly.

From:
Date: Fri, Aug 14 2020 8:24AM
Subject: Re: Glyphicons and aria-label or alt=
← Previous message | Next message →

Can you share the code for one of the glyphicons?


Thanks.

On 14/08/2020 15:07, Farough, David (CFP/PSC) wrote:
> Good morning;
> I have been testing a single page app which uses glyphicons.
> The application requires a user to answer several questions and provides a score at the end.
> Possible values are low, medium Medium high and High.
> A glyphicon appears before your score and aria-label was used to label it as "your score".
> I noticed that Jaws was not speaking the label, so I suggested using alt="your score" instead.
> This did not work either.
> This does work with NVDA for both methods.
> With Jaws this worked best using IE11.
> Chrome and Firefox did not work.
>
> Am I missing something, or is this a Jaws bug?
>
> Thanks for any suggestions or information on how best to use Glyphicons accessibly.
>
> > > > >

--
Director @TetraLogical
https://tetralogical.com

From: Patrick H. Lauke
Date: Fri, Aug 14 2020 8:39AM
Subject: Re: Glyphicons and aria-label or alt=
← Previous message | Next message →

if it's just using a span or <i> element or similar, aria-label will generally not be announced. add role="img" to it. alt is not valid attribute in those situations.

> On 14 Aug 2020, at 15:08, Farough, David (CFP/PSC) < = EMAIL ADDRESS REMOVED = > wrote:
>
> Good morning;
> I have been testing a single page app which uses glyphicons.
> The application requires a user to answer several questions and provides a score at the end.
> Possible values are low, medium Medium high and High.
> A glyphicon appears before your score and aria-label was used to label it as "your score".
> I noticed that Jaws was not speaking the label, so I suggested using alt="your score" instead.
> This did not work either.
> This does work with NVDA for both methods.
> With Jaws this worked best using IE11.
> Chrome and Firefox did not work.
>
> Am I missing something, or is this a Jaws bug?
>
> Thanks for any suggestions or information on how best to use Glyphicons accessibly.
>
> > > >

From: Farough, David (CFP/PSC)
Date: Fri, Aug 14 2020 10:35AM
Subject: Re: Glyphicons and aria-label or alt=
← Previous message | Next message →

Thanks so much Patrick! That did the trick.
Our developers have made the change and it works perfectly ucing both Jaws and NVDA using IE11, Chrome, Firefox and Microsoft Edge.
This made my day.

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Patrick H. Lauke
Sent: Friday, August 14, 2020 10:40 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Glyphicons and aria-label or alt
if it's just using a span or <i> element or similar, aria-label will generally not be announced. add role="img" to it. alt is not valid attribute in those situations.

> On 14 Aug 2020, at 15:08, Farough, David (CFP/PSC) < = EMAIL ADDRESS REMOVED = > wrote:
>
> Good morning;
> I have been testing a single page app which uses glyphicons.
> The application requires a user to answer several questions and provides a score at the end.
> Possible values are low, medium Medium high and High.
> A glyphicon appears before your score and aria-label was used to label it as "your score".
> I noticed that Jaws was not speaking the label, so I suggested using alt="your score" instead.
> This did not work either.
> This does work with NVDA for both methods.
> With Jaws this worked best using IE11.
> Chrome and Firefox did not work.
>
> Am I missing something, or is this a Jaws bug?
>
> Thanks for any suggestions or information on how best to use Glyphicons accessibly.
>
> > > >

From: Birkir R. Gunnarsson
Date: Fri, Aug 14 2020 12:30PM
Subject: Re: Glyphicons and aria-label or alt=
← Previous message | Next message →

Yeap, an element with a gliph icon must have role="img" to identify it
as an image and aria-label="alt text" for the alt text.
The alt attribute is only valid on <img> elements (or, for those of us
who remember olden times, for <area> elements, I think for <object>
elements as well, but nothing else).
If you put aria-label on an element without a pre-determined role,
like a div or a span, screen readers don't know how to treat it, is it
a button, a group, an image, a landmark, something else? Should it
override the text inside the element or not (it should if the element
is a link or a button or an image, but not if it is a landmark region
or grouping element?
The ARIA spec should not allow aria-label, aria-labelledby or
aria-describedby on elements without a role, somthing I've said for
years (#minirant), hope it will get fixed one of these days.

On 8/14/20, Farough, David (CFP/PSC) < = EMAIL ADDRESS REMOVED = > wrote:
> Thanks so much Patrick! That did the trick.
> Our developers have made the change and it works perfectly ucing both Jaws
> and NVDA using IE11, Chrome, Firefox and Microsoft Edge.
> This made my day.
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf
> Of Patrick H. Lauke
> Sent: Friday, August 14, 2020 10:40 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] Glyphicons and aria-label or alt>
> if it's just using a span or <i> element or similar, aria-label will
> generally not be announced. add role="img" to it. alt is not valid attribute
> in those situations.
>
>> On 14 Aug 2020, at 15:08, Farough, David (CFP/PSC)
>> < = EMAIL ADDRESS REMOVED = > wrote:
>>
>> Good morning;
>> I have been testing a single page app which uses glyphicons.
>> The application requires a user to answer several questions and provides a
>> score at the end.
>> Possible values are low, medium Medium high and High.
>> A glyphicon appears before your score and aria-label was used to label it
>> as "your score".
>> I noticed that Jaws was not speaking the label, so I suggested using
>> alt="your score" instead.
>> This did not work either.
>> This does work with NVDA for both methods.
>> With Jaws this worked best using IE11.
>> Chrome and Firefox did not work.
>>
>> Am I missing something, or is this a Jaws bug?
>>
>> Thanks for any suggestions or information on how best to use Glyphicons
>> accessibly.
>>
>> >> >> >> >
> > > > > > > > >


--
Work hard. Have fun. Make history.

From: glen walker
Date: Fri, Aug 14 2020 2:22PM
Subject: Re: Glyphicons and aria-label or alt=
← Previous message | No next message

> The alt attribute is only valid on <img> elements (or, for those of us
> who remember olden times, for <area> elements, I think for <object>
> elements as well, but nothing else).
>

Just for completeness, the alt attribute is also allowed on the <input>
element but only if type="image".

You can find more info on aria-label support at
https://www.w3.org/TR/using-aria/#label-support. It talks about specifying
a role as both Patrick and Birkir talked about.