Animations are dynamic elements, such as interactive images and games. Follow the Office of Energy Efficiency and Renewable Energy's (EERE) design and coding requirements when creating animations.

If you want to create an animation in Energy.gov, contact one of EERE's site coordinators.

Designing Animations

These are the guidelines for creating Section 508-compliant animations.

Audio

Sound should not play automatically when a user lands on the page because it could interfere with screen readers. Provide audio controls so that sounds can be started by a user rather than requiring the user to stop the sound. 

Color

Select colors that provide sufficient contrast. Color should not be used as the only way that information is conveyed. Animations should not override user-selected contrast and color selections or other individual display attributes.

Flashing

The animation cannot contain anything that flashes more than three times in one second.

Focus

Provide a well-defined, on-screen indication of the current focus that moves among interactive interface elements as the input focus changes. The focus should be programmatically exposed so that assistive technology can track focus and focus changes.

Keyboard Support

People who have difficulty controlling a mouse may find it more efficient to use a keyboard, and individuals using screen readers use the keyboard to navigate through the page. Therefore, all interaction controls should be accessible from the keyboard.

Labels and Instructions

Labels or instructions should be provided when user input is required. These instructions should not rely solely on sensory characteristics such as color, shape, size, visual location, orientation, or sound.

Movement

Animations that include moving, blinking, scrolling, and auto-updating information should give the user a way to pause, stop or hide it, unless the content cannot be understood without it and the functionality cannot be achieved in any other way.

Plug-Ins

Provide download links to any plug-ins or applications that are required to interpret the content.

Scripting

The web page that contains your animation should still be usable when the script is turned off.

Testing

Animations should work on all every browser in EERE's browser testing suite.

Timed Responses

When a timed response is required, the user should be alerted and given sufficient time to indicate more time is required.

Text Versions

Animations must have a text version to be compliant with Section 508's accessibility requirements. The text version should include a full transcript of all of the speech, text, and action that happens in the animation. For guidelines for making animations natively more accessible, see WebAim.org or the National Center for Accessible Media.