1

我在需要满足WCAG 2.0 AA 可访问性标准的页面中使用了一个数据表，但我的客户告诉我该表不符合基本的可访问性标准。

我的客户正在使用名为Cynthia Says的在线服务，它会引发各种错误。因此，我使用 Total Validator 的另一项服务进行了等效测试，结果表明一切正常。显然，除此之外，我还阅读了很多指导方针，但我仍然觉得我没有足够的清晰度来回到客户那里并让他们放心或做出我需要的修复。

据我了解<summary>，在 HTML5 中已弃用，尽管可能有用，但不是 W3C 标准的要求。

我能想到的唯一另一件事是为元素<th>或可能的<td>元素添加范围，但据我从有关此的文档（http://www.w3.org/TR/WAI-WEBCONTENT/wai-pageauth. html#tech-table-headers），在这种情况下，只需有一个<th>应该做的工作。

我在下面包含了一些示例标记，并希望得到任何指示：

<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>
4

1 回答 1

4

白天细胞：

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

是标题，应该使用th元素而不是td：

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

并且由于您有一个两轴表，scope因此应将其添加到以下标题中thead：

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

有关说明，请参见WCAG 2，H63：使用范围属性将数据表中的标题单元格和数据单元格关联起来。

于 2014-07-27T17:05:00.310 回答