W3C home > Mailing lists > Public > w3c-wai-ig@w3.org > January to March 2014

Using Alt Text on the Link Element

From: David Best <davebest@cogeco.ca>
Date: Wed, 5 Mar 2014 11:28:17 -0500
To: <w3c-wai-ig@w3.org>
Message-ID: <004a01cf388f$ea3bcc60$beb36520$@cogeco.ca>
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" />


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




See real life example:



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.



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





Received on Wednesday, 5 March 2014 16:28:43 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 20:36:46 UTC