何时以及何时不使用role =“ button”

詹姆斯·艾夫斯

在可访问性方面，有人可以向我描述屏幕阅读器和键盘用户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属性结合使用以创建切换按钮。

Should the cancel button have the button role applied even though it's technically not behaving in the way of the roles definition?

Closing

Is there more concise guidelines on when these roles should and should not be used? Is there any harm in applying role="button" to any/all links that use the same styling if they are used interchangeably with the <button> element? Or should anchor tags and roles never mix, regardless if they stylistically look like another element type?

I appreciate you for reading. I'm attempting to take accessibility seriously but can't seem to find any clear and concise specifications surrounding use cases for this scenario.

Sengupta Amit

Whenever i get this question of Buttons vs link I ask myself, is it scripted functionality or a is it Navigation(internal or external)?

Buttons activate scripted functionality on a web page (dialogs, expand/collapse - regions).
Links take you to another location, either to a different page or different location on the same page.

Coming to a11y

Role tells screen readers and other assitive technology the semantic category of an element, meaning the type of thing that it is. Every element already has a default role of some kind. The <button> element has an implied role="button", and the <img> element has an implied role="img" and so on.

role="button"

if you use <button> don't add role (it's implicit)
<div role="button"> - (Adding roles do not cause browsers to provide keyboard behaviors or styling). Try to use real <button> If that’s problematic for styling purposes, you can use role="button". Be sure to add tabindex="0" to make it keyboard focusable, and ensure it works with both the Enter key and Spacebar, ensure it has proper disabled, hover, focus state, works in high contrast using media query.
Don't use <a role="button"> : it doesn't make sense in any way, it'll give you a block element just like <div> which you can style anyway, remember the question, it is a scripted functionality use <button> or <div role="button"> , if it is a navigation use <a> without any role (style it the way you want)

Also, <a> cannot be disabled, <buttons> can be.

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

K -跳至下一个链接
INS + F7 它列出了所有链接，标题
U 未访问的链接快捷键
V 已访问链接快速键

我还考虑是否要让屏幕阅读器用户按下时听到此链接ins + f7？

编辑：我错过了提及为元素分配角色而不是其本机角色的内容。因此<a role="button"不再存在role="link"，也不会出现在INS + f7列表中，因为可访问性API将其视为按钮

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2021-01-20

我来说两句

0 条评论

登录后参与评论

上一篇：R或Python中是否有功能/工作流程来绘制每个位置的字符以进行单词比较？

TOP 榜单

文章