html - 代替

Question

我使用 NVDA 程序来测试我的网站并使网站可供所有人访问。最近我在 MDN Web 文档上看到一个属性允许我使用a而不是button. 它是role="button"。

MDN 和 Bootstrap 4 文档说：

这些链接应该被赋予一个角色=“按钮”，以适当地将它们的目的传达给屏幕阅读器等辅助技术。

<a class="btn btn-primary" href="#"> Anchor without ROLE </a>
<a class="btn btn-primary" href="#" role="button"> Anchor with ROLE </a>
<button class="btn btn-primary" type="button"> Just a Button </button>

我尝试使用 NVDA 并按下B（在网站中查找按钮的快捷方式），它找到的唯一按钮是带有<button>标签的按钮。role="button"正在使用什么？正确的方法是什么？

参考：Bootstrap V4和MDN 文档

Answer 1

我尝试使用 NVDA，然后按 B（在网站中查找按钮的快捷方式），它找到的唯一按钮是带有标签的按钮。正在使用什么角色 =“按钮”？正确的方法是什么？

ARIA 角色的浏览器支持和行为可能因浏览器/屏幕阅读器组合而异。

您应该使用本机<button>元素。

记住 ARIA 的第一条和第二条规则：

第一条规则：

如果您可以使用具有所需语义和行为的原生 HTML 元素或属性，而不是重新利用元素并添加 ARIA 角色、状态或属性以使其可访问，那么就这样做。

第二条规则：

不要改变原生语义，除非你真的必须这样做。