How to change HTML table tab order from horizontal to vertical without tabindex?

Question

I have an HTML table like this:

*----------*----------*
| Cell 1   | Cell 4   |
*----------*----------*
| Cell 2   | Cell 5   |
*----------*----------*
| Cell 3   | Cell 6   |
*----------*----------*         

How do I change the tab order to properly run from Cell 1 to Cell 6 without using tabindex? I ask this knowing that the WAI-ARIA guidelines discourage the use of tabindex to change the tab order of cells.

I've considered breaking the table into two elements -- left and right -- so that they will have the correct order in the DOM. However, this solution does not seem to maintain the aspects of a natural HTML table (such as equal height across rows of cells).

Answer 1

The following works from a tab perspective but does not work for a screen reader. I'm using a <button> in the table just to demonstrate the tabbing order.

<table>
  <tr>
    <th>header 1</th>
    <th>header 2</th>
  </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td><button>cell 1</button></td>
        </tr>
        <tr>
          <td><button>cell 2</button></td>
        </tr>
        <tr>
          <td><button>cell 3</button></td>
        </tr>
      </table>
    </td>
    <td>
      <table>
        <tr>
          <td><button>cell 4</button></td>
        </tr>
        <tr>
          <td><button>cell 5</button></td>
        </tr>
        <tr>
          <td><button>cell 6</button></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

To tab vertically, you have to group cell1-cell3 in a container and cell4-cell6 in another container, then display the two containers side by side. Since you can't have a container span across rows in a table, you have to use a (nested) table as the container. The first cell of the main table is a nested table, so tabbing goes through the nested table (cell1-cell3) first. Then tabbing goes to the second cell of the main table, which again is a nested table (cell4-cell6).

You could try to simplify it and put cell1-cell3 in a <div> and have that <div> be the first cell of the main table, but then cell1-cell3 would not, individually, be in separate data cells, but that's up to you if that's important.

<table>
  <tr>
    <th>header 1</th>
    <th>header 2</th>
  </tr>
  <tr>
    <td>
      <div>
        <button>cell 1</button><br>
        <button>cell 2</button><br>
        <button>cell 3</button>
      </div>
    </td>
    <td>
      <div>
        <button>cell 4</button><br>
        <button>cell 5</button><br>
        <button>cell 6</button>
      </div>
    </td>
  </tr>
</table>

Getting back to the screen reader, there are keyboard shortcuts to traverse through all the cells of a table. On a PC, using JAWS or NVDA, it's ctrl+alt+arrow.

So ctrl+alt+RightArrow will let me traverse across a row. Even if you used ill-advised positive values for tabindex to control the vertical tabbing order, it will not affect the way a screen reader can navigate through a table. So if there's significant meaning in reading the table vertically, the screen reader user will lose that meaning and may not understand your table.

A few questions to consider:

• Are the two columns related?
• Is the table a "real" table in that it's displaying data, or is the table being used for layout purposes?
• Are there column headers?

Tabbing vertically might not be necessary if the purpose of tabbing vertically can be conveyed by having sufficient row headers. Most tables have column headers but ofttimes, row headers are left off. They are very useful.

<table>
  <tr>
    <th scope="col">name</th>
    <th scope="col">age</th>
    <th scope="col">height</th>
  </tr>
  <tr>
    <th scope="row">dave</th>
    <td>12</td>
    <td>4'8"</td>
  </tr>
  <tr>
    <th scope="row">fred</th>
    <td>13</td>
    <td>4'9"</td>
  </tr>
  <tr>
    <th scope="row">henry</th>
    <td>14</td>
    <td>4'10"</td>
  </tr>
</table>