Images & Accessibilities

Posted March 22nd, 2005 by Mike Cherim

If we follow these four image-use rules […]

The seemingly mysterious use of the Alt attribute of images as it concerns web accessibility is alive and well. I have some thoughts on this matter, though, so I say let’s kill this horse once and for all. Please consider the following carefully. If we want to employ semantics correctly, we should be thinking of imagery this way:

One. Background images, if they convey information — like a banner, perhaps — should have a “title” attribute and employ the SIR technique, as described at David Shea’s (the fellow behind the CSS Zen Garden website) blog, Mezzo Blue or something similar. If that information is extensive, that is wrong, it shouldn’t be.
Two. On-page images, if they convey information — like a persons photo — should have a proper alt attribute. If that information is extensive, as such in a map, a long description should be provided. If it doesn’t convey information, as in piping, a squiggle, whatever, it should be employed as a background image. If it is used to add visual separation and needs dynamic placement it should have an alt attribute describing it as shown in this example: alt="Next Item".
Three. Bullet images, this one is separator and remains dynamic as it is assigned to dynamic text. This one is easy as it’s taken right out of our hands with plain markup.
Four. Icon images, by their very definition, are meant to represent something visually, in lieu of text, and should have a title attribute, and should employ the Shea’s revised image replacement technique, or something similar. If that information is extensive, it shouldn’t be, that is wrong, and an icon shouldn’t be used. Since the information represented is supposed to be brief, iconic if you will, an alt attribute should suffice. One shouldn’t put iconic text-backing on page as that’s the culprit leading to redundancy, not the alt attribute. In other words, on-page, one shouldn’t even have icon-then-link or text — that’s what bullets are for. Icons, visually-speaking, should be easy to see and understand. If they are not then on-page text should be used.

If we follow these four image-use rules, five if I count the one the use of proper and sufficient contrast defined by the W3CAI Priorities Checklist, we will stay out of trouble, avoid redundancies, and allow full and complete — and logical — access to everyone.

Filed under Imagery & Graphics, Access Counts —

One Response to: “Images & Accessibilities”

Fabian responds:
Posted: July 12th, 2005 at 2:38 am →

your comment system stops people from showing tables and other code even when its in the code tag.

Sorry. Comments are closed.