w3c / wai-website

This repository hosts the WAI Website.
https://www.w3.org/WAI/
Other
55 stars 246 forks source link

Tables with Multi-Level Headers #605

Open MelodyWebmaster opened 11 months ago

MelodyWebmaster commented 11 months ago

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, 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”

<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
        </th>
        <th id="villa" scope="col">
            Villa
        </th>
    </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 headers="par pbed1 stud">
            11
        </td>
    …
    </tr>
</tbody>
</table>

Thank you, Melody Mazerolle Webmaster