Re: Using Alt Text on the Link Element

You can also add aria-describedby so that screen readers will read the 
description text when tabbing to the link, like so:


<div id="screensteps">
<h2 id="StepTitle">Step Title</h2>
<div class="image clearfix">
<a aria-describedby="ssd1" href="Full_Screen_Shot_Image.png">
<img alt="Image: Full Screen" src="Small_Magnifier_Icon.png" height="301" 
width="409" />
</a>
<p id="ssd1">Text description of the full screen shot image.</p>
</div>
</div>


----- Original Message ----- 
From: "Foliot, John" <john.foliot@chase.com>
To: <davebest@cogeco.ca>; <w3c-wai-ig@w3.org>
Sent: Wednesday, March 05, 2014 8:59 AM
Subject: RE: Using Alt Text on the Link Element


David Best wrote:
>
> What is the WCAG2.0 rule for using Alt Text in an <a> element?
>

Alt text is never applied to the <a> (anchor) element - it is 
non-conformant.

> The situation I have been confronted with is a <h2> element followed
> by an <img> element enclosed in an <a> element. The template generator
> automatically places the <h2> text into the <img> Alt Text attribute,
> but this creates a duplicate output for the screen reader user, and
> the author would like to make the <a>/<img> element invisible so as
> to eliminate the duplication.

This appears to be a problem with your template.

> If you put Alt Text in the <a> element,
> then the screen reader reads out the Alt Text as expected, but if you
> use no text (alt="") in the <a> element, the screen reader reads out
> the <a> element link location. Unlike the <img> element that becomes
> invisible. In this case the <a> link is simply a larger screen shot
> image, and not of any value to the screen reader user.

I will rework your code to what it 'should' be:

<div id="screensteps">
<h2 id="StepTitle">Step Title</h2>
<div class="image clearfix">
<a href="Full_Screen_Shot_Image.png">
<img alt="Image: Full Screen" src="Small_Magnifier_Icon.png" height="301" 
width="409" />
</a>
<p>Text description of the full screen shot image.</p>
</div>
</div>

Because the link around the magnifier icon goes to a specific asset, the alt 
text of that image needs to define what/were that link is going to. This is 
another example of what is outlined here: 
http://dev.w3.org/html5/alt-techniques/#sec1 (see example 1.3)

Hope this helps.

JF


This transmission may contain information that is privileged, confidential, 
legally privileged, and/or exempt from disclosure under applicable law.  If 
you are not the intended recipient, you are hereby notified that any 
disclosure, copying, distribution, or use of the information contained 
herein (including any reliance thereon) is STRICTLY PROHIBITED.  Although 
this transmission and any attachments are believed to be free of any virus 
or other defect that might affect any computer system into which it is 
received and opened, it is the responsibility of the recipient to ensure 
that it is virus free and no responsibility is accepted by JPMorgan Chase & 
Co., its subsidiaries and affiliates, as applicable, for any loss or damage 
arising in any way from its use.  If you received this transmission in 
error, please immediately contact the sender and destroy the material in its 
entirety, whether in electronic or hard copy format. Thank you.

Received on Wednesday, 5 March 2014 18:10:42 UTC