Financial-Times
o-table sort buttons are not descriptive
What
During accessibility review, it has been noted that usage of the title attribute to denote sorting action is not sufficient. Please see full comment below:
Even though this has a title attribute advising of the button’s function, this is not advised to screen reader users as the title attribute normally isn’t read by screen reading software. Adding the information to the column header will cause the information to be read out every time a user crossed into a new column; so, it can be added to an aria-describedby attribute which be read after the label
Details
A recommended solution is to add screen-reader accessible descriptions that can be placed into a visually hidden element, see example below:
<div style="display: none;">
<span id="desc_SortCountry">Click to sort table by Country</span>
</div>
<button class="o-table__sort" title="sort table by Country" aria-describedby="desc_SortCountry">```
hi! thanks for opening this. it looks like we've chosen to support VoiceOver over other screen readers for some reason. so this certainly needs fixed.
I'm wondering why it's a bad thing for what the button does to be read out every time the user moves to a new column? isn't the button different for each column? @notlee @nickcolley
If I remember correctly the issue was that using aria-label on the button meant the button content was announced when moving across data cells within the table itself, where there is no button to sort.
| a (sort a by dec) | b (sort b by asc) |
|---|---|
| 1 | 3 |
| 2 | 4 |
So in the above table navigating right from cell "2" to cell "4" would read something like "4, b, sort b by asc" (again, if my memory is right)
From the issue it sounds like using aria-describedby instead of aria-label will avoid that 🤞whilst being announced as part of the th by a wider number of readers
@petrklus do you happen to know what specific assistive technology and version was being used when the reviewer came across this issue?
Chee has done an investigation using several different screenreaders and not been able to replicate the issue (https://github.com/Financial-Times/o-table/pull/239#issuecomment-775890808)
@petrklus is there any more information you can give us to help reproduce this issue at all?
Thank you for the report @petrklus, the feedback in the report is confusing to read. It sounds like the screen reader user gave feedback that they want the column-header and sort button to be repeated when they navigate between cells.
Let's create a branch/pr for these two implementations:
- https://inclusive-components.design/data-tables/
- https://moj-design-system.herokuapp.com/components/sortable-table + Heydon's above
Then we can have deployments previews available on a url which we can test the implementations with multiple assistive technologies. We should post this in #accessibility and get other people to also test it out as well 👍
This was a good read on different table sorting implementations and how they iteract with screenreaders -- https://adrianroselli.com/2020/09/sortable-table-column-mad-libs.html