Is It Correct to Use Alt Tag for an Anchor Link

using alt for an anchor link

You should use the title attribute for anchor tags if you wish to apply descriptive information similarly as you would for an alt attribute. The title attribute is valid on anchor tags and is serves no other purpose than providing information about the linked page.

W3C recommends that the value of the title attribute should match the value of the title of the linked document but it's not mandatory.

http://www.w3.org/MarkUp/1995-archive/Elements/A.html


Alternatively, and likely to be more beneficial, you can use the ARIA accessibility attribute aria-label (not to be confused with aria-labeledby). aria-label serves the same function as the alt attribute does for images but for non-image elements and includes some measure of optimization since your optimizing for screen readers.

http://www.w3.org/WAI/GL/wiki/Using_aria-label_to_provide_labels_for_objects


If you want to describe an anchor tag though, it's usually appropriate to use the rel or rev tag but your limited to specific values, they should not be used for human readable descriptions.

Rel serves to describe the relationship of the linked page to the current page. (e.g. if the linked page is next in a logical series it would be rel=next)

The rev attribute is essentially the reverse relationship of the rel attribute. Rev describes the relationship of the current page to the linked page.

You can find a list of valid values here: http://microformats.org/wiki/existing-rel-values

How to use ALT tag correctly?

the alt should be only used in <applet>, <area>, <img>, <input>

alt - <applet>, <area>, <img>, <input> - Alternative text in case an
image can't be displayed.

Source

here is a snippet of img:

<img src="http://lorempixel.com/100/100" alt="image">

SEO with image link alt text vs standard text-based link

Text links are an authority over image based links. While search engines will utilize alt and title tags to identify the content of the image your anchor text is still King. Remember a search engine spider can download an image file, but it can't see it like humans can. A search engine spider however loves and reads text.

If you're worried about using a custom font than use an alternate solution such as sIFR or @font-face.

How do I make an image within an anchor tag accessible?

You have asked this question but not provided enough context. Seeing the surrounding content, the entire page, or the entire site would help.

  • Is there surrounding text that explains either the image or where the link goes?

  • Will the image appear on the page after the link, perhaps a more full version of the image (as in, all the panels if this image is one of many)?

  • Does the site behave similarly to another site or section of this site with which you have confidence users are familiar?

A screen reader is going to announce that it is a link, that it is an image, and then it will announce the image alt text. If you do not feel it necessary to provide some text outside of the image to show users, then you probably do not need to try to force it into the alt text nor into a title attribute (also, do not use a title attribute).

Basically you want to give sighted and non-sighted and low-sighted users the same experience. If you feel it necessary to manage expectations on where the link goes by using the alt then you should just provide it around the link or before the collection of links. Then it helps all users. If you do not think you need to manage the user's expectations, then do not force it on the non-sighted users by jamming extra text down their screen readers.

W3C Validation: Attribute alt not allowed on element a at this point

You want to use title attribute, not alt.



Related Topics



Leave a reply



Submit