v150 · HTML · Accessibility · demo

Radio Group

A classic ARIA radio group — where focusgroup="radiogroup block nomemory" replaces the hand-rolled roving-tabindex pattern. Tab enters the group, ↑ ↓ move focus, Space or Enter confirms the selection, and Tab exits. The right panel shows the traditional JavaScript approach for comparison.

Chrome 150+ — focusgroup attribute required. In older browsers the keyboard navigation falls back to standard Tab; the ↑↓ behaviour is the new capability.

Tab to either group · ↑ ↓ to move · Tab to exit · Space or Enter to confirm selection

focusgroup="radiogroup block nomemory" ~0 JS lines

Preferred notification
Selected: Email digest

Traditional roving tabindex ~35 JS lines

Preferred notification
Selected: Email digest
<!-- focusgroup replaces ~35 lines of roving-tabindex boilerplate -->

<div role="radiogroup" focusgroup="radiogroup block nomemory">
  <button role="radio" aria-checked="true" focusgroupstart>Email</button>
  <button role="radio" aria-checked="false">Push</button>
  <button role="radio" aria-checked="false">SMS</button>
</div>

<!-- vs. the traditional pattern: -->

<div role="radiogroup" onkeydown="rovingKeydown(event)">
  <button role="radio" tabindex="0" aria-checked="true">Email</button>
  <button role="radio" tabindex="-1" aria-checked="false">Push</button>
  <button role="radio" tabindex="-1" aria-checked="false">SMS</button>
</div>

<!-- Plus ~35 lines of rovingKeydown() handling ArrowUp/Down/Left/Right,
     tabindex updates, wrapping, and edge cases -->

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