Images

Images often constitute a significant section of a website.  If images are placed judiciously with proper words and phrases, they can make a long lasting impression on the minds of the visitors. Images can make a website look lively, vivid and can offer a much needed breather for the visitors. However, they need to be placed carefully and appropriately, otherwise the entire effort might be wasted.

Images can be be used as pictures that help explain your content, decoration to make the page more presentable, or clickable image maps that let the user select a part of the image for more information.

Using images to explain your content

Aim

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.

Introduction

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.

Flow chart of certification process

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 1 - Interior of villa. Specifically linked to actual holiday service.

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

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 the actual refuse collection team should help to inspire confidence as well as to add a human face to our service. The picture (right) shows a team collecting NVQ awards and, by implication, providing a good service

 

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.

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.

USING LONG DESCRIPTION AND D_LINK FOR TEXT EQUIVALENTS

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.

pie chart D

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.

Accessible Image Maps

It is possible to use an image as part of your navigation process. Using an image such as the bathroom shown below has a great benefit for people who have learning disabilities, do not have english as their first language, or have reading disabilities. However it is not very helpful for blind people, users who have images turned off or people without a mouse. For this reason we must always include a set of duplicate links formatted using text only.

An image map is an image that has "active regions". When the user selects one of the regions, some action takes place -- a link may be followed, information may be sent to a server, etc. To make an image map accessible, you must make sure that each action associated with a visual region can be activated from the keyboard (without a pointing device).

Image maps are created with the MAP element. HTML allows two types of image maps: client-side (the user's browser processes a URI) and server-side (the server processes click coordinates). You should create client-side image maps (with "usemap") rather than server-side image maps (with "ismap") because server-side image maps require a specific input device. With client-side image maps, each "active region" in a picture can be assigned its own link that specifies what web page to retrieve when a portion of the picture is selected. Server-side image maps require the server to work out what area has been selected before deciding what action to take. Client side image maps are preferred over server-side image maps for at least two reasons: they are accessible to people browsing with non-graphical user agents and they offer immediate feedback as to whether or not the pointer is over an active region.

Each area of the image map is defined using a set of co-ordinates. The image map, and each area within in the map, must have alternative text. The alternative text for the active areas must say what will happen if the area is selected. You should also provide the "title" attribute for each area so that those browsers that use "title" are able to display the tag.

The properly marked up HTML code for a client-side image map is illustrated below.

Example of an image map

In the example below we have created areas around various bathroom fittings by listing the co-ordinates of the area shape. When a user selects an area the alt tag should appear (keyboard users may see a feint dotted line around the area)

Bathroom Report a broken bath Report a broken shower Report a broken toilet Report a broken sink

Select from -> Bath | Shower | Sink | Toilet

HTML code for image

Note the use of the "title" attribute as well as the "alt" attribute.


<p><img src="/bathroom.jpg" border="0" alt="Parts of a Bathroom" width="482" height="329" />
<map name="bathroom">
<area shape="poly" coords="3,161,4,283" href="/bath.htm" alt="Report a broken bath" />
<area shape="poly" coords="134,4,3,107" href="/shower.htm" alt="Report a broken shower" />
<area shape="poly" coords="323,117,444,273" href="/toilet.htm" alt="Report a broken toilet" />
<area shape="poly" coords="213,105,310,116" href="/sink.htm" alt="Report a broken sink" />
</map>

<p>Select from - <a href="/bath.php">Bath</a> | <a href="/shower.php">Shower</a> | <a href="/sink.php">Sink</a> | <a href="/toilet.php">Toilet</a></p>
</p>

 

When an image map such as this is used it is essential to also provide a set of standard hyperlinks (preferably in a list format). This will make sure that all our users will be able to go to the relevant pages even if they cannot access the links within the image map..

More information on image maps is given in the Navigation lesson.

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: 10em;
width: 32em;
height: 2.6em;
}

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.