Using Alt Text on the Link Element

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

 

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 elliminate the duplication. 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.

 

Example code:

<div id="screensteps">

  <h2 id="StepTitle">Step Title</h2>

    <div class="image clearfix">

      <a href="Full Screen Shot Image.png" alt="">

        <img alt="" src="Small Magnifier Icon.png" height="301" width="409" />

      </a>

      <p>Text description of the full screen shot image.</p>

    </div>

</div>

 

See real life example:

http://www.altacademy.info/s/ALT/m/Knowledge-Base/l/162872-how-do-i-install-al
t

 

Note, the examples at the following resources have no mention of using Alt=""
on a <a> element.

 

WCAG 2.0 2.4.4 Unnecessary duplication of link description. A 'stuttering'
effect occurs when you have the same link text as the 'alt' text of an image
within the link.

http://www.w3.org/TR/WCAG20-TECHS/H2.html 

 

WCAG 2.0 1.1.1 Describe the purpose of a link by providing descriptive text as
the content of the <a> element.

http://www.w3.org/TR/WCAG20-TECHS/H30.html

 

Thanks!

David