Accessible Rich Internet Applications (ARIA)
A set of HTML attributes defined by the W3C that add semantic meaning to web elements, enabling assistive technologies like screen readers to understand and convey dynamic content and custom UI components.
ARIA attributes fall into three categories: roles (defining what an element is, e.g., role="dialog"), properties (defining characteristics, e.g., aria-required="true"), and states (defining current conditions, e.g., aria-expanded="false"). ARIA is essential for custom components like tabs, accordions, modals, and autocomplete fields that have no native HTML equivalent.
A critical principle is the first rule of ARIA: 'If you can use a native HTML element with the semantics and behavior you require, do so instead of repurposing an element and adding ARIA.' Misused ARIA can make accessibility worse, not better.
Why It Matters for QA Teams
Modern websites are full of custom interactive components that assistive technologies cannot understand without ARIA. QA teams must verify that ARIA attributes are present, correct, and updated dynamically as component states change.
Example
A custom accordion component uses div elements for headers instead of button elements. QA testing with a screen reader reveals it is not announced as interactive. The fix adds role="button", aria-expanded="false" (toggled to true when open), aria-controls pointing to the panel ID, and keyboard event handlers for Enter and Space keys.