0

I've got a custom checkbox that doesn't use an input at all, since styling it is more pain than it's worth. It relies on tabIndex={0}, role="checkbox" and aria-checked to be focusable and accessible.

To be checkable and uncheckable via keyboard events, the following is written (ReactJS):

        onKeyDown={(e) => {
          if (e.key === "Enter" || e.key === " ") {
            e.preventDefault();
            setChecked((prev) => !prev);
          }
        }}

Is it enough to simply react to enter and space, or screen readers expect something extra?

Sun
  • 299
  • 1
  • 8
  • Why is custom checkbox a pain? very simple, no javascript required... https://jsfiddle.net/9gkyfoe7/ – vanowm Jul 24 '21 at 11:37
  • 3
    @vanowm the example you linked is not accessible as you can't focus the checkboxes via keyboard. This is because the input is `display:none` when you should instead use a visually-hidden (screen reader only) class to hide them. – GrahamTheDev Jul 24 '21 at 12:38
  • @Sun there is a lot more to consider but key wise enter and space are expected. Can you focus the checkbox with a keyboard, does clicking the label check the checkbox, what is the accessible text and how are you providing that. Are you open to a simpler way of doing it? https://dev.to/inhuofficial/5-star-rating-system-actually-accessible-no-js-no-wai-aria-3idl is an article I wrote on radio buttons, the whole principle can be applied to a checkbox though and it really makes your life easier. If you want to add a fiddle to your question I can tell you if you missed anything. – GrahamTheDev Jul 24 '21 at 12:44
  • Also if you are open to a different pattern using semantic HTML similar to that in the article I linked I will drop you a fiddle in an answer that is for a checkbox rather than a radio input (as it is simpler!) and explain the logic of each decision etc. – GrahamTheDev Jul 24 '21 at 12:45
  • 1
    @GrahamRitchie there you go https://jsfiddle.net/9gkyfoe7/3/ – vanowm Jul 24 '21 at 12:55
  • Be sure you use a [proper screen reader only class](https://stackoverflow.com/a/62109988/2702894) as you would be amazed how many nuances there are to screen reader and browser combinations, but yes, much better. Still more to think about, your focus indicator needs improvement as it is low contrast and not thick enough and in "the real world" I would imagine you would not be using two emojis to say whether something is checked as that is very confusing, but I understand that is purely to demonstrate what you **can** do. – GrahamTheDev Jul 24 '21 at 13:03

0 Answers0