WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: sortable table/grid

for

From: Birkir R. Gunnarsson
Date: Apr 21, 2020 8:54PM

I helped write the Deque University one, a long time ago.
The accessibility principles are simple:
Start with a good data table with column and row header cells all defined.
Wrap sortable column header text in a <button> element, attach the
sorting Javascript to those button elements (those are easy to find).
The <button> element must wrap the text but be inside the <th>
element.
Use aria-sort on the <th> cells that are actively used for the sort
(aria-sort="ascending" or "descending" based on the sort order of the
column content).
You can use aria-sort on as many columns as you like, there is a
recommendation that a table should only be sorted by one column, but
it's not normative.

If the filtering component is separate from the table, use a group of
toggle buttons (buttons with an aria-pressed attribute).
If you filter the table by a text input it gets trickier, but not from
an accessibility perspective.
Our online banking pages are full of the stuff, but there is no public
page that is accessible for non-clients.

Cheers
-B

On 4/21/20, Angela French < <EMAIL REMOVED> > wrote:
> I did find this one; thank you. I'm thinking I may need to change my
> approach and just go with an Excel file as I realize on sortable columns
> that you can't sort by more than one column. I think what I'm looking for
> is filtering and sorting capabilities in the same data set.
>
>