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

Question

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

MDN 和 Bootstrap 4 文档说：

these links should be given a role="button" to appropriately convey their purpose to assistive technologies such as screen readers.

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

Answer 1

I tried to use NVDA and I press B (a shortcut to find buttons in website), and the only button that it found is the button with tag. What role="button" is being used? What is the correct way?

ARIA 角色的浏览器支持和行为可能因 browser/screenreader 组合而异。

您应该使用原生 <button> 元素。

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

第一条规则：

If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.

第二条规则：

Do not change native semantics, unless you really have to.

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

<a role="button"> instead of <button>

html

accessibility

htmlbutton