Using images to explain your content
Text on its own is very boring. The World-Wide-Web allows us to introduce different media to make our content more interesting and informative. This lesson looks at how to include images so that they enhance your web content whilst not causing any problems to disabled people.
Images are extremely useful for people with learning disabilities and those with English as a second language. A suitable selection of images will help you to get your message across to everyone efficiently and effectively. The saying "a picture is worth a thousand words" is as true for the web as any other communications media. However, the emphasis here is "suitability". Images that have nothing to do with the content of a page can cause confusion.
The most useful images are those that provide the sighted visitor with a quick overview of the content. For example, we have a composite image on our home page that provides a quick overview of our certification process (see below). This is particularly useful for people with reading problems or who have English as a second language, but it also helps everyone else obtain the concept of the associated text.
Other types of image may be specific to the content, or just included to strengthen the ambience of the page.
If we take a holiday website we might well use interior shots of the accommodation to support our text, a picture of a child to support our concept of family holiday and the IATA logo to inspire confidence.
Image 2 - Child at play, general picture to reinforce concept of a family holiday service
Image 3 - IATA log, included to provide confidence that tour company is properly regulated
Including pictures of real people adds a human dimension to your website and reminds visitors that you are not just a digital presence. Photographs of your staff add a human dimension to your website, this helps elderly people and others who might be nervous of the new technology.
For a Local Authority website (refuse collection service) we might include a picture of an overflowing bin (left) to illustrate a problem. A picture of those who have to clear up the mess adds a human dimension.
The proper use of images can make your website more accessible, not less accessible, provided you adhere to the following guidelines.
Using the <img> element
The image element <img> is used to import images into your web page. This element has a number of attributes available to help maintain your formatting and to help robots and assistive software understand the purpose of the image.
Alternative text attribute (alt tags)
Screen readers, people with slow Internet connections, users of mobile phones and users of text-only browsers turn images off to save time and bandwidth. It is important that you do not rely upon multimedia to impart your message. HTML allows you to provide a text only alternative for all multimedia types and it is vital that you use these facilities.
All web page images MUST have an alternative text attribute that explains either the purpose or content of the image (this even includes images used for backgrounds or decoration that are not called by the style sheet). It is important that the alternative text is linked to the meaning of the image (why it is included in the page). If you use an image as a link (for example a navigation button) then this text must explain what would happen if the user selects the link. Navigation buttons are covered in greater detail in lesson 11 .
Where an image needs more information than a simple alternative text attribute provides you can create a separate file describing the image and link to it using the "longdesc" attribute and a "D" link.
Alternative text should be short and simple, but sometimes you may need to provide more explanation or content than is suitable for alt-text. In these cases, you can add the long description (longdesc) attribute to the img element. The longdesc attribute points to the URL of a separate description file that contains information conveyed by the image. Most modern screen readers will offer the londesc link to the user so that he or she can hear the longer description if they want.
Unfortunately not all assistive software or web browsers currently support the longdesc attribute, so it is recommended that you also include a simple HTML link to the descriptive page as well. The convention is to create a "D" link that uses the capital letter D as the link text. This technique works for every type of browser and assistive software � but it does add a small letter "D" to the visual page. It works by adding the hyper-linked "D" immediately after the image is called.
The code for the chart shown above is as follows
<img src="/pie5.gif" alt="Chart showing popularity of film genres" longdesc="charttext.htm" >
<a href="/charttext.htm" title="Text description of this chart">D</a>
Note that if you select the "D link" next to the bottom right corner of the image you will be able to read a text version of the chart. You will also be given a link back to the image so that you can return to the right part of this page.
Width and Height attributes
HTML can reserve a suitable space when an image is included in a web page so that the page maintains the same style if the image does not arrive. This is done by providing values to the height and width attributes of the <img> element.
WARNING - Always resize images using graphics software before using them in a web page. Many cameras produce images that are 2mb in size, just one of these will freeze a screen reader. Only use the width and height attributes to maintain layout if the image fails to arrive.
<img src="images/myphoto.jpg" width="250" height="120" alt="Portrait of the author">
If you do not specify the size of the image, and the image fails to arrive, most browsers will display a small square space together with the alternative text tag.
If you have a large image that occupies its own line space you may want to avoid using the sizing attributes so that a user who has images turned off does not get a page with a large blank space.