I don't often write about the theory lessons from the freeCodeCamp curriculum here on DEV, but the topic of ARIA (Accessible Rich Internet Applications) is so extensive that I decided to share a post about the five theory lessons I've completed over the past two days.
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 does this by letting 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‑label provides a direct text label inside the element, useful when there’s no visible text, while aria‑labelledby references 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 is used to control whether an element should be exposed to assistive technologies; setting it to true hides the element from screen readers so they ignore it, which is helpful for decorative or redundant content, while setting it to false ensures the element is available to be announced and interacted with by users relying on accessibility tools.
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 is used to link an element to one or more other elements that provide additional descriptive information about it, so assistive technologies like screen readers can convey 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 gives 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.
In summary, 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!
SOCIAL SHARE CARD GENERATOR