E-mail List Archives
Thread: A complex image used as a link: I need to provide alt attribute value as link and longer description of the image.
Number of posts in this thread: 7 (In chronological order)
From: Jim Byrne Accessible Web Design
Date: Tue, Oct 01 2024 8:50AM
Subject: A complex image used as a link: I need to provide alt attribute value as link and longer description of the image.
No previous message | Next message →
Hi All,
Does this sound like the best solution for a complex image that is being used as a link - to a large version of the image. I.e., is this the best way to provide both a link that makes sense when read out of context and a longer text description of the image.
This is what I was thinking as a solution:
1. Add an appropriate alt attribute to the image (to acts as link text). The alt attribute will provide a short link text value to describe the target image.
2. Add the longer text description via aria-describedby. The image is complex and requires a longer alternative text description. The description should to be on the same page.
According to the WC3 documentation, some screen readers read out the value of the aria-describedby value directly after the alt attribute - and some require the use to take an additional action to read out the value of aria-describedby. For reference see https://www.w3.org/TR/WCAG20-TECHS/ARIA15.html.
Do you think that is the best solution?
Thanks,
Jim
From: Dean.Vasile
Date: Tue, Oct 01 2024 9:40AM
Subject: Re: A complex image used as a link: I need to provide alt attribute value as link and longer description of the image.
← Previous message | Next message →
Personally, I would recommend that you try it and then test it with NVDA and JAWS.
Because as a screen reader user it would drive me crazy if the description came before the pertinent all text for the link
And I do know that those two screen readers sometimes perceive the information differently
Dean Vasile
IAAP, CPACC
= EMAIL ADDRESS REMOVED =
617-799-1162
On Oct 1, 2024, at 10:51 AM, Jim Byrne Accessible Web Design < = EMAIL ADDRESS REMOVED = > wrote:
Hi All,
Does this sound like the best solution for a complex image that is being used as a link - to a large version of the image. I.e., is this the best way to provide both a link that makes sense when read out of context and a longer text description of the image.
This is what I was thinking as a solution:
1. Add an appropriate alt attribute to the image (to acts as link text). The alt attribute will provide a short link text value to describe the target image.
2. Add the longer text description via aria-describedby. The image is complex and requires a longer alternative text description. The description should to be on the same page.
According to the WC3 documentation, some screen readers read out the value of the aria-describedby value directly after the alt attribute - and some require the use to take an additional action to read out the value of aria-describedby. For reference see https://www.w3.org/TR/WCAG20-TECHS/ARIA15.html.
Do you think that is the best solution?
Thanks,
Jim
<PastedGraphic-3.png>
Multi-award-winning WCAG 2.2 AA Accessibility Auditing and Accessibility Consultant
Web: https://jimbyrne.co.uk
Jim Byrne is one of the UK’s most experienced practitioners in the area of accessible digital design.
Jim provided feedback during the development of WCAG 2 (the de facto accessibility guidelines used by governments across the world). He is the author of a number of technical books, training courses and accessibility guides. Jim was a winner of the equal access category of the Global Bangemann Challenge.
From: Mark Magennis
Date: Wed, Oct 02 2024 2:15AM
Subject: Re: A complex image used as a link: I need to provide alt attribute value as link and longer description of the image.
← Previous message | Next message →
I would suggest just using the alt attribute for the image link because descriptions provided using aria-describedby are unreliable. For instance, the last time I checked neither JAWS nor NVDA would read the description of an image link when you arrow to it, only when you tab to it.
The alt text should give at least some information about the image as well as conveying the purpose of the link. So something like "system architecture diagram, click for larger image and full description". It's not usually necessary to use words like "click" in link text but in this case I think it may make it clearer as it's an instruction appended to the description. The larger image could contain the full description in an alt attribute but it may be better to use accompanying text because the alt attribute isn't well suited to long or complex descriptions. Users can't use their screen reader's character and word reading commands to slowly go though an alt attribute spelling out words or re-reading parts they didn't understand.
Mark
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > on behalf of Jim Byrne Accessible Web Design < = EMAIL ADDRESS REMOVED = >
Sent: Tuesday 1 October 2024 15:50
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: [EXTERNAL] [WebAIM] A complex image used as a link: I need to provide alt attribute value as link and longer description of the image.
Hi All,
Does this sound like the best solution for a complex image that is being used as a link - to a large version of the image. I.e., is this the best way to provide both a link that makes sense when read out of context and a longer text description of the image.
This is what I was thinking as a solution:
1. Add an appropriate alt attribute to the image (to acts as link text). The alt attribute will provide a short link text value to describe the target image.
2. Add the longer text description via aria-describedby. The image is complex and requires a longer alternative text description. The description should to be on the same page.
According to the WC3 documentation, some screen readers read out the value of the aria-describedby value directly after the alt attribute - and some require the use to take an additional action to read out the value of aria-describedby. For reference see https://www.w3.org/TR/WCAG20-TECHS/ARIA15.html.
Do you think that is the best solution?
Thanks,
Jim
[cid: = EMAIL ADDRESS REMOVED = ]
Multi-award-winning WCAG 2.2 AA Accessibility Auditing and Accessibility Consultant
Web: https://jimbyrne.co.uk<https://jimbyrne.co.uk/>
Jim Byrne is one of the UK=92s most experienced practitioners in the area of accessible digital design.
Jim provided feedback during the development of WCAG 2 (the de facto accessibility guidelines used by governments across the world). He is the author of a number of technical books, training courses and accessibility guides. Jim was a winner of the equal access category of the Global Bangemann Challenge.
From: Jim Byrne Accessible Web Design
Date: Wed, Oct 02 2024 3:07AM
Subject: Re: A complex image used as a link: I need to provide alt attribute value as link and longer description of the image.
← Previous message | Next message →
Thanks Mark,
Re: link to the image and a fuller description
At the moment they are linking directly to the image, i.e., not to a page with a larger image and some text. But I like your suggestion - so I will suggest that to them - as a possible solution.
Your idea has also made me think that they could add the longer description to the original page - and use the alt attribute to give a short description and say something like ’Blah, blah blah: see the full text description below’ or something like that. Given that - as you say, the access technology does not seem optimised to make use of aria-describedby.
Thanks,
Jim
> On 2 Oct 2024, at 09:15, Mark Magennis < = EMAIL ADDRESS REMOVED = > wrote:
>
> I would suggest just using the alt attribute for the image link because descriptions provided using aria-describedby are unreliable. For instance, the last time I checked neither JAWS nor NVDA would read the description of an image link when you arrow to it, only when you tab to it.
>
> The alt text should give at least some information about the image as well as conveying the purpose of the link. So something like "system architecture diagram, click for larger image and full description". It's not usually necessary to use words like "click" in link text but in this case I think it may make it clearer as it's an instruction appended to the description. The larger image could contain the full description in an alt attribute but it may be better to use accompanying text because the alt attribute isn't well suited to long or complex descriptions. Users can't use their screen reader's character and word reading commands to slowly go though an alt attribute spelling out words or re-reading parts they didn't understand.
>
> Mark
> > From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > on behalf of Jim Byrne Accessible Web Design < = EMAIL ADDRESS REMOVED = >
> Sent: Tuesday 1 October 2024 15:50
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: [EXTERNAL] [WebAIM] A complex image used as a link: I need to provide alt attribute value as link and longer description of the image.
>
> Hi All,
>
> Does this sound like the best solution for a complex image that is being used as a link - to a large version of the image. I.e., is this the best way to provide both a link that makes sense when read out of context and a longer text description of the image.
>
> This is what I was thinking as a solution:
>
> 1. Add an appropriate alt attribute to the image (to acts as link text). The alt attribute will provide a short link text value to describe the target image.
>
> 2. Add the longer text description via aria-describedby. The image is complex and requires a longer alternative text description. The description should to be on the same page.
>
> According to the WC3 documentation, some screen readers read out the value of the aria-describedby value directly after the alt attribute - and some require the use to take an additional action to read out the value of aria-describedby. For reference see https://www.w3.org/TR/WCAG20-TECHS/ARIA15.html.
>
> Do you think that is the best solution?
>
> Thanks,
> Jim
>
>
> [cid: = EMAIL ADDRESS REMOVED = ]
>
>
> Multi-award-winning WCAG 2.2 AA Accessibility Auditing and Accessibility Consultant
>
> Web: https://jimbyrne.co.uk<https://jimbyrne.co.uk/>
>
> Jim Byrne is one of the UK’s most experienced practitioners in the area of accessible digital design.
>
> Jim provided feedback during the development of WCAG 2 (the de facto accessibility guidelines used by governments across the world). He is the author of a number of technical books, training courses and accessibility guides. Jim was a winner of the equal access category of the Global Bangemann Challenge.
>
> > > > > <PastedGraphic-3.png>> > > 
Multi-award-winning WCAG 2.2 AA Accessibility Auditing and Accessibility Consultant
Web: https://jimbyrne.co.uk
Jim Byrne is one of the UK’s most experienced practitioners in the area of accessible digital design.
Jim provided feedback during the development of WCAG 2 (the de facto accessibility guidelines used by governments across the world). He is the author of a number of technical books, training courses and accessibility guides. Jim was a winner of the equal access category of the Global Bangemann Challenge.
From: Jim Byrne Accessible Web Design
Date: Wed, Oct 02 2024 3:12AM
Subject: Re: A complex image used as a link: I need to provide alt attribute value as link and longer description of the image.
← Previous message | Next message →
Thanks Dean,
A good point. I seems that the issues you describe make my suggested solution problematic. Thanks for your insight.
Jim
> On 1 Oct 2024, at 16:40, = EMAIL ADDRESS REMOVED = wrote:
>
> Personally, I would recommend that you try it and then test it with NVDA and JAWS.
> Because as a screen reader user it would drive me crazy if the description came before the pertinent all text for the link
> And I do know that those two screen readers sometimes perceive the information differently
> Dean Vasile
> IAAP, CPACC
> = EMAIL ADDRESS REMOVED =
> 617-799-1162
>
> On Oct 1, 2024, at 10:51 AM, Jim Byrne Accessible Web Design < = EMAIL ADDRESS REMOVED = > wrote:
>
>
> Hi All,
>
> Does this sound like the best solution for a complex image that is being used as a link - to a large version of the image. I.e., is this the best way to provide both a link that makes sense when read out of context and a longer text description of the image.
>
> This is what I was thinking as a solution:
>
> 1. Add an appropriate alt attribute to the image (to acts as link text). The alt attribute will provide a short link text value to describe the target image.
>
> 2. Add the longer text description via aria-describedby. The image is complex and requires a longer alternative text description. The description should to be on the same page.
>
> According to the WC3 documentation, some screen readers read out the value of the aria-describedby value directly after the alt attribute - and some require the use to take an additional action to read out the value of aria-describedby. For reference see https://www.w3.org/TR/WCAG20-TECHS/ARIA15.html.
>
> Do you think that is the best solution?
>
> Thanks,
> Jim
>
>
> <PastedGraphic-3.png>
>
>
> Multi-award-winning WCAG 2.2 AA Accessibility Auditing and Accessibility Consultant
>
> Web: https://jimbyrne.co.uk
>
> Jim Byrne is one of the UK’s most experienced practitioners in the area of accessible digital design.
>
> Jim provided feedback during the development of WCAG 2 (the de facto accessibility guidelines used by governments across the world). He is the author of a number of technical books, training courses and accessibility guides. Jim was a winner of the equal access category of the Global Bangemann Challenge.
>
> > > > > <PastedGraphic-3.png>> > > 
Multi-award-winning WCAG 2.2 AA Accessibility Auditing and Accessibility Consultant
Web: https://jimbyrne.co.uk
Jim Byrne is one of the UK’s most experienced practitioners in the area of accessible digital design.
Jim provided feedback during the development of WCAG 2 (the de facto accessibility guidelines used by governments across the world). He is the author of a number of technical books, training courses and accessibility guides. Jim was a winner of the equal access category of the Global Bangemann Challenge.
From: Mark Magennis
Date: Wed, Oct 02 2024 3:31AM
Subject: Re: A complex image used as a link: I need to provide alt attribute value as link and longer description of the image.
← Previous message | Next message →
It would be good to add the full description to the original page but the fact that they've not added the full image to it suggests that space is limited so that may not be an option.
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > on behalf of Jim Byrne Accessible Web Design < = EMAIL ADDRESS REMOVED = >
Sent: Wednesday 2 October 2024 10:07
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] [EXTERNAL] A complex image used as a link: I need to provide alt attribute value as link and longer description of the image.
Thanks Mark,
Re: link to the image and a fuller description
At the moment they are linking directly to the image, i.e., not to a page with a larger image and some text. But I like your suggestion - so I will suggest that to them - as a possible solution.
Your idea has also made me think that they could add the longer description to the original page - and use the alt attribute to give a short description and say something like ’Blah, blah blah: see the full text description below’ or something like that. Given that - as you say, the access technology does not seem optimised to make use of aria-describedby.
Thanks,
Jim
> On 2 Oct 2024, at 09:15, Mark Magennis < = EMAIL ADDRESS REMOVED = > wrote:
>
> I would suggest just using the alt attribute for the image link because descriptions provided using aria-describedby are unreliable. For instance, the last time I checked neither JAWS nor NVDA would read the description of an image link when you arrow to it, only when you tab to it.
>
> The alt text should give at least some information about the image as well as conveying the purpose of the link. So something like "system architecture diagram, click for larger image and full description". It's not usually necessary to use words like "click" in link text but in this case I think it may make it clearer as it's an instruction appended to the description. The larger image could contain the full description in an alt attribute but it may be better to use accompanying text because the alt attribute isn't well suited to long or complex descriptions. Users can't use their screen reader's character and word reading commands to slowly go though an alt attribute spelling out words or re-reading parts they didn't understand.
>
> Mark
> > From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > on behalf of Jim Byrne Accessible Web Design < = EMAIL ADDRESS REMOVED = >
> Sent: Tuesday 1 October 2024 15:50
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: [EXTERNAL] [WebAIM] A complex image used as a link: I need to provide alt attribute value as link and longer description of the image.
>
> Hi All,
>
> Does this sound like the best solution for a complex image that is being used as a link - to a large version of the image. I.e., is this the best way to provide both a link that makes sense when read out of context and a longer text description of the image.
>
> This is what I was thinking as a solution:
>
> 1. Add an appropriate alt attribute to the image (to acts as link text). The alt attribute will provide a short link text value to describe the target image.
>
> 2. Add the longer text description via aria-describedby. The image is complex and requires a longer alternative text description. The description should to be on the same page.
>
> According to the WC3 documentation, some screen readers read out the value of the aria-describedby value directly after the alt attribute - and some require the use to take an additional action to read out the value of aria-describedby. For reference see https://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.w3.org%2FTR%2FWCAG20-TECHS%2FARIA15.html&data=05%7C02%7CMark.Magennis%40skillsoft.com%7Cb55307f1a91d4455c08e08dce2c1b4fd%7C50361608aa23494da2332fd14d6a03f4%7C0%7C0%7C638634568814178331%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&sdata=vfpaC4JGrFRoKRPzTEv7Nk4dryq8pIW2pyK9lGY1jG8%3D&reserved=0<https://www.w3.org/TR/WCAG20-TECHS/ARIA15.html>.
>
> Do you think that is the best solution?
>
> Thanks,
> Jim
>
>
> [cid: = EMAIL ADDRESS REMOVED = ]
>
>
> Multi-award-winning WCAG 2.2 AA Accessibility Auditing and Accessibility Consultant
>
> Web: https://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fjimbyrne.co.uk%2F&data=05%7C02%7CMark.Magennis%40skillsoft.com%7Cb55307f1a91d4455c08e08dce2c1b4fd%7C50361608aa23494da2332fd14d6a03f4%7C0%7C0%7C638634568814193072%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&sdata=sIzKSsd0V3cH%2FCtNi9gUtjne%2FSlp2WQpps42toCpkaU%3D&reserved=0<https://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fjimbyrne.co.uk%2F&data=05%7C02%7CMark.Magennis%40skillsoft.com%7Cb55307f1a91d4455c08e08dce2c1b4fd%7C50361608aa23494da2332fd14d6a03f4%7C0%7C0%7C638634568814200882%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&sdata=2c1X8ldU5AjIXkeoMLRL6jJgCea5QOEpXCS8zwZpRaw%3D&reserved=0><https://jimbyrne.co.uk/>
>
> Jim Byrne is one of the UK’s most experienced practitioners in the area of accessible digital design.
>
> Jim provided feedback during the development of WCAG 2 (the de facto accessibility guidelines used by governments across the world). He is the author of a number of technical books, training courses and accessibility guides. Jim was a winner of the equal access category of the Global Bangemann Challenge.
>
> > > > > <PastedGraphic-3.png>> > > 
Multi-award-winning WCAG 2.2 AA Accessibility Auditing and Accessibility Consultant
Web: https://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fjimbyrne.co.uk%2F&data=05%7C02%7CMark.Magennis%40skillsoft.com%7Cb55307f1a91d4455c08e08dce2c1b4fd%7C50361608aa23494da2332fd14d6a03f4%7C0%7C0%7C638634568814240594%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&sdata=lZ7JU6sr2N5MKs7UqBd%2BHdFhNbDUO0QRK1i5ARwNSrQ%3D&reserved=0<https://jimbyrne.co.uk/>
Jim Byrne is one of the UK’s most experienced practitioners in the area of accessible digital design.
Jim provided feedback during the development of WCAG 2 (the de facto accessibility guidelines used by governments across the world). He is the author of a number of technical books, training courses and accessibility guides. Jim was a winner of the equal access category of the Global Bangemann Challenge.
From: Sandy Feldman
Date: Wed, Oct 02 2024 9:11AM
Subject: Re: A complex image used as a link: I need to provide alt attribute value as link and longer description of the image.
← Previous message | No next message
What about tucking the image long description in <details> block? Take a
look at
https://jjhunt.com/
Sandy
https://sandyfeldman.com
https://www.a11yready.com
On 2024-10-02 5:12 a.m., Jim Byrne Accessible Web Design wrote:
> Thanks Dean,
>
> A good point. I seems that the issues you describe make my suggested solution problematic. Thanks for your insight.
>
> Jim
>
>> On 1 Oct 2024, at 16:40, = EMAIL ADDRESS REMOVED = wrote:
>>
>> Personally, I would recommend that you try it and then test it with NVDA and JAWS.
>> Because as a screen reader user it would drive me crazy if the description came before the pertinent all text for the link
>> And I do know that those two screen readers sometimes perceive the information differently
>> Dean Vasile
>> IAAP, CPACC
>> = EMAIL ADDRESS REMOVED =
>> 617-799-1162
>>
>> On Oct 1, 2024, at 10:51 AM, Jim Byrne Accessible Web Design< = EMAIL ADDRESS REMOVED = > wrote:
>>
>>
>> Hi All,
>>
>> Does this sound like the best solution for a complex image that is being used as a link - to a large version of the image. I.e., is this the best way to provide both a link that makes sense when read out of context and a longer text description of the image.
>>
>> This is what I was thinking as a solution:
>>
>> 1. Add an appropriate alt attribute to the image (to acts as link text). The alt attribute will provide a short link text value to describe the target image.
>>
>> 2. Add the longer text description via aria-describedby. The image is complex and requires a longer alternative text description. The description should to be on the same page.
>>
>> According to the WC3 documentation, some screen readers read out the value of the aria-describedby value directly after the alt attribute - and some require the use to take an additional action to read out the value of aria-describedby. For reference seehttps://www.w3.org/TR/WCAG20-TECHS/ARIA15.html.
>>
>> Do you think that is the best solution?
>>
>> Thanks,
>> Jim
>>
>>
>> <PastedGraphic-3.png>
>>
>>
>> Multi-award-winning WCAG 2.2 AA Accessibility Auditing and Accessibility Consultant
>>
>> Web:https://jimbyrne.co.uk
>>
>> Jim Byrne is one of the UK’s most experienced practitioners in the area of accessible digital design.
>>
>> Jim provided feedback during the development of WCAG 2 (the de facto accessibility guidelines used by governments across the world). He is the author of a number of technical books, training courses and accessibility guides. Jim was a winner of the equal access category of the Global Bangemann Challenge.
>>
>> >> >> List archives athttp://webaim.org/discussion/archives
>> >> <PastedGraphic-3.png>>> >> List archives athttp://webaim.org/discussion/archives
>> > 
>
>
> Multi-award-winning WCAG 2.2 AA Accessibility Auditing and Accessibility Consultant
>
> Web:https://jimbyrne.co.uk
>
> Jim Byrne is one of the UK’s most experienced practitioners in the area of accessible digital design.
>
> Jim provided feedback during the development of WCAG 2 (the de facto accessibility guidelines used by governments across the world). He is the author of a number of technical books, training courses and accessibility guides. Jim was a winner of the equal access category of the Global Bangemann Challenge.
>
> > > List archives athttp://webaim.org/discussion/archives
>