WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Glyphicons and aria-label or alt=

for

From: Birkir R. Gunnarsson
Date: Aug 14, 2020 12:30PM

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 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 REMOVED> ] On Behalf
> Of Patrick H. Lauke
> Sent: Friday, August 14, 2020 10:40 AM
> To: WebAIM Discussion List < <EMAIL 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 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.