Sortable table #269
Replies: 1 comment
-
Hi MOJ team, we borrowed this component for some of our services at the IPO and hit a snag with accessibility testing. Sharing our resolution back here in case it helps anyone else. The issue was where a screen-reader would read aloud the arrows that are being used to display the current table column sort order, this was occurring due to way the arrows were being rendered through the CSS. Originally the CSS styles were using the context property with values of Unicode characters (U+25BC and U+25B2) which both have descriptive names ('black down-pointing triangle' and 'black up-pointing triangle'), and due to them being genuine Unicode characters, the screen-reader attempts to announce their descriptive names. The fix that we implemented was to refactor the CSS styles to use a common technique where different properties are combined to generate shape elements. As these elements are no longer text characters, the screen-reader no longer reads them aloud. |
Beta Was this translation helpful? Give feedback.
-
Existing
Use case: When the user needs to see and sort through a lot of data.
Alternative option
In Apply we have our own version of a sortable and responsive table.
This table appears on two pages in the provider pathway in our service (see images below):
User research and motivation
We implemented this table as the one from the MoJ pattern library didn't test well in our user research - the arrows were too small and close to the text and it wasn't obvious when a column is sorted. Unfortunately this was a long time ago and we can't find the actual research write ups to substantiate this. However, our version of the sortable table has been used in our service on two pages for over two years now and we have not had any negative feedback on it in user research.
One thing we have found from user research on the categorise transactions page is that users don't tend to use the sort functionality. We are hoping to probe this in our next round of user research.
Examples
Screenshots of the sortable table implemented in the Apply service. All data is fake.
Applications dashboard
Categorise transactions
Accessibility
For keyboard navigation, users can tab into the table as usual. There is a screenreader message describing the table and the columns by which it can be sorted. Tabbing takes the user across the column headers and then down through the table. Pressing 'Enter' while focused on a column header will sort the table by that column, and trigger a screenreader message indicating that the table is now sorted by that column and the direction of sort. For example: 'sorted by LAA Reference Number, ascending'.
Known issues
aria-hidden=true
so that the cell is hidden from keyboard navigation but WAVE flags it as an error since the table column header is empty.Implementation
The table uses the standard table classes from the GOVUK design system table component - https://design-system.service.gov.uk/components/table/
Each column header has classes added which provide the sort behaviour and also make the table responsive.
Example minimal table HTML with relevant classes added (shows the first row of the applications table in the screenshot above):
Beta Was this translation helpful? Give feedback.
All reactions