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 For aria-sort

	desktop						mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet
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 For aria-sort

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

• columnheader
• rowheader

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

• W3C (opens new window)
• MDN Web Docs