如何使我的点击可以通过键盘选项卡

我有这个链接，看起来更像是一个按钮 - 但每当我通过键盘测试我的标签导航时 - 此链接永远不会，用户也无法使用它。如何使我的点击可以通过键盘选项卡

我该如何使它符合ADA标准并使用aria通过键盘访问？

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

2017-10-19 bluePearl

没有HREF就无法集中;改用''按钮。 –

@GregMcMullen - 工作！ – bluePearl

@GregMcMullen这就是为什么我们有“tabindex”属性。值“0”根据它在DOM中的位置给它一个逻辑标签顺序。无需切换到按钮。 – Tom

您必须添加tabindex属性。

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

值0给它基于DOM元素的顺序上的自然标签索引。

2017-10-19 19:19:11 Tom

有没有在任何地方使用tabindex的垮台？我觉得如果我要做一个html更改，那么我将不得不确保tabindex计数是最新的。 – bluePearl

@bluePearl如果你使用值0，那么它只是简单地使它像它具有href属性那样可以聚焦。你没有指定订单 - 浏览器为你做这件事。所以不，没有倒台。这是如何完成的。如果您有兴趣，请查看我刚刚添加到我的答案中的其他文档以获取更多信息。 – Tom

当我尝试这个 - 当我使用tabindex = 0时，我无法导航或单击（输入）链接。它变得焦点但不工作。 – bluePearl

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

处理这个问题将是一个不存在的URL片段标识符添加到href属性，像这样的另一种方法：

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

2017-10-20 14:31:32 Josh

回答