如何通过键盘标签

Question

我有这个看起来更像按钮的链接 - 但每当我通过键盘测试我的标签导航时 - 这个链接永远不会它，用户也无法使用它。

如何使其符合ADA并使用Aria使其可通过键盘访问？

<div class="styles">
    <a class="btn btn-primary" (click)="handlingClick($event)" id="addUser">Add User</a>
</div>

Answer 1

您必须添加tabindex属性。

<a class="btn btn-primary" (click)="handlingClick($event)" id="addUser" tabindex="0">Add User</a>

值0根据DOM元素的顺序为其提供自然的选项卡索引。

Here is some additional documentation

Answer 2

锚点元素本身是可聚焦的。您的链接未获得焦点的原因是因为它没有href属性。

解决此问题的另一种方法是向href属性添加不存在的URL片段标识符，如下所示：

<div class="styles">
    <a class="btn btn-primary" href="#void" (click)="handlingClick($event)" id="addUser">Add User</a>
</div>