Solution 1 :

It doesn’t seem necessary that the screen reader says “Country name” before “Switzerland”, “Germany” or “India” every time, as they are obviously country names.
Repeating “Country name” all the time is going to become annoying at the end, as it doesn’t really bring any useful information. It’s enough if it is said just once.

I suggest something like the following HTML:

<table>
  <tr>
    <th scope="row">Country name</th>
    <th scope="col" id="switzerland">Switzerland</th>
    <th hscope="col" id="germany">Germany</th>
    <th scope="col" id="india">India</th>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input type="checkbox" aria-labelledby="switzerland" /></td>
    <td><input type="checkbox" aria-labelledby="germany" /></td>
    <td><input type="checkbox" aria-labelledby="india" /></td>
  </tr>
    .
    .
    .
</table>

Notice the following:

  • The “country name” header cell is scope=row, meaning that “Country name” will normally be said only once, when landing on the row for the first time
  • “Switzerland”, “Germany” and “India” header celles are scope=col, meaning that they will be announced when landing on the corresponding column
  • This is absolutely not a problem to have a th with scope=row in the same row as several th with scope=col, as it isn’t a problem conversely either
  • Attribute aria-labelledby is set on the checkboxes in order to be sure that they are announced when reaching the checkboxes with tab. They shouldn’t be necessary, as the screen reader is smart enough to already announce the header celll while changing column, but just in doubt, it’s probably better to have them so we are sure that the checkboxes have an explicit accessible label. There is a small risk to get “Switzerland”, “Germany” and “India” announced twice every time, but since it’s short, it isn’t so dramatic
  • It’s perfectly possible to reference several IDs in aria-labelledby and for example make “Country name” be announced each time, but note again how I didn’t do it because, as already said, “Country name” repeated all the time doesn’t bring any useful information

Solution 2 :

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>

see also https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th

Solution 3 :

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

Problem :

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>

Comments

Comment posted by Table Styled Input for Screen Readers

Does this answer your question?

Comment posted by Andy

Wrapping your headers in

Comment posted by Andy

Actually, is your table data including more rows? If not, Iā€™d assume that your table only has presentational purpose, and you should use

Comment posted by Shatrughna

If I select checbox1 Then output Country Name , INDIA, Checbox1 is checked this step is working fine but for the second step output is not as expected If I select checbox2 Then output is coming as below : Switzerland, Checbox2 is checked expected output is : Country Name, Switzerland, Checbox2 is checked

By