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.
Shadow DOM
Shadow DOM is used by Web Components to encapsulate styles and markup. Accessibility Visualizer can detect and analyze elements inside Shadow DOM trees, including nested Shadow DOM.
Form in Shadow DOM
Accessible form in Shadow DOM
✅ A form with proper labels inside a Shadow DOM. Each input has an associated label element.
Form without labels in Shadow DOM
❌ Inputs inside Shadow DOM without associated labels. Screen readers cannot identify the purpose of these fields.
Image in Shadow DOM
Image without alt text in Shadow DOM
❌ An image inside Shadow DOM without an alt attribute. Assistive technologies cannot convey the image's purpose.
Image with alt text in Shadow DOM
✅ An image inside Shadow DOM with a descriptive alt attribute.
Nested Shadow DOM
Nested Shadow DOM with accessible elements
✅ An outer Web Component containing an inner Web Component, both with proper accessibility attributes.
Live Region in Shadow DOM
Live region inside Shadow DOM
Live regions inside Shadow DOM should also notify assistive technologies of content updates.