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.
Layout & Landmarks
Semantic HTML elements and ARIA landmarks help users understand page structure and navigate efficiently. These elements provide important context about different sections of content.
Semantic Sections
HTML landmark elements
✅ Proper use of landmark elements that provide clear structure and meaning to page content.
<header> - Page or section header <main> - Main content area
ARIA Landmarks
ARIA landmark roles
✅ ARIA landmark roles that provide the same navigation benefits as semantic HTML elements. Use when semantic HTML isn't available.
role="banner" - Equivalent to <header>role="main" - Equivalent to <main>role="complementary" - Equivalent to <aside>role="contentinfo" - Equivalent to <footer>
Generic Containers
Generic div containers without semantic meaning
❌ Using generic div elements for major page sections provides no semantic information to assistive technologies.
These divs provide no information about content purpose or page structure.
Section Elements
Section with accessible name
Section element with an accessible name becomes a region role and functions as a landmark.
About Our Services
This section references the heading's id attribute value in the section element's aria-labelledby attribute.
Section without accessible name
Section element without an accessible name does not function as a landmark.
About Our Services
This section merely places a heading without associating it.iFrame Elements
iFrame with title attribute
✅ iFrame with proper title attribute that describes the content. Essential for assistive technologies to understand what the frame contains.
iFrame without title attribute
❌ iFrame missing title attribute. Accessible technologies cannot determine what content the frame contains, making it inaccessible.
iFrame with live region
Live regions inside iframes should also notify assistive technologies of content updates.
iFrame with ariaNotify
ariaNotify calls inside iframes should also be captured and displayed by the extension.
Dialog and Modal
Dialog element
Example of HTML dialog element. When opened with showModal(), it becomes a modal that traps focus and blocks interaction with background content.
Element with aria-modal='true'
✅ Custom modal implementation with proper focus management - traps focus inside the modal and returns focus to the opening button when closed.