Accessibility: How to configure "column header" announcement?

user_6476049 0
Viewed 75

I'm working on optimizing a website for visually impaired. I have a table on the page in the following format -

<table>
  <thead>
    <tr>
      <th>Number</th>
      <th>Name</th>
      <th>Surname</th>
    </tr>
  </thead>
  
  <tbody>
    ...
  </tbody>
</table>

Currently the screen reader is announcing "row 1 col 1 number" but the expectation is that it should announce "row 1 col 1 number column header" when its a element. How can I configure it? Setting role="columnheader" is not working.

wai-aria web accessibility html
1 Answers

It is scope you are looking for to associate columns and rows.

scope="col" will associate a table header as a column header.

You can also associate a row header if you wish with scope="row"

<table>
  <caption>My table caption - don't forget this so people know what a table is for / about</caption>
  <thead>
    <tr>
      <th scope="col">Number</th>
      <th scope="col">Name</th>
      <th scope="col">Surname</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td scope="row">1</td>
      <td>John</td>
      <td>Smith</td>
    </tr>
    <tr>
      <td scope="row">2</td>
      <td>Mike</td>
      <td>Simmons</td>
    </tr>
  </tbody>
</table>

See https://www.w3.org/TR/WCAG20-TECHS/H63.html for more info on this technique.

p.s. don't forget to add a <caption> to your table!

user_27028940
Related