RE: Tables versus Grids

wringlan@epic.com wrote:

 

>A customer recently reported usage of a CSS Grid as a violation of WCAG 1.3.1: Info and Relationships.  

>The grid displays audit trail information for who accessed a record, when, and what they viewed.

>It is tabular in nature.

 

Note that CSS grid and ARIA role grid are 2 very different things. If you were to position data in a visually tabular manner with CSS grid and did not provide any semantic structure with either HTML table or ARIA grid, it would be a WCAG violation.

 

>Their assertion is that the “grid” role is inappropriate for /read-only tabular data/ and only a semantic table is appropriate.

 

The grid role provides the same table semantics as the table role. The difference is that the grid role should only be used if the table is interactive, meaning that it can be navigated with the arrow keys. So, the grid role and the table role are not interchangeable. Using grid obligates you to implement the ARIA grid pattern:

https://www.w3.org/TR/wai-aria-practices/#grid

 

>Is it a violation of 1.3.1 to use a grid (role=grid) instead of a table to display tabular data?

 

Definitely not, but it would be a violation of other criteria if you did so without implementing the ARIA grid design pattern.

 

And, as others have mentioned, for static data, there is no point in implementing the grid pattern -- total overkill.

 

>The currently-used grid semantics align with this spec in the ARIA authoring guidelines and displays read-only data.

 

Making the semantics align is not sufficient. You have to meet all requirements, which includes managing focus for the grid. How to do that is described in the APG:

https://www.w3.org/TR/wai-aria-practices/#grid

 

Hth,

Matt King

 

From: Pyatt, Elizabeth J <ejp10@psu.edu> 
Sent: Wednesday, June 24, 2020 9:50 AM
To: Will Ringland <wringlan@epic.com>
Cc: w3c-wai-ig <w3c-wai-ig@w3.org>
Subject: Re: Tables versus Grids

 

My take is that if you can use an HTML <table> to present tabular data, you should do so. I have seen screen readers encounter issues when alternate ARIA style presentations are used in lieu of semantic tags/attributes. The use of a table with appropriate header cells tends to be the most backward compatible option.  

 

I know this is a conservative opinion, but a screen reader and other AT can be fairly rigid in how it interprets objects, especially older versions (which a lot of users hold onto due to upgrade costs). The best guarantee that any AT will interpret a visual table correctly is if the semantic object is a table.

 

FWIW - if a table has only one row of data, a list with CSS can also be used to present an accessible grid-like layout. There are also good responsive design options to help with alternative layouts at narrower portal sizes. Lists can be well interpreted by screen readers.

 

My two cents.

 

Elizabeth





On Jun 24, 2020, at 11:17 AM, Will Ringland <wringlan@epic.com <mailto:wringlan@epic.com> > wrote:

 

Hi folks,

 

A customer recently reported usage of a CSS Grid as a violation of WCAG 1.3.1: Info and Relationships.  The grid displays audit trail information for who accessed a record, when, and what they viewed. It is tabular in nature.  Their assertion is that the “grid” role is inappropriate for /read-only tabular data/ and only a semantic table is appropriate.

 

My question for the list:

Is it a violation of 1.3.1 to use a grid (role=grid) instead of a table to display tabular data?

 

Additional information:

The currently-used grid semantics align with this spec in the ARIA authoring guidelines and displays read-only data.

Table specs:  <https://nam01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.w3.org%2FTR%2Fwai-aria-1.1%2F%23table&data=02%7C01%7Cejp10%40psu.edu%7Cc85f35956c984543b53608d81852c5f7%7C7cf48d453ddb4389a9c1c115526eb52e%7C0%7C1%7C637286091075022139&sdata=%2Bx9sG38k8rfok6lyy%2B%2BMF1oIpZcvo6xY96O2f%2FFoc8w%3D&reserved=0> https://www.w3.org/TR/wai-aria-1.1/#table

Grid specs:  <https://nam01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.w3.org%2FTR%2Fwai-aria-1.1%2F%23grid&data=02%7C01%7Cejp10%40psu.edu%7Cc85f35956c984543b53608d81852c5f7%7C7cf48d453ddb4389a9c1c115526eb52e%7C0%7C1%7C637286091075032135&sdata=zA6M0ECFUmCNooWNb5P2q%2BtTxIHIUx8hrjzUCRc9awM%3D&reserved=0> https://www.w3.org/TR/wai-aria-1.1/#grid

 

Personal speculation on my part:

This usage fails for things like technique H51, link below, but there’s no similar technique for a grid element. Grids, being newer, may just not have been used enough to warrant a technique?  However, according to the specs for Tables and Grids, either can be used to display read-only data but it’s not a hard requirement. In those specs, it seems the only “hard” requirement is to NOT use tables when cell elements are interactive.

 

H51 link:  <https://nam01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.w3.org%2FWAI%2FWCAG21%2FTechniques%2Fhtml%2FH51.html&data=02%7C01%7Cejp10%40psu.edu%7Cc85f35956c984543b53608d81852c5f7%7C7cf48d453ddb4389a9c1c115526eb52e%7C0%7C1%7C637286091075042129&sdata=Hl18tNlqNPkqq%2FYFlTV2d8ohUvOZtoT66Bbz7mTvtTo%3D&reserved=0> https://www.w3.org/WAI/WCAG21/Techniques/html/H51.html

 

Will Ringland

All Epic Accessibility

Accessible design is Epic design.

He/Him

 

=-=-=-=-=-=-=-=-=-=-=-=-=
Elizabeth J. Pyatt, Ph.D. 
Accessibility IT Consultant

ejp10@psu.edu <mailto:ejp10@psu.edu> 


The 300 Building, 112
304 West College Avenue
University Park, PA 16802
accessibility.psu.edu <http://accessibility.psu.edu>