role="slider"

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

Use slider for a value somebody sets by dragging or arrowing a handle along a range. It has to publish where the handle is, and if the number would mean nothing read aloud, aria-valuetext gives you a spoken version instead.

The HTML element behind role="slider"

An input of type range is a slider, with the keyboard stepping, the value reporting and the bounds already handled. A hand-built one has to do all three 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="slider" sits in the model

Inherits from, in no single line

input, 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-errormessage, aria-haspopup, aria-invalid, aria-orientation, aria-readonly, aria-valuemax, aria-valuemin

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

How a checker tests role="slider"

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