HTML and CSS Reference
In-Depth Information
This is becoming increasingly important: a SecuritySpace Technology Penetration
Report found that as of January 2010 over 64% of websites included JavaScript (see
The work of ARIA specification is still being done, and while support is fairly robust
and always improving, there are bugs and incomplete support in user agents to contend
with.
The good thing is that
implementing
ARIA doesn't have to be hard. It's definitely not
harder than building cross-browser, custom JavaScript widgets. And you're already
doing that, right?
7.1 Writing Appropriate alt Text Descriptions
Problem
You want to add a text alternative for an image.
Solution
Add the text alternative programmatically using the
alt
attribute of the image.
If an image deserves a text alternative that can be summed up in one to two sentences
(or about 75 words or less), set that text as the value of the
alt
attribute:
<img src="next_button.jpg"
alt="Go to the next page."
>
Alternative text should not exceed 150 characters.
How do you know how well the alternative text works? A good rule of thumb is, “If
you replace every image on the page with its text alternative, the page conveys the same
meaning as when the images are displayed.”
If the image is complex, like a chart or diagram, and cannot be simply summarized,
include the additional information adjacent to the image or link the image to a longer,
more detailed text alternative:
<a href
="diagram_desc.html"><img src="diagram.jpg" alt="Diagram that shows how
to assemble the item with a link to the assembly instructions">
</a>
If providing additional information beyond an
alt
attribute, ensure that
the text is updated whenever changes are made to the associated image.
