ARIA
ARIA adds information about interface roles, states and properties for assistive technologies. The stated behaviour must actually be implemented.
Add meaning for assistive technologies
ARIA stands for Accessible Rich Internet Applications. Its roles and attributes can communicate information about controls to assistive technologies. For example, aria-expanded="false" indicates that the associated expandable section is closed.
In an example portal, the “More invoice details” button carries this attribute. When expanded, the value changes to true and the relevant content becomes visible. If the value stays unchanged, a screen reader may communicate a different state from the one shown visually.
ARIA does not itself add click behaviour or keyboard interaction. A div with role="button" does not automatically become a working button. Use appropriate native HTML elements and add ARIA where information is missing. Incorrect information can make interaction harder.
Sources
Related terms
- Semantic HTMLSemantic HTML uses elements according to their meaning. A real button has properties that a styled text block does not acquire automatically.
- Screen readerA screen reader makes digital content available through speech or Braille. Meaningful structure and labels support understandable interaction.
- Keyboard operabilityKeyboard operability makes tasks possible without a mouse. Actions must be reachable through a clear sequence of controls.
- Focus orderFocus order determines the route through focusable elements. It should preserve meaning and operability, including during dynamic changes.
- Keyboard trapA keyboard trap leaves keyboard users stuck within a region. Deliberately containing focus in a dialog needs a keyboard-operable exit.
- Skip linkA skip link bypasses repeated navigation and leads to the main content. The destination must also work for subsequent keyboard navigation.
Articles on this topic
Design & UX with ASES
User experience, interfaces and brand presence