Using the stylesheet to display images

Sometimes you will want to include images purely for visual effect. These images are of no interest to blind users and should (wherever possible) be loaded into the page using CSS rather than HTML. Typical examples are background images, images used for bulleted list items, images used for navigation buttons, or just squiggly lines to separate items on the page.

If we import these decorative images using HTML (via the <img src="/xx"> element) we must provide alternative text attributes that are read out aloud and possibly break the flow of the content. Using a blank alternative text attribute is not an option because the listener has no way of knowing if the empty attribute means that the image is not important, or if the author has just forgotten to add the text.

Using images for the background

All block element such as divisions <div>, headings <h1> etc., lists, tables and paragraphs can have a background image defined in the stylesheet.

Sample heading with background image

The sub-heading above is simply coded in HTML as <h4>Sample heading with background image</h4>. so that screen readers, assistive software and search robots get the message without any confusion with image names or alternative text tags. The CSS code is shown below.

h4 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: medium; font-weight: bold;
color: #E0E2EE; background-color: #330066;
background-image: url(headbkg.jpg);
background-repeat: no-repeat;
background-position: left bottom;
text-indent: 5em;
width: 32em;
height: 2.6em;
color: #FFF;

Note the following
  • Whenever we specify a font colour we must also specify a contrasting background colour. In this case we specify a colour to match the background of the image so that if the image fails to arrive the text is still readable against a solid, contrasting background colour.
  • We use the relative dimensioning "ems" so that the whole heading stretches in a fluid manner with larger or smaller fonts. Try it now by changing the text size of your browser. On modern browsers the background image will stretch or contract as the text size changes, older browsers will see the background colour as a border area if the text is enlarged beyond the image size.

Using images for bulleted lists

The standard bulleted list has a round dot as the bullet image. We can use the style sheet to change this bullet to be any image we want. This is the only acceptable method for displaying lists with images as the bullet points. In our list of notes for the CSS above we have used an image called ico.jpg for the bullet image and declared it is CSS as folows.

ul {list-style-image: url(ico.jpg);}

By using CSS we have avoided the problem of starting every list item with the code required to import an external image (including alt tags etc.). This means that the HTM is much simpler. You can add background images to the individual list items <li> and obtain some quite interesting effects, all without disrupting the flow of content being delivered through HTML.

Using images for navigation buttons

To make the page more interesting for visual users it is common to use a small image to act as navigation buttons. If this image is imported using the HTML <img> attribute then you need to provide an alternative text that tells the blind user what will happen if they select the link. For example "Go to our Home page". This is discussed in greater detail in lesson 10 (Navigation). However a much better way of using images for navigation buttons is to use the stylesheet to display the image as a background to the link text. You saw this happen in lesson 4 when we applied the stylesheet demo3.css to the webpage and the result was navigation buttons that looked like a series of green leaves with red text for the links. We can also use CSS to produce "roll-over" buttons that change as the user selects the button.

Using images of text

Images cannot be read by screen readers, so any text contained in an image is not accessible to blind users. Providing a suitable alternative text attribute solves the problem for blind users by allowing their screen readers to read the alternative text instead, but people with limited vision (using a large font size) have to specifically ask for the alternative text to be presented by selecting the image and waiting for the alternative text to appear. Often this text is in small font so still not accessible to these people. Furthermore, images are created by colouring individual pixels, people with weak vision will have trouble reading any text presented as an image. Some times the image cannot be enlarged, or if it is then it becomes distorted (pixelated). For these reasons you should avoid using images containing text.

To get around this problem you could always include the text as a caption to the image so that the text is available in both image and text format. A better solution would be to set the picture part of the image as a background image using CSS, and the text part as standard text as we did for the sample heading shown earlier on this page.