WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: aria-label vs alt text on linked images

for

From: Birkir R. Gunnarsson
Date: Feb 22, 2019 6:41AM

According to the accessible name and description computation spec the
alt text on an image inside a link with aria-label should not be
announced.
aria-label overrides native HTML labeling (for a link with an image
inside it that has an alt text, the alt text would be the native
labeling in this instance).
So if you think of this as a single entity the aria-label should
always be announced and the alt text ignored.
But if you think of this as two separate entities, the image separate
from the link, then it makes sense that if you navigate to the image,
as opposed to the link, that some screen readers may announce the alt
text for the image.
I think a link with an image inside it should be treated as a single
entity, but I am not sure if that interpretation is correct.
Authors can solve this dilemma by using one or the other, not both.
According to the spec, the alt text should be ignored in this
situation.



On 2/22/19, Isabel Holdsworth < <EMAIL REMOVED> > wrote:
> Hi Patrick,
>
> It would be good if you could take an either-or approach and use only
> the alt or only the aria-label attribute. I'd personally go for the
> alt attribute on the image, as these have been kicking around since
> Methuselah was a sprog and are treated in much the same way by most
> browsers and screenreaders.
>
> Cheers, Isabel
>
> On 04/01/2019, Léonie Watson < <EMAIL REMOVED> > wrote:
>> The problem seems to be with specific browser and screen reader
>> combinations, coupled with the mode of interaction. A very quick test
>> using this example:
>>
>> <a href="https://example.com" aria-label="Example website"><img
>> src="example.png" alt="Example logo"></a>
>>
>>
>> With Jaws 2019 in Chrome, Firefox, and Edge; with NVDA in Chrome,
>> Firefox, edge, and IE; with VoiceOver in Safari on iOS; the -label is
>> announced however you focus on the link.
>>
>> With Jaws in IE, the alt text is announced however you focus on the
>> link; with VoiceOver in Safari on MacOS, the alt is announced if you
>> arrow onto the link, and the -label is announced if you use any other
>> mode of interaction.
>>
>>
>> This was a very quick test on a single instance of each combination, so
>> please treat the results on that basis!
>>
>>
>> Léonie.
>> On 04/01/2019 15:30, Patrick Follmann wrote:
>>> Thanks Steve, I appreciate your response and understand the question
>>> about
>>> why both are used.
>>>
>>> It was mostly just an experiment based on client feedback -- and we know
>>> that those of us who only heard the aria-label are using default settings
>>> on our screen reader software and the three of us have the same browser
>>> versions and we are all tabbing through the page to hear what is
>>> announced.
>>> I am not sure about the colleague who is hearing only alt text though,
>>> except I know he is using the same screen reader versions.
>>>
>>> Patrick
>>>
>>>
>>>
>>> On Fri, Jan 4, 2019 at 10:18 AM Steve Green
>>> < <EMAIL REMOVED> >
>>> wrote:
>>>
>>>> There are lots of reasons why this might happen, such as:
>>>>
>>>> Different methods of navigation, such as tabbing or virtual cursor.
>>>> Different behaviours in different versions of the same assistive
>>>> technology product. These are not usually mentioned in the release notes
>>>> so
>>>> you only find them by experimentation.
>>>> Different behaviours between browsers.
>>>> Different configuration settings in the assistive technology.
>>>>
>>>> Why do you have an "aria-label" attribute if the images have "alt"
>>>> attributes?
>>>>
>>>> Steve Green
>>>> Managing Director
>>>> Test Partners Ltd
>>>>
>>>>
>>>>