- From: Pyatt, Elizabeth J <ejp10@psu.edu>
- Date: Wed, 7 Apr 2021 16:31:00 +0000
- To: "Bristow, Alan" <Alan.Bristow@elections.ca>
- CC: Louise Lister <Louise.Lister@iop.org>, Jonathan Cohn <jonathan.cohn@cambiumassessment.com>, w3c-wai-ig <w3c-wai-ig@w3.org>
- Message-ID: <D7622EF7-701D-4CE9-8AC8-F3411732D0A9@psu.edu>
I second this comment. I like visible headers/captions because
1. I think a little cognitive scaffolding benefits all users. The information may be intuitive for most users, but you never know. Someone zooming in may also find visible headers useful.
2. Sighted editors know they are there, which is important for updates. I feel visually hidden content "just for screen readers" is prone to be skipped in updates. I only like to do that for things like image ALT text or very specific presentation needs.
A lot of discussion for one tiny table ;)
Elizabeth
On Apr 7, 2021, at 11:44 AM, Bristow, Alan <Alan.Bristow@elections.ca<mailto:Alan.Bristow@elections.ca>> wrote:
That seems perfectly good markup to me.
I would not omit the THs Role and Name. If visually you/your client really didn't want them then they could be visually hidden but retained for screen readers.
Seeking to reduce cognitive load is good and sometime achieving it is a balance, too much "exposition" is bad, as it too little. To me, keeping those THs visible seems completely fine.
Regards,
Alan
________________________________
From: Louise Lister <Louise.Lister@iop.org<mailto:Louise.Lister@iop.org>>
Sent: Wednesday, April 7, 2021 11:34 AM
To: Jonathan Cohn; Bristow, Alan; Pyatt, Elizabeth J
Cc: w3c-wai-ig
Subject: RE: Layout or data table?
Thanks for all your thoughts on this. So basically you’d end up with something like this:
<table>
<caption>
<h2>Committee members</h2>
</caption>
<thead>
<tr>
<th scope="col">Role</th>
<th scope="col">Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Chair</td>
<td>Mr A</td>
</tr>
<tr>
<td>Treasurer</td>
<td>Mrs C</td>
</tr>
<tr>
<td>Ordinary member</td>
<td>Ms B</td>
</tr>
</tbody>
</table>
Have I got that right 😊? Do you think having ‘role’ and ‘name’ is overkill for the information presented? Or is it better practice no matter how simple the content? Sorry this is probably obvious to some of you!
KR
Louise
From: Jonathan Cohn <jonathan.cohn@cambiumassessment.com<mailto:jonathan.cohn@cambiumassessment.com>>
Sent: 07 April 2021 16:02
To: Bristow, Alan <Alan.Bristow@elections.ca<mailto:Alan.Bristow@elections.ca>>; Pyatt, Elizabeth J <ejp10@psu.edu<mailto:ejp10@psu.edu>>; Louise Lister <Louise.Lister@iop.org<mailto:Louise.Lister@iop.org>>
Cc: w3c-wai-ig <w3c-wai-ig@w3.org<mailto:w3c-wai-ig@w3.org>>
Subject: RE: Layout or data table?
I might be in the minority here, but personally I greatly dislike overuse of Headings I find on some sites. If there is a H4 / H5 indicating the start of Officers and the start of Staff members, I would be fine with that, but a H2 for each and every staff member without extensive information about that staff member (address/phone/email) would make me switch my screen reader to ignore headings for that Site.
Thanks!
Jonathan
From: Bristow, Alan <Alan.Bristow@elections.ca<mailto:Alan.Bristow@elections.ca>>
Sent: Wednesday, April 7, 2021 10:47 AM
To: Pyatt, Elizabeth J <ejp10@psu.edu<mailto:ejp10@psu.edu>>; Louise Lister <Louise.Lister@iop.org<mailto:Louise.Lister@iop.org>>
Cc: w3c-wai-ig <w3c-wai-ig@w3.org<mailto:w3c-wai-ig@w3.org>>
Subject: Re: Layout or data table?
I agree with Elizabeth that a heading (H2 etc) should often be used also, since sometimes screen-reader users will navigate by heading or ask for a list of headings to be read out; in that scenario an important table with a perfectly valid CAPTION would not be announced since H1 - H6 was not used with the TABLE.
I had wrongly remembered that headings are not valid inside CAPTION, but it looks like in HTML *4* it was not valid
https://www.w3.org/TR/html401/struct/tables.html#edef-CAPTION<https://nam10.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.w3.org%2FTR%2Fhtml401%2Fstruct%2Ftables.html%23edef-CAPTION&data=04%7C01%7Cejp10%40psu.edu%7Caa5102b78d714e7cae7808d8f9dc0426%7C7cf48d453ddb4389a9c1c115526eb52e%7C0%7C0%7C637534070653353826%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=TNxLkkp6cQuj1jwbl9biCeR7owvTPV2Ov3GTTtMJcLg%3D&reserved=0>
but in HTML5 it IS valid
https://html.spec.whatwg.org/multipage/tables.html#the-caption-element<https://nam10.safelinks.protection.outlook.com/?url=https%3A%2F%2Fhtml.spec.whatwg.org%2Fmultipage%2Ftables.html%23the-caption-element&data=04%7C01%7Cejp10%40psu.edu%7Caa5102b78d714e7cae7808d8f9dc0426%7C7cf48d453ddb4389a9c1c115526eb52e%7C0%7C0%7C637534070653363817%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=joLu3QHgEKcxdNQkW%2F%2F7AHpr29ynbTFPmB58Vratqf4%3D&reserved=0>
This approach, use of H2 (3, 5, etc) inside a "heading like tag", is also valid and valuable when using the LEGEND tag with FIELDSET
https://www.accessibility-developer-guide.com/examples/forms/grouping-with-headings/<https://nam10.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.accessibility-developer-guide.com%2Fexamples%2Fforms%2Fgrouping-with-headings%2F&data=04%7C01%7Cejp10%40psu.edu%7Caa5102b78d714e7cae7808d8f9dc0426%7C7cf48d453ddb4389a9c1c115526eb52e%7C0%7C0%7C637534070653363817%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=r3rYwbBCLKDEhUfv%2BetqyYaowJfMe71yXHKP%2F%2BeSktA%3D&reserved=0>
Regards,
Alan
________________________________
From: Pyatt, Elizabeth J <ejp10@psu.edu<mailto:ejp10@psu.edu>>
Sent: Wednesday, April 7, 2021 10:26 AM
To: Louise Lister
Cc: w3c-wai-ig
Subject: Re: Layout or data table?
Louise:
I agree with Alan Bristow that there are multiple ways to present the information including as a data table. If it were me, I would add a header row at the top for Title, Name and make both <th scope="col"> cells.
A <caption> should also be present, but I did have a screen reader user comment that they wanted one of the <h> tags for each table in addition to captions. If it's possible to embed an <h2> inside a <caption>, that would probably work. You could probably use CSS for when <h2> is inside a caption.
Hope this helps.
Elizabeth
On Apr 7, 2021, at 9:54 AM, Louise Lister <Louise.Lister@iop.org<mailto:Louise.Lister@iop.org>> wrote:
Hello all,
I hope you can assist.
On our website we have some tables that contain information on committee member names and their roles, so for example:
Committee members
Chair
Mr A*
Treasurer
Mrs Y
Ordinary member
Mr C
Ordinary member
Mr G
Ordinary member
Ms P
In this case, the title is a h2 and each role in the left-hand cell carries the <th scope> value. To all intents and purposes, we have treated it as a data table, but is it a layout table because the information could be presented in linear fashion another way? And if so, should it have a role="presentation" value in it?
I feel this is a bit of a grey area between the two and would appreciate your thoughts. It reads out fine in NVDA so I don’t think it’s an issue, but wanted to make sure we were accounting for our tables correctly!
With thanks
Louise
________________________________
This email (and attachments) are confidential and intended for the addressee(s) only. If you are not the intended recipient please immediately notify the sender, permanently and securely delete any copies and do not take action with it or in reliance on it. Any views expressed are the author's and do not represent those of IOP, except where specifically stated. IOP takes reasonable precautions to protect against viruses but accepts no responsibility for loss or damage arising from virus infection. For the protection of IOP's systems and staff emails are scanned automatically..
Institute of Physics. Registered charity no. 293851 (England & Wales) and SCO40092 (Scotland)
Registered Office: 37 Caledonian Road, London, N1 9BU<https://nam10.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgoo.gl%2Fmaps%2FDUHbKcbzuUN2&data=04%7C01%7Cejp10%40psu.edu%7Caa5102b78d714e7cae7808d8f9dc0426%7C7cf48d453ddb4389a9c1c115526eb52e%7C0%7C0%7C637534070653373810%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=Nz6hWTmlcbDlM8HmgvAxTylJJSCITKdo77HGIPyisRc%3D&reserved=0>
Your privacy is important to us. For information about how IOP uses your personal data, please see our Privacy Policy<https://nam10.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwww.iop.org%2Fprivacy%2Findex.html&data=04%7C01%7Cejp10%40psu.edu%7Caa5102b78d714e7cae7808d8f9dc0426%7C7cf48d453ddb4389a9c1c115526eb52e%7C0%7C0%7C637534070653373810%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=eye%2B6If%2BMlPqbfitnuPq3UZJxuBZpGnKFUaHSN16%2F6c%3D&reserved=0>
=-=-=-=-=-=-=-=-=-=-=-=-=
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<https://nam10.safelinks.protection.outlook.com/?url=http%3A%2F%2Faccessibility.psu.edu%2F&data=04%7C01%7Cejp10%40psu.edu%7Caa5102b78d714e7cae7808d8f9dc0426%7C7cf48d453ddb4389a9c1c115526eb52e%7C0%7C0%7C637534070653383803%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=Tw3Y07Wx0ic6Ikg25%2B25cSmpG2Et3vWxNvwOqTUCVtM%3D&reserved=0>
________________________________
This email (and attachments) are confidential and intended for the addressee(s) only. If you are not the intended recipient please immediately notify the sender, permanently and securely delete any copies and do not take action with it or in reliance on it. Any views expressed are the author's and do not represent those of IOP, except where specifically stated. IOP takes reasonable precautions to protect against viruses but accepts no responsibility for loss or damage arising from virus infection. For the protection of IOP's systems and staff emails are scanned automatically..
Institute of Physics. Registered charity no. 293851 (England & Wales) and SCO40092 (Scotland)
Registered Office: 37 Caledonian Road, London, N1 9BU<https://nam10.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgoo.gl%2Fmaps%2FDUHbKcbzuUN2&data=04%7C01%7Cejp10%40psu.edu%7Caa5102b78d714e7cae7808d8f9dc0426%7C7cf48d453ddb4389a9c1c115526eb52e%7C0%7C0%7C637534070653393797%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=vg%2B7PjtqVlfv4k8p7UQB3K7141DKMmvEgwB2sQtWYcM%3D&reserved=0>
Your privacy is important to us. For information about how IOP uses your personal data, please see our Privacy Policy<https://nam10.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwww.iop.org%2Fprivacy%2Findex.html&data=04%7C01%7Cejp10%40psu.edu%7Caa5102b78d714e7cae7808d8f9dc0426%7C7cf48d453ddb4389a9c1c115526eb52e%7C0%7C0%7C637534070653393797%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=qarbQlZLUKD5XbLMaHKNt0FKOi9k%2B1h5Nyyo10nuy2Q%3D&reserved=0>
________________________________
=-=-=-=-=-=-=-=-=-=-=-=-=
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>
Received on Wednesday, 7 April 2021 16:31:19 UTC