Developer checklist

The following checklists are intended to guide developers on the implementation of success criterion for images. The checklists should be used during the development phase to ensure WCAG 2.0 compliance of all images on the site and should form part of the unit testing phase undergone by developers when updating or creating new content or functionality.

Level A

All images must have an ALT attribute

IMG_A1

There should be no images with missing ALT attributes. ALT="…" MUST BE present.

Correct example(s)
<IMG SRC="australia-map.jpg" ALT="">
Incorrect example(s)
<IMG SRC="australia-map.jpg">

IMG_A2

Images that convey no information, spacers or decorative images should have empty (or contain whitespace) ALT and null TITLE attributes.

Note: Decorative images may also be applied using CSS WCAG 2.0 Technique C9: Using CSS to include decorative images

Correct example(s)
<IMG SRC="spacer.gif" ALT=" ">
or
<IMG SRC="spacer.gif" ALT=" ">
Or using CSS WCAG 2.0 Techniques
Incorrect example(s)
<IMG SRC="spacer.gif" ALT="spacer image">

IMG_A3

An image that is next to a link with same target location must have empty ALT.

Correct example(s)
<a href="chart-viewer.html"><img src="feature-mapviewer.gif" alt="">Interactive map viewer</a>
Incorrect example(s)
<a href="chart-viewer.html"><img src="feature-mapviewer.gif" alt="Map viewer">Interactive map viewer</a>

IMG_A4

With a set of grouped images, only one should have an ALT attribute (the other ALT attributes should be empty).

Correct example(s)
<img src="img1.jpg" width="120" height="135" alt="Sun" />
<img src="img2.jpg" width="120" height="135" alt="" />
<img src="img3.jpg" width="120" height="135" alt="" />Sunny Weather
Incorrect example(s)
<img src="img1.jpg" width="120" height="135" alt="Sun" />
<img src="img2.jpg" width="120" height="135" alt="Sunny" />
<img src="img3.jpg" width="120" height="135" alt="Full Sun" />Sunny Weather

ALT attribute is accurate

IMG_A5

Non-decorative images must have a descriptive ALT.

Correct example(s)
<IMG SRC="australia-map.jpg" ALT="Weather forecast for 09:00 AEST on Thursday 19 July 2012">
Incorrect example(s)
<IMG SRC="australia-map.jpg" ALT="Forecast">

IMG_A6

The ALT attribute accurately describes the image or conveys the image purpose.

Correct example(s)
<IMG SRC="australia-map.jpg" ALT="Weather forecast for 09:00 AEST on Thursday 19 July 2012">
Incorrect example(s)
<IMG SRC="australia-map.jpg" ALT="Forecast">

IMG_A7

ALT attributes don’t use filenames, e.g., “jpg”, “gif”.

Correct example(s)
<IMG SRC="victoria-map.jpg"ALT="Victoria Weather and Warnings">
Incorrect example(s)
<IMG SRC="victoria-map.jpg" ALT="victoria-map.jpg">

IMG_A8

ALT attributes don’t contain the word “image”, “photo” or “graphic”.

Correct example(s)
<IMG SRC="queensland-map.jpg" ALT="Queensland Weather and Warnings">
Incorrect example(s)
<IMG SRC="queensland-map.jpg" ALT="Graphic of Queensland map">

IMG_A9

Company logo images can include the word “logo”.

Correct example(s)
<IMG SRC="bom-logo.jpg" ALT=" Australian Government - Bureau of Meteorology logo">
Incorrect example(s)
<IMG SRC="bom-logo.jpg"ALT="Australian Government">

IMG_A10

ALT attributes don’t contain copyright, figure or author information.

Correct example(s)
<IMG SRC="map.jpg" ALT="Map of Australia">
Incorrect example(s)
<IMG SRC="map.jpg" ALT="Figure 1. Map copyright of BoM by Arthur Smith">

IMG_A11

The ALT attribute does not contain only whitespace, e.g., ” “.

