I am trying to make this below table accessible
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>