ARIA Cheatsheet
The W3C created ARIA to ensure that many kinds of applications and websites can incorporate accessibility within them and to make up for the lack of accessibility when it comes to various industry standards. Where CSS provides visual style effects for HTML, ARIA provides accessibility effects for HTML that make webpages user-friendly for a wider audience.
Roles
Roles are used to indicate the purpose of the element to the user. They also allow tools to support interaction with the element in a way that is consistent with the user's previous experience with the same type of element.
AbstractThese are the foundation that all other roles are built on. Abstract roles help organize the role taxonomy and provide roles with a meaning in the context of known concepts, and streamline the addition of roles that include necessary features. NOTE: Abstract roles are used for the ontology. Authors MUST NOT use abstract roles in content.
role="input"
role="landmark"
role="section"Document structureThese describe structures that organize content in a page. Document structures are not usually interactive.
role="definition"
role="figure"
role="heading"LandmarkThese are regions of the page intended as navigational landmarks.
role="banner"
role="contentinfo"
role="navigation"Live regionThese are perceivable regions of a webpage that are typically updated due to an external event with user focus may be elsewhere. These regions are not always updated as a result of a user interaction. Examples include a chat log, stock ticker, or a sport scoring section that updates periodically to reflect game statistics.
role="alert"
role="log"
role="timer"WidgetThis is a discrete user interface object that the user can interact with. Widgets range from simple objects with one value or operation (e.g., checkboxes and menu items) to complex objects that contain many managed sub-objects (e.g., trees and grids).
role="button"
role="checkbox"
role="menuitem"WindowThese act as windows within the browser or application.
role="alertdialog"
role="dialog"
States
A state is a property that may change when a user interacts with it or because of an automated process. States don't affect the nature of the object, but represent associated object data or the possibility of user interaction.
Widget attributesaria-checked="false"
aria-disabled="false"
aria-expanded="true"Live region attributesaria-busy="true"
aria-busy="false"Drag-and-drop attributesrole="banner"
aria-grabbed="true"
aria-grabbed="false"
Properties
Properties are attributes that are essential to the nature of a given element or that represent data associated with the element. While changing a property may significantly alter the meaning or presentation of an element, certain properties are less likely to change than states.
Widget attributesaria-autocomplete="inline"
aria-hidden="true"
aria-labelledby="<-- id reference -->"Live region attributesaria-atomic="false"
aria-live="polite"
aria-relevant="additions"Drag-and-drop attributesaria-dropeffect="none"
aria-dropeffect="copy"
aria-dropeffect="link"Live Regionaria-activedescendant="<-- focused element reference -->"
aria-controls="<-- id reference -->"
aria-owns="<-- id reference to child element -->"