CODEWITHSUNDEEP
accessibilitywai-aria
tony
tony

Reputation: 2392

aria-hidden on a TH

We have a large complex grid where I want to give sighted and non sighted users a different experience. It's a custom control which has grids within grids. It's fine for sighted users and has been around for ~20 years but would be difficult to understand if using a screen reader. There is zero chance of a redesign. Hiding the control and having a separate control for screen readers is also a no-no as other than that it's perfectly usable for both

I want, in the example below, to not read out the header for the first cell in screen readers.

If I use aria-hidden then the TH is removed from the flow and screen readers will read out the wrong heading

You can't have aria-value with no value

I'd like to replace the headers so one relates to the cell and other isn't read out

Is there any way of achieving this?

<table>
  <thead>
    <tr>
      <th aria-hidden="true">egg</th>
      <th>banana</th>
    </tr>
    <tr>
      <th aria-hidden="true">plant</th>
      <th>tree</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td tabindex="0">
        cat
      </td>
      <td tabindex="0">
        dog
      </td>
    </tr>
  </tbody>
</table>

Here's the output of the screen reader. Note that the header above dog isn't read out, the header above cat is read out a banana tree, which is the wrong header

table dog row 3 column 2 cat row 3 banana tree column 1

Upvotes: 1

Views: 401

Answers (1)

tony
tony

Reputation: 2392

Can't believe I didn't think of this earlier

<th><span aria-hidden>text</span></th>

Keep the TH but wrap the contents

Although I still think it would be nice if accessibility had something like visibility: hidden, although I grant this is probably a niche case

Upvotes: 1

Related Questions