tables

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

39|2|Updated Mar 28, 2026

Search Tags:#responsive #scope #headers #tables #accessible #caption

Ready to run

npx skills add https://github.com/mgifford/accessibility-skills --skill tables

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tables
Source: https://github.com/mgifford/accessibility-skills/tree/main/skills/tables
Command: npx skills add https://github.com/mgifford/accessibility-skills --skill tables

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires [].

What problem does it solve?

Data tables often lack semantic markup, making them difficult to understand for screen readers and other AT. This skill guides teams to ensure correct usage of captions, headers with scope attributes, and proper structure to convey relationships and improve accessibility.

Core Features & Use Cases

Enforces <caption> presence and proper heading semantics (<th scope>, <thead>/<tbody>/<tfoot>) for data tables.
Promotes responsive table patterns and fallback strategies for readers using assistive tech across devices.
Helps CMS/Framework outputs (WordPress, Drupal, DataTables.js, etc.) align with accessibility best practices.

Quick Start

Review your project’s HTML tables and apply the rules in this skill to ensure captions, headers, and semantic sections are present.

Frequently Asked Questions about tables

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

FAQPage Schema

How do I make HTML data tables accessible for screen readers?▼

To make HTML data tables accessible, ensure proper semantic markup using <caption> elements, <th scope> attributes for headers, and thead/tbody/tfoot sections to convey data relationships clearly to assistive technology.

What is the correct way to add headers and scope attributes for complex data tables?▼

For complex data tables, use <th scope> to define header relationships for simple rows or columns, and apply optional headers/id attributes to associate data cells with multiple headers, ensuring screen readers can navigate the structure.

Does this approach work with CMS outputs like WordPress and Drupal?▼

Yes, this approach helps CMS and framework outputs from WordPress, Drupal, and DataTables.js align with accessibility best practices by guiding the implementation of proper table captions, headers, and semantic sections.

How do I handle responsive table patterns without breaking keyboard navigation?▼

Implement responsive table patterns with fallback strategies to maintain robust keyboard navigation and consistent semantics across devices, ensuring readers using assistive technology can still access the data relationships effectively.

When should I use the headers and id attributes instead of th scope in data tables?▼

Use the headers and id attributes for complex tables where data cells need to reference multiple header cells, whereas <th scope> is sufficient for simple tables to define row and column relationships for assistive technology.