A11Y testing for a specific table with multi-header is not working properly

94 Views Asked by At

I am trying to make this below table accessible:

accessible-table

If I make Paris and Rome header with scope="colgroup" then NVDA says like this:

table  with 7 rows and 4 columns  caption    This is a sample table with columns
row 1  Paris
Rome  column 1  Studio
Paris
Rome  column 2  Apartment
Paris
Rome  column 3  Chalet
Paris
Rome  column 4  Villa
row 2  Studio
Rome  column 1  through 4  Paris
row 3  Studio
Paris
Rome  column 1  11
Apartment
Paris
Rome  column 2  12
Chalet
Paris
Rome  column 3  13

image-with-NVDA

If I make Paris and Rome normal then NVDA says this:

table  with 7 rows and 4 columns  caption    This is a sample table with columns
row 1  column 1  Studio
column 2  Apartment
column 3  Chalet
column 4  Villa
row 2  Studio  column 1  through 4  Paris
row 3  Studio  column 1  11
Apartment  column 2  12
Chalet  column 3  13
Villa  column 4  14
row 4  Studio  column 1  15
Apartment  column 2  16
Chalet  column 3  17
Villa  column 4  18
row 5  Studio  column 1  through 4  Rome

image-with-NVDA-with-td

What should I do?

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