Re: Layout or data table? from Pyatt, Elizabeth J on 2021-04-07 (w3c-wai-ig@w3.org from April to June 2021)

From: Pyatt, Elizabeth J <ejp10@psu.edu>
Date: Wed, 7 Apr 2021 18:28:24 +0000
To: Emmanuelle Gutiérrez y Restrepo <emmanuelle@sidar.org>
CC: w3c-wai-ig <w3c-wai-ig@w3.org>
Message-ID: <88C241F6-F23B-4DAE-8A30-3975072F3BD4@psu.edu>
I agree that they should normally be separate elements, but our JAWS tester complained about lack of headings for multiple tables even when the caption tag was present. She does use headings as a primary navigation cue even when other options are available.

And sometimes sometimes the heading matches the title of the table.

The alternate would be to duplicate the heading and the caption, which in this case, I would believe would confuse sighted users.  Or you could extend the caption.
<h2>Committee Members</h2>

<table>
<caption>Committee Members by Role</caption>

Maybe you have another suggestion? I agree that they should normally be separate elements. As I said, there are multiple solutions.

Best
Elizabeth


On Apr 7, 2021, at 2:09 PM, Emmanuelle Gutiérrez y Restrepo <emmanuelle@sidar.org<mailto:emmanuelle@sidar.org>> wrote:


Hi all,

Sorry but a h2 for a caption? A caption is not a heading. The caption element represents the title of the table:https://www.w3.org/TR/html52/tabular-data.html#the-caption-element<https://nam10.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.w3.org%2FTR%2Fhtml52%2Ftabular-data.html%23the-caption-element&data=04%7C01%7Cejp10%40psu.edu%7C6c7e258b03864b75579108d8f9f10ff9%7C7cf48d453ddb4389a9c1c115526eb52e%7C0%7C1%7C637534161050056531%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C2000&sdata=EjA0Woikn9JY3W4XQL2jz4M%2Bhrl2gxvDDW0B4LL3aS4%3D&reserved=0>

If you need a heading you can put it before the table caption.

I think that putting a heading as the only content of a caption is a similar case to using a heading just to get a certain text appearance. Similar, not the same ;-)

Best,

Emmanuelle Gutiérrez y Restrepo
Patrono Fundador y Directora General
Fundación Sidar - Acceso Universal
email: emmanuelle@sidar.org<mailto:emmanuelle@sidar.org>
http://sidar.org<https://nam10.safelinks.protection.outlook.com/?url=http%3A%2F%2Fsidar.org%2F&data=04%7C01%7Cejp10%40psu.edu%7C6c7e258b03864b75579108d8f9f10ff9%7C7cf48d453ddb4389a9c1c115526eb52e%7C0%7C1%7C637534161050066524%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C2000&sdata=wYmm1S1JTfO4hCcVYTod9oCq9VfnDmHhpDmV3MunTqs%3D&reserved=0>


El 07/04/2021 a las 17:34, Louise Lister escribió:


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%7C6c7e258b03864b75579108d8f9f10ff9%7C7cf48d453ddb4389a9c1c115526eb52e%7C0%7C1%7C637534161050066524%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C2000&sdata=90QRRAHlSC2MHnoq7Kg8QMHq8lMXH98WaNGJsNAfKx4%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%7C6c7e258b03864b75579108d8f9f10ff9%7C7cf48d453ddb4389a9c1c115526eb52e%7C0%7C1%7C637534161050076520%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C2000&sdata=xXa3Agi0OnPQ5oOj%2BlyHSPVOQSkAXa1PlfvdyPzY6%2Bc%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%7C6c7e258b03864b75579108d8f9f10ff9%7C7cf48d453ddb4389a9c1c115526eb52e%7C0%7C1%7C637534161050086513%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C2000&sdata=cVmV1yukMCJe9D1gNNH4Yx1tpLygflQWB4tVoh3KnXo%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%7C6c7e258b03864b75579108d8f9f10ff9%7C7cf48d453ddb4389a9c1c115526eb52e%7C0%7C1%7C637534161050086513%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C2000&sdata=v%2F7XvnFDuMvdJ1F085%2FQf7B6T9dsnNpsJHPlQ3mEyX0%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%7C6c7e258b03864b75579108d8f9f10ff9%7C7cf48d453ddb4389a9c1c115526eb52e%7C0%7C1%7C637534161050096507%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C2000&sdata=iKlj%2F7swwe%2BIt%2FnAlZw8PXTtMuW3zkgvfSR2V4t3Lek%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%7C6c7e258b03864b75579108d8f9f10ff9%7C7cf48d453ddb4389a9c1c115526eb52e%7C0%7C1%7C637534161050096507%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C2000&sdata=O2ArknLqQ9GWkjtitNWIJxZWHMzy5KxvoHP7pu1XbMY%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%7C6c7e258b03864b75579108d8f9f10ff9%7C7cf48d453ddb4389a9c1c115526eb52e%7C0%7C1%7C637534161050106501%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C2000&sdata=8faJ1TadXT%2FvWKH5EbpxGD%2FH6fe%2FKXaYt%2FZsLC7eTg8%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%7C6c7e258b03864b75579108d8f9f10ff9%7C7cf48d453ddb4389a9c1c115526eb52e%7C0%7C1%7C637534161050106501%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C2000&sdata=%2BcZuvC0bTFuS8UAKwW4Dp5uXjgBOe3fmIyjUHmeZKgQ%3D&reserved=0>
________________________________

[https://ipmcdn.avast.com/images/icons/icon-envelope-tick-round-orange-animated-no-repeat-v1.gif]<https://nam10.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.avast.com%2Fsig-email%3Futm_medium%3Demail%26utm_source%3Dlink%26utm_campaign%3Dsig-email%26utm_content%3Demailclient&data=04%7C01%7Cejp10%40psu.edu%7C6c7e258b03864b75579108d8f9f10ff9%7C7cf48d453ddb4389a9c1c115526eb52e%7C0%7C1%7C637534161050116499%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C2000&sdata=FzMk0kGE6QB9I3v4I01dOyzHWD42%2BrM4KtIt1ZrFFTk%3D&reserved=0>    Libre de virus. www.avast.com<https://nam10.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.avast.com%2Fsig-email%3Futm_medium%3Demail%26utm_source%3Dlink%26utm_campaign%3Dsig-email%26utm_content%3Demailclient&data=04%7C01%7Cejp10%40psu.edu%7C6c7e258b03864b75579108d8f9f10ff9%7C7cf48d453ddb4389a9c1c115526eb52e%7C0%7C1%7C637534161050116499%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C2000&sdata=FzMk0kGE6QB9I3v4I01dOyzHWD42%2BrM4KtIt1ZrFFTk%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 18:28:42 UTC