angularjs - 如何使具有可选行的表可访问

Question

我有一个 Web 应用程序，其 View 呈现项目列表，其中用户打算通过每行开头的复选框选择多行，然后随后对这些行调用操作。我的问题是:使它易于访问的最佳做法是什么？我的初稿 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>   

(我决定使用表格，尽管除了复选框之外只有一列，因为我还需要相同信息的多列“表格” View 。这不是我主要关心的问题)。

当我对此运行可访问性检查工具时，它提示复选框没有标签。但我觉得给它添加一个人工标签(例如行号)并不明智。也许我应该使用行范围来使复选框成为该行的一个吗？

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>