何时以及何时不使用role =“ button”
Jam*_*ves 5 html accessibility
在可访问性方面，有人可以向我描述屏幕阅读器和键盘用户a <button>和a 之间的区别<a>吗？据我所知，键盘用户可以使用ENTER和SPACE激活按钮，而仅ENTER用于锚标记。在单页应用程序中，我感觉这些元素的角色有些混乱，我不确定这两者之间的界限在哪里。
看起来像链接的按钮
在我的应用程序中，我具有链接的通用样式，该类的名称为simple .link。
在第一个示例中，我有一个带有onclick处理程序的按钮，该按钮在同一页面上执行操作，因此我为其使用了button元素。但是在样式上看起来像一个链接。
<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>
role="button"来自MDN的定义如下：
按钮角色应用于当用户激活时触发响应的可单击元素。添加role =“ button”将使元素显示为屏幕阅读器的按钮控件。该角色可以与aria-pressed属性结合使用以创建切换按钮。
即使取消按钮在技术上不符合角色定义的方式，也应该应用按钮角色吗？
闭幕
关于何时应该使用这些角色以及何时不应该使用这些角色，是否有更简洁的指南？如果将role="button"任何/所有使用相同样式的链接与<button>元素互换使用，是否有任何危害？还是锚标记和角色永远不要混合使用，无论它们在样式上看起来是否类似于其他元素类型？
感谢您的阅读。我试图认真对待可访问性，但似乎找不到针对此场景的用例的任何清晰明了的规范。
每当我收到按钮与链接的这个问题时，我都会问自己，它是脚本功能还是导航（内部或外部）？
- 按钮激活网页上的脚本功能（对话框、展开/折叠 - 区域）。
- 链接将您带到另一个位置，可以是不同的页面，也可以是同一页面上的不同位置。
来到a11y
角色告诉屏幕阅读器和其他辅助技术元素的语义类别，意思是它的类型。每个元素都已经有某种默认角色。该<button>元件具有一个隐含的角色=“按钮”，并且<img>元件具有一个隐含的角色=“IMG”等。
角色=“按钮”
- 如果您使用
<button>不添加角色（这是隐式的） <div role="button">- （添加角色不会导致浏览器提供键盘行为或样式）。尝试使用 real<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？
编辑：我没有提到将角色分配给元素会覆盖其本机角色。so<a role="button"不再是一个role="link"，也不会出现在INS + f7列表中，因为它会被无障碍 API 视为一个按钮