|The Alt Attribute|
Maximum of 80 characters
The Alt Attribute (Alt Text, Alternate Text, Alternative Text, Text Equivalent)
Long abused by marketers and consumers alike, the alt attribute is probably the number one overlooked, abused, misused and overly SEO'd attribute out of all of them. I think it's a great topic to discuss, even after thousands of previous discussions. Now that we have the Accessibility and Usability Forum, a grand Q&A on the Alt Attribute is in order, wouldn't you say so? ;)
I'm going to start off with a list of references where the alt attribute is discussed in detail depending on the element it applies to. We are not only talking images here but other elements where the alt attribute can be used.
|Several non-textual elements (IMG, AREA, APPLET, and INPUT) let authors specify alternate text to serve as content when the element cannot be rendered normally. Specifying alternate text assists users without graphic display terminals, users whose browsers don't support forms, visually impaired users, those who use speech synthesizers, those who have configured their graphical user agents not to display images, etc. |
The alt attribute must be specified for the IMG and AREA elements. It is optional for the INPUT and APPLET elements.
While alternate text may be very helpful, it must be handled with care. Authors should observe the following guidelines:
Do not specify irrelevant alternate text when including images intended to format a page, for instance, alt="red ball" would be inappropriate for an image that adds a red ball for decorating a heading or paragraph. In such cases, the alternate text should be the empty string (""). Authors are in any case advised to avoid using images to format pages; style sheets should be used instead.
Do not specify meaningless alternate text (e.g., "dummy text"). Not only will this frustrate users, it will slow down user agents that must convert text to speech or braille output.
Implementors should consult the section on accessibility (http://www.w3.org/TR/REC-html40/appendix/notes.html#accessibility) for information about how to handle cases of omitted alternate text.
W3C (Worldwide Web Consortium) - HTML 4
- W3C Quality Assurance - Use the alt attribute to describe the function of each visual
- Introduction to HTML 4 - 2.3.2 Accessibility
- Objects, Images and Applets in HTML documents - 13.8 How to specify alternate text
- Forms in HTML documents
WAI - Web Accessibility Initiative
- Web Accessibility Initiative (WAI) - home page
- Guideline 1. Provide equivalent alternatives to auditory and visual content.
WCAG - Web Content Accessibility Guidelines 1.0
Everything you need to know about providing alternatives for accessibility and usability.
- 7.1 Short text equivalents for images ("alt-text")
- 7.2 Long descriptions of images
- 8.1 Text and non-text equivalents for applets and programmatic objects
- 9.2 Text equivalents for multimedia
- 10.3 Writing for browsers that do not support FRAME
- 12.5 Alternative presentation of scripts
- 13 Index of HTML elements and attributes
WCAG - Web Content Accessibility Guidelines 2.0 - Working Draft
If you wish to stay current with what is happening in regards to the Accessibility Guidelines, keep an eye on the Working Drafts of the specifications that interest you the most. Actually, the entire specification will be of interest to all of us as each and every element we work with on a daily basis most likely has some form of accessibility/usability feature associated with it.
- HTML Techniques for WCAG 2.0
Dive into Accessibility
This is a must read for anybody who needs to become intimately familiar with Accessibility. Probably one of the best books out there that discusses Accessiblity and Usability, and, it's free!
Okay, we're now ready for your questions and comments. Working code examples are encouraged as visitors to this topic can see exactly how we are formatting our alt attributes along with the different approaches that some of use for populating alt attributes.
The below is an excerpt from the Dive Into Accessiblity book. If you are serious about accessiblity and want to get a very well written view of what users are faced with, you should take about 30 minutes and read the book, it's an eye opener!
- Jackie benefits. JAWS reads the alt text. Without valid alt text, Jackie hears the filename
instead, which sounds horrible.
- Marcus benefits. Lynx, as a text-browser, doesn't display any images, only alt text. Without alt text, Lynx displays the filename, which looks as bad as JAWS sounds.
- Michael benefits. Links, as a text-only browser, doesn't display any images, only alt text. Without alt text, Links does not display anything for an image (unless the image is a link, in which case Links simply displays "[IMG]"). When browsing with Opera with images turned off, Michael sees the alt text in place of the image.
- Lillian benefits. Internet Explorer displays the alt text as a tooltip (although you as a designer can suppress this).
- Google benefits. The Googlebot indexes alt text, which is used not only in matching keywords in normal searches, but also in image searches.
I *know* that you know, but it is worth clarifying. A valid "alt text" can be an empty string "", which simply doesn't display (Lynx) or say (Jaws etc) anything, which can be preferable if the image is simply eye candy.
One doesn't have to add a descriptive line of text into the alt= element of every image.
Very nice summary there. I think the alt attribute is very much under estimated. And, few seem to realize that it is not exclusive to images.
Proper use of the alt attribute is the first, and probably one of the most important, steps towards usability. It is also one of the simplest.
...and, as I was reminded just a few minutes ago, the absence of the alt attribute makes a big difference to usability/accessibility--for anyone--when something goes wrong.
I was doing some work in a beta version of a web application that has a fairly intensely graphical interface. In this application, images are used for many, many of the functional elements in the interface, but few of the images include alt attributes.
In the beta release, something changed that borked the paths to a certain set of images, making the controls in one part of the tool totally unusable.
Had the alt attributes been present, the tidy layout might have been slightly broken, but I would have had a set of hyperlinked text equivalents and simply been able to carry on with the task at hand...
It occurs to me that some readers might be thinking "What are you talking about? The little broken image icon makes this a non-issue," and they'd be right except that some browsers don't show anything where the image file is missing and there's no alt text (Firefox/Mozilla, e.g. do not, IE does and Opera and Safari reserve space for the image--clickable space in the case of linked images).
The point of all of this is that, while it might be reasonable to think that the absence of an alt attribute won't cause any problems most of the time, including good alt text prevents problems all of the time.