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.
ARIA Hidden
The aria-hidden attribute controls whether elements are exposed to assistive technologies. When properly used, it can hide decorative content, but when misused, it can make important content inaccessible.
Visible Content
Visible text with aria-hidden="false"
Text that is visible and explicitly exposed to assistive technologies. The aria-hidden="false" is usually unnecessary as elements are exposed by default.
This text is visually visible and can be read by screen readers.
Visible text with aria-hidden="true"
❌ Visually visible but inaccessible to assistive technologies. Screen reader users will miss out on the content.
Icons
Decorative icon with aria-hidden="true"
✅ Proper use of aria-hidden for decorative icons that don't convey essential information. The icon is hidden while the text remains accessible.
Important icon without aria-hidden
❌ The information conveyed by the icon is not made available to assistive technologies.
Accessible icon with proper labeling
✅ Example of providing meaning with aria-label. Visually an icon, but conveys information to assistive technologies via the aria-label.