Tables versus Grids
Will Ringland <[email protected]> Wed, 24 Jun 2020 15:17:14 +0000
| Newsgroups | gmane.org.w3c.accessibility.general |
|---|---|
| Message-ID | <SN6PR17MB2575E1F8767DE5D1F1523C07AC950@SN6PR17MB2575.namprd17.prod.outlook.com> |
--_000_SN6PR17MB2575E1F8767DE5D1F1523C07AC950SN6PR17MB2575namp_
Content-Type: text/plain; charset="iso-8859-1"
Content-Transfer-Encoding: quoted-printable
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 t=
abular 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=3Dgrid) instead of a table t=
o display tabular data?
Additional information:
The currently-used grid semantics align with this spec in the ARIA authorin=
g guidelines and displays read-only data.
Table specs: https://www.w3.org/TR/wai-aria-1.1/#table
Grid specs: 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" requireme=
nt is to NOT use tables when cell elements are interactive.
H51 link: https://www.w3.org/WAI/WCAG21/Techniques/html/H51.html
Will Ringland
All Epic Accessibility
Accessible design is Epic design.
He/Him
--_000_SN6PR17MB2575E1F8767DE5D1F1523C07AC950SN6PR17MB2575namp_
Content-Type: text/html; charset="iso-8859-1"
Content-Transfer-Encoding: quoted-printable
<html xmlns:v=3D"urn:schemas-microsoft-com:vml" xmlns:o=3D"urn:schemas-micr=
osoft-com:office:office" xmlns:w=3D"urn:schemas-microsoft-com:office:word" =
xmlns:dt=3D"uuid:C2F41010-65B3-11d1-A29F-00AA00C14882" xmlns:m=3D"http://sc=
hemas.microsoft.com/office/2004/12/omml" xmlns=3D"http://www.w3.org/TR/REC-=
html40">
<head>
<meta http-equiv=3D"Content-Type" content=3D"text/html; charset=3Diso-8859-=
1">
<meta name=3D"Generator" content=3D"Microsoft Word 15 (filtered medium)">
<style><!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:"Calibri Light";
panose-1:2 15 3 2 2 2 4 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:"Franklin Gothic Book";
panose-1:2 11 5 3 2 1 2 2 2 4;}
@font-face
{font-family:"Arial Black";
panose-1:2 11 10 4 2 1 2 2 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri",sans-serif;}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:#0563C1;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:#954F72;
text-decoration:underline;}
p.MsoPlainText, li.MsoPlainText, div.MsoPlainText
{mso-style-priority:99;
mso-style-link:"Plain Text Char";
margin:0in;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri",sans-serif;}
span.EmailStyle17
{mso-style-type:personal-compose;
font-family:"Franklin Gothic Book",sans-serif;
color:windowtext;
font-weight:normal;
font-style:normal;
text-decoration:none none;}
span.PlainTextChar
{mso-style-name:"Plain Text Char";
mso-style-priority:99;
mso-style-link:"Plain Text";
font-family:"Calibri",sans-serif;}
..MsoChpDefault
{mso-style-type:export-only;
font-family:"Calibri",sans-serif;}
@page WordSection1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.WordSection1
{page:WordSection1;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext=3D"edit" spidmax=3D"1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext=3D"edit">
<o:idmap v:ext=3D"edit" data=3D"1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang=3D"EN-US" link=3D"#0563C1" vlink=3D"#954F72">
<div class=3D"WordSection1">
<p class=3D"MsoNormal"><span style=3D"font-size:10.0pt;font-family:"Fr=
anklin Gothic Book",sans-serif">Hi folks,<o:p></o:p></span></p>
<p class=3D"MsoNormal"><span style=3D"font-size:10.0pt;font-family:"Fr=
anklin Gothic Book",sans-serif"><o:p> </o:p></span></p>
<p class=3D"MsoPlainText">A customer recently reported usage of a CSS Grid =
as a violation of WCAG 1.3.1: Info and Relationships. The grid displa=
ys audit trail information for who accessed a record, when, and what they v=
iewed. It is tabular in nature. Their
assertion is that the “grid” role is inappropriate for /read-o=
nly tabular data/ and only a semantic table is appropriate.<o:p></o:p></p>
<p class=3D"MsoPlainText"><o:p> </o:p></p>
<p class=3D"MsoPlainText">My question for the list:<o:p></o:p></p>
<p class=3D"MsoPlainText">Is it a violation of 1.3.1 to use a grid (role=3D=
grid) instead of a table to display tabular data?<o:p></o:p></p>
<p class=3D"MsoPlainText"><o:p> </o:p></p>
<p class=3D"MsoPlainText">Additional information:<o:p></o:p></p>
<p class=3D"MsoPlainText">The currently-used grid semantics align with this=
spec in the ARIA authoring guidelines and displays read-only data.<o:p></o=
:p></p>
<p class=3D"MsoPlainText">Table specs: <a href=3D"https://www.w3.org/TR/wai=
-aria-1.1/#table">
https://www.w3.org/TR/wai-aria-1.1/#table</a><o:p></o:p></p>
<p class=3D"MsoPlainText">Grid specs: <a href=3D"https://www.w3.org/TR/wai-=
aria-1.1/#grid">
https://www.w3.org/TR/wai-aria-1.1/#grid</a><o:p></o:p></p>
<p class=3D"MsoPlainText"><o:p> </o:p></p>
<p class=3D"MsoPlainText">Personal speculation on my part:<o:p></o:p></p>
<p class=3D"MsoPlainText">This usage fails for things like technique H51, l=
ink 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?&n=
bsp; 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” r=
equirement is to NOT use tables when cell elements are interactive.
<o:p></o:p></p>
<p class=3D"MsoPlainText"><o:p> </o:p></p>
<p class=3D"MsoPlainText">H51 link: <a href=3D"https://www.w3.org/WAI/WCAG2=
1/Techniques/html/H51.html">
https://www.w3.org/WAI/WCAG21/Techniques/html/H51.html</a><o:p></o:p></p>
<p class=3D"MsoNormal"><span style=3D"font-size:10.0pt;font-family:"Fr=
anklin Gothic Book",sans-serif"><o:p> </o:p></span></p>
<p class=3D"MsoNormal"><span style=3D"font-family:"Franklin Gothic Boo=
k",sans-serif;color:black">Will Ringland<o:p></o:p></span></p>
<p class=3D"MsoNormal"><span style=3D"font-size:10.0pt;font-family:"Fr=
anklin Gothic Book",sans-serif;color:black">All Epic Accessibility<o:p=
></o:p></span></p>
<p class=3D"MsoNormal"><span style=3D"font-size:10.0pt;font-family:"Fr=
anklin Gothic Book",sans-serif">Accessible<span style=3D"color:#262626=
"> design is</span></span><span style=3D"font-size:10.0pt;font-family:"=
;Calibri Light",sans-serif;color:#262626">
</span><i><span style=3D"font-size:9.0pt;font-family:"Arial Black"=
;,sans-serif;color:#CC0000">Epic</span></i><span style=3D"font-size:10.0pt;=
font-family:"Calibri Light",sans-serif;color:#262626">
</span><span style=3D"font-size:10.0pt;font-family:"Franklin Gothic Bo=
ok",sans-serif;color:#262626">design.</span><span style=3D"font-size:1=
0.0pt;font-family:"Calibri Light",sans-serif;color:#262626"><o:p>=
</o:p></span></p>
<p class=3D"MsoNormal"><i><span style=3D"font-size:10.0pt;font-family:"=
;Franklin Gothic Book",sans-serif">He/Him<o:p></o:p></span></i></p>
<p class=3D"MsoNormal"><span style=3D"font-size:10.0pt;font-family:"Fr=
anklin Gothic Book",sans-serif"><o:p> </o:p></span></p>
</div>
</body>
</html>
--_000_SN6PR17MB2575E1F8767DE5D1F1523C07AC950SN6PR17MB2575namp_--