Tables

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 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.

Employee Information
Name	Department
Alice	Engineering
Bob	Marketing

Complex Headers

Row group headers (scope="rowgroup")

✅ scope="rowgroup" headers (Cats, English speakers) apply to every cell in their row group except cells in the columns to their left. Note that the row headers (Legs, Tails) are placed in the second column, not the leftmost one.

ID	Measurement	Average	Maximum
	Cats
93	Legs	3.5	4
10	Tails	1	1
	English speakers
32	Legs	2.67	4
35	Tails	0.33	1

This table is from the HTML Standard by WHATWG, used under CC BY 4.0.

Column group headers (scope="colgroup")

✅ A scope="colgroup" header (Sales) applies to every cell in its column group, grouping multiple columns under a shared heading.

Month	Online	Store
	Sales
January	120	340
February	150	310

Row header not in the first column

✅ The row header (Country) is in the second column with a data column (Rank) to its left. scope="row" headers apply only to cells on their right, so the Rank column is not associated with them.

Rank	Country	Capital
1	Japan	Tokyo
2	France	Paris