Table with Scoped Headers Template (Accessibility)
Build truly accessible tables by using the scope attribute to programmatically link data cells to their headers.
This is one of the most important practices for table accessibility, ensuring that screen reader users can navigate and understand complex data.
About Scoped Table Headers
For a sighted user, the relationship between a header and a cell is visually obvious. For someone using a screen reader, that relationship must be defined in the code. The scope attribute on a th element does exactly that.
scope="col"tells the browser that this header applies to all other cells in the same column.scope="row"tells the browser that this header applies to all other cells in the same row.
When a screen reader user navigates to a cell (e.g., "$29"), it can announce both the column and row header (e.g., "Price, Premium Plan: $29"). Without scope, it might just read "$29", leaving the user without context. This template provides a clear example of a table with both row and column headers.
Key Features:
- Highly Accessible: Provides essential context for users of assistive technologies, compliant with WCAG guidelines.
- Unambiguous Data: Ensures that data is not misinterpreted by removing ambiguity.
- Semantic & Robust: Creates a logical structure that is more resilient to complex layouts and styling.
- No Visual Change: Adding the
scopeattribute does not affect the table's appearance at all. It's a purely informational enhancement.
Ideal Use Cases:
- All tables intended for public websites. It should be considered a best practice for almost any table.
- Complex data grids with headers on both the top and side (a "matrix" table).
- Government, educational, or corporate websites where WCAG compliance is mandatory.
Dependencies:
None. This is a fundamental HTML attribute.
Code
Here's the full code demonstrating the use of scope on both column and row headers.