skills.rest
hulusi-tunc
hulusi-tuncCOMMUNITY
Explore all skills by this author →
GitHub

table-accessibility

Implement accessible table structures with semantic headers and captions for screen readers.

3|Updated Mar 28, 2026
Search Tags:#captions#tables#responsive-design#headings#screen-readers#accessible
One-click install
npx skills add https://github.com/hulusi-tunc/unicorn-skills --skill table-accessibility
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: table-accessibility
Source: https://github.com/hulusi-tunc/unicorn-skills/tree/main/.claude/skills-archive/accessible-content--table-accessibility
Command: npx skills add https://github.com/hulusi-tunc/unicorn-skills --skill table-accessibility

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Tables often present data that is readable visually but inaccessible to screen readers, causing confusion for users who rely on assistive technologies. This Skill ensures table markup communicates structure and relationships so all users can understand tabular data.

Core Features & Use Cases

  • Enforces semantic headers: column headers with scope="col" and row headers with scope="row".
  • Requires captions or accessible labels to describe the table’s purpose.
  • Promotes simple, readable tables, responsive layouts, and avoids complex multi-row header tricks where possible.
  • Use Case: design product comparison tables and pricing grids that remain navigable to screen readers on mobile and desktop.

Quick Start

Review and adjust your next data table to include proper headers, captions, and a clear table title.

Frequently Asked Questions about table-accessibility

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make data tables accessible to screen readers?▼

To make data tables accessible to screen readers, implement semantic HTML headers using scope attributes, add captions or labeled descriptions, and enforce proper structural relationships to communicate tabular data clearly.

What is the best way to structure accessible pricing tables and comparison grids?▼

The best way to structure accessible pricing tables and comparison grids is to use simple, readable layouts with proper column and row headers, avoiding complex multi-row header tricks to ensure navigability on mobile and desktop.

Why does my screen reader not announce table headers correctly?▼

Screen readers fail to announce table headers correctly when semantic markup is missing. You must enforce column headers with scope="col" and row headers with scope="row" so assistive technologies can properly communicate data relationships.

Do I need captions for responsive data tables?▼

Yes, you need captions or accessible labels for responsive data tables to describe the table's purpose. Captions ensure all users, including those relying on screen readers, understand the context of the tabular data being presented.

Can I use complex multi-row headers for accessible data grids?▼

You should avoid complex multi-row headers for accessible data grids. Promoting simple, readable table layouts ensures the data relationships remain navigable and clear for screen readers on both mobile and desktop devices.

Related Skills

Explore More Design & Creative Skills→
hongmaple0820hongmaple0820
9

building-tables

Build scalable HTML tables and data grids with sorting, filtering, and pagination.

Community
Advanced
mgiffordmgifford
39

tables

Validate HTML data tables for captions, headers, and semantic structure.

Community
Advanced
logo-solutionslogo-solutions

frontend-ui-engineering

Implement accessible, responsive UI components with WCAG 2.1 AA support.

Official
Advanced
calesthiocalesthio
123

d3-animated-data-visualization

Convert sourced data into deterministic D3 animated visualizations with provenance and QA.

Community
Advanced