widget role

`role="button"`

A button does something when you activate it. If it goes to a URL instead, that is a link.

What role="button" means, and when to use it

Use button when activating the thing does something on the page you are already on. Submitting, opening, toggling, deleting. If it takes the reader somewhere else, it is a link, and the difference matters because screen reader users pull up a list of links expecting to travel.

The HTML element behind role="button"

The button element is a button already, and it brings what the role cannot. Keyboard focus, activation on Enter and Space, and form submission. Reach for it first, and if you must use the role on something else, you are signing up to add tabindex and the key handling yourself.

What role="button" obliges you to do

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="button" sits in the model

Inherits from: command → widget → roletype
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-disabled, aria-haspopup, aria-expanded, aria-pressed

The normative definition stays with the W3C, so it cannot go stale here. button in the ARIA specification.

How a checker tests role="button"

Getting this one wrong is easy to assume is a 4.1.2 Name, Role, Value problem, and mostly it is not. 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

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.
radio One option in a set where only one can be chosen, and it belongs inside a radiogroup.
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