我是否需要将``onkeydown''添加到`button''以符合可访问性？ （WCAG 2.0）
我有一个按钮，比单击时会展开一张带有更多信息的卡，
我需要将onkeydown添加到按钮以符合访问性吗？
还是因为元素已经是按钮，所以这是多余的？
我缺少其他符合WCAG 2.0的东西？
这是我带有react
const ariaPressed = checked ? "true" : "false";
return (
<button
tabIndex={0}
role="button"
component="button"
aria-pressed={ariaPressed}
aria-expanded={ariaPressed}
onClick={toggleChecked}
>
{checked ? "Hide Versions" : "View Versions"}
</button>
);
I have a button than when clicked will expand a card with more information
Do I need to add onKeyDown to button for accessibility compliance?
Or is that redundant because the element is already a button?
I am missing something else to comply with WCAG 2.0?
Here is my collapsible button code with react
const ariaPressed = checked ? "true" : "false";
return (
<button
tabIndex={0}
role="button"
component="button"
aria-pressed={ariaPressed}
aria-expanded={ariaPressed}
onClick={toggleChecked}
>
{checked ? "Hide Versions" : "View Versions"}
</button>
);
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
不，您不需要
onkeydown，因为您使用的是本机＆lt; button＆gt;。一个按钮将驱动onclick（）无论您单击鼠标，按 Enter 或 space 带键盘，还是在移动设备上点击。附带说明，您也不需要
tabindex = 0，因为＆lt; button＆gt;s本地键盘可集中。而且您不需要
roun = button，因为这是本机＆lt; button＆gt;的默认角色。由于您正在使用
ARIA扩展，因此我还会摆脱ARIA-PARDESS。只要您在“ true”和“ false”之间切换ARIA扩展的值，这就是您所需要的。No, you don't need
onKeyDownsince you're using a native<button>. A button will drive theonClick()whether you click with a mouse, press ENTER or SPACE with the keyboard, or tap on a mobile device.As a side note, you also don't need
tabindex=0since<button>s are natively keyboard focusable.And you don't need
role=buttonsince that's the default role for a native<button>.I would also get rid of
aria-pressedsince you're usingaria-expanded. As long as you toggle the value ofaria-expandedbetween "true" and "false", that's all you need.