How should keyboard navigation work in a group of radio buttons?

Question

Let's say we have a form with a few multiple choice questions, each with a "Yes" and “No" radio button option. Should tabbing be used to move from question to question, but not for the options within each question (use left and right or up and down cursors to select options)? Or, should the tab key be used to move from each option to each option (without skipping the “No” option in the example above)?

Answer

For groups of radio buttons, W3C recommends that the tab key (shift + tab when moving back) should move from question to question, and the arrow keys should move between the radio button options of the current question. So, the first pattern you described was correct.

The recommended keyboard pattern helps improve efficiency. When users can easily navigate from question to question, they can complete and review their responses more quickly. This time savings can really add up in forms or interfaces with multiple radio button groups, large radio button groups, or optional radio button groups.

For step-by-step recommendations for a variety of interactive widgets, including suggested keyboard interactions, explore the Guided Manual WCAG Audit Tool from Accessible Web.

Free Tools to Continue Learning

Accessible Web Company Logo

Accessible Web RAMP

Monitor your website and manage your progress towards WCAG conformance.

Accessible Web Company Logo

Accessible Web Academy

Career specific courses to help power up your accessibility knowledge.