To modify a standard table to use this:
- add _table.scss to your service css
- add
role="table"
to table element - add
role="rowgroup"
to thead element - add
role="row"
to each row element (including the one containing the headings) - add
role="columnheader"
to the th elements - add
role="cell"
to the td elements - add
<span class="hmrc-responsive-table__heading" aria-hidden="true">[heading]</span>
to each cell, with the [heading] being the column it sits under.
Example markup:
<table class="govuk-table hmrc-responsive-table" role="table">
<thead class="govuk-table__head" role="rowgroup">
<tr class="govuk-table__row" role="row">
<th scope="col" class="govuk-table__header" role="columnheader">Title</th>
<th scope="col" class="govuk-table__header" role="columnheader">Last updated</th>
<th scope="col" class="govuk-table__header" role="columnheader">Status</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row" role="row">
<td class="govuk-table__cell" role="cell">
<span class="hmrc-responsive-table__heading" aria-hidden="true">Title</span>
This is a title
</td>
<td class="govuk-table__cell" role="cell">
<span class="hmrc-responsive-table__heading" aria-hidden="true">Last updated</span>
04 August 2020
</td>
<td class="govuk-table__cell" role="cell">
<span class="hmrc-responsive-table__heading" aria-hidden="true">Status</span>
Completed
</td>
</tr>
</tbody>
</table>