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

user_9296982 0
Viewed 88

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>
);

enter image description here enter image description here

wcag wcag2.0 reactjs accessibility button
1 Answers

No, you don't need onKeyDown since you're using a native <button>. A button will drive the onClick() 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=0 since <button>s are natively keyboard focusable.

And you don't need role=button since that's the default role for a native <button>.

I would also get rid of aria-pressed since you're using aria-expanded. As long as you toggle the value of aria-expanded between "true" and "false", that's all you need.

user_767140
Related