Forum Moderators: open
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
WAI - Web Accessibility Initiative
WCAG - Web Content Accessibility Guidelines 1.0
Everything you need to know about providing alternatives for accessibility and usability.
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.
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.
[webmasterworld.com...]
Who benefits?
[fdisk.com...]
One doesn't have to add a descriptive line of text into the alt= element of every image.
Matt
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.
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.
-b
