Web Access Centre

Animated images - Web Access Centre

Summary: Adding images which change and move, such as animated GIF’s, can cause distractions for many people. If presented correctly however they need not be a problem

• Rationale
• Techniques
• Testing tips
• Website Accessibility Initiative compliance
• Other pages about images

---

Rationale

It is important to avoid using animation that can cause the screen, or parts of it, to flicker and change rapidly. Although animated images can be useful to draw attention, using lots of them can detract from the accessibility and usability of a page. Instead of simply attracting the eye they can become an annoyance and a distraction.

Scrolling text and animated images of text can be difficult to read as we all have different reading speeds. They are an added problem for screen magnification users who view a fraction of the screen at a time. Often the animated image or scrolling text will dominate the screen and be unreadable.

Other people are susceptible to certain types of strobe or flickering effects. These can trigger epileptic fits, cause problems for people with cognitive impairments and be hard to read for people with low vision.

Techniques

• Animated images should be kept to a minimum and not used to convey primary or large amounts of content. The animation should also come to a rest after 3 to 5 cycles. The speed at which they rotate should be reasonable and leave users enough time to read text where text is present.

All animated images must also comply with WCAG (Web Content Accessibility Guidelines) version 1.0 Checkpoint 1.1 and have clear and appropriate ALT text.

• Scrolling text is often used in the form of news tickers in websites. Text should scroll slowly and at a reasonable pace. Ideally it should come to a rest or a switch should be provided to switch the ticker on or off.
  
  
• JavaScript animation of images or text must be given an HTML alternative so the same content is available when JavaScript is switched off or not supported. This may be a textual representation of the content, provided within the <NOSCRIPT> element, or a link to where a page of equivalent information can be found.

In addition, care should be taken that the script doesn't interfere with the flow of reading for screen readers. Some scripts effectively call a fresh image for each change in the animation, and this can act like a page refresh, forcing the screen reader to begin again from the top every time the image changes. Where this happens, blind users will be unable to read the whole of the page

Testing tips

Verify that text on animated images is readable and the image comes to a stop after 3 - 5 cycles. Where animation or scrolling text is reliant on JavaScript, check that accessible equivalents are available when JavaScript is disabled, that text is readable and there is an on / off switch.

• Accessibility toolbar - Go to Structure - Other Element(s) - "blink".
  
  
• Browser - Manually check pages to see if animated images come to a rest after 3 - 5 cycles. Mouse over the images to ensure there is appropriate ALT text.

Note that the only possible equivalent ALT text for images of text is the words that are used in the image. This means all of the words, used over all frames in the animation.

Where scrolling text is present check that the speed is set at a slow reading pace and look for an “on” and “off” switch.

If JavaScript is used to create image animation, ensure that an on and off switch is available, and that, as well as an ALT text, there is a <NOSCRIPT> equivalent provided.

• Screen reader – Read the page from beginning to end using JAWS or other screen reading software, to ensure that the flow of reading is not interrupted.

Website Accessibility Initiative compliance

• 7.1 Until user agents allow users to control flickering, avoid causing the screen to flicker. Priority 1.
  
  
• 7.2 Until user agents allow users to control blinking, avoid causing content to blink (ie change presentation at a regular rate, such as turning on and off). Priority 2.
  
  
• 7.3 Until user agents allow users to freeze moving content, avoid movement in pages. Priority 2.

For more information on techniques visit the Web Accessibility Initiative techniques page.

Other pages about images

• Alt text
• Animated images
• Image maps
• Images of text

Back to Design & Build

For Web Access Centre updates email webaccess@rnib.org.uk

Content author: webaccess@rnib.org.uk

Last updated: 20/10/2008 15:51