Use `<button>` inside `<th>` and `aria-sort` on the column so screen readers announce sort state. The button is the keyboard-accessible trigger; JS only handles the actual sort.
HTML
<table>
<thead>
<tr>
<th aria-sort="none">
<button class="sort-btn" data-sort="name">
Name
<span class="sort-icon" aria-hidden="true">⇅</span>
</button>
</th>
<th aria-sort="ascending">
<button class="sort-btn" data-sort="email">
Email
<span class="sort-icon" aria-hidden="true">↑</span>
</button>
</th>
<th aria-sort="none">
<button class="sort-btn" data-sort="created" data-type="date">
Joined
<span class="sort-icon" aria-hidden="true">⇅</span>
</button>
</th>
</tr>
</thead>
<tbody id="user-rows">
<!-- rows ... -->
</tbody>
</table>
<style>
.sort-btn {
background: none; border: 0; cursor: pointer; padding: 0;
font: inherit; font-weight: 700; display: flex; gap: 6px; align-items: center;
}
th[aria-sort="ascending"] .sort-icon { content: "↑"; opacity: 1; }
th[aria-sort="descending"] .sort-icon { content: "↓"; opacity: 1; }
th[aria-sort="none"] .sort-icon { opacity: 0.35; }
</style>Save your own code snippets
Create a free account and build your private vault. Share publicly whenever you want.