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://www.w3.org/TR/wai-aria-1.1/#table<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>
Grid specs: https://www.w3.org/TR/wai-aria-1.1/#grid<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>

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://www.w3.org/WAI/WCAG21/Techniques/html/H51.html<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>

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>