如何使带有 selecttable 行的 table 可访问

Question

我有一个 Web 应用程序，其视图呈现项目列表，其中用户打算 select 多行，通过每行开头的复选框，然后随后调用对这些行的操作。我的问题是：使它易于访问的最佳做法是什么？我的初稿 Html 看起来像这样（它使用 Angular.js 指令，但这与这里无关）。

       <table>
        <tbody>
            <tr ng-repeat="item in collection.items">
                <td class="checkbox">
                    <input type="checkbox">
                </td>
                <td tabindex="0">
                        {{item.title}}
                </td>
            </tr>
        </tbody>
    </table>

（我决定使用 table，尽管除了复选框之外只有一列，因为我还需要相同信息的多列 'table' 视图。这不是我主要关心的是这里）。

当我运行对此使用辅助功能检查工具时，它抱怨复选框没有标签。但我觉得给它添加一个人工标签（例如行号）并不明智。也许我应该使用行范围来使复选框成为该行的一个吗？

Answer 1

您可以为每个输入添加一个唯一的 ID 并为该输入创建一个标签。 $index 是重复元素 (0..length-1) 的 ng-repeat 迭代器偏移量。

<table>
    <tbody>
        <tr ng-repeat="item in collection.items">
            <td class="checkbox">
                <input type="checkbox" id="{{'item-' + $index }}">
            </td>
            <td>
                <label for="{{'item-' + $index}}">
                    {{item.title}}
                </label>
            </td>
        </tr>
    </tbody>
</table>

如何使带有 selecttable 行的 table 可访问

How to make a table with selectable rows accessible

html

accessibility

angularjs