Re: Using Alt Text on the Link Element

Hi,

Alt is not an attribute of the <a> element, neither in HTML5, nor in the
very dated HTML 4.01 spec:
HTML5: <http://www.w3.org/TR/html5/text-level-semantics.html#the-a-element>;
HTML 4.01:
<http://www.w3.org/TR/1999/REC-html401-19991224/struct/links.html#edef-A>.

A screenshot is not a decorative image, so it would require a text
alternative.

Best regards,

Christophe

On 5/03/2014 17:28, David Best wrote:
>
> 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-alt
>
>  
>
> 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
>
>  
>


-- 
Christophe Strobbe
Akademischer Mitarbeiter
Adaptive User Interfaces Research Group
Hochschule der Medien
Nobelstraße 10
70569 Stuttgart
Tel. +49 711 8923 2749