How to Code an Accessible Image
by Cas of Brightmeadow
Basic code
Just to remind you what the basic image code looks like:
<img src=”http://www.foo.com/image.jpg” />
The ALT description–how it works
The ALT description works in much the same way that the TITLE attribute works for a link. It is inserted after the URL but before the tag is closed and contains descriptive text. Instead of previewing the image when you mouse over though, the ALT attribute is what is read out when someone is using a screen reader. It should describe the content of the image. It is also the ALT text that is displayed by your browser when, for whatever reason, an image fails to load.
Accessible code
<img src=”http://foo.com/image.jpg” alt=”descriptive text” />
When to use
Use descriptive text in the ALT attribute when the image imparts information to the viewer, for example if it contains text like many header images and buttons do.
When to use a null value
There are certain instances when the image being used imparts no information to the reader – for example a spacer.gif (though the practice of using spacer images is now frowned upon). In these instances, consider using the null attribute to make the screen readers ignore the image. To use the null value, simple use alt="" without a space between the quotation marks. Putting a space, or just ignoring the ALT description will result in non-visual readers being told that there is an image, but not being given a description. Highly frustrating!
A few notes
- The description should not contain the word ‘image’. An image coded as
<img src=”penguin.jpg” alt=”an image of penguins plotting” />
will be read out as “IMAGE, an image of penguins plotting” by a screen reader.
Repetitive. Rather, the text should be something like “penguins plotting another evil plan”. - Think carefully about when to use the null attribute. Users who can’t see your decorative or blank images don’t need to hear a description of them.
Meanwhile Cas and I are off to plot a plan of our own, until tomorrow.
–ME “Liz” Strauss
The Complete Series
How to Code Accessible Links
This one: How to Code Accessible Linksââ¬âPart 1
This one: How to Code Accessible Linksââ¬âPart 2
How to Code Accessible Linksââ¬âPart 3
