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>
Sent: Wednesday, April 7, 2021 10:47 AM
To: Pyatt, Elizabeth J <ejp10@psu.edu>; Louise Lister <Louise.Lister@iop.org>
Cc: w3c-wai-ig <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

but in HTML5 it IS valid

https://html.spec.whatwg.org/multipage/tables.html#the-caption-element



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/



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%7C28e151934114414d274208d8f9cd6118%7C7cf48d453ddb4389a9c1c115526eb52e%7C0%7C0%7C637534007782732947%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=E%2BfgLNCKOPCPJLccZKFpX8UVhzcz%2BtIXR01Vyo%2F15oE%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%7C28e151934114414d274208d8f9cd6118%7C7cf48d453ddb4389a9c1c115526eb52e%7C0%7C0%7C637534007782742938%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=TBuIZ6sXX68mjD16eqH5SPtvp38QrZ6SwJ5eEpaqBss%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>