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.
Links
Links are essential navigation elements that allow users to move between pages or sections. They must be properly implemented to ensure keyboard accessibility and clear communication to assistive technology users.
<a> Element
Standard link with href
✅ Properly implemented link with href attribute. This is keyboard accessible and clearly identified by screen readers as a navigation element.
Anchor without href attribute
❌ Anchor element without href attribute. It does not function as a link. Even if JavaScript is used to implement link behavior, it lacks keyboard accessibility and proper communication to assistive technologies.
example 2 (under construction)
Sometimes an anchor without href is used to indicate a place that will become a link later. Assistive technologies will treat it as plain text.
Link Role
Element with role="link"
⚠️ Link-like element using role="link", tabindex="0", and JavaScript to mimic link behavior. This is insufficient as a link implementation, as it lacks features, for example 'Open in new tab' option in context menu (right-click) or other ways.
Link Variations
Link with target='_blank'
⚠️ Link that opens in a new window/tab. This can increase user burden by forcing new windows/tabs to open. Consider whether this is truly necessary.
Icon Links
Link with only an icon
❌ Link containing only an icon without text or accessible name. Screen readers may read parts of the URL, leaving users unable to understand the link's purpose or destination.
Link with icon and aria-label
✅ Icon link with proper role='img' and aria-label on the SVG element. This provides accessible naming for the icon while maintaining proper semantic structure.
Link with icon and text
✅ Link with an icon accompanied by text that conveys the same meaning. The icon is marked as decorative with aria-hidden='true'.