Question

我有一个带有视图的Web应用程序，该视图通过每行开头的复选框呈现项目列表（用户打算选择多行），然后对这些行调用操作。我的问题是：使这个可访问的最佳做法是什么？我的第一个草稿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>

（我决定使用表格，尽管除了复选框之外只有一列，因为我还需要一个多列的表格来查看相同的信息。这不是我主要关心的问题这里）。

当我对此运行辅助功能检查工具时，它抱怨复选框没有标签。但是，添加人工标签（例如行号）对我来说并不明智。我是否应该使用行范围，以使复选框成为行？

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>

如何创建一个可选择行的表

1 个答案: