WAI-ARIA: aria-sort(Property)
Description
Indicates if items in a table or grid are sorted in ascending or descending order.
Authors SHOULD only apply this property to table headers or grid headers. If the property is not provided, there is no defined sort order. For each table or grid, authors SHOULD apply aria-sort to only one header at a time.
Browser Compatibility
desktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
ariaSort | ChromeFull support81 | EdgeFull support81 | FirefoxNo supportNo | Internet ExplorerNo supportNo | OperaFull support68 | SafariFull support12.1 | WebView AndroidFull support81 | Chrome AndroidFull support81 | Firefox for AndroidNo supportNo | Opera AndroidFull support58 | Safari on iOSFull support12.2 | Samsung InternetFull support13.0 |
Screen Reader Support
Expectation | JAWS | Narrator | NVDA | Orca | TalkBack | VoiceOver (iOS) | VoiceOver (macOS) | ||||
---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Edge | Chrome | Edge | Firefox | Firefox | Chrome | Safari | Safari | |
MUST convey the ‘ascending’ value | supported | unknown | supported | partial | supported | supported | supported | none | none | supported | partial |
MUST convey the ‘descending’ value | supported | unknown | supported | partial | supported | supported | supported | none | none | supported | partial |
MUST convey the ‘none’ value either by omitting any sort information or by indicating that the header is unsorted but sortable | supported | unknown | supported | supported | supported | supported | supported | supported | supported | supported | supported |
SHOULD convey the ‘none’ value by indicating that the header is unsorted but sortable | none | unknown | none | none | none | none | none | none | none | none | none |
MUST convey the ‘other’ value | supported | unknown | supported | partial | supported | supported | supported | none | none | none | none |
MUST convey changes to the sort value | none | unknown | supported | none | none | none | none | none | none | none | none |
aria-sort Example
<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>
Characteristics
Used in Roles
Value
- token
One of a limited set of allowed values. An explicit value of undefined for this type is the equivalent of providing no value - ascending
- Items are sorted in ascending order by this column.
- descending
- Items are sorted in descending order by this column.
- none (default)
- There is no defined sort applied to the column.
- other
- A sort algorithm other than ascending or descending has been applied.
Semantic HTML
No HTML element equivalent.
Reference
- WAI-ARIA 1.2 Specification
Refer to the notes from the WAI-ARIA 1.2 specification for more information on aria-sort. - MDN Web Docs
The browser compatibility for each of the ARIA attributes is taken from the MDN Web Docs. Please refer to the original source if browser compatibility is updated for aria-sort.