Using ARIA: Roles, states, and properties

This translation is incomplete. Please help translate this article from English

ARIA defines semantics that can be applied to elements, with these divided into roles (defining a type of user interface element) and states and properties that are supported by a role. Authors must assign an ARIA role and the appropriate states and properties to an element during its life-cycle, unless the element already has appropriate ARIA semantics (via use of an appropriate HTML element). Addition of ARIA semantics only exposes extra information to a browser's accessibility API, and does not affect a page's DOM.


Widget roles

Composite roles

The techniques below describe each composite role as well as their required and optional child roles.

Document structure roles

Landmark roles

Live Region Roles

Window Roles

States and properties

Widget attributes

Live region attributes

Drag & drop attributes

  • aria-dropeffect
  • aria-dragged

Relationship attributes

MicrosoftEdge-specific properties