Question

我的网页上有一张桌子。它有列标题和行标题。在每个单元格中都有一个复选框。无法为所有复选框提供可视标签，因此我使用“咏叹调”标签提供标签。属性。当我使用表格快捷键（Alt + Ctrl +箭头键）导航时，屏幕阅读器会发布行标题，列标题和“aria-label”标签。文本。例如，未选中“操作1”复选框，为所有事件列2＆＃39;选择操作1，这是多余的。

因此，如果我删除两个表格标题，屏幕阅读器将仅宣布“aria-label＆＃39;文本，这是有意义的，足以确定复选框的目的。但根据WCAG准则（1.3.1信息和关系），表必须具有与表数据相关联的标题。

所以这是我的问题：

如果我删除表格标题 - 它会违反WCAG合规吗？屏幕阅读器用户与桌面的交互是什么？他们是否总是需要导航标题？屏幕阅读器用户是否能够通过听到咏叹调标签来完成桌面活动。仅限文字？。

请参阅代码段：

<table>
    <tr>
        <th scope="col" width="40%">Events</th>
        <th scope="col" align="left">Action 1</th>
        <th scope="col" align="left">Action 2</th>
        <th scope="col" align="left">Action 3</th>
    </tr>
    <tr>
    <th scope="row">Select All</th>
    <td><input type="checkbox" name="Action11" id="Action11" aria-label="Select action 1 for all event" /></td>
    <td><input type="checkbox" name="Action12" id="Action12" aria-label="Select action 2 for all event" /></td>
    <td><input type="checkbox" name="Action13" id="Action13" aria-label="Select action 3 for all event" /></td>
    </tr>
    <tr>
        <th scope="row">Event 1</th>
        <td><input type="checkbox" name="Action21" id="action21" aria-label="Select action 1 for event 1" /></td>
        <td><input type="checkbox" name="Action22" id="action22" aria-label="Select action 2 for event 1"  /></td>
        <td><input type="checkbox" name="Action23" id="Action23" aria-label="Select action 3 for event 1"  /></td>
    </tr>
    <tr>
        <th scope="row">Event 2</th>
        <td><input type="checkbox" name="Action31" id="action31" aria-label="Select action 1 for event 2" /></td>
        <td><input type="checkbox" name="Action32" id="action32" aria-label="Select action 2 for event 2"  /></td>
        <td><input type="checkbox" name="Action33" id="Action33" aria-label="Select action 3 for event 2"  /></td>
    </tr>
</table>

提前致谢！

Answer 1

保留表格标题。当导航为表格（CTRL + ALT +箭头）时，典型的屏幕阅读器行为是仅在到达新行或列时宣布标题，这是为了防止不必要的重复。但是，某些事情（例如通知行号和列号）可以由用户自定义。在这里使用aria-label稍微开始通过强制重复发言来搞乱这些偏好。

而是使用aria-labelledby将行标题和列标题与每个复选框相关联，如下所示：

<table>
    <tr>
        <th scope="col" width="40%">Events</th>
        <th id="a1" scope="col" align="left">Action 1</th>
        <th id="a2" scope="col" align="left">Action 2</th>
        <th id="a3" scope="col" align="left">Action 3</th>
    </tr>
    <tr>
    <th id="sa" scope="row">Select All</th>
    <td><input type="checkbox" name="Action11" id="Action11" aria-labelledby="sa a1" /></td>
    <td><input type="checkbox" name="Action12" id="Action12" aria-labelledby="sa a2" /></td>
    <td><input type="checkbox" name="Action13" id="Action13" aria-labelledby="sa a3" /></td>
    </tr>
    <tr>
        <th id="e1" scope="row">Event 1</th>
        <td><input type="checkbox" name="Action21" id="action21" aria-labelledby="e1 a1" /></td>
        <td><input type="checkbox" name="Action22" id="action22" aria-labelledby="e1 a2"  /></td>
        <td><input type="checkbox" name="Action23" id="Action23" aria-labelledby="e1 a3"  /></td>
    </tr>
    <tr>
        <th id="e2" scope="row">Event 2</th>
        <td><input type="checkbox" name="Action31" id="action31" aria-labelledby="e2 a1" /></td>
        <td><input type="checkbox" name="Action32" id="action32" aria-labelledby="e2 a2"  /></td>
        <td><input type="checkbox" name="Action33" id="Action33" aria-labelledby="e2 a3"  /></td>
    </tr>
</table>

Answer 2

如果我删除表格标题 - 是否会违反WCAG合规性？

如果您认为自己没有显示表格数据并使用table标记进行布局，WCAG允许您对布局表使用table标记..（as long as it can be linearized）

恕我直言，你所展示的是一个包含3个动作的事件列表。您可能会认为它不是数据table。

在你的情况下，问题是，我没有看到如何通过删除表格标题和没有视觉label的复选框，你可以帮助没有屏幕阅读器的人知道复选框的意图。 aria-label对于不使用屏幕阅读器的人没用。 WCAG需要视觉说明。

为清晰起见编辑：

WCAG主要关注数据表（需要标题），但不禁止布局表（禁止标题）。这里的所有问题都是要了解您的表是否真的是数据表或布局表。

例如，在这里，您可以使用ul列表：

Events
<ul>
  <li>Event 1
    <input type="checkbox" title="Action1" aria-label="Action1" />
    <input type="checkbox" title="Action2" aria-label="Action2" />
    <input type="checkbox" title="Action3" aria-label="Action3" />
  </li>
  <li>Event 2
    <input type="checkbox" title="Action1" aria-label="Action1" />
    <input type="checkbox" title="Action2" aria-label="Action2" />
    <input type="checkbox" title="Action3" aria-label="Action3" />
  </li>
</ul>

这使我认为您的表格不是数据表，并且您只使用table标记进行垂直对齐设计。

这是非常概念性的

编辑2：ul vs td的替代使用（这只是为了说明你并没有真正使用数据表）并没有解决可见标签的问题（同样，奇怪的是，这不是WCAG的要求。

我的观点是复选框旁边的可见标签是最好的。如果不能，您有两种选择：

依靠javascript在字段聚焦时显示title属性
在每个复选框旁边使用小图标（使用可用于标记字段的正确替代文字）

Answer 3

我同意亚当。此表似乎用于布局而不是用于显示结构化表格数据。

布局表没有问题，但你不应该使用表格标题＆lt; th＆gt;元素（使用＆lt; td＆gt;代替），并删除所有的aria标记，以避免混淆屏幕阅读器用户。使用标准HTML表单标签而不是aria-labelledby属性。

无论任何自动化测试工具可能告诉您什么，放置额外的数据表标记（即表头，aria标记）实际上会导致不易访问。

如果您有兴趣了解有关此主题的更多信息，WebAIM对布局表与数据表有很好的解释。

http://webaim.org/techniques/tables/data

如果我提供＆＃39; aria-label＆＃39;到细胞元素？

3 个答案: