W3C home > Mailing lists > Public > public-aria@w3.org > February 2016

RE: grids vs sortable tables

From: Bryan Garaventa <bryan.garaventa@ssbbartgroup.com>
Date: Mon, 8 Feb 2016 20:57:47 +0000
To: Steve Faulkner <faulkner.steve@gmail.com>, Fred Esch <fesch@us.ibm.com>
CC: Matt King <a11ythinker@gmail.com>, "Accessible Rich Internet Applications Working Group" <public-aria@w3.org>
Message-ID: <SN1PR0301MB198152FD8E8B9B61FCC2C1A798D50@SN1PR0301MB1981.namprd03.prod.outlook.com>
That’s true, that in a Grid the cells are meant to be interactive, in the sense that they are focusable and the user then needs to use the arrow keys to navigate between the cells of the Grid construct.

This doesn’t necessarily mean that they are editable however, just that they are meant to be focusable and interactive.

This is major overkill for a standard data table that includes sortable columns, because the table is not meant to be interactive like this. It is simply a static markup structure, and little scripting needs to be done to make something like this accessible.

If you use role=”grid” you are changing the paradigm of what is expected, and that is very confusing for AT users when misapplied on standard data tables.

From: Steve Faulkner [mailto:faulkner.steve@gmail.com]
Sent: Monday, February 08, 2016 12:41 PM
To: Fred Esch <fesch@us.ibm.com>
Cc: Bryan Garaventa <bryan.garaventa@ssbbartgroup.com>; Matt King <a11ythinker@gmail.com>; Accessible Rich Internet Applications Working Group <public-aria@w3.org>
Subject: Re: grids vs sortable tables

>I don't understand the split between a grid and >a table.

I believe the difference Is that grid contains editable cells a table does not. Using a role of grid may result in Screen readers providing a different navigation/interaction behaviour.

On Monday, 8 February 2016, Fred Esch <fesch@us.ibm.com<mailto:fesch@us.ibm.com>> wrote:

Bryan,

