Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

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?

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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

>Solution :

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.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading