RE: grids vs sortable tables

Fred, I was hoping the updated grid text we reviewed a couple weeks ago makes the distinction clear. 

 

A grid is a composite widget. It manages focus. In the desktop world, that means it is a single tab stop. Arrow keys move focus inside of it. It may contain anything. It may or may not look like a table, but logically, it has 2 dimensions. It may nonetheless be a single column or a single row in size.

 

A table is a structure. If it contains interactive widgets, each widget will have its own tab stop. In addition, table implies tabular information, meaning there should be headers someplace.

 

To a screen reader user in reading mode, both look and feel the same although some screen readers may expose the grid role. Not all do. VoiceOver exposes a grid as a table. Because of the way VoiceOver works, this is probably fine.

 

They are most different when in focus/forms/interaction mode.

 

Thus, if making a sortable table, the widgets, e.g., buttons, that perform sorts will be in the tab sequence.

 

It would be valid, but kind of a cheap cop out, to make a grid of static, tabular data where the only focusable cells are the sort controls. If there are a lot of sort headers, it would be better than a mound of tab stops, but it would make screen reader users do more mode switching thean if you made the entire grid navigable.

 

When presenting tabular data, one reason to use grid instead of table would be if the dataset is large and you don’t want it all in the DOM. The page can scroll and load more data as the user moves focus down columns or across rows.

 

You can make a table where it is possible to mark rows as selected, e.g., with a checkbox in a select column, delete rows, edit content with input elements, etc. But, if you do all that in a grid, the interaction model is much nicer for keyboard-only users.

 

One particularly confusing aspect of grid has been the notion of “editability.” With ARIA 1.1, I tried to clear this up. A grid is a grid. There are not 2 kinds. Adding readonly to the grid itself is just an authoring convenience. It does not change the nature of the grid itself. It just means that if a cell contains something that was previously mutable, said elements are no longer mutable. In a context where none of the elements in the grid were editable, e.g., links and buttons, there is no reason to use aria-readonly at all. I think there is still room for improvement on this front in ARIA 2.0. But, hopefully with this much clarification, we will be able to get more consistent support for grid interaction from screen readers.

 

Matt

 

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

 

Bryan,

I get the general gist. Having interactive th elements doesn't make a table a grid. Which types of interactivity inside a cell would make a table a grid? And which types of interactivity does not? If your table contained links would that qualify as a grid? A link is focusable and interactive, but I wouldn't think links inside a table would make it a grid. 

Perhaps there are qualifiers I am not aware of that make something a grid. Perhaps the ability to delete or add rows. Is there a list of conditions for a grid?


Regards, 

Fred Esch 
Watson, IBM, W3C Accessibility




Watson Release Management and Quality 



Bryan Garaventa ---02/08/2016 03:57:58 PM---That’s true, that in a Grid the cells are meant to be interactive, in the sense that they are focusa

From: Bryan Garaventa <bryan.garaventa@ssbbartgroup.com <mailto:bryan.garaventa@ssbbartgroup.com> >
To: Steve Faulkner <faulkner.steve@gmail.com <mailto:faulkner.steve@gmail.com> >, Fred Esch/Arlington/IBM@IBMUS
Cc: Matt King <a11ythinker@gmail.com <mailto:a11ythinker@gmail.com> >, "Accessible Rich Internet Applications Working Group" <public-aria@w3.org <mailto:public-aria@w3.org> >
Date: 02/08/2016 03:57 PM
Subject: RE: grids vs sortable tables

  _____  




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 <mailto:fesch@us.ibm.com> >
Cc: Bryan Garaventa <bryan.garaventa@ssbbartgroup.com <mailto:bryan.garaventa@ssbbartgroup.com> >; Matt King <a11ythinker@gmail.com <mailto:a11ythinker@gmail.com> >; Accessible Rich Internet Applications Working Group <public-aria@w3.org <mailto: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 < <mailto:fesch@us.ibm.com> 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




Watson Release Management and Quality 



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

Bryan,

I found a working <http://ng-table.com/#/>  ng-table example 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




