widget role
role="radio"
One option in a set where only one can be chosen, and it belongs inside a radiogroup.
What role="radio" means, and when to use it
Use radio for one option in a set where exactly one can be chosen. It only makes sense inside a radiogroup, because the group is what tells a reader how many options there are and that picking one clears whichever was chosen before.
The HTML element behind role="radio"
An input of type radio, with a shared name attribute, gives you the role, the checked state, the arrow-key behavior and the mutual exclusivity. Wrap the set in a fieldset with a legend and you have the group and its name too.
What role="radio" obliges you to do
- It has to carry
aria-checked. With no aria-checked, a user agent exposes the radio as unchecked, so the chosen option in the group announces as unchosen. A missing required attribute does not go quiet. It gets a fallback, and the fallback is a confident wrong answer. - It has to have an accessible name. ARIA marks this one of the 34 roles that require a name, so without one a screen reader announces the role and stops. Its own text can be that name, and usually should be, because a visible name is one a voice-control user can also say out loud.
- Everything inside it disappears. ARIA tells user agents not to expose the descendants of this role, so a link or a button nested inside one is gone from the accessibility tree while it is still in the tab order. That leaves a focusable thing a screen reader cannot name, which is the exact shape of broken this role model exists to prevent.
Widget roles say an element is a control somebody has to operate
A widget role tells assistive technology that an element is interactive and what kind of control it is. Buttons, checkboxes, sliders, tabs and menu items all live here.
Using one is a promise, and the keyboard is the half people underestimate. ARIA changes what gets announced and nothing else, so calling a div a checkbox does not make the space bar toggle it. You write that yourself. Eight of these roles carry a stricter duty again, because ARIA puts a must-level obligation on authors to manage focus inside grid, listbox, menu, menubar, radiogroup, tree, treegrid and tablist.
One role here has a measured failure rate. WebAIM found an ARIA menu on 5.7% of the top million home pages in 2026, and 22% of those menus introduced barriers, because the markup and the keyboard behavior a menu needs were never added.
Where role="radio" sits in the model
- The name can come from
- Its own text, which is usually the right answer, or aria-labelledby and aria-label when the visible words will not do.
- States and properties it supports
aria-posinset,aria-setsize
The normative definition stays with the W3C, so it cannot go stale here. radio in the ARIA specification.
How a checker tests role="radio"
Getting this one wrong is easy to assume is a 4.1.2 Name, Role, Value problem, and mostly it is not. A missing required state is first of all a WAI-ARIA conformance failure, and W3C notes that 4.1.2 is the looser test of the two, because a browser will often fall back on a value that passes it. Focusable content inside a role whose children are presentational is the one here that really does map straight at 4.1.2. These are the published test rules that apply.
The other widget roles
- button A button does something when you activate it. If it goes to a URL instead, that is a link.
- checkbox A control with two or three states that has to announce which one it is in.
- combobox An input that pops up a list to help you fill it, and has to say what it controls and whether that list is open.
- grid A table you can move through cell by cell with the keyboard.
- gridcell One cell in a grid.
- link A link goes somewhere. If it acts on the page you are already on, that is a button.
- listbox A list of options someone can move through and choose from.
- menu A list of commands, usually opened from a trigger, and built to be driven with arrow keys.
- menubar A menu that stays visible and lays its options out along a bar.
- menuitem One command inside a menu.
- menuitemcheckbox A menu item that toggles on and off like a checkbox.
- menuitemradio A menu item that is one option in a set where only one can be chosen.
- option One choice inside a listbox, which has to announce whether it is currently selected.
- progressbar Shows how far a task has got. It is read-only, not something to operate.
- radiogroup The container that turns a set of radios into a single choice rather than several separate ones.
- scrollbar A control that scrolls something, and has to say what it scrolls and where it currently sits.
- searchbox A text input meant for search queries.
- slider A control you set by moving a handle along a range.
- spinbutton A control for stepping a value up and down.
- switch A binary on-or-off control with no mixed state, usually taking effect the moment it is flipped.
- tab A label that reveals its panel, and it means nothing outside a tablist.
- tablist The container for a set of tabs, which has to actually contain tabs.
- tabpanel The panel a tab reveals.
- textbox A text input that takes free-form typing.
- tree A hierarchy whose branches open and close.
- treegrid A grid whose rows open and close, so it behaves as a table and a tree at once.
- treeitem One node in a tree.
All 94 ARIA roles · ARIA explained · How accessible names are computed · Scan your own pages