The Accessible Rich Internet Applications (ARIA) specification defines a set of roles, states, and properties that developers can add to HTML elements to make web content and applications more accessible to assistive technology users. ARIA works alongside native HTML semantics, and its proper use follows a set of well-known rules. The first and most important rule states that if a native HTML element or attribute provides the semantics and behavior you need, you should use that rather than adding ARIA. Other rules require that all interactive ARIA controls be usable with the keyboard, that interactive elements always have an accessible name, and that you never apply role="presentation" or aria-hidden="true" to a focusable element or one with focusable descendants.
An accessible name is the text that assistive technologies announce for an element, computed from sources like native HTML labels, aria-label, and aria-labelledby. When multiple sources are present, they have a defined precedence: aria-labelledby wins over aria-label, which in turn wins over the native label or label-associated text. Using aria-labelledby is often preferable because it can reference visible text on the page, supporting translation and dynamic updates, while aria-label takes only a static string. aria-label and aria-labelledby differ specifically in that aria-label supplies a literal string while aria-labelledby references the id(s) of other elements whose text becomes the name.
ARIA attributes fall into three categories. A role tells assistive technology the type of widget or structure an element represents, such as role="button" or role="navigation". A state is an aria-* attribute conveying a dynamic condition that changes in response to user action, such as aria-expanded or aria-selected. A property is an aria-* attribute describing a relatively stable characteristic of an element, such as aria-label, aria-required, or aria-haspopup. Together, these attributes help construct the parallel accessibility tree that assistive technologies consult.
Landmark roles identify major sections of a page so screen-reader users can navigate to them quickly. Many map directly to HTML elements: a `