aria-sort attribute indicates if items in a table or grid are sorted in ascending or descending order.
If a grid or table provides sort functionality, the
aria-sort attribute should be set to either
other) on the header cell element for the sorted column or row.
aria-sort attribute is only set on the currently sorted column or row. Set
aria-sort="ascending" to indicate the data cells in the column or row are sorted in ascending order. If the sort order is reversed, toggle the value to
aria-sort="descending". When a different column or row becomes sorted, the single
aria-sort attribute is moved to the header cell for the newly sorted column or row with the appropriate value for the sort order.
aria-sort attribute should only be added to a single table or grid header at a time. The attribute is set to inform assistive technology users which column or row is sorted. It doesn't have any impact on the actual sort order.
This table loads with the last name column sorted in ascending order.
<table> <caption> Steering Committee Members </caption> <thead> <tr> <th> <button>First Name</button> </th> <th aria-sort="ascending"> <button>Last Name</button> </th> <th> <button>Company</button> </th> <th>Email</th> </tr> </thead> <tbody> … </tbody> </table>
If a user clicks on the Last Name button,
aria-pressed="true" would be added to the
<button> element and the
aria-sort value would be toggled to
aria-sort would be removed from the Last Name header to be placed on the clicked button's
We provided instructions in the caption for assistive technology who may not see the down arrows that we would add with CSS targeting the
Items are sorted in ascending order by this column.
Items are sorted in descending order by this column.
There is no defined sort applied to the column.
A sorting algorithm other than ascending or descending has been applied.
|Accessible Rich Internet Applications (WAI-ARIA) |