Getting accessibility right for HTML tables

Question

I have a data table used in a page that needs to meet WCAG 2.0 AA accessibility standards, but I am being told by my client that the table is not meeting basic accessibility standards.

My client is using an online service called Cynthia Says which throws up all kinds of errors. So I ran an equivalent test using another service from Total Validator, which suggested everything was OK. Obviously in addition to this I have read much of the guidelines, but I still don't feel that I have enough clarity to go back to the client and reassure them or to make the fix I need.

So far as I understand <summary> is deprecated in HTML5 and although potentially useful not a requirement of W3C standards.

The only other thing I can think of would be adding a scope to the <th> or possibly <td> elements but so far as I can tell from documentation on this (http://www.w3.org/TR/WAI-WEBCONTENT/wai-pageauth.html#tech-table-headers), in this context simply having a <th> should do the job.

I have included some example markup below and would appreciate any pointers:

<table>
    <caption>
    This is a caption
    </caption>
    <thead>
        <tr>
            <th>Day</th>
            <th>Time</th>
            <th>Lesson</th>
        </tr>
    </thead>

    <tbody> 
        <tr>
            <td rowspan="3"><strong>Monday</strong></td>
            <td>19:00 - 19:45</td>
            <td>Lesson 1</td>
        </tr>
        <tr>
            <td>18:00 - 19:00</td>
            <td>Lesson 2</td>
        </tr>
        <tr>
            <td>19:00 - 20:00</td>
            <td>Lesson 3</td>
        </tr>
        <tr>
            <td rowspan="4"><strong>Tuesday</strong></td>
            <td>09:15 - 09:45</td>
            <td>Lesson 1</td>
        </tr>
        <tr>
            <td>17:45 - 18:15</td>
            <td>Lesson 2</td>
        </tr>
        <tr>
            <td>18:15 - 18:45</td>
            <td>Lesson 3</td>
        </tr>
        <tr>
            <td>19:00 - 20:00</td>
            <td>Lesson 4</td>
        </tr>
        <tr>
            <td rowspan="2"><strong>Wednesday</strong></td>
            <td>18:00 - 19:00</td>
            <td>Lesson 1</td>
        </tr>
        <tr>
            <td>19:00 - 20:00</td>
            <td>Lesson 2</td>
        </tr>
        <tr>
            <td rowspan="4"><strong>Thursday</strong></td>
            <td>07:30 - 08:00</td>
            <td>Lesson 1</td>
        </tr>
        <tr>
            <td>18:00 - 19:00</td>
            <td>Lesson 2</td>
        </tr>
        <tr>
            <td>19:15 - 19:45</td>
            <td>Lesson 3</td>
        </tr>
        <tr>
            <td>19:45 - 20:15</td>
            <td>Lesson 4</td>
        </tr>
        <tr>
            <td rowspan="3"><strong>Friday</strong></td>
            <td>07:15 - 07:45</td>
            <td>Lesson 1</td>
        </tr>
        <tr>
            <td>15:30 - 17:00</td>
            <td>Lesson 2</td>
        </tr>
        <tr>
            <td>18:00 - 19:00</td>
            <td>Lesson 3</td>
        </tr>
    </tbody>
</table>

Do you mean WCAG 2.0 AA with "AA accessibility standards"? — unor

steveax steveax · Accepted Answer · 2014-07-27T17:05:00

The day cells:

<td rowspan="3"><strong>Monday</strong></td>

are headers and should use th elements instead of td:

<th scope="rowgroup" rowspan="3">Monday</th>

and since you have a two axis table, scope should be added to the headers in the thead:

<thead>
    <tr>
        <th scope="col">Day</th>
        <th scope="col">Time</th>
        <th scope="col">Lesson</th>
    </tr>
</thead>

See WCAG 2, H63: Using the scope attribute to associate header cells and data cells in data tables for an explanation.

Getting accessibility right for HTML tables

1 Answers