Video examples

iOS Voiceover

Android Talkback

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.

<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>
Nato phonetic Alphabet
Letter A B C
NATO Alpha Bravo Charlie
Screen reader and browser pairings
Platform Screenreader Browser
Apple iOS Apple VoiceOver Apple Safari
Android Talkback Chrome
Windows JAWS Chrome
Windows NVDA Chrome
Apple MacOS Apple VoiceOver Apple 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