Graphics

Access barriers
Guidelines for overcoming access barriers
Activity

Graphics, when used appropriately, can assist in conveying information that is difficult to express clearly in words, adding life and realism to content and maintaining users' attention and motivation.

Access barriers

Users with a vision impairment:

• cannot access images that are used to convey content or to assist navigation
• have difficulty distinguishing important screen elements or text where background images are used.

Also, users with slow Internet connections may have images turned off in their browsers.

Back to top

Guidelines for overcoming access barriers

1. Provide alternative text equivalents for simple graphics. This can take the form of a short phrase or sentence to identify a simple image. For example, use the 'alt' attribute in HTML. GRAPHICS EXAMPLE 1
2. If you use graphics for layout (not to convey information or meaning), a NULL ALT is used in your image tag. That is, Alt="", this instructs adaptive technologies to ignore the image.
3. Provide a long description for complex graphics that may need a more in-depth coverage. GRAPHICS EXAMPLE 3
4. Client-side image maps instead of server-side image maps are provided for image maps or images used as links. GRAPHICS EXAMPLE 4
5. Keep graphic file sizes small for faster downloads.
6. Provide good line and colour contrast for all graphics.

Back to top

Activity

1. A good way of finding out if your text equivalent is useful is to imagine reading the document aloud over the telephone. Would you be happy to use this text equivalent when it comes to describing each graphic to the listener?
2. Test the accessibility of graphics on your website by turning off the graphics in your browser. Do all the graphic elements display a text equivalent? If not, ensure that alternative text equivalents are provided.

If your project includes graphics, use the checklist below to assess any accessibility barriers that may be present. If you have ticked 'no' for any item, go to the Guidelines for how to overcome this barrier.

---

1. Text equivalents are used for simple graphics.

   Yes No N/A

   ---

2. If you used graphics for layout (not to convey information or meaning), a NULL ALT is used in your image tag.

   Yes No N/A

   ---

3. A 'longdesc' attribute is used for complex graphics that may need a more in-depth coverage.

   Yes No N/A

   ---

4. A description link 'D' is used where browsers don't support 'longdesc'.

   Yes No N/A

   ---

5. Graphic file sizes are small for faster downloads.

   Yes No N/A

   ---

6. Client-side image maps instead of server-side image maps are provided for image maps or images used as links.

   Yes No N/A

Back to top