RE: Using Alt Text on the Link Element

Thank you so much for all the tips.
You have confirmed what I had understood to be the best practice. I just
thought it strange that the screen reader would acknowledge the alt="my text"
but not the alt="" for the <a> element. I had expected the Alt Text attribute
to be treated the same as it is for the <img> element. I assume this is a User
Agent issue, and the many different screen readers may have differing results.
I only tested with JAWS15, FF27, and IE11.
Thanks! David

-----Original Message-----
From: Bryan Garaventa [mailto:bryan.garaventa@whatsock.com]
Sent: Wednesday, March 05, 2014 1:10 PM
To: Foliot, John; davebest@cogeco.ca; w3c-wai-ig@w3.org
Subject: 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 19:39:33 UTC