Re: Layout or data table?

This is an ambiguous area to me.

They way you have presented the data looks like a list rather than a table, and so what  you  say makes sense to me. I would also say the original table could be successfully be reformatted as a list using your format.

But if I do choose to use a table, I prefer visual headers and captions.  I have not received any complaints about tables when they are laid out this way. You do have the option of making the TH tag visually less salient even if it's not hidden.

Another reason I use visual headers for columns is that not all screen readers process tables as well without them. My understanding is that some screen readers like JAWS just assume the first row is the header so potentially "Jennifer" and "Director" would become the header labels which is also not helpful.

Again my two cents

Elizabeth




On Apr 7, 2021, at 1:01 PM, Marc Haunschild <haunschild@mhis.onmicrosoft.de<mailto:haunschild@mhis.onmicrosoft.de>> wrote:

Hi Elizabeth,

I also thought about visible THs, but I think it’s a worse experience for most users. Too much information does not make things easier to understand.

Director: Jennifer
Assistant: Peter

That kind of information seems to me to be easier to understand than

Role director name Jennifer role assistant name Peter - this way there is as much meta information than the actual data...

--
Mit freundlichen Grüßen

Marc Haunschild
https://Accessibility.Consulting


Am 07.04.2021 um 18:35 schrieb Pyatt, Elizabeth J <ejp10@psu.edu<mailto:ejp10@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%7C9929931e6ddf45ab1ae408d8f9e6bbc3%7C7cf48d453ddb4389a9c1c115526eb52e%7C0%7C1%7C637534116687223857%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C2000&sdata=orUcdxGGoq7z3AXZ1milCuXwtGolHCgP3F4sJeLvJOQ%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%7C9929931e6ddf45ab1ae408d8f9e6bbc3%7C7cf48d453ddb4389a9c1c115526eb52e%7C0%7C1%7C637534116687223857%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C2000&sdata=oigCaAR4RDcf7w6%2F05nBRIjv10eLOfbhRKxfPfc5jr4%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%7C9929931e6ddf45ab1ae408d8f9e6bbc3%7C7cf48d453ddb4389a9c1c115526eb52e%7C0%7C1%7C637534116687233850%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C2000&sdata=6hr%2FXCtATCE35CCqHL%2FzgZHyAGXweoP2TYG3wWO5NGY%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%7C9929931e6ddf45ab1ae408d8f9e6bbc3%7C7cf48d453ddb4389a9c1c115526eb52e%7C0%7C1%7C637534116687243844%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C2000&sdata=CO%2BZG7TtZm9qbX3gsYsOqrNkxI8JlW4%2FquKZtw9shXg%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%7C9929931e6ddf45ab1ae408d8f9e6bbc3%7C7cf48d453ddb4389a9c1c115526eb52e%7C0%7C1%7C637534116687243844%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C2000&sdata=xmVZ4QRsnmMxXG87KV5BBsMTN3YEzw3iJcX399lVVwU%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%7C9929931e6ddf45ab1ae408d8f9e6bbc3%7C7cf48d453ddb4389a9c1c115526eb52e%7C0%7C1%7C637534116687253840%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C2000&sdata=C2Oe2TRAmhIWCNQrr6O8R%2BKG9pD0Iss07RmKfRMCK4I%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%7C9929931e6ddf45ab1ae408d8f9e6bbc3%7C7cf48d453ddb4389a9c1c115526eb52e%7C0%7C1%7C637534116687253840%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C2000&sdata=Zj12Gg6Aq2IdoHm9fh3FxuXUusWQ9tGuWWb2vOfxXx4%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%7C9929931e6ddf45ab1ae408d8f9e6bbc3%7C7cf48d453ddb4389a9c1c115526eb52e%7C0%7C1%7C637534116687263836%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C2000&sdata=Tg0QiU1epDJ%2FUePHAmGmmBtg27CGtUnMUogg9z8atyE%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/>






=-=-=-=-=-=-=-=-=-=-=-=-=
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 18:19:16 UTC