ARIA Roles Validator

ARIA (Accessible Rich Internet Applications) roles define the purpose of an HTML element for assistive technologies like screen readers. They are critical for web accessibility compliance (WCAG 2.1) and help users with disabilities navigate and interact with web applications correctly.

The first rule of ARIA is: don't use ARIA if you can use a native HTML element. Native elements like <button>, <nav>, <input>, and <dialog> come with built-in role semantics. ARIA roles are needed when you're building custom widgets (e.g., a custom dropdown) using non-semantic elements like <div> or <span>.

Some roles require specific attributes to function correctly. For example, role='checkbox' requires aria-checked to communicate its state, role='slider' requires aria-valuenow/min/max, and role='combobox' requires aria-expanded. Without these, the role is incomplete and screen readers may announce incorrect information.

aria-label provides an inline accessible name as a string value (e.g., aria-label='Close dialog'). aria-labelledby references another element's ID that contains the label text (e.g., aria-labelledby='modal-title'). Prefer aria-labelledby when visible text already describes the element, as it ties the visible label to the accessible name.

aria-hidden='true' hides an element and all its children from the accessibility tree. Use it for decorative icons, duplicated visible text, and visual-only elements. Never use aria-hidden on interactive elements (buttons, links, inputs) as it removes them from keyboard navigation.

ARIA live regions (role='alert', 'status', 'log') automatically announce dynamic content changes to screen readers. aria-live='assertive' interrupts the user immediately (use sparingly, for errors). aria-live='polite' waits until the user is idle. role='alert' implies aria-live='assertive' automatically.