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>
    </tr>
    <tr>
        <th scope="col">English</th>
        <th scope="col">Maths</th>
        <th scope="col">Science</th>
    </tr>
    <tr>
        <td>12</td>
        <td>16</td>
        <td>20</td>
    </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

According to the second example table in the HTML spec, it’s colgroup, despite the lack of colgroup tags.

http://www.w3.org/TR/html4/struct/tables.html#h-11.4.1

Answer 2

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>