Data and collections

Accessible sortable tables: Examples and Testing

Published by whatisADA / Grow Wild Agency · Updated September 11, 2026

What to build

A sortable table retains its table structure while exposing sorting as an action in the relevant header. Indicate the active sort direction and update the result without losing the user's place.

A practical example

An issue table can sort by Priority or Page. A button in the Priority header applies the sort, aria-sort identifies the current direction on that header, and a short message reports the change.

Try the example

Use Tab and your keyboard controls, then compare the behavior with the checks below. This is an isolated learning example; test the complete pattern in your own product and assistive technology setup.

Sample documents, sorted by title A to Z
	Format
Annual report	HTML
Budget summary	HTML
Contact directory	HTML

How to check it

Reach each sortable header button and activate it with keyboard input.
Check aria-sort on the actively sorted column and compare the actual row ordering.
Verify that focus remains usable and that repeated sorting does not rebuild the table in a way that loses the user's context.

What can be missed

An arrow icon alone does not communicate the sorting state to everyone. Apply aria-sort to the appropriate header rather than every column, and do not use grid semantics unless the table needs that interaction model.

Markup and state contract

This concise markup illustrates names, relationships or state. Custom controls also need the keyboard interaction and state updates described in the checks and primary source; this snippet is not a complete component.

<table>
  <caption>Open accessibility issues</caption>
  <thead><tr><th scope="col" aria-sort="ascending"><button type="button">Priority</button></th><th scope="col">Page</th></tr></thead>
  <tbody><tr><td>High</td><td>Checkout</td></tr></tbody>
</table>
<p role="status">Sorted by priority, ascending.</p>

Record your test

Use this worksheet to record what you actually checked. Notes stay on this device when you choose Save; they are not sent to us. Avoid personal or confidential information on shared devices.

Page and state testedBrowser, assistive technology and date

Check 1: Reach each sortable header button and activate it with keyboard input.
Check 2: Check aria-sort on the actively sorted column and compare the actual row ordering.
Check 3: Verify that focus remains usable and that repeated sorting does not rebuild the table in a way that loses the user's context.

Evidence, exceptions and follow-up

These are your observations, not automated results or a conformance certificate. A complete evaluation needs appropriate scope, supported technologies, all applicable criteria and relevant page states.

Primary sources and scope

Primary implementation guidance

This is independent implementation guidance with original examples. The linked standard contains the full definitions, exceptions and conformance requirements. A criterion or checklist alone does not establish legal applicability or whole-site conformance.