在 NVDA 中，当使用 aria-label/aria-labelled 时，按钮在按内部图标中的 Enter/空格键时获得焦点

Question

重现问题的步骤：

打开链接：https://nvda-test.w3spaces.com/button-accessibility-label.html 两个按钮：此页面包含两个按钮，每个按钮内部都有一个可聚焦的图标。 ARIA 属性：第一个按钮具有 aria-label 属性或 aria-labelledby 属性，而第二个按钮则没有。 NVDA 行为：使用 NVDA 等屏幕阅读器时，将图标聚焦在第一个按钮（带有 aria-label 或 aria-labelledby 的按钮）内并按 Enter 或 Space 将使焦点返回到按钮本身。使用第二个按钮（没有 ARIA 属性）不会出现此问题。 项目用例：

在我的项目中，我有一个内部带有关闭图标的按钮。理想情况下，聚焦关闭图标并按 Enter/空格键应该会从页面中删除该按钮。在没有 NVDA 的情况下，这可以按预期工作，但在启用 NVDA 时会出现上述问题。虽然从按钮中删除 aria-labelledby 属性可以解决此问题，但对于其他可访问性问题来说这是必要的，因此无法删除。

我想防止在按按钮内图标上的 Enter/Space 时焦点返回到按钮，同时仍保留按钮上的 aria-label 或 aria-labelledby 属性以实现可访问性。

Answer 1

该问题与 ARIA 无关，也不是 NVDA 特有的。无论按钮上是否有标签，《大白鲨》也会发生这种情况。

如果我们查看您的代码：

<button class="w3-btn w3-orange w3-xlarge" aria-label="home">Button<i tabindex="0" class="w3-margin-left fa fa-home"></i></button>

事实上你有一个嵌套焦点问题。 该按钮自然是可聚焦的，通过在

<i>

元素上添加 tabindex=0，您可以在按钮内创建第二个可聚焦元素。 如果您使用 Tab 浏览页面，您会发现有两个 Tab 停止位：一个用于按钮，另一个专门用于您的图标。

这是一个可访问性反模式，甚至可能是一个 UI 设计反模式。必须不惜一切代价避免这种情况。它提出了几个问题：

• 图标的可访问名称是什么？
• 当在图标上单击/按 Enter 键时，是否也应该在按钮上触发单击？
• 当焦点在图标上时，焦点是否也同时在按钮上？

这远远超出了屏幕阅读器的可访问性。

对于最后两个问题，答案也可以是是或否，而不是您所期望的。在所有情况下都很难控制，所以最好避免。

对于第一个问题，每个可聚焦元素都必须有自己的可访问名称，足够清晰且可与其他元素区分开来，以便屏幕阅读器用户准确地知道该元素的用途/用途。 在您的代码中，图标本身没有可访问的名称。因此，屏幕阅读器不太清楚在盲文显示器上要说什么/显示什么，这是未定义的行为。大多数（如果不是全部）屏幕阅读器都会尝试查找元素之外的一些文本，并最终采用与按钮相同的可访问名称。这会造成混乱，因为同一件事似乎出现了两次。

解决方案通常非常简单：从

<i>

中删除 tabindex=0，问题就消失了。

但是，如果单击图标触发了单击按钮之外的其他操作，则您应该：

• 更改代码以将图标放在按钮之外
• 保持tabindex=0
• 在图标上放置适当的可访问名称
• 还可以考虑将图标放在视觉上的图标之外，或者以其他方式设计 UI，因为无论如何你都会遇到鼠标或触摸屏的嵌套点击问题