我使用程序 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和 MDN Docs
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 角色的浏览器支持和行为可能因浏览器/屏幕阅读器组合而异。
您应该使用 native <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.