Video examples

iOS Voiceover Safari

Android Talkback Chrome

Windows NVDA Chrome

MacOS Voiceover Safari

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.

<figure id="figure">
  <table id="nato-table">
    <caption>
      NATO Phoenetic Alphabet
    </caption>
    <thead>
      <tr>
        <th scope="row">
          Letter
        </th>
        <th scope="column">
          A
        </th>
        <th scope="column">
          B
        </th>
        <th scope="column">
          C
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">
          NATO
        </th>
        <td>
          Alpha
        </td>
        <td>
          Bravo
        </td>
        <td>
          Charlie
        </td>
      </tr>
    </tbody>
  </table>
  <figcaption>
    Source: Charlie,
    <cite>
      Foxtrot Oscar Oscar Bravo Alpha Romeo, 2021
    </cite>
  </figcaption>
</figure>
NATO Phoenetic Alphabet
Letter A B C
NATO Alpha Bravo Charlie
Source: Charlie, Foxtrot Oscar Oscar Bravo Alpha Romeo, 2021

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 Phoenetic 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.

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