<a role="button">而不是<button>

Question

我使用NVDA程序测试我的网站,并让所有人都可以访问网站.最近我在MDN Web docs上看到了一个允许我使用a而不是使用的属性button.是的role="button".

MDN和Bootstrap 4 Doc说:

这些链接应该被赋予一个角色="按钮",以适当地将其目的传达给屏幕阅读器等辅助技术.

<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角色,状态或属性以使其可访问,那么请执行此操作.

第二条规则:

除非你真的需要,否则不要改变原生语义.