Dostępność
a11y/table-caption
A data table has a name, from a caption element or aria-labelledby pointing at the heading above it.
drobnaręczneWCAG 1.3.1 · Afe-a11y-tables
Dlaczego
Screen reader users can list the tables on a page and jump between them. Without a name they hear "table, 5 columns, 12 rows" for each one and must read cells to find the right table.
Poprawka
Add <caption> as the first child of <table> (it can be visually hidden if a heading already shows the title), or point aria-labelledby at the heading that introduces the table.
Przykłady
<h2 id="orders-title">Recent orders</h2>
<table aria-labelledby="orders-title">…</table>Źródła
Fakty
- Identyfikator
a11y/table-caption- Waga
- drobna
- Sprawdzanie
- ręczne ocenia człowiek; raport podaje to jako listę kontrolną
- Dotyczy plików
htmlangularvuesvelteastrojsx- WCAG 2.2
- 1.3.1, poziom A
- Uczy jej skill
fe-a11y-tablesData tables- Od wersji
- 0.1.0
Przeczytaj w terminalu
npx github:dawidolko/frontend-skills explain a11y/table-caption