Accessibility issue with HTML table-CodePudding

I have below a sample structure of an HTML table and I'm looking for an output for the NVDA screen reader as below.

Name            INDIA   Switzerland   Germany

Country Name      ☑        ☑           ☑

Looking for output for NVDA Screen reader If I select checbox1 Then output Country Name , INDIA, Checbox1 is checked

If I select checbox2 Then output Country Name, Switzerland, Checbox2 is checked

If I select checbox3 Then output Country Name, Germany, Checbox3 is checked

Here is table structure

<table>
  <tr>
    <th>
        INDIA
    </th>
    <th>
        Switzerland
    </th>

    <th>
        Germany
    </th>
  </tr>
  <tr>
    <td>Country Name</td>
    <td>Checkbox1</td>
    <td>> Checkbox2</td>
    <td>> Checkbox3</td>
  </tr>
</table>

CodePudding user response：

You need to define the "country name" cell as a th and apply the scope attribute to all th, using row and col as values, thereby indicating to what cells the different th headers apply:

<table>
  <tr>
    <th scope="col">
        INDIA
    </th>
    <th scope="col">
        Switzerland
    </th>
    <th scope="col">
        Germany
    </th>
  </tr>
  <tr>
    <th scope="row">Country Name</th>
    <td>Checkbox1</td>
    <td>Checkbox2</td>
    <td>Checkbox3</td>
  </tr>
</table>

CodePudding user response：

An HTML checkbox input has a label attribute with a for attribute that corresponds to the id of the actual checkbox. Use JavaScript to get the value of id of the checkbox input, which can tell you the country name.

See Checkbox Elements