Testing a multi-header table on HTML for A11Y is not working properly

42 Views Asked by At

I am trying to make this below table accessible full-table

If I make Paris and Rome header with scope="colgroup" then NVDA says like this. table-with-NVDA-speech-viewer. It says Paris, Rome on each and every cell data, which are not under Rome as well.

If I make Paris and Rome normal td then NVDA says this. table-with-category-header-td. It says Row 2 Studio Column 1 through 4 Paris. This Paris should not be under Studio.

I am facing these issues that if I use Rome and Paris as td then I have to specify a header for this td, else it says for Studio header. and if I use Paris and Rome as <th> then it is saying Paris and Rome on each line.

I am expecting that under Paris it should only mention Paris not Rome. And under Rome it should mention only Rome.

Here is the full code.

<table>

    <caption>This is a sample table with columns</caption>
   
    <tr>
        <th scope="col" id="studio">Studio</th>
        <th scope="col" id="apt">Apartment</th>
        <th scope="col" id="chalet">Chalet</th>
        <th scope="col" id="villa">Villa</th>
    </tr>

        <tr>
            <th scope="colgroup" id="par" colspan="4">Paris</th>
        </tr>
        <tr>
            <td headers="studio par">11</td>
            <td headers="apt par">12</td>
            <td headers="chalet par">13</td>
            <td headers="villa par">14</td>
        </tr>
        <tr>
            <td headers="studio par">15</td>
            <td headers="apt par">16</td>
            <td headers="chalet par">17</td>
            <td headers="villa par">18</td>
        </tr>
        <tr>
            <th scope="colgroup" id="rome" colspan="4">Rome</th>
        </tr>
        <tr>
            <td headers="rome studio">1000</td>
            <td headers="rome apt">2000</td>
            <td headers="rome chalet">3000</td>
            <td headers="rome villa">4000</td>
        </tr>
        <tr>
            <td headers="rome studio">5000</td>
            <td headers="rome apt">6000</td>
            <td headers="rome chalet">7000</td>
            <td headers="rome villa">8000</td>
        </tr>
</table>

0

There are 0 best solutions below