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

【问题标题】：<a role="button"> instead of <button><a role="button"> 而不是 <button>
【发布时间】：2023-03-27 18:28:01
【问题描述】：

我使用 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

【问题讨论】：

根据deque.com/blog/accessible-aria-buttons的说法，非按钮标签“按钮”在点击时也需要触发e.preventDefault() javascript代码。也许 NVDA 足够聪明，可以检测到缺少此代码，因此这些链接仍被视为链接？
您通常最好使用 BUTTON 并使用 CSS 对其进行样式设置，而不是在此处尝试将链接插入按钮行为。使用链接会产生不正确的键盘行为（按钮应该可以使用空格按下，链接不会这样做），当您将鼠标悬停在链接上时，链接也会显示一个虚拟 URL，并显示与链接相关的选项（例如，“打开方式”新选项卡'），如果你右键单击它们。

标签： html accessibility htmlbutton

【解决方案1】：

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

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

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

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

第一条规则：

如果您可以使用具有您需要的语义和行为的原生 HTML 元素或属性已经内置，而不是重新利用元素并添加 ARIA 角色、州或财产使其可访问，然后这样做。

第二条规则：

不要改变原生语义，除非你真的必须这样做。

【讨论】：

问题〜所以如果我使用a href 假设充当button 但不包含任何按钮HTML，添加role="button" 是一种好习惯吗？例如，<a href="#" class="class-name" role="button">I'm a button link</a>