tableslisted

Load this skill whenever the project contains HTML data tables (<table> elements). Under no circumstances use tables for layout purposes. Absolutely always include <th> elements with appropriate scope attributes, a <caption> or aria-labelledby, and ensure complex tables have headers associated with data cells. Apply these rules to every data table without exception.
mgifford/accessibility-skills · ★ 15 · AI & Automation · score 77

Install: claude install-skill mgifford/accessibility-skills

# Tables Accessibility Skill > **Canonical source**: `examples/TABLES_ACCESSIBILITY_BEST_PRACTICES.md` in `mgifford/ACCESSIBILITY.md` > This skill is derived from that file. When in doubt, the example is authoritative. Apply these rules when creating or reviewing HTML data tables. **Only load this skill if the project contains data tables.** --- ## Core Mandate Tables communicate relationships between data. Sighted users scan rows and columns visually; screen reader users navigate cell by cell and rely on header announcements for context. Without proper markup, every cell is an orphaned data point. **Never use tables for layout.** Use CSS (Grid, Flexbox) instead. Layout tables that remain in a codebase must have `role="presentation"` and must linearise without loss of meaning. --- ## Severity Scale (this skill) | Level | Meaning | |---|---| | **Critical** | Table data is completely uninterpretable by screen reader users | | **Serious** | Headers missing or misassociated; complex table with no navigation aid | | **Moderate** | `<caption>` missing; zebra stripes lost in forced-colours without fallback | | **Minor** | `<thead>`/`<tbody>` absent; `summary` attribute used (deprecated) | --- ## Assistive Technology Context Tables are rendered differently across AT combinations. Test with: | AT | Browser | Notes | |---|---|---| | NVDA | Chrome | Reads headers on cell entry; table navigation via `T` key | | JAWS | Chrome | Similar to NVDA; `Ctrl+Alt+Arrow` navigates cell