Watson Release Management and Quality 



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 < <javascript:_e(%7B%7D,'cvml','bryan.garaventa@ssbbartgroup.com');> bryan.garaventa@ssbbartgroup.com>
To: Fred Esch/Arlington/IBM@IBMUS
Cc: Matt King < <javascript:_e(%7B%7D,'cvml','a11ythinker@gmail.com');> a11ythinker@gmail.com>, "'W3C WAI Accessible Platform Architectures'" < <javascript:_e(%7B%7D,'cvml','public-apa@w3.org');> public-apa@w3.org>, "'Accessible Rich Internet Applications Working Group'" < <javascript:_e(%7B%7D,'cvml','public-aria@w3.org');> 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 [ <javascript:_e(%7B%7D,'cvml','fesch@us.ibm.com');> mailto:fesch@us.ibm.com] 
Sent: Wednesday, February 03, 2016 1:39 PM
To: Bryan Garaventa < <javascript:_e(%7B%7D,'cvml','bryan.garaventa@ssbbartgroup.com');> bryan.garaventa@ssbbartgroup.com>
Cc: Matt King < <javascript:_e(%7B%7D,'cvml','a11ythinker@gmail.com');> a11ythinker@gmail.com>; 'W3C WAI Accessible Platform Architectures' < <javascript:_e(%7B%7D,'cvml','public-apa@w3.org');> public-apa@w3.org>; 'Accessible Rich Internet Applications Working Group' < <javascript:_e(%7B%7D,'cvml','public-aria@w3.org');> 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




Watson Release Management and Quality 



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

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




Watson Release Management and Quality 



Bryan Garaventa ---02/02/2016 12:57:22 PM---It should still be possible to do something like the following. <table>

From: Bryan Garaventa < <javascript:_e(%7B%7D,'cvml','bryan.garaventa@ssbbartgroup.com');> bryan.garaventa@ssbbartgroup.com>
To: Fred Esch/Arlington/IBM@IBMUS, Matt King < <javascript:_e(%7B%7D,'cvml','a11ythinker@gmail.com');> a11ythinker@gmail.com>
Cc: "'W3C WAI Accessible Platform Architectures'" < <javascript:_e(%7B%7D,'cvml','public-apa@w3.org');> public-apa@w3.org>, "'Accessible Rich Internet Applications Working Group'" < <javascript:_e(%7B%7D,'cvml','public-aria@w3.org');> 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>
 <javascript:_e(%7B%7D,'cvml','Inn-sewer-ants@discworld.com');> 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 [ <javascript:_e(%7B%7D,'cvml','fesch@us.ibm.com');> mailto:fesch@us.ibm.com] 
Sent: Tuesday, February 02, 2016 5:46 AM
To: Matt King < <javascript:_e(%7B%7D,'cvml','a11ythinker@gmail.com');> a11ythinker@gmail.com>
Cc: 'W3C WAI Accessible Platform Architectures' < <javascript:_e(%7B%7D,'cvml','public-apa@w3.org');> public-apa@w3.org>; 'Accessible Rich Internet Applications Working Group' < <javascript:_e(%7B%7D,'cvml','public-aria@w3.org');> 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. 

 <https://dequeuniversity.com/library/aria/tables/sf-sortable-grid> Deque's sortable table example 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




Watson Release Management and Quality 



Matt King ---02/01/2016 02:49:12 PM---Fred,

From: Matt King < <javascript:_e(%7B%7D,'cvml','a11ythinker@gmail.com');> a11ythinker@gmail.com>
To: Fred Esch/Arlington/IBM@IBMUS, "'Steve Faulkner'" < <javascript:_e(%7B%7D,'cvml','faulkner.steve@gmail.com');> faulkner.steve@gmail.com>
Cc: "'Accessible Rich Internet Applications Working Group'" < <javascript:_e(%7B%7D,'cvml','public-aria@w3.org');> public-aria@w3.org>, "'W3C WAI Accessible Platform Architectures'" < <javascript:_e(%7B%7D,'cvml','public-apa@w3.org');> 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 [ <javascript:_e(%7B%7D,'cvml','fesch@us.ibm.com');> mailto:fesch@us.ibm.com] 
Sent: Monday, February 1, 2016 9:57 AM
To: Steve Faulkner < <javascript:_e(%7B%7D,'cvml','faulkner.steve@gmail.com');> faulkner.steve@gmail.com>
Cc: Accessible Rich Internet Applications Working Group < <javascript:_e(%7B%7D,'cvml','public-aria@w3.org');> public-aria@w3.org>; W3C WAI Accessible Platform Architectures < <javascript:_e(%7B%7D,'cvml','public-apa@w3.org');> 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




Watson Release Management and Quality 



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

From: Steve Faulkner < <javascript:_e(%7B%7D,'cvml','faulkner.steve@gmail.com');> faulkner.steve@gmail.com>
To: Fred Esch/Arlington/IBM@IBMUS
Cc: Matt King < <javascript:_e(%7B%7D,'cvml','a11ythinker@gmail.com');> a11ythinker@gmail.com>, Accessible Rich Internet Applications Working Group < <javascript:_e(%7B%7D,'cvml','public-aria@w3.org');> 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 < <javascript:_e(%7B%7D,'cvml','fesch@us.ibm.com');> 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
 <http://www.paciellogroup.com/blog/2015/03/current-standards-work-at-w3c/> Current Standards Work @W3C(See attached file: table.html)



-- 
--

Regards

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