WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Sortable table columns

for

From: Birkir R. Gunnarsson
Date: Aug 5, 2020 4:59PM

I have always solved this by making the column header text of a
sortable column into a
Add screen reader instructional text for good measure (it can even be
visible if you want keyboard only users to benefit).
button, use aria-sort on the header cell to indicate one that is
actively sorted.
e.g., if you can sort by name or city but not phone number:
<span class="srOnly" id="sbInstr">Click the column header buttons to
sort by that column</span>

<table aria-describedby="sbInsr">
<tr>
<th><button>Name</button></th>
<th><button>City</button></th>
<th>Phone number</th>
</tr>
...
</table>

If user clicks the name button, add aria-sort="ascending" to the <th>
cell for that column to indcate it is sorted by name, ascending.
If you add visual sortability and sort direction cues to the column
headers, make sure those are coded as presentation or hidden using
aria-hidden.


We've done some screen reader usability studies on this pattern and in
those studies people had no difficulty figuring this out.
If designers push back on the <button> element, just use <span
tabindex="0" role="button"></span> and use your Javascript to make it
act like a button.


On 8/5/20, Alan Zaitchik < <EMAIL REMOVED> > wrote:
> I need to put a button inside certain column headers of a table to support
> sorting the table onnthose columns. The trouble is that JAWS and NVDA and
> VoiceOver all read out the text of the sort button when they read out the
> rest of the column header— for every blasted data cell in the column, as one
> navigates across a row ! It's unbearably verbose. I want to hear the button
> text when moving into the header cell itself, which is why I cannot just
> hide it from screen readers, but not across dats cells.
> I've tried aria labeling but it's gives the same results as button text.
> Aria-described by sort of worked with VO but not with JAWS or NVDA.
> I really don't want to write focus event handlers to detect focus location
> and toggle what's read out by screen readers and what's not.
> Anyone out there with a brilliant suggestion?
> Thx!
> A
> > > > >


--
Work hard. Have fun. Make history.