Sortable Table Example

About This Example

The example below illustrates an implementation of the Table Pattern for a table with sortable rows. The example uses HTML table markup for all elements of the table structure, e.g., cells, rows, column headers, and caption. The aria-sort attribute is set on the column header of the currently sorted column, and the header text of sortable columns is wrapped in a button element. One column, the Address column is not sortable.

Similar examples include:

Example Option

Adds a diamond shaped icon (e.g. ) to the header of each column that can be sorted but is not currently sorted. Some sortable tables add an icon to unsorted columns to help users distinguish sortable columns from columns that cannot be sorted. It is important that the shape of the unsorted icon differ in more than just color and size from the icons that indicate sort direction (e.g. '▼' and '▲') so people with visual impairments can easily distinguish them.

Example

Students currently enrolled in WAI-ARIA 101 , column headers with buttons are sortable.
Address
Fred Jackson Canary, Inc. 123 Broad St. 56
Sara James Cardinal, Inc. 457 First St. 7
Ralph Jefferson Robin, Inc. 456 Main St. 513
Nancy Jensen Eagle, Inc. 2203 Logan Dr. 3.5

Accessibility Features

Keyboard Support

Not applicable: The only interactive elements are HTML button elements, and all their keyboard functionality is provided by browsers.

Role, Property, State, and Tabindex Attributes

Role Attribute Element Usage
aria-sort="value" th
  • Set on the currently sorted column. When the sorted column is changed, the aria-sort attribute is removed and set on the newly sorted column.
  • A value of "ascending" indicates the data cells in the column are sorted in ascending order.
  • A value of "descending" indicates the data cells in the column are sorted in descending order.
aria-hidden="true" span Removes the character entities used for sort icons from the accessibility tree to prevent them from being included in the accessible name of the sort buttons.

JavaScript and CSS Source Code

HTML Source Code