何时以及何时不使用 role="button"

Question

在可访问性方面，有人可以向我描述屏幕阅读器和键盘用户的 <button> 和 <a> 之间的区别吗？据我所知，键盘用户可以使用ENTER 和SPACE 来激活按钮，而只有ENTER 用于锚标记。在单页应用程序中，我觉得这些元素的角色有些混淆，我不确定两者之间的界线在哪里。

看起来像链接的按钮

在我的应用程序中，我有一个通用的链接样式，它的类名就是.link。

在第一个示例中，我有一个带有 onclick 处理程序的按钮，该处理程序在同一页面上执行操作，因此我为它使用了一个按钮元素。然而，它在风格上看起来像一个链接。

<button class="link" onclick={(e) => console.log('Do the thing')}>This is a link</button>

如果角色互换并且链接的行为类似于传统的锚点，其中路由会因点击而改变，我会这样做：

<a class="link" href="/route/change">This is a link</a>

尽管由于应用了类，这两个 看起来 相同，但锚标记示例是否应该应用 role="button" 使其行为像按钮，即使它的样式像链接？对于在整个应用程序中具有可访问性需求的用户来说，保持这些样式元素之间的一致性更好，还是更好地根据元素的应用程序交换哪个角色应用到它，而不管它的样式如何。

两个相邻的“按钮”

跟进第一个问题。如果<a> 标记的定义是将您移动到不同的页面/锚点，那么执行不同任务的两个并排按钮是否都应该被视为按钮。

以以下示例为例，确认按钮在同一页面上执行操作，而取消按钮将您引导回上一页。

代码如下所示：

<button onclick={() => console.log('do a thing'}>Confirm</button>
<a href="/home">Cancel</a>

MDN 中的role="button" 的定义如下：

按钮角色应该用于触发 用户激活时的响应。添加 role="button" 将使 元素显示为屏幕阅读器的按钮控件。这个角色可以 与 aria-pressed 属性结合使用以创建 切换按钮。

是否应该取消按钮应用按钮角色，即使它在技术上不符合角色定义的方式？

结束

是否有关于何时应该使用和不应该使用这些角色的更简洁的指南？如果将role="button" 与<button> 元素互换使用，那么将role="button" 应用于使用相同样式的任何/所有链接是否有任何危害？或者锚标签和角色不应该混合，无论它们在风格上看起来是否像另一种元素类型？

感谢您的阅读。我正在尝试认真对待可访问性，但似乎找不到围绕此场景用例的任何清晰简洁的规范。

Answer 1

每当我收到按钮与链接的问题时，我都会问自己，是脚本功能还是导航（内部或外部）？

• 按钮可激活网页上的脚本功能（对话框、展开/折叠 - 区域）。
• 链接会将您带到另一个位置，可以是不同的页面，也可以是同一页面上的不同位置。

来到 a11y

角色告诉屏幕阅读器和其他辅助技术一个元素的语义类别，即它是什么类型。每个元素都已经具有某种默认角色。 <button> 元素有一个隐含的 role="button"，<img> 元素有一个隐含的 role="img" 等等。

role="按钮"

• 如果您使用<button>，请不要添加角色（这是隐含的）

• <div role="button"> -（添加角色不会导致浏览器提供键盘行为或样式）。尝试使用真正的<button> 如果这对样式目的有问题，您可以使用 role="button"。请务必添加 tabindex="0" 使其键盘可聚焦，并确保它与 Enter 键和空格键一起使用，确保它具有正确的禁用、悬停、聚焦状态，使用媒体查询以高对比度工作。

• 不要使用<a role="button">：它没有任何意义，它会给你一个像<div>一样的块元素，你可以设置样式，记住这个问题，它是一个脚本功能使用 <button> 或 <div role="button"> ，如果是导航使用 <a> 没有任何角色（按您的方式设置样式）

另外，<a> 不能被禁用，<buttons> 可以。

屏幕阅读器具有读取所有链接的快捷方式，例如 NVDA 用户可以按下

• K - 跳转到下一个链接
• INS + F7 它列出了所有链接、标题
• U未访问的链接快捷键
• V访问链接快捷键

我还想我是否希望屏幕阅读器用户在按下ins + f7 时听到此链接？

编辑：我没有提到将角色分配给元素会覆盖其本机角色。所以<a role="button" 不再是role="link" 并且不会出现在INS + f7 列表中，因为它会被无障碍API 视为一个按钮

Answer 2

在这种特殊情况下，我会建议在链接上使用role='button'，因为它是用户在这种情况下的两个选择之一，并且这两个选择应该以相同的形式出现（即作为两个按钮），也适用于听到屏幕阅读器正在阅读它的用户。

我只是想知道为什么您首先使用取消选项的链接，而不是立即使用按钮...

Answer 3

解决方法很简单：“如果不是链接，就是按钮”

• 链接应该将您带到其他地方：另一个页面，页面中的另一个锚点。

• 链接不提交表单，不执行任何操作。

在您的示例中，“确认”和“取消”是操作：您提交同意或明确表明您希望取消操作。他们应该具有 ARIA button 角色。

这与“继续”和“返回上一页”页面不同，后者应具有link 角色。