🖋️
Web Accessibility Resources
  • Web Accessibility
  • Cheat Sheets
    • Structure and Semantics
      • Page Title
      • Language
      • Headings
      • Landmarks
      • Lists
      • Tables
      • Iframes
      • Markup Validity
      • Other Semantic Elements
    • Links & Navigation
      • Links
      • Site Navigation
      • Within-Page Navigation
      • Reading Order/Focus Order
    • Images & Visual Design
      • Images
      • Color & Contrast
      • Text Styles, Resize, Reflow, and Zoom
      • Visual Cues
      • Adaptive and Responsive Output
    • Multimedia, Animations, and Motion
      • Audio and Video
      • Animation, Motion, and Timed Content
    • User Input, Forms, and Dynamic Content
      • Device-Independent User Input
      • Form Input, Labels, and Instructions
      • Form Validation and Feedback
      • Dynamic Content (JavaScript, AJAX)
      • Custom Widgets (JavaScript, ARIA)
      • CAPTCHA
    • Keyboard Commands
  • Semantic Group Labels
Powered by GitBook
On this page

Was this helpful?

  1. Cheat Sheets
  2. Structure and Semantics

Tables

Data cells must be explicitly associated with header cells for data tables, and descriptive table captions and summaries may be provided where appropriate.

PreviousListsNextIframes

Last updated 3 years ago

Was this helpful?

Topic

Technique

WCAG AA Requirement

Table Headers

Header tag: Table headers MUST be designated with <th>.

Required

Meaningful header: Data table header text MUST accurately describe the category of the corresponding data cells.

Required

Header and data cell associations: Table data cells MUST be associated with their corresponding header cells. Note: Use of scope (<th scope="col"> and <th scope="row">) is highly recommended, though not always necessary (i.e. if all cells in the first row are marked as <th> without scope, most modern screen readers will infer that the scope is the column below each header cell).

Required

Group header associations: Table data group headers (if any) MUST be associated with their corresponding data cell groups (e.g. via scope="rowgroup" or scope="colgroup").

Required

Complex header associations: Header/data associations that cannot be designated with <th> and scope MUST be designated with the headers and id attributes.

Required

Nested or split tables: Data table headers and data associations MUST NOT be referenced across nested, merged, or separate tables.

Required

Tabular Data

Tables: Tabular data SHOULD be represented in a <table>. Note: Even if the data are not represented in a table, requires the data to be associated with their labels.

best practice

Caption

Caption: Data tables SHOULD have a programmatically-associated <caption> or name (e.g. via aria-label or aria-labelledby). Note: In most circumstances, <caption> is preferred, because it is the native method of giving a name to a table, and the <caption> is visible and available to all users by default.

best practice

Meaningful caption: The name or <caption> of a data table SHOULD describe the identity or purpose of the table accurately, meaningfully, and succinctly.

best practice

Unique caption: The name or <caption> of each data table SHOULD be unique within the context of other tables on the same page.

best practice

Layout Tables

Avoid layout tables: Tables SHOULD NOT be used for the purpose of purely visual (non-data) layout.

best practice

Avoid headers in layout tables: Layout tables MUST NOT contain headers.

best practice

WCAG 1.3.1
WCAG 1.3.1
WCAG 1.3.1
WCAG 1.3.1
WCAG 1.3.1
WCAG 1.3.1
WCAG 1.3.1