The alt attribute, which provides a short text description for images is perhaps the best known accessibility technique yet is too often overlooked. Under the W3C specifications for XHTML , the alt attribute is required in all image tags. It is read to screen-reader users when an image is encountered, is displayed when image display is display is disabled or unavailable , and is incorrectly displayed in a tool tip box on image rollover in Internet Explorer.
The W3C XHTML specs states that tool tip text should only be generated by the title attribute, not alt. Search engine actively index alt text for both image and text searches , factoring in this text when evaluating the density of keywords in a page.
Keep your alt text short (less than 100 characters), and descriptive, avoiding text like “photo of…” or “image of…” as they unnecessarily clutter keyword density, and are redundant since the user / search engine will already be aware that the element is an image.
If you find yourself unsure of what text description to place in the alt attribute because the image is not informative, but it is simple decorative, then you should consider if the image is necessary or could be presented in another way that would not affect accessibility. Meaningless images like pixel shims (an outdated technique where 1 pixel square, transparent GIFs are used to position elements on a page) should be avoided at all costs as superior layout control can be achieved with CSS without garbling up the page with meaningless image tags. Decorative images that have that have no information can instead be presented as background images in a <div> tag or other block level tag using CSS.
Imagine you want to show a decorative flourish nest to a page heading with an image tag like the following:
<h2><img src=”i/flourish.gif” alt=”decorative flourish “ />About Us</h2>
The image should be applied with a CSS background image and some padding to push the text out of the way of the decorative element:
XHTML
<h2>About Us</h2>
CSS
h2
{padding-left:25px; background:url(…/i/flourish.gif)no-repeat left;}
The rule of thumb is if the visual content is not informational, all imagery should be presented via CSS.
When alt is not enough to accurately describe the content within an image, use the longdesc attribute as well to create a link to a more complete description. Traditionally , longdesc has been used to link to an external HTML file that contains the detailed description:
<img src=”client-logos.gif” alt=”Logos of our top clients” longdesc=”long-description.html”/>
This approach has a number of shortcomings:
- Requires the user to navigate away from the page they are on, which can be annoying
- Move important, keyword-rich content to another page that could be individually indexed by a search engine, rather than keeping it with the rest of the page with which is associated
- Creates yet another file to manage in the site, which can be cumbersome when many images require longdesc content
Browse Timeline
