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.