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
Another useful attribute – especially when designing sites for the visually impared is the “longdesc” tag which allows you to point to a HTML or TXT file with a full description of the object in question.
This attribute is generally only available to users with Text-To-Speech browsers and is very useful considering the legislation (certainly in the UK at least) about making websites accessible to all. More information can be found via Web Accessibility Testing Services.
Hi Katy,
Thanks for adding more information. More accessibility means more readers benefit and that’s the reason that we’re writing. Isn’t it? 🙂
Liz
Katy,
Finally, an explanation of what the “longdesc” attribute is for! I wasn’t totally clear, which is one of the reasons I haven’t mentioned it. I do get the impression that it isn’t used that often though. Is that right?
Cas
To be honest it’s hardly ever used – I for one am a big fan of “title” and “alt” tags but have never used the “longdesc”. It seems to be a very ineffective way of describing files – having to create a separate file for almost every image/link on the page seems a bit of over-kill. From what I understand there are some browsers that don’t support it properly hence the use of the “hidden d link”.
Plus, most browsers these days support quite long alt/title tags and table summaries can also be used.