Web Development
Web Developer Guidelines
Visual Design Recommendations

Checkpoint 5.14 - Core

Animated gifs have an alt attribute that include all the information provided in the animation

WCAG 1.0 Priority 1

WCAG Guideline 1. Provide equivalent alternatives to auditory and visual content.

If you have an animated gif you still need to provide an alt attribute. This alt attribute must include equivalent information for the entire animation.

Requirement

All animated gifs should contain alt attributes that describes the entire animation.

Example

Example 1 - Live in Victoria animated gif

In the following example an animated gif contains three frames. A suitable alt attribute text for this animated gif would be: "Victoria and Melbourne - one of the world's most liveable cities, home of the 2006 Commonwealth Games with great coffee and space to think"

Order Image
1 Melbourne - one of Victoria's most livable cities
2 Victoria - home of 2006 Commonwealth Games
3 Victoria's regions - great coffee with the space to think

Example 2 - Bouncy BBC gif

This animated gif should have the following alt attribute: "C Beebies - BBC"

Order Image
1 C Beebies - BBC
2 C Beebies - BBC

Example 1 - Live in Victoria animated gif

In the following example there is too much information to be included in an alt attribute. A long description should be provided. A suitable long description for this animated gif would be:
"At 1am on Wednesday there was cloud cover over most of south-eastern mainland Australia and Tasmania. By 10am on Wednesday this cloud cover had mostly dissipated however there was some cloud in the south west of Western Australia and over eastern parts of Queensland. By 4pm cloud cover had increased over Western Australia but was concentrated only in the far east of Queensland."

Order Image
1 Weather Map of Australia at 1 am
2 Weather Map of Australia at 10 am
3 Weather Map of Australia at 4 pm

Checking Tool

  • Analyse animated gifs and their alt attributes to ensure appropriate descriptions are provided where appropriate.
  • Internet Explorer - AIS Toolbar: Images > Toggle Image > Alt
    This will turn all images off replacing them with the values of the alt attributes.
  • Firefox - Web Developer's Toolbar: Images > Display Alt Attributes

Information Source

The original source of this information is located on the W3C web site  (www.w3.org/TR/WCAG10-TECHS/#tech-text-equivalent)

 

Back to top