Introduction to ARIA
Source: Dev.to
What Is the Purpose of WAI-ARIA, and How Does It Work?
The purpose of WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) is to make web content and complex user‑interface components more accessible to people with disabilities—especially when native HTML alone doesn’t provide enough semantic information for assistive technologies (like screen readers) to understand dynamic content or custom widgets. It lets developers add roles, states, and properties to elements so that assistive tech can identify what things are (e.g., a menu or button) and what state they’re in (e.g., expanded or checked), improving navigation and interaction for users who rely on accessibility tools.
What Are ARIA Roles?
ARIA roles are attributes you add to HTML elements to tell assistive technologies (like screen readers) what those elements are or do when their purpose isn’t clear from the HTML alone. By giving an element a role (e.g., button, navigation, alert, main, etc.), you define its semantic meaning so accessibility tools can present and interact with it correctly, especially for custom or dynamic UI components that don’t use built‑in semantic elements. This helps users with disabilities understand and navigate web interfaces more reliably.
What Are the Roles of the aria-label and aria-labelledby Attributes?
The aria-label and aria-labelledby attributes give accessible names to elements so assistive technologies can convey their purpose to users.
aria-labelprovides a direct text label inside the element, useful when there’s no visible text.aria-labelledbyreferences another element’s text to serve as the label, allowing existing content to be reused.
Both ensure that custom or non‑text elements are properly identified and understandable for users relying on screen readers or other accessibility tools.
What Is the aria-hidden Attribute, and How Does It Work?
The aria-hidden attribute controls whether an element should be exposed to assistive technologies.
aria-hidden="true"hides the element from screen readers, which is helpful for decorative or redundant content.aria-hidden="false"ensures the element is available to be announced and interacted with.
You don’t need to use aria-hidden when an element is already hidden, such as when it has the HTML hidden attribute, or when it or one of its ancestors is hidden using display: none or visibility: hidden. In these cases, the element is automatically excluded from the accessibility tree, so aria-hidden is redundant.
What Is the aria-describedby Attribute, and How Does It Work?
The aria-describedby attribute links an element to one or more other elements that provide additional descriptive information about it. Assistive technologies like screen readers can convey this helpful context beyond just the name or label of the element. Unlike aria-labelledby, which gives an accessible name, aria-describedby points to elements whose text offers a more detailed explanation or instructions that users might need to understand or interact with the element effectively. The referenced content doesn’t need to be visible on the screen to be used as a description.
These lessons show how ARIA supports accessibility when semantic HTML isn’t enough, enabling more inclusive custom interfaces. They lead into a new workshop, Build an Accessible Audio Controller, which I’ll be tackling next time. Until then, keep coding!