❌ Auto-Scrolling Banner
🚀 This banner moves on its own — no pause, no warning. Users may lose focus.
Bad: No controls or reduced motion support.
Welcome to Our Accessibility Demo
This section uses responsive design principles to adapt to various screen sizes and zoom levels.
Motion & Unexpected Changes – Accessibility in Action
This demo showcases bad vs good practices around motion, focus, and dynamic content per WCAG 2.1:
- 2.2.2 Pause, Stop, Hide (A)
- 2.3.3 Animation from Interactions (AAA)
- 2.1.1 Keyboard (A)
- 2.2.6 Timeouts (AAA)
✅ Manual Carousel with Pause & Announcement
Good: User-triggered animation, with screen reader updates and motion control.
❌ Auto-Focused Input
Bad: Moves user focus without consent after load.
✅ Respect Focus Flow
Good: Does not override user focus path.
❌ Injected Notification (No ARIA)
Bad: Content appears without assistive tech announcement.
✅ Injected with aria-live
Good: Screen reader users are notified politely.
❌ Hover-Only Tooltip
Bad: Keyboard users can't reach tooltip.
✅ Tooltip Accessible to Keyboard
❌ Timed Modal (Unexpected)
A modal will appear automatically 5 seconds after page load without warning or user request.
⏰ Session Timeout Warning
This modal appeared automatically. You had no way to stop it.