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.
Tables
Tables organize data in rows and columns and must be properly structured for screen readers to understand relationships between data.
Table Structure
Table with proper headers
✅ Well-structured table with th elements for headers and proper scope attributes. Screen readers can announce column/row relationships.
| Name | Age | City |
|---|---|---|
| John | 25 | New York |
| Jane | 30 | London |
Table without headers
❌ Table using only td elements without proper th headers. Screen readers cannot establish relationships between data.
| Name | Age | City |
| John | 25 | New York |
| Jane | 30 | London |
Table with row headers
✅ Table with both column headers and row headers using appropriate scope attributes for complex data relationships.
| Quarter | Sales | Profit |
|---|---|---|
| Q1 | $100K | $20K |
| Q2 | $150K | $30K |
Table with caption
✅ Table with caption element providing context about the table's purpose. Helps users understand what data the table contains.
| Name | Department |
|---|---|
| Alice | Engineering |
| Bob | Marketing |