E-mail List Archives
Thread: aria-label vs alt text on linked images
Number of posts in this thread: 4 (In chronological order)
From: Isabel Holdsworth
Date: Fri, Feb 22 2019 5:57AM
Subject: aria-label vs alt text on linked images
No previous message | Next message →
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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
>>> Patrick Follmann
>>> Sent: 04 January 2019 15:09
>>> To: WebAIM Discussion List < = EMAIL ADDRESS 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
>>> >>> >>> at http://webaim.org/discussion/archives
>>> >>> >>> >>> >>> >>>
>> >> >> >> >>
>
> --
> @LeonieWatson tink.uk Carpe diem
> > > > >
From: Birkir R. Gunnarsson
Date: Fri, Feb 22 2019 6:41AM
Subject: Re: aria-label vs alt text on linked images
← Previous message | Next message →
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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
>>>> Patrick Follmann
>>>> Sent: 04 January 2019 15:09
>>>> To: WebAIM Discussion List < = EMAIL ADDRESS 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
>>>> >>>> >>>> at http://webaim.org/discussion/archives
>>>> >>>> >>>> >>>> >>>> >>>>
>>> >>> >>> >>> >>>
>>
>> --
>> @LeonieWatson tink.uk Carpe diem
>> >> >> >> >>
> > > > >
--
Work hard. Have fun. Make history.
From: Isabel Holdsworth
Date: Fri, Feb 22 2019 7:38AM
Subject: Re: aria-label vs alt text on linked images
← Previous message | Next message →
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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
>>>>> Patrick Follmann
>>>>> Sent: 04 January 2019 15:09
>>>>> To: WebAIM Discussion List < = EMAIL ADDRESS 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.
> > > > >
From:
Date: Fri, Feb 22 2019 9:30AM
Subject: Re: aria-label vs alt text on linked images
← Previous message | No next message
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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
>>>>>> Patrick Follmann
>>>>>> Sent: 04 January 2019 15:09
>>>>>> To: WebAIM Discussion List < = EMAIL ADDRESS 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.
>> >> >> >> >>
> > > >