What’s the correct scope value to use for an HTML <th> table cell than spans several columns?

Question

Say you’ve got an HTML table, with a <th> cell that spans several columns, e.g.

<table>
    <tr>
        <th colspan="3" scope="?">Scores</th>
        <!-- ...more headings here... -->
    </tr>
    <tr>
        <th scope="col">English</th>
        <th scope="col">Maths</th>
        <th scope="col">Science</th>
        <!-- ...more sub-headings here... -->
    </tr>
    <tr>
        <td>12</td>
        <td>16</td>
        <td>20</td>
        <!-- ...more cells here... -->
    </tr>
</table>

What’s the correct value for the scope attribute for the spanning header cell? col seems incorrect as it’s heading several columns, but colgroup does’t seem right if I don’t actually have any colgroup tags.

Answer 1

The WebAIM (Web Accessibility in Mind) group has a great article on creating accessible data tables. Overall, they recommend avoiding spanned rows or columns, as screen readers cannot interpret the markup reliably.

Short of avoiding spanned columns altogether, I've had really good luck using the id/headers attributes in combination with the scope attribute. Although the markup is more verbose, this seems to simplify things for JAWS, and as a result it has less trouble interpreting the data.

This is what your example would look like with id/headers:

<table>
    <tr>
        <th id="scores" colspan="3">Scores</th>
    </tr>
    <tr>
        <th id="english" scope="col">English</th>
        <th id="maths" scope="col">Maths</th>
        <th id="science" scope="col">Science</th>
    </tr>
    <tr>
        <td headers="scores english">12</td>
        <td headers="scores maths">16</td>
        <td headers="scores science">20</td>
    </tr>
</table>