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 RAMP
Monitor your website and manage your progress towards WCAG conformance.
Accessible Web Academy
Career specific courses to help power up your accessibility knowledge.
Newest Questions
How can I get started testing my website with a screen reader?
- Assistive Technology
- screen readers
What are some special cases where custom markup is recommended over HTML? Also, how do I know the correct ARIA label if the element is unavailable in HTML?
- aria
- custom widgets
How should third-party accessibility issues be included in Accessibility Conformance Reports (ACRs) or other documentation?
- acces
- accessibility conformance report
- third party
- vpat