WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: aria-label vs alt text on linked images

for

From: Isabel Holdsworth
Date: Feb 22, 2019 7:38AM


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
>>>>>
>>>>>
>>>>> -----Original Message-----
>>>>> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
>>>>> Patrick Follmann
>>>>> Sent: 04 January 2019 15:09
>>>>> To: WebAIM Discussion List < <EMAIL REMOVED> >
>>>>> Subject: [WebAIM] aria-label vs alt text on linked images
>>>>>
>>>>> Hello,
>>>>>
>>>>> Some colleagues and I are getting different results when using screen
>>>>> readers with linked image that have no link text but have an aria-label
>>>>> attribute in the a tag and an alt attribute in the img tag. (tabbing to
>>>>> the
>>>>> image)
>>>>>
>>>>> One colleague is hearing screen readers (VoiceOver, JAWS and NVDA with
>>>>> various browsers) read only the alt text. The rest of us are hearing
>>>>> only
>>>>> the aria-label announced.
>>>>>
>>>>> What is expected behavior and why might we be getting different
>>>>> results?
>>>>> We'd like to solve the mystery so we don't have conflicting results in
>>>>> the
>>>>> future.
>>>>>
>>>>> Thank you,
>>>>>
>>>>> Patrick
>>>>> >>>>> >>>>> archives
>>>>> at http://webaim.org/discussion/archives
>>>>> >>>>> >>>>> >>>>> >>>>> >>>>>
>>>> >>>> >>>> >>>> >>>>
>>>
>>> --
>>> @LeonieWatson tink.uk Carpe diem
>>> >>> >>> >>> >>>
>> >> >> >> >>
>
>
> --
> Work hard. Have fun. Make history.
> > > > >