Successful Blog

Here is a good place for a call to action.

  • Home
  • Community
  • About
  • Author Guidelines
  • Liz’s Book
  • Stay Tuned

How to Code Accessible Links–Part 2

January 17, 2006 by Liz

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

Print Friendly, PDF & Email

Filed Under: Links, SEO, Successful Blog, Tech/Stats Tagged With: accessibility, bc, blog-promotion, colding-links, personal-branding

Recently Updated Posts

How to Become a Better Storyteller

SEO and Content Marketing

How to Use Both Content Marketing and SEO to Amplify Your Blog

9 Practical Work-at-Home Ideas For Moms

How to Monetize Your Hobby

How To Get Paid For Sharing Your Travel Stories

7 reasons why visitors leave websites for ever



From Liz Strauss & GeniusShared Press

  • What IS an SOB?!
  • SOB A-Z Directory
  • Letting Liz Be

© 2025 ME Strauss & GeniusShared