Web Accessibility Initiative (WAI)

ARIA Role

Use ARIA-role shorthand notation to assign roles to phrases to make them accessible to people with disabilities.

Syntax

ARIA role shorthand assigns a "role" attribute to a phrase. The syntax is a plus-sign + immediately followed by one of the WAI-defined accessibility roles. See the bottom of this page of a complete list.

Each phrase may have only one ARIA-role attribute.

semantax +role Textual composition
ARIA role shorthand notation

Shorthand attributes should be placed between a phrase's semantax and its textual composition. Shorthand attributes may optionally be preceded by one or more spaces. At least one space must be used after the last shorthand attribute, before the beginning of the textual composition.

A phrase may have any combination of shorthand attributes (#, ., *, ^, `, +, ? ) and they may specified in any order.

Examples

Here is what ARIA role attributes look like within the body of a manuscript.

menu +menubar {
li Home
li Products {
ul +treeitem {
li Apps
li Tools
}
}
li Services {
ul +treeitem {
li Consulting
li Education
}
}
li Contact
}
Identifier shorthand examples

WAI-ARIA Roles

Widget roles

  • alert
  • alertdialog
  • button
  • checkbox
  • gridcell
  • log
  • marquee
  • menuitemcheckbox
  • menuitemradio
  • option
  • progressbar
  • radio
  • scrollbar
  • slider
  • spinbutton
  • status
  • tab
  • tabpanel
  • textbox
  • timer
  • tooltip
  • treeitem
  • combobox
  • grid
  • listbox
  • menubar
  • radiogroup
  • tablist
  • tree
  • treegrid

Document structure roles

  • columnheader
  • definition
  • directory
  • document
  • group
  • heading
  • list
  • listitem
  • note
  • presentation
  • region
  • row
  • rowgroup
  • rowheader
  • separator
  • toolbar

Landmark roles

  • application
  • banner
  • complementary
  • contentinfo
  • form
  • main
  • navigation
  • search

syntax > shorthand > aria-roleWeb Accessibility Initiative (WAI)

🔎