Question

I use the program NVDA to test my website and make a website accessible to all people. Recently I saw on MDN Web docs an attribute allowing me to use a instead of button. It is role="button".

MDN and Bootstrap 4 Doc says:

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>

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 <button> tag. What role="button" is being used? What is the correct way?

Ref: Bootstrap V4和MDN Docs

Answer 1

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

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

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

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

第一条规则：

如果可以使用本机HTML元素或属性以及已内置的语义和行为，而不是重新使用元素并添加ARIA角色，州或财产使其可以访问，然后这样做。

第二条规则：

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

<a role="button"> instead of </a> <按钮> <a role="button">

1 个答案: