How Can I Make a Moving Graphic Accessible?

Question

Our director wants to have an eagle (our logo) fly across the page on our web site. This is a terrible idea but I'd like to know what WCAG 2.0, section 508, and/or usability principles this violates. Any other arguments against this will also be appreciated if applicable. Thank-you

Answer

We certainly sympathize with your frustration- a moving graphic like this can cause some major accessibility issues. However, there are steps you can take so that a feature like this will conform with WCAG 2.0 A (or even WCAG 2.1 AA). We will list the related WCAG rule as well as some things you should consider when thinking about this rule in the context of the flying eagle image.

  • 1.1.1: Non-Text Content: Images must be appropriately coded as meaningful or decorative. If meaningful, the image must have appropriate alt text. An eagle flying across the screen would likely be considered a decorative image. To code an image as decorative (if it is implemented using the <img> element), give it an empty alt tag (alt=””). If your image is implemented using an <svg> element or an icon font, you’ll need to place aria-hidden=”true” on the element holding the image.
  • 2.2.2: Pause, Stop, Hide: For any moving, blinking, or scrolling information that starts automatically, lasts more than five seconds, and is presented in parallel with other content, there must be a way for the user to pause, stop, or hide this content. So, you will want to ensure that either this eagle does not start flying automatically, the eagle flies for under five seconds, or you are providing a method for the user to pause, stop, or hide this movement (typically a button is sufficient). 
  • 2.3.1: Three Flashes or Below Threshold: Ensure that this eagle does not flash more than three times in any one second time period, or that the flash is below the general flash and red flash thresholds. It’s not likely that you would want this eagle to flash in this way, but it is important to consider so that your site does not induce seizures due to photosensitivity. 

Free Tools to Continue Learning

Accessible Web Company Logo

Accessible Web RAMP

Monitor your website and manage your progress towards WCAG conformance.

Accessible Web Company Logo

Accessible Web Academy

Career specific courses to help power up your accessibility knowledge.