Video demos

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.

<figure>
  <table class="sortable">
    <caption class="center-text h-charlie">
      NATO alphabet letters that are also names
    </caption>

    <thead>
      <tr>
        <th scope="col" aria-sort="none">
          <button type="button" class="sort">NATO</button>
        </th>
        <th scope="col" aria-sort="none">
          <button type="button" class="sort">Ranking</button>
        </th>
        <th scope="col" aria-sort="none">
          <button type="button" class="sort">Letter</button>
        </th>
        <th scope="col" aria-sort="none">
          <button type="button" class="sort">Characters</button>
        </th>
        <th scope="col">
          Pronunciation
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Charlie</th>
        <td>1</td>
        <td>C</td>
        <td>7</td>
        <td>char lee</td>
      </tr>
      <tr>
        <th scope="row">Juliet</th>
        <td>2</td>
        <td>J</td>
        <td>6</td>
        <td>jew lee ett</td>
      </tr>
      <tr>
        <th scope="row">Romeo</th>
        <td>3</td>
        <td>R</td>
        <td>5</td>
        <td>row me oh</td>
      </tr>
      <tr>
        <th scope="row">Victor</th>
        <td>4</td>
        <td>V</td>
        <td>6</td>
        <td>vik tah</td>
      </tr>
      <tr>
        <th scope="row">Mike</th>
        <td>5</td>
        <td>M</td>
        <td>4</td>
        <td>mike</td>
      </tr>
      <tr>
        <th scope="row">Oscar</th>
        <td>6</td>
        <td>O</td>
        <td>5</td>
        <td>oss kah</td>
      </tr>
    </tbody>
  </table>

  <figcaption>
    Ranking of NATO names from
    <cite>
      <a href="https://www.linkedin.com/in/charlietriplett/">Charlie Triplett</a>
    </cite>
  </figcaption>
</figure>
NATO alphabet letters that are also names
Pronunciation
Charlie 1 C 7 char lee
Juliet 2 J 6 jew lee ett
Romeo 3 R 5 row me oh
Victor 4 V 6 vik tah
Mike 5 M 4 mike
Oscar 6 O 5 oss kah
Ranking of NATO names from Charlie Triplett
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

Related table entries