WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: aria-label vs alt text on linked images

for

From: Date: Feb 22, 2019 9:30AM

We  tested this many times. To get equally satisfactory result on each
browser/OS/screen-reader, we have found  the following solution:

<a aria-label="link text">
    <img role="presentation" alt="">
</a>

I am also including a tooltip of link-text, which can be seen on hover.

Zsolt

On 2019. 02. 22. 15:38, Isabel Holdsworth wrote:
> Birkir, I always learn something from your comprehensive answers :-)
>
> IMO providing alt text would be the preferred solution, since ARIA
> should only be used when a native alternative isn't available.
>
> Cheers, Isabel
>
> On 22/02/2019, Birkir R. Gunnarsson < <EMAIL REMOVED> > wrote:
>> 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
>>>>>>
>>>>>>
>>>>>>