<a role="button">而非<button>

Question

我使用NVDA程序来测试我的网站，并使网站可供所有人访问。最近我在MDN Web文档中看到了一个属性，可以让我使用a代替button，这个属性是role="button"。

MDN和Bootstrap 4文档指出：

这些链接应该被赋予role="button"的角色，以适当地向屏幕阅读器等辅助技术传达它们的用途。

<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 Docs

- Johnson

---

根据https://www.deque.com/blog/accessible-aria-buttons/的说法，非按钮标签“按钮”在被点击时也需要触发e.preventDefault() JavaScript代码。也许NVDA足够聪明，可以检测到缺少这个代码，因此这些链接仍然被视为链接？ - JasonB

在这种情况下，使用按钮并使用CSS样式进行美化比尝试将链接强行转化为按钮更好。使用链接会导致键盘的错误行为（按钮应该可以通过空格键来按压，而链接无法实现此功能），当你在链接上悬停时还会显示虚拟URL，并且如果你右键点击它们，也会显示与链接相关的选项（例如“在新标签页中打开”）。 - BrendanMcK

Answer 1

我尝试使用NVDA，并按下B键（在网站中查找按钮的快捷方式），它只找到带有tag的按钮。 什么是被用作role="button"的作用？正确的方式是什么？

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

您应该使用原生的元素。

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

第一条规则：

如果您可以使用具有所需语义和行为的本机HTML元素或属性（已经内置）来代替重新分配元素并添加ARIA角色、状态或属性以使其可访问，那么请这样做。

第二条规则：

除非确实必须这样做，否则不要更改本机语义。

- Adam

---

问题~如果我使用的是'a href'，它应该作为一个'button'，但并不包括任何按钮HTML，那么添加'role="button"'是否是个好习惯呢？例如，<a href="#" class="class-name" role="button">我是一个按钮链接</a>。 - Kameron

Answer 2

<a> 标签应该用于链接。 你应该使用 <div>、<span>、<button> 或者 <input type="button">、<input type="submit"> 或者 <input type="reset"> 作为按钮。

参考资料：https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role

- user19643992