A webpage should make sense even when someone cannot see its colors, pictures, or layout.
What You Need to Know
aria-sort describes the order currently displayed in a table. It does not actually rearrange rows; a sorting button and code must do that if visitors are expected to change the sort order.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<table>
<caption>Students sorted by score, highest first</caption>
<thead>
<tr>
<th scope="col">Student</th>
<th scope="col" aria-sort="descending">Score</th>
</tr>
</thead>
<tbody>
<tr><th scope="row">Alex</th><td>95</td></tr>
<tr><th scope="row">Robin</th><td>82</td></tr>
</tbody>
</table>Let’s Read the Code
- Read from the outside inward: the outer element describes the job, while the nested elements supply the information.
What the example shows: Aria-sort describes the current sorting direction on the sorted header. It does not sort the rows.
What Happens in the Browser?
Try this with Tab and Shift+Tab. If you can, inspect the accessibility tree too; appearance alone does not tell the whole story.
What does assistive technology receive? The example includes aria-sort. These relationships can explain names, states, or descriptions when used correctly. They do not automatically move focus, listen for clicks, or create keyboard handling.
Your Turn
Reverse the row order and update aria-sort to ascending.
Common Beginner Mistakes
- Judging the page only by how it looks, without checking its meaning and keyboard behavior.
- An interactive sort button and JavaScript would be needed for visitors to change the ordering themselves.
Key Takeaways
- aria-sort describes the order currently displayed in a table.
- Read from the outside inward: the outer element describes the job, while the nested elements supply the information.
- A meaningful HTML element is usually a stronger starting point than adding an ARIA role to a generic div. Also check what happens using only the keyboard.