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