widget role

`role="grid"`

A table you can move through cell by cell with the keyboard.

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

Use grid when a reader has to move around a table with the keyboard cell by cell, the way a spreadsheet works. If people are only reading the data, use table instead. A grid signs you up for two-dimensional arrow-key navigation and a single stop in the tab order, and neither of those arrives with the role.

The HTML element behind role="grid"

A table element gives you role="table" for free, headers and all. The grid role is for the interactive case only, and a data table that nobody edits does not need it.

What role="grid" obliges you to do

It has to contain row, and those can sit inside rowgroup rather than being direct children. Inheritance does not substitute, so a subclass of a required child does not satisfy it. An empty one describes a structure that is not there, and if it renders empty and fills in later, ARIA puts a must on marking the container aria-busy while it waits. When the markup genuinely cannot nest them, aria-owns claims them from elsewhere in the document, and it is a last resort, because the browser has to rebuild the tree from your references and a stale one leaves the role describing children that have moved.
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 will not become the name here, so it has to come from aria-labelledby or aria-label.

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

Inherits from, in no single line: composite, table, widget, section, roletype, structure
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.
More specific roles below it: treegrid
States and properties it supports: aria-multiselectable, aria-readonly

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

How a checker tests role="grid"

Getting this one wrong is easy to assume is a 4.1.2 Name, Role, Value problem, and mostly it is not. A role in the wrong container, or a container holding the wrong children, is tested against 1.3.1 Info and Relationships, which is Level A. 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.
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