State: Table sort state is missing or incorrect

Rule

The name, role, value, states, and properties of user interface components MUST be programmatically determinable by assistive technologies.

Background

States and properties are attributes used to convey essential information about an element to screen readers and other assistive technologies. Some roles require certain state and property information - such as the checked/unchecked state of a checkbox. Native HTML elements provide those required states and properties, so nothing more needs to be done. If you create a custom version of a native HTML element or a custom control or widget that does not have a native HTML equivalent, you must add the relevant states and properties using ARIA.

How to Fix

Fix this issue by using ONE of the following techniques:

1. Use the aria-sort attribute values of "ascending" or "descending" or "none" on the column header to indicate the sort state of the data in a sortable column. This technique also requires that role="columnheader" be added to the <th> element.

<th role="columnheader" aria-sort="descending"> <button class="sortableColumnLabel">Name</button> </th>

2. Add CSS clipped (visually hidden) text to the sorting element to indicate the sorted state.

<th> <div tabindex="0" role="button" id="date-sort"> Date <span class="sr-text">sorted ascending</span> </div> </th>