Table
Displays structured data in rows and columns with consistent styling and accessible markup.
Screen reader behaviour
| Attribute / Property | Value / Behaviour |
|---|---|
role="table" (implicit) | diwa-table — The native <table> element inside the shadow DOM provides the implicit table role. |
<caption> | diwa-table — The caption prop renders a visually hidden <caption> element that screen readers announce before the data. |
role="columnheader" | diwa-table-head-cell — Set on each header cell to identify it as a column header. |
role="row" | diwa-table-row — Set on each row element. |
role="cell" | diwa-table-cell — Set on each data cell. |
Keyboard interaction
The table itself is not interactive. Any interactive content placed inside cells (buttons, links, inputs) follows standard keyboard navigation for those elements.
WCAG 2.2 compliance
1.3.1 Info and Relationships — APass
The native <table> element, <caption>, <th> with role="columnheader", and <td> with role="cell" convey the table structure programmatically to assistive technologies.
1.4.3 Contrast (Minimum) — AAPass
Table cell text uses --diwa-text-primary; meets the 4.5:1 minimum contrast ratio against the row background in both themes.
1.4.11 Non-text Contrast — AAPass
Row separator lines and the table border use --diwa-border, validated to have ≥ 3:1 contrast against adjacent surface colours.
2.1.1 Keyboard — APass
The table itself is non-interactive. Interactive content in cells (buttons, links, inputs) follows standard keyboard navigation for those element types.
4.1.2 Name, Role, Value — APass
Roles are provided by the native HTML table elements. The caption prop renders a visually hidden <caption> that announces the table name to screen readers.
Best practices
- Always set a caption — the
captionprop renders a visually hidden<caption>that screen readers announce as the table name. Without it, users have no context for what the data represents. - Interactive cell content — buttons, links, and inputs placed inside cells must each have descriptive accessible names. Include the row context in the label so screen readers can announce "Delete row: Product A" rather than just "Delete".
- Column headers — use
diwa-table-head-cellfor every header column so therole="columnheader"is applied correctly and screen readers can associate data cells with their headers.