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.
Inert
The inert attribute and the CSS interactivity: inert declaration make an element and its entire subtree non-interactive and remove them from the accessibility tree. Assistive technologies ignore content within an inert subtree.
Interactive Elements
Link inside an inert subtree
A link placed inside a container with the inert attribute. It cannot receive focus or be activated, and it is removed from the accessibility tree.
Button inside an inert subtree
A button placed inside a container with the inert attribute. It cannot be focused or clicked, and it is removed from the accessibility tree.
Form controls inside an inert subtree
Form controls placed inside a container with the inert attribute. They cannot be focused or edited, and they are removed from the accessibility tree.
Live Regions
Live region inside an inert subtree
A live region placed inside a container with the inert attribute. Because the subtree is removed from the accessibility tree, content changes are not conveyed to assistive technologies.
Status (inert):
Live region inside an interactivity: inert subtree
A live region inside a container styled with interactivity: inert. This CSS declaration expresses the same inert state as the attribute. Browser support for this property varies.
Status (interactivity: inert):
element.ariaNotify() on an inert element
Calls ariaNotify() on an element that has the inert attribute. Notifications originating from an inert element are not conveyed to assistive technologies.