1

I recently read that a table can have multiple rows of < th > and pass validity. I have a narrow table and need to get < th > on multiple rows. When I test with NVDA it reads all the < th > in the column and then the data cell. Would this not be confusing to the user?

  • 1
    Have you asked some users? – Evil Closet Monkey Aug 16 '19 at 15:28
  • No it's an internal app. – tiki16 Aug 16 '19 at 15:47
  • Have you asked some internal users? – Evil Closet Monkey Aug 16 '19 at 15:48
  • I don't know who the internal users are. I am working with a dev. – tiki16 Aug 16 '19 at 15:52
  • 4
    I honestly don't mean to go off on a tangent here... but you're designing an app without knowing who your user is. That's pretty big problem if you want it to be usable. – Evil Closet Monkey Aug 16 '19 at 15:54
3

This is allowed and there are ways to structure your markup to aid accessibility.

In general, you provide unique IDs for each <th> and then each <td> lists which headers apply to itself. This prevents the extra headers from being read by the assistive tool.

<th id="th1" headers="blank">Header 1</th>
<td headers="th1">Data 1</td>
<th id="th2" headers="blank">Header 2</th>
<td headers="th2">Data 2</td>

https://www.w3.org/WAI/tutorials/tables/multi-level/

However, you should also consider if the information would be just as effective if you use two separate tables with simpler headers. (They can be unified visually with CSS if needed.)

| improve this answer | |
  • Ya I was thinking of using multiple tables (3 with 3 rows of headers) I am just unsure if it can be output that way from the back-end JSF. – tiki16 Aug 16 '19 at 15:45
  • I have the id and headers. It appears to be an issue with NVDA and chrome whereby the al <th> in the column are read back. It's not doing it in ie11. – tiki16 Aug 16 '19 at 16:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.