Forms

Accessible radio groups: Examples and Testing

Published by whatisADA / Grow Wild Agency · Updated

What to build

Radio buttons let users choose one option within a named group. Give each option a unique value, use a shared group name and let selection stay in place until the user requests the next step.

A practical example

An audit planner asks which environment will be tested. “Public website” and “Signed-in application” remain distinct choices even if both happen to lead to a similar checklist.

Try the example

Use Tab and your keyboard controls, then compare the behavior with the checks below. This is an isolated learning example; test the complete pattern in your own product and assistive technology setup.

Delivery preference

How to check it

  1. Enter the group with Tab and change the choice with arrow keys and Space according to browser behavior.
  2. Verify one checked option, a useful group legend and activation through each label.
  3. Go forward with an explicit Next action, return and confirm that exactly the original option remains selected.

What can be missed

Auto-advancing after a radio change can remove focus before the user finishes choosing. Group identity and option identity must not depend on a score or array position that can collide.

Markup and state contract

This concise markup illustrates names, relationships or state. Custom controls also need the keyboard interaction and state updates described in the checks and primary source; this snippet is not a complete component.

<fieldset>
  <legend>Test environment</legend>
  <label><input type="radio" name="environment" value="public"> Public website</label>
  <label><input type="radio" name="environment" value="signed-in"> Signed-in application</label>
</fieldset>

Record your test

Use this worksheet to record what you actually checked. Notes stay on this device when you choose Save; they are not sent to us. Avoid personal or confidential information on shared devices.

These are your observations, not automated results or a conformance certificate. A complete evaluation needs appropriate scope, supported technologies, all applicable criteria and relevant page states.

Primary sources and scope

This is independent implementation guidance with original examples. The linked standard contains the full definitions, exceptions and conformance requirements. A criterion or checklist alone does not establish legal applicability or whole-site conformance.