1. Accessibility & Legislation
  2. Common Issues
  3. Testing & Tools
  4. Analysing Your Site

2.01.04 Text equivalents: Decorative images

a decorative box corner

Decorative images

Purely decorative images, such as spacer gifs or box corners, which have no meaning to the page content should have a null alt attribute.

<img src="box_corner.gif" width="80" height="80" alt="" />

It is considered best practice to code decorative images as part of the background using the style sheet.

link 1 link 2

Some spacer graphics do have a semantic meaning these should have an alt attribute of alt=" ". For example consider two links separated by a small spacer image, the spacer graphic should have an alt attribute of alt=" ".


Bullets

Images used to represent bullets should have a representational alt attribute such as alt=".", alt="*" or alt="#".

Best practice would use the style sheet to replace a standard bullet with a graphic image.

. Tables are often used for layout
. this list is laid out using a table comprising of 2 columns
. in this circumstance the bullet image should have alt="." or alt="#"
. changing the bullet at a later date would mean changing every occurrence of the image
. this method involves lots of code and clutter.
  • Best practice would be to use a real list like this one
  • use the style sheet to replace the default bullet with a custom one
  • ul { list-style-image: url(../images/bullet.gif) }
  • changing the image here will update all of the bullets
  • no alt attributes required.

Horizontal rules

An image intended to act as a divider or rule between parts of a document should have a representational alt attribute such as alt="---" or alt="___".

a decorative horizontal rule

Best practice would use a hr element and change its appearance via the style sheet. Less code, less clutter, easy to change and no alt attribute required.


The code would look like this:

<hr class="contentrule" />
hr.contentrule { background:url(../images/hr.gif); height:5px; margin:2em auto; width:70% }

Pragmatic approach

While the above is semantically correct, it is adding unnecessary noise to a screen reader. So from a pragmatic viewpoint it is suggested that null alt text may be most beneficial.


Next: Text in images