Test Page Notice
This page contains intentionally problematic accessibility patterns for testing and demonstration purposes only.
Do not use these examples in production websites. They violate accessibility guidelines and best practices.
This page is designed to work with the Accessibility Visualizer browser extension to help developers identify and understand accessibility issues.
Live Regions
Live regions announce dynamic content changes to screen readers. They're essential for providing feedback about status updates, errors, and other dynamic content that users need to be aware of immediately.
aria-live Attribute
aria-live='polite'
Polite live region that announces changes when the user is idle. Good for status updates that aren't urgent.
aria-live='assertive'
Assertive live region that immediately interrupts screen readers to announce changes. Use for critical alerts and errors.
Live Region Roles
role='status'
Status role provides advisory information that isn't critical. Equivalent to aria-live='polite'.
role='alert'
Alert role for important, time-sensitive information. Equivalent to aria-live='assertive'.
Output Element
<output> element
Output element for displaying calculation results or form output. Automatically has live region behavior.
aria-atomic Attribute
Live region with aria-atomic='true'
Live region where the entire content is announced when any part changes, rather than just the changed portion.
Problematic Live Regions
Dynamic content without live region
Content that changes dynamically but isn't marked as a live region. Screen readers won't announce these changes.
Screen readers won't announce the time update because this isn't a live region.
Live Region Priority Interactions
Polite and Assertive simultaneous updates
Demonstrates how assertive live regions interrupt polite ones. When both update simultaneously, the polite announcement may be suppressed.
Polite (should be announced)
Assertive (will interrupt)
Test behavior: Click "Update Both Simultaneously" and observe that the polite region's announcement may be suppressed by the assertive region. The Accessibility Visualizer extension shows this behavior by only displaying the assertive announcement when both regions update at the same time.
Sequential updates with different priorities
Demonstrates how assertive announcements can clear pending polite announcements from the queue.
Polite announcements
Assertive interruptions
Test behavior: Start the polite sequence to see 8 polite messages being displayed sequentially. Then click "Interrupt with Assertive" - the assertive message will be triggered after 3 seconds to avoid focusin clearing the live region display. Observe how the assertive announcement interrupts and clears the remaining polite messages.
aria-busy Suppression
Live region with aria-busy suppression
Demonstrates how aria-busy='true' suppresses live region announcements. When a region is marked as busy, content changes are not announced to screen readers.
Live region (will be suppressed when busy)
aria-busy status:
false
Test behavior: Click "Update Content" to see normal live region announcements. Then click "Toggle aria-busy" to mark the region as busy, and try "Update Content" again - the content will change but no announcement will be made. The Accessibility Visualizer extension respects aria-busy and will not display announcements for busy regions.
Continuously Updating Live Regions
Timer with polite announcements
Timer that updates every second with polite live region. Good for testing extension behavior with frequent updates.
Live counter with assertive announcements
Counter that auto-increments every 2 seconds with assertive live region. Useful for testing frequent interruptions.
Status updates with role='status'
Status messages that update every 3 seconds. Tests extension handling of role-based live regions with continuous updates.
ariaNotify API
ariaNotify (none priority)
Calls document.ariaNotify() with default priority (none). This API notifies assistive technologies without using DOM live region elements.
ariaNotify (high priority)
Calls document.ariaNotify() with priority "high". High-priority notifications may interrupt current speech output.
Live Regions and Modal Dialogs
Live regions inside and outside <dialog>
A modal dialog opened with showModal() contains a live region, and another live region sits outside the modal.
Live regions inside and outside aria-modal
A custom modal using role="dialog" aria-modal="true" contains a live region, and another live region sits outside the modal.