我是否需要将 `onKeyDown` 添加到 `button` 以符合可访问性要求？ (WCAG 2.0)

Question

我有一个按钮，点击后会展开一张包含更多信息的卡片

是否需要将 onKeyDown 添加到 button 以符合可访问性要求？

或者因为该元素已经是 button，所以这是多余的？

我还遗漏了其他要遵守的内容 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>
);

Answer 1

不，您不需要 onKeyDown，因为您使用的是本机 <button>。按钮将驱动 onClick()，无论您是用鼠标单击，还是用键盘按 ENTER 或 SPACE，或者点击移动设备。

附带说明一下，您也不需要 tabindex=0，因为 <button> 本身是键盘可聚焦的。

而且您不需要 role=button，因为这是本地人的默认角色 <button>。

我也会去掉 aria-pressed，因为你使用的是 aria-expanded。只要在“true”和“false”之间切换 aria-expanded 的值，就可以了。

我是否需要将 `onKeyDown` 添加到 `button` 以符合可访问性要求？ (WCAG 2.0)

Do I need to add `onKeyDown` to `button` for accessibility compliance? (WCAG 2.0)

reactjs

button

accessibility

wcag

wcag2.0