Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tables with Multi-Level Headers #729

Open
MelodyWebmaster opened this issue Oct 27, 2023 · 0 comments
Open

Tables with Multi-Level Headers #729

MelodyWebmaster opened this issue Oct 27, 2023 · 0 comments

Comments

@MelodyWebmaster
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant