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
altattribute. 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
altattribute describing it as shown in this example:
- 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
titleattribute, 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
altattribute should suffice. One shouldn’t put iconic text-backing on page as that’s the culprit leading to redundancy, not the
altattribute. 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.