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.
Lists
Lists group related items together and must use proper HTML elements so assistive technologies can convey their structure and item count.
Unordered Lists
Proper <ul> with <li>
✅ A standard unordered list with proper li elements. Screen readers announce the list and item count.
- Apple
- Banana
- Cherry
<ul> with <li> wrapped in <div>
❌ List items wrapped in a div inside ul. The div is not a valid direct child of ul, breaking the list semantics.
- Apple
- Banana
- Cherry
Ordered Lists
Proper <ol> with <li>
✅ A standard ordered list with proper li elements. Screen readers announce the list, item count, and item positions.
- First step
- Second step
- Third step
Definition Lists
Proper <dl> with <dt> and <dd>
✅ A standard definition list with dt (term) and dd (description) elements.
- HTML
- HyperText Markup Language
- CSS
- Cascading Style Sheets
<dl> with multiple <dd> per <dt>
✅ A definition list where one term has multiple descriptions. This is a valid structure.
- Color
- Red
- Blue
- Green
<dl> with <div> grouping
✅ A definition list using div elements to group dt/dd pairs. This is allowed by the HTML specification.
- HTML
- HyperText Markup Language
- CSS
- Cascading Style Sheets
<dl> with invalid <span> child
❌ A definition list containing a span element as a direct child. Only dt, dd, and div elements are valid children of dl.
- Term
- Description Invalid child element
<dt>/<dd> outside <dl>
❌ Definition list items (dt/dd) placed outside of a dl element. They lose their semantic meaning.
Menu
Proper <menu> with <li>
✅ A menu element with proper li children. The menu element is semantically equivalent to ul.
ARIA List Roles
role="list" with role="listitem"
✅ A custom list structure using ARIA roles. The container has role="list" and items have role="listitem".
role="listitem" outside role="list"
❌ An element with role="listitem" that is not inside an element with role="list". The listitem role requires a list context.