Spanning row/column example missing required attributes

[aardrian]

Looking at this page:
https://www.accessibility-developer-guide.com/examples/tables/spanning-rows-cols/

It shows <th>s that span but does not include the required id and headers attribute in the associated <th>s or <td>s.

Eg:

[…]
      <th colspan="2">
        Leisure Days
      </th>
    </tr>
[…]
      <th>
        Saturday
      </th>
      <th>
        Sunday
      </th>
    </tr>
[…]
      <td>
        Computer Science
      </td>
      <td>
        Chillout
      </td>
    </tr>

The content under the heading "Tricky screen reader navigation" makes assertions about how screen readers read this table, but those assertions are based on an invalid pattern.

Correct code might look like this:

[…]
      <th colspan="2" id="Leisure">
        Leisure Days
      </th>
    </tr>
[…]
      <th id="Sat" headers="Leisure">
        Saturday
      </th>
      <th id="Sun" headers="Leisure">
        Sunday
      </th>
    </tr>
[…]
      <td headers="Leisure Sat">
        Computer Science
      </td>
      <td headers="Leisure Sun">
        Chillout
      </td>
    </tr>

I have an example here:
https://adrianroselli.com/2017/11/hey-its-still-ok-to-use-tables.html#WCAGSpanning

Which is based on this WCAG example:
https://www.w3.org/TR/WCAG20-TECHS/H43.html

[jmuheim]

I never understood what the headers attribute is useful for in simple tables: the association between th and td is always given automatically, and I never experienced any issues with screen readers. As soon as tables get more complicated and therefore a headers attribute seems necessary, I usually discourage to create tables with such messy data anyway.

Or do I misunderstand something here?

[aardrian]

@jmuheim The headers attribute has no purpose in simple tables. It does have purpose in tables with spanning cells. However, the headers attribute has a stack of issues: https://adrianroselli.com/2022/01/accessible-cart-tables.html

As such, tables should generally avoid spanning cells when possible: https://adrianroselli.com/2023/02/avoid-spanning-table-headers.html

Sadly, those browser bugs I link are less likely to be fixed if people are not using the correct pattern.

[backflip]

And this has finally been fixed, too. Thank you so much, @aardrian, for the time you spent documenting these issues.

[backflip]

On second thought: @LAST2024, could you please check whether https://www.accessibility-developer-guide.com/examples/tables/spanning-rows-cols/#tricky-screen-reader-navigation is still accurate when navigating https://www.accessibility-developer-guide.com/examples/tables/spanning-rows-cols/_examples/table-spanning-multiple-rows-and-columns/ in NVDA? The text:

The first thing to note is that NVDA does not announce when a cell spans multiple rows or columns! For example, the header cell "Work Days" (which spans 5 columns) is simply announced as "column 2 Work Days", and the next cell "Leisure Days" (which spans 2 columns) is announced as "column 7 Leisure Days". Did you notice the jump from 2 to 7? You have to be a pretty focused user to realise this.

The same holds true when navigating vertically. For example, when navigating from "Saturday" down to "Dancing", there is no hint by the screen reader that "Dancing" spans both "9:00" and "10:00", it only announces "9:00 row 3 Dancing". As there is no subsequent row (if it existed, it would be announced as "row 5", again with a jump from 3 to 5), not even vigilant users have the chance to realise by accident that "Dancing" spans 2 rows.

And one last thing to note: finding the cell "Chillout" is not that easy using a screen reader! If you are on the last row ("10:00") and then navigate from "Computer Science" rightwards to "Dancing" and then again to the right, then you will end on "Sleeping" which in fact is one row above! Sure, the screen reader announced the jump from row 4 to row 3 when coming to "Dancing", but still you have to be very vigilant to realise. So in fact, you only are able to reach "Chillout" by navigating down from "Sleeping".

[backflip]

@LAST2024, I have created a follow-up where I replaced the outdated paragraphs: #448

I did test the example in NVDA 2024.2 / Firefox 128 and was unable to reproduce any of the listed limitations.