ARIA Cheat Sheet

40 of 40

• role="alert"

  Live Region — Announces dynamic content changes to screen readers immediately.

• role="alertdialog"

  Window — A modal dialog containing an alert message requiring user action.

• role="banner"

  Landmark — Site-wide header region — maps to <header> at page level.

• role="button"

  Widget — An input that allows users to trigger an action.

• role="checkbox"

  Widget — A checkable input that has three possible values: true, false, or mixed.

• role="complementary"

  Landmark — Supporting content complementary to main — maps to <aside>.

• role="contentinfo"

  Landmark — Footer of the page — maps to <footer> at page level.

• role="dialog"

  Window — A dialog box or window separate from the main page content.

• role="form"

  Landmark — A landmark region containing form controls — maps to <form> with accessible name.

• role="heading"

  Structure — A heading for a section. Use aria-level to specify h1–h6.

• role="img"

  Structure — An image or figure. Provide aria-label or aria-labelledby.

• role="link"

  Widget — An interactive reference to a resource — maps to <a href>.

• role="list"

  Structure — An ordered or unordered list — maps to <ul> or <ol>.

• role="listitem"

  Structure — A single item in a list — maps to <li>.

• role="main"

  Landmark — Primary content of the page — maps to <main>.

• role="menu"

  Widget — A list of choices the user can invoke. Use with menuitem children.

• role="menuitem"

  Widget — An option in a menu or menubar.

• role="navigation"

  Landmark — A landmark with navigation links — maps to <nav>.

• role="region"

  Landmark — A perceivable section with a label. Must have accessible name to be a landmark.

• role="search"

  Landmark — A landmark containing the search functionality of the site.

• role="status"

  Live Region — A live region with advisory information, less urgent than alert.

• role="tab"

  Widget — A tab in a tablist. Controls the visibility of an associated tabpanel.

• role="tablist"

  Widget — Container for a set of tab elements.

• role="tabpanel"

  Widget — Content area associated with a tab.

• role="tooltip"

  Widget — A popup that shows information on focus or hover.

• aria-label

  Property — Provides a string value that labels the current element when no visible label exists.

• aria-labelledby

  Property — References the id(s) of elements that label this element.

• aria-describedby

  Property — References element(s) that provide a description of this element.

• aria-hidden

  State — Hides element and its children from the accessibility tree. Use for decorative content.

• aria-expanded

  State — Indicates whether a collapsible element is expanded (true) or collapsed (false).

• aria-controls

  Property — References element(s) that this element controls.

• aria-haspopup

  Property — Indicates that activating this element will open a popup (menu, listbox, etc.).

• aria-live

  Property — Sets the politeness of live region updates: off, polite, or assertive.

• aria-atomic

  Property — When true, the entire live region is announced on any change, not just the changed part.

• aria-required

  Property — Indicates that user input is required before the form can be submitted.

• aria-invalid

  State — Indicates that the entered value is invalid. Pair with aria-describedby for error message.

• aria-disabled

  State — Marks an element as disabled — it is in the accessibility tree but not interactive.

• aria-checked

  State — Indicates the current checked state: true, false, or mixed (for tri-state checkboxes).

• aria-selected

  State — Indicates that this element is selected in a composite widget (listbox, tree, grid).

• aria-current

  State — Identifies the current item in a set: page, step, location, date, time, or true.

How to use

1. Type in the search box to filter by role name, category (Landmark, Widget, etc.), or description.
2. Click any entry to copy the attribute name to your clipboard.
3. Refer to the secondary line to understand when and how to apply each role, state, or property.

Related tools

• HTML Landmark Checker
• Screen Reader Preview
• Focus Order Viewer
• WCAG Contrast Checker

More guides

• WAI-ARIA Roles Complete Reference
• ARIA Attributes List and Usage