1

We are working on a multi-step survey flow that involves both single select radio options and multi-select checkbox options. We want to make sure it is easy to use for Keyboard users and have been looking at the W3 documentation.

Following the W3 guidelines, for a radio form you arrow through the options but for a checkbox form you tab through the options.

Why is the standard approach is to navigate and select these differently on a Keyboard?

--

References below

https://www.w3.org/TR/2017/WD-wai-aria-practices-1.1-20170628/examples/radio/radio-1/radio-1.html

https://www.w3.org/TR/wai-aria-practices/examples/checkbox/checkbox-1/checkbox-1.html

Improve this question

1 Answer 1

Reset to default
1

The interaction is based on a model where tab moves between form elements and a radio group is a single "element".

A checkbox is clearly a single element that comprises one choice, while a group of radio buttons is treated like a single element because they all work together to form a similar choice. Tab moves you between each as they represent a specific piece of data requested by the form.

Note that this model doesn't account for groups of checkboxes offering related, multi-select choices. In this sense it can feel like "choose one" and "choose many" have very different keyboard patterns. This isn't a new problem, and one hopes keyboard users are used to it since it should be the same on most forms. Any solution you might want to try would risk running against muscle memory trained on other systems and actually slow users down.

If keyboard use is a core use case for your system, I would recommend putting sample forms in front of some users to see how they fill things out. If keyboard use isn't that common, I would recommend sticking with established conventions to prevent users from needing to learn new rules that don't transfer.

If interaction consistency is a concern for your use case, you might consider a listbox which can be configured for single- or multi-select and has similar keyboard interactions for both. However, multi-select boxes like this are not that common (compared to checkboxes) so there may still be a learning curve.

Improve this answer
3
  • 1
    +1, but keep in mind that a radio group sometimes acts weird if no radio buttons are selected, in some browsers. For example, firefox lets you TAB to each radio button individually until one of the buttons is select, and then it acts like one tab stop. That's a goofiness of firefox and in no way diminishes this answer, but something to keep in mind. But I agree that a radio group is one tab stop so arrowing between choices makes sense whereas each checkbox is its own tab stop.
    – slugolicious
    Commented Nov 11, 2021 at 22:27
  • Thanks for the context Nathan. In our case we have about half of users on mobile and assume on desktop that keyboard use isn't a large part of the remaining audience. Agree with your recommendation to stick with established conventions for the smaller audience.
    – Rohrski
    Commented Nov 16, 2021 at 16:57
  • @slugolicious Thanks for bringing that up. We added the ability to either enter or use spacebar to select the "unselected" initial radio...similar to the W3 example.
    – Rohrski
    Commented Nov 16, 2021 at 16:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.