role="scrollbar"

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

Use scrollbar only for a scrollbar you built yourself, and expect to need it rarely. It has to name the area it scrolls with aria-controls and publish its position with aria-valuenow, because a scrollbar that reports neither is a slider pointing at nothing.

The HTML element behind role="scrollbar"

Browsers do not expose their own scrollbars as content, so there is no element to reach for here. That is the honest reason this role exists, and also the reason custom scroll implementations are worth avoiding.

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="scrollbar" 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.

States and properties it supports

aria-disabled, aria-orientation, aria-valuemax, aria-valuemin

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

How a checker tests role="scrollbar"

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.

• Element with role attribute has required states and properties
• 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.
• 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.
• 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.