Correct example(s)
<IMG SRC="map.jpg" ALT="Map of Australia">
Incorrect example(s)
<IMG SRC="map.jpg" ALT=" ">

IMG_A12

The ALT attribute should not contain words such as “click here”.

Correct example(s)
<IMG SRC="victoria-map.jpg" ALT="Victoria Weather and Warnings">
Incorrect example(s)
<IMG SRC="victoria-map.jpg" ALT="Click here for Victoria Weather and Warnings">

IMG_A13

ALT attributes don’t contain more information than is on the image.

Correct example(s)
<IMG SRC="australia.jpg" ALT="Australia map">
Incorrect example(s)
<IMG SRC="australia.jpg" ALT="Australia has a variety of weather conditions">

Image caption

IMG_A14

ALT attributes should not be the same as the image caption.

Correct example(s)
<img src="cairns-office.jpg" alt="Cairns office building"> <p>Cairns Meteorological Office</p>
Incorrect example(s)
<img src="cairns-office.jpg" alt="Cairns Meteorological Office"><p>Cairns Meteorological Office</p>

IMG_A15

The image caption should be located near the image.

Correct example(s)
<img src="cairns-office.jpg" alt="Cairns office building"> <p>Cairns Meteorological Office</p>
Incorrect example(s)
<img src="cairns-office.jpg" alt="Cairns Meteorological Office"><p>The weather in Cairns is changeable and at this time of year generally…</p><p>Cairns Meteorological Office</p>

IMG_A16

Any text on the image must be included in the ALT attribute.

Correct example(s)
<IMG SRC="capital-city.jpg" ALT="Weather forecasts -- Brisbane fine 22, Melbourne light showers 18, Perth fine 23, Darwin fine 27, Sydney heavy rain 16, Adelaide fine 17, Canberra fine 15, Hobart showers 18">
Incorrect example(s)
<IMG SRC="capital-city.jpg" ALT="Weather forecasts for capital cities">

ALT attribute is concise

IMG_A17

If the image is not complex the ALT should be shortened if possible.

Correct example(s)
<IMG SRC="radar-map.jpg" ALT="Australian weather radar">
Incorrect example(s)
<IMG SRC="radar-map.jpg" ALT="Weather radar  for Australia and all it's states and territories">

Complex Images have long descriptions

IMG_A18i

If the image is complex (e.g., a diagram), the long description should be a part of the page content.

Correct example(s)
<IMG SRC="melbourne-area.jpg" ALT="Melbourne weather conditions (long description follows image)"> <h3>Melbourne area</h3> <p>Early frost then a dry and mostly sunny day. Winds northwesterly 10 to 20 km/h.</p>
Incorrect example(s)
<IMG SRC="melbourne-area.jpg"ALT="Melbourne weather conditions">

IMG_A18ii

The long description (or a link to it) is near the image.

Correct example(s)
<IMG SRC="melbourne-area.jpg" ALT="Melbourne 7-day weather (long description follows image)"> <p><a href="melbourne.html">7-day forecasts and latest weather information</a></p>
Incorrect example(s)
<IMG SRC="melbourne-area.jpg" ALT="Melbourne weather conditions"> <p>Melbourne weather for today</p>

IMG_A18iii

The long description is referred to in the ALT.

Correct example(s)
<IMG SRC="melbourne-area.jpg" ALT="Melbourne 7-day weather (long description follows image)"> <p><a href="melbourne.html">7-day forecasts and latest weather information</a></p>
Incorrect example(s)
<IMG SRC="melbourne-area.jpg" ALT="Melbourne 7-day weather"> <p><a href="melbourne.html">7-day forecasts and latest weather information</a></p>

IMG_A18iv

The long description must be equivalent to the complex image.

