Accessibility - Images
The ALT attribute in the image tag provides a way for you to include a short text description of each image on your page. This allows blind users or those using text-only browsers to get the same information as someone who can see the image. Alternative text for images should be as succinct as possible (and not more than about 12 words). ALT text can be included as follows:
<img src="smiley.gif" alt="Smiley face" width="15" height="15">
If the image includes a link, the ALT text should indicate this. For example when the University logo links to the University Home page:
<img src="logo.gif" alt="University of Bolton - links to university home page" width="140" height="49" border="0">
To Add ALT text in Contensis:
-
Right click on the graphic/image
-
In the 'Image Properties' dialogue box, enter your alternative text in the 'ALT Text' box.
Testing for ALT text
If you turn off images in your browser each image will be replaced with its alternative text and it will be easy to identify any images that have no ALT text. To turn off images in Internet Explorer, go to Tools-Internet Options-Advanced, scroll down to Multimedia and untick the 'Show Pictures' box; to do this in Netscape, go to Edit-Preferences-Advanced and untick the 'Automatically Load Images' box.
Images used as bullets or those that do not provide any content to the user have no value and are best coded as an 'empty alt tag' (ie the alt tag contains no content so a screen reader would read nothing and 'skip' the graphic). For bulleted lists, use either a dash or aspace between two double quotes, ie "-" or " " (choose one option and use it uniformly throughout the page to avoid confusing the user):
Item 1 <img src=" " alt="-"> Item 1
Item 2<img src=" " alt=" "> Item 2
Spacers - if you have used transparent images for spacing (not recommended) put a space in the ALT tag of the image, eg
<IMG src="spacer.gif" hspace=100 vspace=10 alt=" ">
[Top of Page|]
Graphical representations of text
Do not provide graphical representation of text if it is possible to achieve the same effect by other means eg using style sheets. If you must use graphical representations of text, always provide a text alternative, eg
<img src="images/ARTHeader.jpg" alt="Art and Design - School of Arts, Media and Education">
If a special markup language for the symbols that you are using exists - such as MathML - use the markup language instead of a graphical equivalent|.
For more complex images, charts or graphics where a longer description is necessary, use a "Description Link" or D-link (it's simply a linked "D") next to an image to signify a long description. HTML 4.0 will accomplish the same thing with the <LONGDESC> attribute (but this is not is not widely supported at present); for an example see http://www.webaim.org/techniques/images/6|.
Image maps
Imagemaps can cause problems for users who can't manipulate a mouse or for users whose browsers don't support them. Use client-side maps rather than server-side as they can include ALT tags and provide text links (if graphic display is turned off, the map is still functional). Server-side image maps are not accessible to anyone using a text browser or a browser with images turned off - if you do use a server-side map, you should provide redundant text links for each active region of the image map.
For more information see W3C's Text equivalents for client-side image maps|.
Where possible, avoid imagemaps and use a simple text link alternative, eg:
Animations (eg animated GIFs)
Avoid the use of animated GIFs if possible and be sure that, if you do include them, they include ALT text and that they do not loop continuosly, eg
< img src="images/animbook.gif" height=30 width=37 alt="An opening book.">
See the WebAIM (Web Accessibility in Mind) tutorial Creating Accessible Images|.
[Top of Page|]