WebAIM - Web Accessibility In Mind

E-mail List Archives

aria-label vs alt text on linked images

for

From: Isabel Holdsworth
Date: Feb 22, 2019 5:57AM

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