2

I was reading the WCAG 2.0 Technique H30.

The Procedure says:

For each link in the content that uses this technique:

  1. Check that text or a text alternative for non-text content is included in the a element
  2. If an img element is the only content of the a element, check that its text alternative describes the purpose of the link
  3. If the a element contains one or more img element(s) and the text alternative of the img element(s) is empty, check that the text of the link describes the purpose of the link
  4. If the a element only contains text, check that the text describes the purpose of the link

I focused on point 2: what if the img has an alt attribute, but hasn't a text alternative?

For example, does the following code satisfy that technique requirement?

<a href="http://www.mystite.com"> 
  <img src="http://www.mystite.com/myimage.jpg" alt="Description of the image" />
</a>
TylerH
  • 20,799
  • 66
  • 75
  • 101
  • I concur with unor. The alt should be `return home` or simply just `home`, versus `an icon of a house indicating home` – Ryan B May 27 '13 at 21:55

2 Answers2

3

I’d say your example does not satisfy the technique.

Your a element contains only an img element. According to H30, the alt attribute of this image should contain information about the link target and not about the image itself.

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

When an image is the only content of a link, the text alternative for the image describes the unique function of the link.

unor
  • 92,415
  • 26
  • 211
  • 360
0

From my understanding, the alt attribute is the text 'alt' that describes the image. That is what shows up if you hover your mouse over the image and is what will show up if no images are rendered or the user is using a text-to-verbal translator. So yes that example you have given does comply to the rule.

A good reference is this Stack Overflow answer I found. It helps show how to go about doing it:

I'm a screen reader user and will use Stack Overflow as an example of both the good and bad.

Alt tags should be brief and descriptive. For example, Stack Overflow's alt tags for the vote up and vote down options are nice since they don't take long to read and get to the point quickly. Examples of bad alt tags are the make this question a favorite and accept this answer. Neither of the tags are descriptive, the favorite tag is just "*" and the accept the answer tag is "check" The only way for me to tell what they are is to read the source or have someone sighted let me know what they are for.

As far as title attributes go I don't really have much advice. My screen reader doesn't read them by default so I don't normally use them. An example of something that could be useful is additional information. For example the reason my accepted answer rate is so low is because I have no way of telling whether I have accepted an answer on a question. It would be nice if the title attribute on the accept this answer graphic would say something like "click to accept this answer" if the answer wasn't accepted and "Click to remove this answer as the accepted answer" if it is the accepted answer.

TylerH
  • 20,799
  • 66
  • 75
  • 101
CoffeePeddlerIntern
  • 659
  • 3
  • 13
  • 29