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.
>
> -----Original Message-----
> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
> Jeremy Echols
> Sent: Tuesday, April 21, 2020 11:40 AM
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] sortable table/grid
>
> I'm not seeing the columns sort in descending order. Is there an updated
> version of this? We've implemented our own, and while I believe it to be
> reasonably accessible (especially compared to the big libraries we've
> found), it's something we'd rather not "own".
>
> For what it's worth, this is what I ended up building:
> - JavaScript: https://pages.uoregon.edu/jechols/sortabletable.js
> - Demo (ignore the navigation / links that precede the table - this was
> scraped from a production app):
> https://pages.uoregon.edu/jechols/titles.htm
>
> -----Original Message-----
> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
> Lynch, Sarah
> Sent: Tuesday, April 21, 2020 11:21
> To: Angela French < <EMAIL REMOVED> >; WebAIM Discussion List
> < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] sortable table/grid
>
> Hi Angela!
>
> I really like Deque's example of a sortable table:
> https://urldefense.com/v3/__https://dequeuniversity.com/library/aria/table-sortable__;!!C5qS4YX3!SWYzAU0S9XtIzflYkFI-JxfI6Nv7hIvrtJ-YfZQNUxizE4RsjU3fvKtuiOe8vPLDkw$
>
>
> Best,
> Sarah
> _____
> Sarah Lynch (she/her/hers)
> Accessibility Engineer
> Yale University, Information Technology Services
> 25 Science Park, 527V | 203-432-2041
> accessibility.yale.edu
>
> -----Original Message-----
> From: Angela French < <EMAIL REMOVED> >
> Sent: Tuesday, April 21, 2020 12:58 PM
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: [WebAIM] sortable table/grid
>
> Hello,
> I am looking to implement an html table/grid that will allow some columns to
> be sorted by the column header. I have found quite a few html/css/js
> examples out on the web, but they don't appear to be accessible as I can't
> interact with them via keyboard. I did a search on the WebAIM archive but
> came up with old examples that apparently had issues.
>
> Is anyone able to point me to some current accessible solutions?
>
> Thank you!
>
> I will be working from home through April
>
>
> Angela French
> ctcLink Digital Asset Manager
>
>
> > > https://urldefense.com/v3/__http://list.webaim.org/__;!!C5qS4YX3!SWYzAU0S9XtIzflYkFI-JxfI6Nv7hIvrtJ-YfZQNUxizE4RsjU3fvKtuiOdYkk1tSA$
> List archives at
> https://urldefense.com/v3/__http://webaim.org/discussion/archives__;!!C5qS4YX3!SWYzAU0S9XtIzflYkFI-JxfI6Nv7hIvrtJ-YfZQNUxizE4RsjU3fvKtuiOf6wbz9Ag$
> > > > http://webaim.org/discussion/archives
> > > > > >


--
Work hard. Have fun. Make history.