Why didn't you use the role of grid on the table? I don't understand the split between a grid and a table. If a table is static and a grid is editable - which side of the fence does that leave sortable tables on? The table side (data isn't changing, just the display changes) or grid side (it is interactive and the table apparently changes)? Originally, I brought this up because of the sortable/sorted attributes (which are going away) on table and th elements respectively. And I wonder whether the split between the two roles will be readily understood by developers.

Would button be a better role for the contents (span) of the sortable th than the suggested link role?

JAWS with Firefox and NVDA with Chrome will announce that the first column is sorted ascending. I don't hear columns with aria-sort and value of 'none' announced as being sortable. How does a user know that they can sort by the other columns?


Regards,

Fred Esch
Watson, IBM, W3C Accessibility

[IBM Watson]

Watson Release Management and Quality



[Inactive hide details for Bryan Garaventa ---02/05/2016 01:27:28 PM---Hi, I’ve attached a modified markup of your table, which]Bryan Garaventa ---02/05/2016 01:27:28 PM---Hi, I’ve attached a modified markup of your table, which shows where ARIA is needed to make this acc

From: Bryan Garaventa <bryan.garaventa@ssbbartgroup.com<javascript:_e(%7B%7D,'cvml','bryan.garaventa@ssbbartgroup.com');>>
To: Fred Esch/Arlington/IBM@IBMUS, Matt King <a11ythinker@gmail.com<javascript:_e(%7B%7D,'cvml','a11ythinker@gmail.com');>>
Cc: "'Accessible Rich Internet Applications Working Group'" <public-aria@w3.org<javascript:_e(%7B%7D,'cvml','public-aria@w3.org');>>
Date: 02/05/2016 01:27 PM
Subject: RE: grids vs sortable tables
________________________________



Hi,
I’ve attached a modified markup of your table, which shows where ARIA is needed to make this accessible.

There are several issues here, not just with the column header announcement using aria-sort, which is lacking, but also that the sortable active elements needed to invoke the sort action are not keyboard accessible nor do they have active element roles to be conveyed to ATs.

So I added not just aria-sort where needed but also role=”link” and tabindex where needed to be scripted in with requisite key events to make this work properly.




From: Fred Esch [mailto:fesch@us.ibm.com<javascript:_e(%7B%7D,'cvml','fesch@us.ibm.com');>]
Sent: Thursday, February 04, 2016 4:37 AM
To: Bryan Garaventa <bryan.garaventa@ssbbartgroup.com<javascript:_e(%7B%7D,'cvml','bryan.garaventa@ssbbartgroup.com');>>; Matt King <a11ythinker@gmail.com<javascript:_e(%7B%7D,'cvml','a11ythinker@gmail.com');>>
Cc: 'Accessible Rich Internet Applications Working Group' <public-aria@w3.org<javascript:_e(%7B%7D,'cvml','public-aria@w3.org');>>
Subject: RE: grids vs sortable tables

Bryan,

I found a working ng-table example<http://ng-table.com/#/> online. I also am attaching a screen scraped table that may use some ng-table functionality, but differs from the pure ng-table example in that the data portion of the table is generated with ng-repeat. I cut down some class names, don't include the JavaScript or CSS files and wrapped the table in a plain HTML file so the table will render in a browser, but without CSS it is ugly and without JavaScript the sort isn't functional.

The working example should provide any ng-table specific info you need.
(See attached file: table.html)
Regards,

Fred Esch
Watson, IBM, W3C Accessibility

[IBM Watson]

Watson Release Management and Quality



[Inactive hide details for Bryan Garaventa ---02/03/2016 06:56:27 PM---If you could do that and send this through as a txt file]Bryan Garaventa ---02/03/2016 06:56:27 PM---If you could do that and send this through as a txt file that would help, knowing the structure is t

From: Bryan Garaventa <bryan.garaventa@ssbbartgroup.com<javascript:_e(%7B%7D,'cvml','bryan.garaventa@ssbbartgroup.com');>>
To: Fred Esch/Arlington/IBM@IBMUS
Cc: Matt King <a11ythinker@gmail.com<javascript:_e(%7B%7D,'cvml','a11ythinker@gmail.com');>>, "'W3C WAI Accessible Platform Architectures'" <public-apa@w3.org<javascript:_e(%7B%7D,'cvml','public-apa@w3.org');>>, "'Accessible Rich Internet Applications Working Group'" <public-aria@w3.org<javascript:_e(%7B%7D,'cvml','public-aria@w3.org');>>
Date: 02/03/2016 06:56 PM
Subject: RE: grids vs sortable tables
________________________________




If you could do that and send this through as a txt file that would help, knowing the structure is the best way to identify the most common potential issues.

From: Fred Esch [mailto:fesch@us.ibm.com<javascript:_e(%7B%7D,'cvml','fesch@us.ibm.com');>]
Sent: Wednesday, February 03, 2016 1:39 PM
To: Bryan Garaventa <bryan.garaventa@ssbbartgroup.com<javascript:_e(%7B%7D,'cvml','bryan.garaventa@ssbbartgroup.com');>>
Cc: Matt King <a11ythinker@gmail.com<javascript:_e(%7B%7D,'cvml','a11ythinker@gmail.com');>>; 'W3C WAI Accessible Platform Architectures' <public-apa@w3.org<javascript:_e(%7B%7D,'cvml','public-apa@w3.org');>>; 'Accessible Rich Internet Applications Working Group' <public-aria@w3.org<javascript:_e(%7B%7D,'cvml','public-aria@w3.org');>>
Subject: RE: grids vs sortable tables

Bryan,

I can't point to a live example. Most of the issues I run across are in products that are a few months from going out the door. The best I can do is screen scape the DOM.
Regards,

Fred Esch
Watson, IBM, W3C Accessibility

[IBM Watson]

Watson Release Management and Quality



[Inactive hide details for Bryan Garaventa ---02/03/2016 11:49:31 AM---Can you point to a live example of this? Thanks,]Bryan Garaventa ---02/03/2016 11:49:31 AM---Can you point to a live example of this? Thanks,

From: Bryan Garaventa <bryan.garaventa@ssbbartgroup.com<javascript:_e(%7B%7D,'cvml','bryan.garaventa@ssbbartgroup.com');>>
To: Fred Esch/Arlington/IBM@IBMUS
Cc: Matt King <a11ythinker@gmail.com<javascript:_e(%7B%7D,'cvml','a11ythinker@gmail.com');>>, "'W3C WAI Accessible Platform Architectures'" <public-apa@w3.org<javascript:_e(%7B%7D,'cvml','public-apa@w3.org');>>, "'Accessible Rich Internet Applications Working Group'" <public-aria@w3.org<javascript:_e(%7B%7D,'cvml','public-aria@w3.org');>>
Date: 02/03/2016 11:49 AM
Subject: RE: grids vs sortable tables
________________________________





Can you point to a live example of this?
Thanks,
Bryan

From: Fred Esch [mailto:fesch@us.ibm.com<javascript:_e(%7B%7D,'cvml','fesch@us.ibm.com');>]
Sent: Wednesday, February 03, 2016 5:57 AM
To: Bryan Garaventa <bryan.garaventa@ssbbartgroup.com<javascript:_e(%7B%7D,'cvml','bryan.garaventa@ssbbartgroup.com');>>
Cc: Matt King <a11ythinker@gmail.com<javascript:_e(%7B%7D,'cvml','a11ythinker@gmail.com');>>; 'W3C WAI Accessible Platform Architectures' <public-apa@w3.org<javascript:_e(%7B%7D,'cvml','public-apa@w3.org');>>; 'Accessible Rich Internet Applications Working Group' <public-aria@w3.org<javascript:_e(%7B%7D,'cvml','public-aria@w3.org');>>
Subject: RE: grids vs sortable tables

Bryan and Matt,

What all do you recommend for a structure for a sortable table. Is there an ideal example? If you were looking at fixing a widely used library and donating back the fix, what you want the widely used sortable table to look like? For instance, if you were looking at angularJS's ng-table what you want changed?
Regards,

Fred Esch
Watson, IBM, W3C Accessibility

[IBM Watson]

Watson Release Management and Quality



[Inactive hide details for Bryan Garaventa ---02/02/2016 12:57:22 PM---It should still be possible to do something like the foll]Bryan Garaventa ---02/02/2016 12:57:22 PM---It should still be possible to do something like the following. <table>

From: Bryan Garaventa <bryan.garaventa@ssbbartgroup.com<javascript:_e(%7B%7D,'cvml','bryan.garaventa@ssbbartgroup.com');>>
To: Fred Esch/Arlington/IBM@IBMUS, Matt King <a11ythinker@gmail.com<javascript:_e(%7B%7D,'cvml','a11ythinker@gmail.com');>>
Cc: "'W3C WAI Accessible Platform Architectures'" <public-apa@w3.org<javascript:_e(%7B%7D,'cvml','public-apa@w3.org');>>, "'Accessible Rich Internet Applications Working Group'" <public-aria@w3.org<javascript:_e(%7B%7D,'cvml','public-aria@w3.org');>>
Date: 02/02/2016 12:57 PM
Subject: RE: grids vs sortable tables
________________________________






It should still be possible to do something like the following.

<table>
<tr>
<th aria-sort="ascending">
<a href="#"> Name </a>
</th>
<th aria-sort="none">
<a href="#"> Email </a>
</th>
</tr>
<tr>
<td>
Twoflower
</td>
<td>
Inn-sewer-ants@discworld.com<javascript:_e(%7B%7D,'cvml','Inn-sewer-ants@discworld.com');>
</td>
</tr>
</table>

Or the same using its equivalent role=”table” on a simulated construct. This is documented in the ARIA 1.1 spec for use with both tables and grids.



From: Fred Esch [mailto:fesch@us.ibm.com<javascript:_e(%7B%7D,'cvml','fesch@us.ibm.com');>]
Sent: Tuesday, February 02, 2016 5:46 AM
To: Matt King <a11ythinker@gmail.com<javascript:_e(%7B%7D,'cvml','a11ythinker@gmail.com');>>
Cc: 'W3C WAI Accessible Platform Architectures' <public-apa@w3.org<javascript:_e(%7B%7D,'cvml','public-apa@w3.org');>>; 'Accessible Rich Internet Applications Working Group' <public-aria@w3.org<javascript:_e(%7B%7D,'cvml','public-aria@w3.org');>>
Subject: RE: grids vs sortable tables

Matt,

I assumed the table sortable attribute and the th sorted attributes were passed on to AT. I assumed that when a sorted state was announced, the user would know that you could sort on that column - using the mouse or enter key. I didn't know the HTML attributes were going away.

Deque's sortable table example<https://dequeuniversity.com/library/aria/tables/sf-sortable-grid> uses role of grid and aria-sort on the th elements aria-sort='none' when it is sortable but not sorted by that column. I would suggest making an W3C example for sortable tables since the current HTML spec can cause confusion between grids and tables.
Regards,

Fred Esch
Watson, IBM, W3C Accessibility

[IBM Watson]

Watson Release Management and Quality



[Inactive hide details for Matt King ---02/01/2016 02:49:12 PM---Fred,]Matt King ---02/01/2016 02:49:12 PM---Fred,

From: Matt King <a11ythinker@gmail.com<javascript:_e(%7B%7D,'cvml','a11ythinker@gmail.com');>>
To: Fred Esch/Arlington/IBM@IBMUS, "'Steve Faulkner'" <faulkner.steve@gmail.com<javascript:_e(%7B%7D,'cvml','faulkner.steve@gmail.com');>>
Cc: "'Accessible Rich Internet Applications Working Group'" <public-aria@w3.org<javascript:_e(%7B%7D,'cvml','public-aria@w3.org');>>, "'W3C WAI Accessible Platform Architectures'" <public-apa@w3.org<javascript:_e(%7B%7D,'cvml','public-apa@w3.org');>>
Date: 02/01/2016 02:49 PM
Subject: RE: grids vs sortable tables
________________________________







Fred,

Is it necessary to have a property on the table to tell the user that a particular TH inside that table contains an interactive element for sorting that column?

Matt

From: Fred Esch [mailto:fesch@us.ibm.com<javascript:_e(%7B%7D,'cvml','fesch@us.ibm.com');>]
Sent: Monday, February 1, 2016 9:57 AM
To: Steve Faulkner <faulkner.steve@gmail.com<javascript:_e(%7B%7D,'cvml','faulkner.steve@gmail.com');>>
Cc: Accessible Rich Internet Applications Working Group <public-aria@w3.org<javascript:_e(%7B%7D,'cvml','public-aria@w3.org');>>; W3C WAI Accessible Platform Architectures <public-apa@w3.org<javascript:_e(%7B%7D,'cvml','public-apa@w3.org');>>
Subject: Re: grids vs sortable tables

Steve,

There are sortable tables being used in the wild, for example angularJS's ng-table. How are developers supposed to tell AT users that a table is sortable and a column can be sorted if the sortable and sorted properties are removed?

Sortable tables are important for accessibility as they are often used as an accessible alternative to charts. Even when you can make a chart accessible, when you a huge number of data rows - you want a better way for an AT user to find the max/min values than walking all the data members. For instance, providing a sortable table will be more usable than having an accessible bar chart and forcing an AT user to walk 200 bars to find the top five bars. Personally, if I had to get the top five values from a huge bar chart I would prefer a sortable table as well.
Regards,

Fred Esch
Watson, IBM, W3C Accessibility

[IBM Watson]

Watson Release Management and Quality



[Inactive hide details for Steve Faulkner ---01/29/2016 04:58:04 PM---On 29 January 2016 at 20:07, Fred Esch <fesch@us.ibm.com>]Steve Faulkner ---01/29/2016 04:58:04 PM---On 29 January 2016 at 20:07, Fred Esch <fesch@us.ibm.com<javascript:_e(%7B%7D,'cvml','fesch@us.ibm.com');>> wrote: > A table element can have a *'sort

From: Steve Faulkner <faulkner.steve@gmail.com<javascript:_e(%7B%7D,'cvml','faulkner.steve@gmail.com');>>
To: Fred Esch/Arlington/IBM@IBMUS
Cc: Matt King <a11ythinker@gmail.com<javascript:_e(%7B%7D,'cvml','a11ythinker@gmail.com');>>, Accessible Rich Internet Applications Working Group <public-aria@w3.org<javascript:_e(%7B%7D,'cvml','public-aria@w3.org');>>
Date: 01/29/2016 04:58 PM
Subject: Re: grids vs sortable tables
________________________________









On 29 January 2016 at 20:07, Fred Esch <fesch@us.ibm.com<javascript:_e(%7B%7D,'cvml','fesch@us.ibm.com');>> wrote:
A table element can have a 'sortable' attribute which designates you can sort on columns.


note the table sorting algorithm and associated attribute have been removed from the whatwg HTML spec due to a lack of implementer interest and suggest the same fate will befall this feature in W3C HTML, sooner rather than later.

--

Regards

SteveF
Current Standards Work @W3C<http://www.paciellogroup.com/blog/2015/03/current-standards-work-at-w3c/>(See attached file: table.html)



--
--

Regards

SteveF
Current Standards Work @W3C<http://www.paciellogroup.com/blog/2015/03/current-standards-work-at-w3c/>

image001.png
(image/png attachment: image001.png)

image002.gif
(image/gif attachment: image002.gif)

Received on Monday, 8 February 2016 20:58:25 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 18:58:20 UTC