Web Table

Video examples

Code examples

Use semantic HTML

This semantic HTML contains all accessibility features by default.

Optional: The table is wrapped in a <figure> to indicate author and source.

<table id="nato-table">
  <caption class="h-charlie">
    Nato phonetic Alphabet
  </caption>
  <thead>
    <tr>
      <th scope="row">
        Letter
      </th>
      <th scope="col">
        A
      </th>
      <th scope="col">
        B
      </th>
      <th scope="col">
        C
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">
        NATO
      </th>
      <td>
        Alpha
      </td>
      <td>
        Bravo
      </td>
      <td>
        Charlie
      </td>
    </tr>
  </tbody>
</table>

Screen reader and browser pairings

Platform	Screenreader	Browser
iOS	VoiceOver	Safari
Android	Talkback	Chrome
Windows	JAWS	Chrome
Windows	NVDA	Chrome
MacOS	VoiceOver	Safari

When you can’t use semantic HTML

If it’s required to display tabular data without using a <table> element, attributes will have to added.

<div role="table" aria-describedby="table-desc">
  <div id="table-desc">
    Nato phonetic alphabet
  </div>
  <div role="rowgroup">
    <div role="row">
      <span role="columnheader">Letter</span>
      <span role="columnheader">NATO</span>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
      <span role="cell">A</span>
      <span role="cell">Alpha</span>
    </div>
    <div role="row">
      <span role="cell">B</span>
      <span role="cell">Bravo</span>
    </div>
    <div role="row">
      <span role="cell">C</span>
      <span role="cell">thead</span>
    </div>
  </div>
</div>

Developer notes

Don’t use tables purely for layout. Only use tables to structure tabular data.

Name

• The table can be named by a heading above or a <caption>

Role

• Semantic <table> structures identify headers appropriately and honors screen reader keyboard shortcuts.

Group

• Wrapping a table in a <figure> element can be used to build a relationship to <figcaption> and <cite>

State

• Sortable tables can use aria-sort to indicate state.

Documentation

• MSDN Web Docs - ARIA: table role
• WAI-ARIA table example

Related table entries

• Web demo: Table