按钮不可访问且未专注于 Tab 键

Posted 2023-05-08

【中文标题】按钮不可访问且未专注于 Tab 键

【英文标题】：Button is not accessible and not focused on tab key

【发布时间】：2021-05-25 06:57:40

【问题描述】：

我有以下代码在多选下拉菜单中显示按钮。我为每个

使用了 tabindex="0"

标签。还在css中添加了焦点。 html 代码：

<div class="form-group-multi__MultiControls">
<p tabindex="0" class="btn-tertiary--light">Cancel</p>
<p tabindex="0" class="btn-clear-all">Clear all</p>
<p tabindex="0" class="btn-secondary">Apply</p>
</div>

CSS 代码：

.btn-clear-all:focus 
  outline: -webkit-focus-ring-color auto 1px;
  outline: 1px solid black;
  

我的问题是 Tab 键上的“取消”按钮是可访问的，但不是其他两个 - 全部清除并应用。

如果我遗漏了什么，请提出建议。

【问题讨论】：

如果我运行您的代码 sn-p，我可以专注于所有链接

很确定查看您的 CSS “清除所有”是您会看到自定义焦点指示器的地方，而不是“取消”。除了您应该使用<button> 元素 来实现可访问性之外，因此您不必担心tabindex="0"，您需要将您的CSS 选择器更改为.btn-tertiary--light:focus, .btn-clear-all:focus, .btn-secondary:focus。此外，如果这是引导程序（它看起来是），那么您应该将 .btn 类也添加到每个按钮，这样您就可以简单地将其作为目标，而不是在您的 CSS class="btn btn-tertiary--light" 等允许您只做 .btn。

【参考方案1】：

您遗漏了一件非常明显的事情（我的意思是，对于语义和可访问性）。 查看您的按钮并注意您所看到的。你看到按钮了吗？

正确答案：不。你看到段落（<p>s，不是<button>s）。

有两种解决方案，一种最好，一种不太好：

最佳解决方案。将您的所有<p>s 更改为<button>s。您已经为它们应用了 Bootstrap 的 btn-secondary 类，所以我非常有信心您的样式不会受到任何影响。 将role="button" 添加到您的<p>s。同样，正如 ARIA 的第一条规则所说，如果您绝对没有使用 ARIA，则不得使用，这不是一个很好的解决方案。