Why this matters
Auto-updating content can be problematic for several groups of users:
Vestibular disorders
Users with vestibular disorders (affecting balance and motion) can experience dizziness, vertigo, or nausea from moving content. This can make pages with auto-updating content unusable.
Cognitive disabilities
Rapidly changing content can be distracting and overwhelming for people with cognitive disabilities, making it difficult to focus on and process information.
Screen reader users
Screen reader users may miss updates that happen outside the area they are currently reading, or receive unexpected announcements that disrupt their navigation.
Techniques for accessible auto-updating content
Pause and stop buttons
Always provide users with the ability to pause or stop auto-updating content. The pause button should be clearly visible and easy to activate.
Pause by default
Consider pausing content by default and allowing users to activate it if they choose, rather than starting with auto-play enabled.
Prefers reduced motion
Respect the user’s system preference for reduced motion. Use CSS media queries to detect when a user has enabled “Reduce Motion” in their operating system settings.
Keyboard accessibility
Ensure all interactive elements are keyboard accessible. See Keyboard Accessibility for detailed guidance.
Auto-updating areas
If content updates live (like a stock ticker), use ARIA live regions to announce updates. See ARIA for guidance on implementing this correctly.
Carousel best practices
If you use carousels:
- Ensure carousel controls are keyboard accessible
- Provide pause/stop functionality
- Make sure the carousel doesn’t auto-advance by default
- Label the carousel region clearly
- Provide alternative access to carousel content outside the carousel
Common examples at UGA
These types of content are common on UGA websites:
- Video backgrounds on homepages
- Image carousels in announcements sections
- Scrolling news tickers
- Auto-playing video in hero banners
Testing tips
When testing auto-updating content:
- Test with keyboard only (no mouse)
- Test with a screen reader enabled
- Enable “Reduce Motion” in system settings and verify the page respects it
- Check that pause/stop controls are accessible
- Verify that live updates are announced appropriately
UGA-specific guidance
When building content for UGA web properties, prioritize accessibility over motion effects. Many users will benefit from simpler, less animated interfaces.
Common mistakes to avoid
- No pause or stop controls: Auto-updating content that cannot be paused or stopped is a WCAG failure. Every auto-updating element needs a visible, accessible control.
- Auto-play with sound: Media that auto-plays with audio can be disorienting and disruptive, especially for screen reader users. If media auto-plays, it should be muted by default.
- Ignoring reduced motion preferences: Failing to check for the prefers-reduced-motion media query means your site may cause discomfort for users with vestibular disorders.
- Carousels that auto-advance too quickly: If users cannot read the content before it changes, the carousel fails its purpose. Provide adequate time or pause by default.
- Live updates without ARIA announcements: Content that updates dynamically without ARIA live regions will be invisible to screen reader users.
- Assuming all users want animation: Motion and animation should enhance content, not be required to access it. Always provide a static alternative.
WCAG criteria
Auto-updating content affects these WCAG 2.1 success criteria:
- 2.2.2 Pause, Stop, Hide (Level A) – Moving content must be pausable
- 2.3.1 Three Flashes or Below Threshold (Level A) – No more than 3 flashes per second
Getting help
If you have questions or need assistance, the Digital Accessibility Services Hub (DASH) is available to support colleges, schools, and administrative units as they build sustainable accessibility practices.
- Contact DASH at [email protected] for consultations, training, or technical assistance.
Accessibility is a shared responsibility, and every step you take makes UGA’s digital environment more inclusive.