按钮不可访问且未聚焦在 Tab 键上

如何解决按钮不可访问且未聚焦在 Tab 键上

我有以下代码可以在多选下拉列表中显示按钮。我为每个

标签使用了 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 键访问，但其他两个按钮不可访问 - 全部清除并应用。

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

解决方法

你遗漏了一个非常明显的东西（我的意思是语义和可访问性）。
查看您的按钮并注意您所看到的内容。你看到按钮了吗？

正确答案：不。您看到的是段落（<p>，而不是<button>）。

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

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