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.
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.
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.
The animation cannot contain anything that flashes more than three times in one second.
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.
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.
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.
Provide download links to any plug-ins or applications that are required to interpret the content.
The web page that contains your animation should still be usable when the script is turned off.
Animations should work on all every browser in EERE's browser testing suite.
When a timed response is required, the user should be alerted and given sufficient time to indicate more time is required.
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.