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
Is It Considered Bad Practice to Use Absolute Positioning
How to Give a CSS Class Priority Over an Id
Mailto Link Multiple Body Lines
Why Doesn't "Display: Block" & "Width: Auto" Stretch a Button to Fill the Container
Center Image Element in Parent Div
Why Is the Span's Line-Height Useless
CSS - Relative Positioned Parent Div Not Stretching to Absolute Child Div Height
Remove Space Above and Below <P> Tag HTML
How to Flatten Nested Divs to Display Them in a CSS Grid
How to Export HTML Table Data as .CSV File
How to Hide Columns in HTML Table
Flex Item Should Align Left, Not Center, When It Wraps
Html5 Video // Completely Hide Controls
How to Choose Between Get and Post Methods in HTML Forms
What Is the Default Button Type
Svg Coordinates with Transform Matrix
Margin:Auto;' Doesn't Work on Inline-Block Elements
How to Force a Download File Prompt Instead of Displaying It In-Browser with HTML