Correct example(s)
<IMG SRC="brisbane-area.jpg" ALT="Brisbane weather conditions (long description follows image)"> <h3>Brisbane city area</h3> <p>Early fog then a dry and mostly sunny day. Winds southwesterly 5 to 1 km/h.</p>
Incorrect example(s)
<IMG SRC="brisbane-area.jpg" ALT="Brisbane weather conditions">

IMG_A18v

The LONGDESC attribute is deprecated and should not be used.

Correct example(s)
<IMG SRC="brisbane-area.jpg" ALT="Brisbane weather conditions (long description follows image)"> <h3>Brisbane city area</h3> <p>Early fog then a dry and mostly sunny day. Winds southwesterly 5 to 1 km/h.</p>
Incorrect example(s)
<IMG SRC="brisbane-area.jpg" ALT="Brisbane weather conditions" LONGDESC="Early fog then a dry and mostly sunny day. Winds southwesterly 5 to 1 km/h."> <h3>Brisbane city area</h3>

Client-side image maps

IMG_A19

Image maps should not be server-side.

View WebAIM’s alternate text for more information.

Correct example(s)
<IMG SRC="australia-map.jpg" ALT="Australia map" USEMAP="#map">
Incorrect example(s)
<IMG SRC="australia-map.jpg" ALT="Australia map" ISMAP="#map">

IMG_A20

All areas on an image map should have an appropriate ALT attribute.

Correct example(s)
<img src="…"alt="Botanical Gardens Map" usemap="#map"> 
<map name="map">
<area shape="…" coords="…" href="…"alt="Children's garden" /> 
</map>
<map name="map"> 
<area shape="…"coords="…"href="…" alt="Garden Cafe" /> 
</map>
Incorrect example(s)
<img src="…"alt="textâ"usemap="#map"/> <map name="map"> <area shape="…" coords="…"href="…"></map> <map name="…"> <area shape="…" coords="…"href="…"alt="click here"/> </map>

Images that convey non-graphic information

IMG_A21

Images should not be used for mathematical equations — MathML should be used.

Correct example(s)
<math>
  <apply>
    <plus/>
    <apply>
      <times/>
      <ci>a</ci>
      <apply>
        <power/>
        <ci>x</ci>
        <cn>2</cn>
      </apply>
    </apply>
    <apply>
      <times/>
      <ci>b</ci>
      <ci>x</ci>
    </apply>
    <ci>c</ci>
  </apply>
</math>
Incorrect example(s)
<IMG SRC="a-plus-b-plus-c-equation.gif"
  ALT=”Equation for a plus b plus c”>

Colour alone used to convey information

IMG_A22

Do not use colour alone in an image to convey information.

Correct example(s)
<IMG SRC="capital-city.jpg" ALT="Weather forecasts-Brisbane fine 22, Melbourne light showers 18, Perth fine 23, Darwin fine 27, Sydney heavy rain 16, Adelaide fine 17, Canberra fine 15, Hobart showers 18">
Incorrect example(s)
<IMG SRC="capital-city.jpg" ALT="Weather forecasts-yellow shows fine area and blue shows areas expecting rain">

Image Gallery

IMG_A23

Individual images in an image gallery must describe the content of the image.

Correct example(s)
<IMG SRC="flood-beachmere.jpg" ALT="Beachmere crossing flooded"> <IMG SRC="flood-moggil.jpg" ALT="Intersection of Moggil Road and Sizer Road flooded">
Incorrect example(s)
<IMG SRC="flood-beachmere.jpg" ALT="Flood gallery"> <IMG SRC="flood-moggil.jpg" ALT="Flood gallery">

Level AA

Images as text

IMG_AA1

Images should not be used in place of text — use HTML.

Correct example(s)
<p>Fine and sunny weather expected</p>
Incorrect example(s)
<IMG SRC="sunny text.jpg" ALT="The weather is sunny">

Colour Contrast

IMG_AA2

Ensure sufficient colour contrast is used between the foreground and background. Use a colour contrast analyser to check.

Correct example(s)
N/A
Incorrect example(s)
N/A