role="progressbar"

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

Use progressbar to show how far something has got. It is read-only, so nobody operates it. Publish aria-valuenow as it moves, and if the task has no measurable end, leave the value off and the bar reads as indeterminate rather than stuck at zero.

The HTML element behind role="progressbar"

The progress element is a progressbar, and it handles the value and the indeterminate state itself.

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

Inherits from, in no single line

range, widget, structure, roletype

The name can come from

aria-labelledby or aria-label. Its own text does not become the name, so text inside it will not be read as one.

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

How a checker tests role="progressbar"

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.

• Element with presentational children has no focusable content
• Role attribute has valid value

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.
• 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.