E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 12 (In chronological order)

From: Angela French
Date: Tue, Apr 21 2020 10:57AM
Subject: sortable table/grid
No previous message | Next message →

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

From: Andrews, David B (DEED)
Date: Tue, Apr 21 2020 11:14AM
Subject: Re: sortable table/grid
← Previous message | Next message →

Try this one...

https://cvstats.net/

From: Angela French
Date: Tue, Apr 21 2020 11:16AM
Subject: Re: sortable table/grid
← Previous message | Next message →

Thank you. How do I use the keyboard to get into the table to sort the columns? Tabbing isn't working.

From: Andrews, David B (DEED)
Date: Tue, Apr 21 2020 11:19AM
Subject: Re: sortable table/grid
← Previous message | Next message →

I think I arrowed to the table, then hit tab on the header of the column I wanted to sort.

Dave

From: Lynch, Sarah
Date: Tue, Apr 21 2020 12:20PM
Subject: Re: sortable table/grid
← Previous message | Next message →

Hi Angela!

I really like Deque's example of a sortable table:
https://dequeuniversity.com/library/aria/table-sortable

Best,
Sarah
_____
Sarah Lynch (she/her/hers)
Accessibility Engineer
Yale University, Information Technology Services
25 Science Park, 527V | 203-432-2041
accessibility.yale.edu

From: Jeremy Echols
Date: Tue, Apr 21 2020 12:40PM
Subject: Re: sortable table/grid
← Previous message | Next message →

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

From: Brandon Keith Biggs
Date: Tue, Apr 21 2020 12:41PM
Subject: Re: sortable table/grid
← Previous message | Next message →

Hello,
Here is a great sortable grid:
Vaadin grid:
https://vaadin.com/components/vaadin-grid/html-examples/grid-sorting-demos
Thanks,

Brandon Keith Biggs <http://brandonkeithbiggs.com/>;


On Tue, Apr 21, 2020 at 11:20 AM Lynch, Sarah < = EMAIL ADDRESS REMOVED = > wrote:

> Hi Angela!
>
> I really like Deque's example of a sortable table:
> https://dequeuniversity.com/library/aria/table-sortable
>
> Best,
> Sarah
> _____
> Sarah Lynch (she/her/hers)
> Accessibility Engineer
> Yale University, Information Technology Services
> 25 Science Park, 527V | 203-432-2041
> accessibility.yale.edu
>
>

From: Angela French
Date: Tue, Apr 21 2020 12:46PM
Subject: Re: sortable table/grid
← Previous message | Next message →

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.

From: Larry C. Lyons
Date: Tue, Apr 21 2020 1:35PM
Subject: Re: sortable table/grid (Angela French)
← Previous message | Next message →

You may want to check out the Assets.cms.gov implementation of Datatables.
It's pretty much 508 compliant.
https://assets.cms.gov/resources/framework/3.4.1/Pages/#datatables


On Tue, 21 Apr 2020 at 14:04, < = EMAIL ADDRESS REMOVED = > wrote:

>
> ---------- Forwarded message ----------
> From: Angela French < = EMAIL ADDRESS REMOVED = >
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Cc:
> Bcc:
> Date: Tue, 21 Apr 2020 16:57:33 +0000
> 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
>
>
--
Larry C. Lyons
email: = EMAIL ADDRESS REMOVED =
web: http://www.lyonsmorris.com/lyons
LinkedIn: https://www.linkedin.com/in/larryclyons
<http://www.linkedin.com/in/larryclyons>;
Mobile: (703) 888-7435

From: Angela French
Date: Tue, Apr 21 2020 1:44PM
Subject: Re: sortable table/grid (Angela French)
← Previous message | Next message →

Awesome! There is an example there of one that filters AND sorts. Thanks.

From: Birkir R. Gunnarsson
Date: Tue, Apr 21 2020 8:54PM
Subject: Re: sortable table/grid
← Previous message | Next message →

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 ADDRESS 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.
>
>

From: Murphy, Sean
Date: Tue, Apr 28 2020 12:23AM
Subject: Re: sortable table/grid
← Previous message | No next message

All,

I have just discovered a very interesting fact in relation to nav element. In an old Webaim article https://webaim.org/blog/future-web-accessibility-html5-semantic-tags/ : https://webaim.org/blog/future-web-accessibility-html5-semantic-tags/. The below text has been extracted from the article (note this is a 2012 article):

--- beginning of extract ----

There is significant overlap between the semantic meaning of many of the new HTML5 semantic elements and some of the document structure and landmark roles from WAI-ARIA. The HTML5 spec contains a section on ARIA dealing with how the different roles can be applied to HTML5 elements.

In some cases, HTML5 requires user agents to automatically use specific ARIA roles on certain elements, without the author having to specifically include them, and in fact even if the author explicitly says to use some other role. For example, the HTML5 <nav> element must always have the ARIA navigation role, with no exceptions. So <nav> (with no ARIA role specified), <nav role="navigation"> and <nav role="main"> will be all handled by web browsers and assistive technology as if they were each <nav role="navigation">.

-- end of extract ---

I have just tested this and the above statement is not true any more. Using the latest firefox and chrome with NVDA and Jaws. When I used <nav role="button"> the role changed to a button. The formal html5 specifications show the following:

' Contexts in which this element can be used: Where flow content is expected.
' Content model: Flow content, but with no main element descendants.
' Tag omission in text/html: Neither tag is omissible
' Content attributes: Global attributes
' Allowed ARIA role attribute values: navigation role (default - do not set).
' Allowed ARIA state and property attributes: Global aria-* attributes
Any aria-* attributes applicable to the default role.

The above specs don't indicate clearly if any other roles can be set. The absence of other ARIA roles, does this mean no other roles should be set? If my assumption is correct, does this mean the browsers are not correctly implementing the specs?

Sean