- From: Louise Lister <Louise.Lister@iop.org>
- Date: Thu, 8 Apr 2021 08:08:29 +0000
- To: Jonathan Avila <jon.avila@levelaccess.com>, w3c-wai-ig <w3c-wai-ig@w3.org>
- Message-ID: <LO2P123MB1744BBDC790B190A2437A5CCEA749@LO2P123MB1744.GBRP123.PROD.OUTLOOK.COM>
Thanks 😊
From: Jonathan Avila <jon.avila@levelaccess.com>
Sent: 07 April 2021 19:38
To: w3c-wai-ig <w3c-wai-ig@w3.org>
Subject: RE: Layout or data table?
I think it’s reasonable to assume that it should be both a heading and caption and users will want to navigate by heading and if you don’t use a caption it could be considered a fail. Also for the data, you could use a table and mark it up correctly or you could use a list or other structure and meet the requirements (in my opinion).
Jonathan
From: Pyatt, Elizabeth J <ejp10@psu.edu<mailto:ejp10@psu.edu>>
Sent: Wednesday, April 7, 2021 2:28 PM
To: Emmanuelle Gutiérrez y Restrepo <emmanuelle@sidar.org<mailto:emmanuelle@sidar.org>>
Cc: w3c-wai-ig <w3c-wai-ig@w3.org<mailto:w3c-wai-ig@w3.org>>
Subject: Re: Layout or data table?
CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.
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://gbr01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.w3.org%2FTR%2Fhtml52%2Ftabular-data.html%23the-caption-element&data=04%7C01%7Clouise.lister%40iop.org%7Ce41a2f1e4e5f40b67b8c08d8f9f49490%7C8b8986af18bb4882a149fa5a3dd1f995%7C0%7C0%7C637534176152448148%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=QGWQeclLa5pscQRWxt8hLNl94R5lrwHeQy0uHzX%2BX74%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://gbr01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fsidar.org%2F&data=04%7C01%7Clouise.lister%40iop.org%7Ce41a2f1e4e5f40b67b8c08d8f9f49490%7C8b8986af18bb4882a149fa5a3dd1f995%7C0%7C0%7C637534176152458145%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=aUbNThbKzck0%2FuSo4YzNqUT3GGgDPbu4FKJHJz8teWE%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://gbr01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.w3.org%2FTR%2Fhtml401%2Fstruct%2Ftables.html%23edef-CAPTION&data=04%7C01%7Clouise.lister%40iop.org%7Ce41a2f1e4e5f40b67b8c08d8f9f49490%7C8b8986af18bb4882a149fa5a3dd1f995%7C0%7C0%7C637534176152458145%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=YwIze7VMvBradoPDyS33F6Ks3Pkj5GwQeYUwauHzhhM%3D&reserved=0>
but in HTML5 it IS valid
https://html.spec.whatwg.org/multipage/tables.html#the-caption-element<https://gbr01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fhtml.spec.whatwg.org%2Fmultipage%2Ftables.html%23the-caption-element&data=04%7C01%7Clouise.lister%40iop.org%7Ce41a2f1e4e5f40b67b8c08d8f9f49490%7C8b8986af18bb4882a149fa5a3dd1f995%7C0%7C0%7C637534176152468138%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=x%2BIsJhsxO%2BSeb7t1qw4PS%2B4Nclr%2Fxgs2QWAhv1WgRfk%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://gbr01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.accessibility-developer-guide.com%2Fexamples%2Fforms%2Fgrouping-with-headings%2F&data=04%7C01%7Clouise.lister%40iop.org%7Ce41a2f1e4e5f40b67b8c08d8f9f49490%7C8b8986af18bb4882a149fa5a3dd1f995%7C0%7C0%7C637534176152478131%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=nDqGNDNyom4FBR%2F96E4HLi%2BweHfA44B%2B7t0nFhGS4iU%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://gbr01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgoo.gl%2Fmaps%2FDUHbKcbzuUN2&data=04%7C01%7Clouise.lister%40iop.org%7Ce41a2f1e4e5f40b67b8c08d8f9f49490%7C8b8986af18bb4882a149fa5a3dd1f995%7C0%7C0%7C637534176152478131%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=x9TQ2UdkoGzEmch1mOltyiXUzba%2B%2B6LwBVRhtv2T0s0%3D&reserved=0>
Your privacy is important to us. For information about how IOP uses your personal data, please see our Privacy Policy<https://gbr01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwww.iop.org%2Fprivacy%2Findex.html&data=04%7C01%7Clouise.lister%40iop.org%7Ce41a2f1e4e5f40b67b8c08d8f9f49490%7C8b8986af18bb4882a149fa5a3dd1f995%7C0%7C0%7C637534176152488120%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=RU5apUhU430b7MRT7sIYClmx%2F0C6nFocblTzVPkk5Cs%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://gbr01.safelinks.protection.outlook.com/?url=http%3A%2F%2Faccessibility.psu.edu%2F&data=04%7C01%7Clouise.lister%40iop.org%7Ce41a2f1e4e5f40b67b8c08d8f9f49490%7C8b8986af18bb4882a149fa5a3dd1f995%7C0%7C0%7C637534176152488120%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=z5EI2FYQc02qsHAgVuANDA%2F8nCemL62v1RLPEcx2RWY%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://gbr01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgoo.gl%2Fmaps%2FDUHbKcbzuUN2&data=04%7C01%7Clouise.lister%40iop.org%7Ce41a2f1e4e5f40b67b8c08d8f9f49490%7C8b8986af18bb4882a149fa5a3dd1f995%7C0%7C0%7C637534176152498119%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=l%2BSfogmr%2BgZUFMpDvIFjvqCbZzDUcjPA%2FbgnvVbvi7U%3D&reserved=0> Your privacy is important to us. For information about how IOP uses your personal data, please see our Privacy Policy<https://gbr01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwww.iop.org%2Fprivacy%2Findex.html&data=04%7C01%7Clouise.lister%40iop.org%7Ce41a2f1e4e5f40b67b8c08d8f9f49490%7C8b8986af18bb4882a149fa5a3dd1f995%7C0%7C0%7C637534176152508112%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=tbC4LT9%2FxxzipudiZx4vIYOuYgqyx%2BQZ6EaOmm9uI9k%3D&reserved=0>
________________________________
[https://ipmcdn.avast.com/images/icons/icon-envelope-tick-round-orange-animated-no-repeat-v1.gif]<https://gbr01.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%7Clouise.lister%40iop.org%7Ce41a2f1e4e5f40b67b8c08d8f9f49490%7C8b8986af18bb4882a149fa5a3dd1f995%7C0%7C0%7C637534176152508112%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=gyVRbiVZ1I3B9QlAuXTD5B7hy5SdAR5MxZTAvLr4TEc%3D&reserved=0>
Libre de virus. www.avast.com<https://gbr01.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%7Clouise.lister%40iop.org%7Ce41a2f1e4e5f40b67b8c08d8f9f49490%7C8b8986af18bb4882a149fa5a3dd1f995%7C0%7C0%7C637534176152518108%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=Yd4o5m2panq1yFwdv%2FPX8EOXrvCM4F2XMl%2BiixmwH9c%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://gbr01.safelinks.protection.outlook.com/?url=http%3A%2F%2Faccessibility.psu.edu%2F&data=04%7C01%7Clouise.lister%40iop.org%7Ce41a2f1e4e5f40b67b8c08d8f9f49490%7C8b8986af18bb4882a149fa5a3dd1f995%7C0%7C0%7C637534176152528106%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=j0R95bp8N3gtYHkINyn57n3ROEpk1e4NK0U%2FvgswDxA%3D&reserved=0>
This email (and attachments) are confidential and intended for the addressee(s) only. If you are not the intended recipient please notify the sender,
delete any copies and do not take action 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
Received on Thursday, 8 April 2021 08:08:52 UTC