Changing a table's visual layout

Sometimes it is necessary to style tables visually in a way that standard tables are not capable of. For example, with some CSS, it is possible to stack all cells of a table vertically on top of each other. This provides a lot of new ways of styling a table. But as this potentially also changes its semantics, ARIA must be used to ensure accessibility.

Table layout - not layout table

First things first: we are not talking about layout tables here. We really do hope nobody is using tables for layout purposes anymore (although screen readers can handle them quite well).

In this article, we are talking about changing the visual appearance of a table while retaining its semantics (if you haven't done this yet, go back and read Semantics and their importance for accessibility).

Changing the display property

To alter a table's visual appearance, the display property needs to be changed. Take a look at the following example, where the table's cells are stacked on top of each other.

Table with block elements

Show HTML code

Show CSS code

<table>
  <caption>My Hobbies</caption>
  <thead>
    <tr>
      <th>
        Name
      </th>
      <th>
        Description
      </th>
      <th>
        Additional Resources
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>
        Playing Soccer
      </th>
      <td>
        Soccer is a team sport played between two teams of eleven players with a spherical ball.
      </td>
      <td>
        <a href="https://en.wikipedia.org/wiki/Association_football">Wikipedia</a>
      </td>
    </tr>
    <tr>
      <th>
        Dancing
      </th>
      <td>
        Dance is a performing art form consisting of purposefully selected sequences of human movement.
      </td>
      <td>
        <a href="https://en.wikipedia.org/wiki/Dance">Wikipedia</a>
      </td>
    </tr>
    <tr>
      <th>
        Gardening
      </th>
      <td>
        Gardening is the practice of growing and cultivating plants as part of horticulture.
      </td>
      <td>
        <a href="https://en.wikipedia.org/wiki/Gardening">Wikipedia</a>
      </td>
    </tr>
  </tbody>
</table>

table {
  border-collapse: collapse;
  display: block;
  border-bottom: 1px solid;
}

caption, tr, tbody {
  display: block;
}

thead th {
  background-color: lightpink;
}

tbody th {
  background-color: lightgreen;
}

th, td {
  border: 1px solid;
  border-bottom: 0;
  padding: 4px 8px;
  display: block;
}

th {
  text-align: left;
}

This happens because all elements all are set to display: block now. So far, so good.

What may really be surprising: although the element is a perfectly valid HTML structure of a table, it is not announced as a table anymore by many screen readers. Thus, it is impossible to use table navigation or similar ways to browse the table, which is critically reducing its accessibility.

What happened?

Lost semantics due to display changes

The display property is one of the few CSS properties that have an impact on accessibility. If it is changed, it can have an impact on the semantical information of an element.

By default, the following display properties are set to a basic table:

table for <table>
table-header-group for <thead>
table-row for <tr>
table-cell for <th> and <td>

In our example, we changed these values from their defaults to display: block. Alas, the inherent semantics are lost and the element is not recognised as a table anymore by screen readers. What a bummer.

Re-applying proper semantics using ARIA

Fortunately, the lost semantics can be re-applied using ARIA (if you haven't done this yet, go back and read ARIA - when HTML simply is not enough).

This is done by adding a role attribute with the appropriate value to each element:

role="table" corresponds to <table>
role="row" corresponds to <tr>
role="rowgroup" corresponds to <thead>, <tbody> & <tfoot>
role="columnheader" corresponds to <th> (horizontal)
role="rowheader" corresponds to <th> (vertical)
role="cell" corresponds to <td>

Now the table will be recognised properly again by screen readers.

Table with block elements, fixed with ARIA

Show HTML code

Show CSS code

✔ (pass) ,

✔ (pass)

<table role="table">
  <caption>My Hobbies</caption>
  <thead role="rowgroup">
    <tr role="row">
      <th role="columnheader">
        Name
      </th>
      <th role="columnheader">
        Description
      </th>
      <th role="columnheader">
        Additional Resources
      </th>
    </tr>
  </thead>
  <tbody role="rowgroup">
    <tr role="row">
      <th role="rowheader">
        Playing Soccer
      </th>
      <td role="cell">
        Soccer is a team sport played between two teams of eleven players with a spherical ball.
      </td>
      <td role="cell">
        <a href="https://en.wikipedia.org/wiki/Association_football">Wikipedia</a>
      </td>
    </tr>
    <tr role="row">
      <th role="rowheader">
        Dancing
      </th>
      <td role="cell">
        Dance is a performing art form consisting of purposefully selected sequences of human movement.
      </td>
      <td role="cell">
        <a href="https://en.wikipedia.org/wiki/Dance">Wikipedia</a>
      </td>
    </tr>
    <tr role="row">
      <th role="rowheader">
        Gardening
      </th>
      <td role="cell">
        Gardening is the practice of growing and cultivating plants as part of horticulture.
      </td>
      <td role="cell">
        <a href="https://en.wikipedia.org/wiki/Gardening">Wikipedia</a>
      </td>
    </tr>
  </tbody>
</table>

table {
  border-collapse: collapse;
  display: block;
  border-bottom: 1px solid;
}

caption, tr, tbody {
  display: block;
}

thead th {
  background-color: lightpink;
}

tbody th {
  background-color: lightgreen;
}

th, td {
  border: 1px solid;
  border-bottom: 0;
  padding: 4px 8px;
  display: block;
}

th {
  text-align: left;
}

Category	Result	Comments	Date
Keyboard only	✔ (pass) pass	-	2018-4-17
NVDA 2023.1 + FF 115	✔ (pass) pass	-	2023-8-3
NVDA 2021.2 + Chrome	✔ (pass) pass	-	2021-2-10
NVDA 2023.1 + Edge	✔ (pass) pass	-	2023-7-13
JAWS 2018.3 + FF ESR 52.7.3	✔ (pass) pass	-	2018-4-17
JAWS 2021.2 + Chrome	✔ (pass) pass	-	2021-2-10
JAWS 2023.1 + Edge	✔ (pass) pass	-	2023-7-13

Conclusion

Whenever you are messing with an element's layout, always remember to re-apply the potentially changed semantics using ARIA.

In general: fiddling around with a table's visual attributes is especially finicky. Be sure to take nothing for granted and always validate your work thoroughly for accessibility.