Tables with Multi-Level Headers

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.