Creating Accessible Websites

Dealing With Images and Video

 

Alt Tags

"Alt tags" (or alternative text) produce small yellow text flags in the browser when the user points the mouse at an image. They don't appear automatically, but must be coded in. They are essential for the 30% of users that view web pages with the images switched off and for visually impaired users who use screen readers. Depending on how the browser has been set up, the alt tag may appear on the screen in a "place holder" box. If you do nothing else to improve accessibility to your website you should ensure that every image has an "alt tag".

The tag for alternative text is as follows:

<IMG SRC="image.gif" ALT="Three or four word description">

Keep the description short as some browsers will limit how much they will display. Don't include the words "link to..." as screen readers will use a different tone of voice or say "link". Sighted viewers will see the hand icon appear to notify them that it is a link.

Dreamweaver users: select the image in the design view and type in the description in the field labelled "alt" in the properties box. Dreamweaver MX users should set their preferences to be prompted automatically to add alts. Edit>Preferences and select "Accessibility" from the list. Check off all the top 5 boxes in the dialog box that appears and click on OK.

 

 

Insignificant Images

Use double quote marks "" to denote images that do not represent important information or are used for decoration such as graphical bullets. This will stop a screen reader from reading the alt tag - a nuisance if it has to pass 20 spacers on its way to the start of the page content.

<IMG SRC="image.gif" ALT="">

 

Longdescription

Images may require a lengthy description to convey their full meaning. Use the <LONGDESC> tag (up to 250 characters) or provide a link to a new page with a full description.

Use <LONGDESC> in addition to <alt> to add an extended description. You will need to create an extra link on the page e.g. |D| to represent "disabled" users.

Code Example:

<IMG SRC="image.gif" ALT="Lancaster University Logo" LONGDESC=long.htm">

A full description of the image can be placed in long.htm and the page can be accessed by clicking on |d|

E.g.

Lancaster University Home Page |d|

Use the <title> attribute on the D link. An appropriate use of this would be to provide detailed description of a graph.

 

Moving Images

Moving images may cause problems for users and in extreme cases may trigger an epileptic fit. You should try to avoid using them for this reason. They also cause annoyance to other users.

If you must included moving images make sure that there is a mechanism for turning them off and warn your users in advance.

Image Maps

An image map is a large image with "clickable" areas for links. Use client-side rather than server-side image maps. Make sure that every link within the image map is clearly labelled with an "alt tag" and that it is clear from looking at the image as to where the links are located and where the link will go.

Dreamweaver users can add alt tags in the properties box for each clickable area.

 

Clarity

Make sure images are clear. If using buttons, is it obvious that they are links. Are they arranged to look like a menu?

If you are using images to convey meaning on buttons make sure you stick to recognised conventions so that people can quickly understand its function. For example, an image of a house is generally understood to mean "Home page" so don't use it for anything else.

Video

Any video clips must contain a complete transcript. Video may contain unspoken information and gestures so make sure that important unspoken details are included.

<<Back to list :: Next>>

Intro | SENDA | Disabled Users | Accessible Pages | Testing | Further Info | Getting Help