Forum Moderators: open
I need to know the following
1. Allowed Length
2. Ideal Length
3. Points to remember
- don't know, but a common sense limit should kick in before you reach any technical limit.
2. Ideal Length
- short and to the point.
3. Points to remember
- If the image is the only content in a link, the alt text should describe the link, not the image.
If the image is the only content in a link, the alt text should describe the link, not the image.
3. Points to remember- If the image is the only content in a link, the alt text should describe the link, not the image.
I currently have a section that has a link to "Why Buy From XYZ". In this section there's a "non-linked" picture of a Toy that is being sold with-in the online store. But the landing page has details about "Why Buy From XYZ" and nothing about the Toy that's shown in the picture (But is sold in the store). What should be the Alt and Title of the picture represented?
Also, it will be great if someone also explains with "Why the picture should have the recommended Alt and title"
3. Points to remember- If the image is the only content in a link, the alt text should describe the link, not the image.
Otherwise screen reader users would hear "Link: USA Flag" which is misleading, but with the second example "Link: USA Widgets" which is accurate.
You could then add supplementary information with the title tag eg
<a href="/usa-widgets/"><img src=usa-flag.gif" alt="USA Widgets" title="See our range of bestselling USA Widgets"></a>Wikipedia is not a good example to use, because most of its image links are links to larger versions of the same image. i.e. the alt is describing the image *and* the link (since it just links to the same image anyway).
So if you were using images like Wikipedia, i.e. a linked image to a larger image page, you could use:
<a href="large-usa-flag-page"><img src=usa-flag.gif" alt="USA Flag"></a>Or perhaps better:
<a href="large-usa-flag-page"><img src=usa-flag.gif" alt="View larger image of USA Flag"></a>Or move supplementary info to title:
<a href="large-usa-flag-page"><img src=usa-flag.gif" alt="USA Flag" title="View Larger Image"></a>If you click through to a Wikipedia larger image page you'll see the alt text on the larger image describes the link on that image, by putting alt="File: usa-flag.gif" i.e. describing the link, not the image. But like I say, Wikipedia is not a good example to use for obvious reasons.
More info in WCAG2 Techniques:
H30: Providing link text that describes the purpose of a link for anchor elements [w3.org]
When an image is the only content of a link, the text alternative for the image describes the unique function of the link.
<div><h3>Why Buy From ABC</h3>
<img src="toy-car.jpg" alt="?">
* Huge selection of products
* Expert customer service
* Thousands of satisfied customers
* Exquisite craftmanship and quality
* <a href="Why-Buy-From-ABC.html">More</a>
</div>
in the above case what should be the ALT text?
Since the image is not relevant to that chunk of information, I would just use alt="".
The reason I say I'm perhaps wrong is because this would cause issues with people who still use spacer images in their table layouts. Clearly CSS is the fix for this, but not everyone has the resource to rebuild in CSS.
Perhaps I'm wrong but I was under the impression that you SHOULD include content within an alt tag. Is alt="" OK to use?I see sites <url removed> recommending to use alt="" so there should be nothing wrong about it.
[edited by: incrediBILL at 1:49 pm (utc) on Aug. 17, 2009]
[edit reason] removed URL, see TOS #13 [webmasterworld.com...] [/edit]
Is alt="" OK to use?
Yes, if the image is not essential to understanding the page content.
Wouldn't it be better to put in some sort of description even if the image isn't really that relevant to anything on the page?
No, not necessarily.
In ganesh's example, with alt="Toy Car" screen reader users may hear something like:
"Heading Level 3: Why Buy From ABC. Image: Toy Car. List with 5 items: Huge selection of products..." etc
Clearly the alt text doesn't add anything in terms of comprehension, it may even be confusing, so alt="" is arguably better:
"Heading Level 3: Why Buy From ABC. List with 5 items: Huge selection of products..." etc
“If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.”
[w3.org...]
