Overview
The tables ‘Caption added separately’ and ‘Caption in output function’ are sortable. To sort the table data, the user must activate the column headers. A user who uses screen-reading software may not know that these tables are sortable. Screen-reading software does not announce an interactive element table header element to ensure that the user is aware of the interactivity, and this is because essential elements or ARIA is missing.
Steps to Reproduce
Current code (inspect HTML in showcase app)
<div class="rt-th rt-align-left bar-sort-header" role="columnheader" aria-label="Sort Months" aria-sort="ascending" tabindex="0" style="position: relative;
flex: 100 0 auto; min-width: 100px; width: 100px;">
<div class="rt-th-inner">
<div class="rt-text-content">Months</div>
</div>
</div>
Dragon NaturallySpeaking comments:
“I am unable to access the column headers with Dragon commands. When I use the command click months Dragon says, ‘please say that again’. It also does not respond to any other dragon commands. I can only access it with keyboard commands. To do this I will use the command press tab to move my focus onto the header I want, then the command press enter to activate it. This takes me longer to access multiple headings. I would expect each heading to respond to its visual title for example click ‘click colours and the column should rearrange itself. I would also expect to have visible Chevron button as it indicates to me that the columns are sortable”
Expected Behavior
An example of the ONS sortable table was given, this gives a large target area, good contrast and a permanent up / down indicator to invite users to sort them
https://service-manual.ons.gov.uk/design-system/components/table/example-table-sortable#0
We should be able to customise the reactable tables in a similar way. We should make sure not to make the icons too small though as that's been flagged as an issue before.
Additional Information
Page 32 of the September 2025 accessibility audit
Overview
The tables ‘Caption added separately’ and ‘Caption in output function’ are sortable. To sort the table data, the user must activate the column headers. A user who uses screen-reading software may not know that these tables are sortable. Screen-reading software does not announce an interactive element table header element to ensure that the user is aware of the interactivity, and this is because essential elements or ARIA is missing.
Steps to Reproduce
Current code (inspect HTML in showcase app)
Dragon NaturallySpeaking comments:
Expected Behavior
An example of the ONS sortable table was given, this gives a large target area, good contrast and a permanent up / down indicator to invite users to sort them
https://service-manual.ons.gov.uk/design-system/components/table/example-table-sortable#0
We should be able to customise the reactable tables in a similar way. We should make sure not to make the icons too small though as that's been flagged as an issue before.
Additional Information
Page 32 of the September 2025 accessibility audit