2.3 Problematic column headers (Low)
2.3.1 WCAG 1.3.1 (A) - Desktop
On the homepage, a table is used to organise information for each prisoner. Some of the column headers are interactive buttons that allow data to be sorted in ascending and descending order. To sighted users, this functionality is indicated by the presence of two directional arrows. For screen reader users, these elements are announced as ‘Sort by’ followed by the column header.
While this approach provides valuable information to screen reader users, the current implementation can cause confusion as the ‘Sort by’ is announced as part of the data cell within the table due to programmatic association e.g. “Sort by prisoner column 1 profile link Zyana Arpelarichard”. This results in audible clutter and may lead to uncertainty for screen reader users, as they may not understand the purpose of the element due to the repeated announcement of ‘Sort by’.
FIGURE 2.3: Data cell on table highlighted with screen reader
2.3.2 Code snippet
<button type="submit"
id="lastName-sort-action" name="sortAction"
value="lastName" aria-label="Sort by Prisoner">2.3.3 Recommendation
To prevent audible clutter we recommend removing the aria-label and implementing aspects of the W3C sortable table component. Instead of relying on the aria-label="Sort by", we recommend implementing a visually hidden span, where the sort functionality of the clickable column headers is appended to the table caption. The description is added to the caption instead of to each clickable column header to prevent this information from being repeated throughout the table. e.g.
<caption>
<span class="sr-only">column headers
with buttons are sortable.</span>
</caption>A full description of how to implement these changes can be found in the below resource.