Re: Tables with Multi-Level Headers

Great question, thank you Melody for asking something I have wondered about for some time.

I have assumed that as the authoritative Firefox plugin:

"Complex Data Table Markup Toolbar"
https://www.visionaustralia.org/business-consulting/digital-access/resources/complex-data-table-markup-toolbar

removes the scopes when it provides the IDs and Headers, that that approach was best.

I too would love to know if there is a definitive answer.

Regards,

Alan

. . . . -   . . - - -
Alan Bristow ( he / him / il )
Web Developer / Développeur Web
Elections Canada / Élections Canada
alan.bristow@elections.ca<mailto:alan.bristow@elections.ca>

________________________________
From: Melody Mazerolle <melodymazerolle@gmail.com>
Sent: 27 October 2023 11:53
To: w3c-wai-ig@w3.org <w3c-wai-ig@w3.org>
Subject: Tables with Multi-Level Headers

Ce message a été envoyé par un expéditeur externe. Veuillez faire preuve de prudence et ne pas cliquer sur les liens ou ouvrir les pièces jointes à moins de reconnaître l'expéditeur et de savoir que le contenu est sûr.

This message was sent from an external sender. Please exercise caution and do not click links or open attachments unless you recognize the sender and know the content is safe.



Hello,



Is it advisable to combine and use Scope and Headers/IDs attributes in the same table to improve accessibility for screen readers? I'm wondering if using scope and headers/id attributes in the same table might conflict in certain situations?

I know some screen readers are not working well with Headers/IDs attributes even it is markup perfectly.


There is so much divergence online, AI chatGPT said okay as its serve different purposes.., and your website example combined both. https://www.w3.org/WAI/tutorials/tables/multi-level/



The example 2: Table with three headers related to each data cell

Full code for Example “Table with three headers related to each data cell”<https://www.w3.org/WAI/tutorials/tables/examples/threeheaders/>



<table summary="Column one has the location and size of accommodation, other columns show the type and number of properties available">

<caption>

    Availability of holiday accommodation

</caption>

<thead>

    <tr>

        <td></td>

        <th id="stud" scope="col">

            Studio

        </th>

        <th id="apt" scope="col">

            <abbr title="Apartment">Apt</abbr>

        </th>

        <th id="chal" scope="col">

            Chalet

    </tr>

</thead>

<tbody>

    <tr>

        <th id="par" class="span" colspan="5" scope="colgroup">

            Paris

        </th>

    </tr>

    <tr>

        <th headers="par" id="pbed1">

            1 bedroom

        </th>

       ...

        </td>

    </tr>

    <tr>

        <th id="rome" class="span" colspan="5" scope="colgroup">

            Rome

        </th>

    </tr>

    <tr>

        <th id="rbed1" headers="rome">

            1 bedroom

        </th>

        <td headers="rome rbed1 stud">

     ....

    </tr>

</tbody>

</table>



Source From Deque University - Accessible Table



Warning:

Complex table structures with irregular column or row designations are difficult for screen reader users to understand and navigate even when all the markup is "perfect" for accessibility compliance. It is much better to create a simple table with no spanned cells than to create a confusing complex table that technically passes the accessibility guidelines.

Some screen readers, especially on mobile devices, do not support accessibility complex table markup. Old versions of VoiceOver for OS X, up until Mac OS X 10.10.2, also lacked accessibility support for complex tables.



Note: Old Versions of VoiceOver Did Not Support the id + headers Method

Up until Mac OS X 10.10.2, VoiceOver did not support the ability to read table headers with the id + headers method. Some versions even read the wrong headers with the data cells. Fortunately, the current version of VoiceOver does read the data and header associations correctly.