WAI-ARIA
Explore how WAI-ARIA attributes allow developers to add accessibility information to non-semantic elements. Learn to use ARIA roles, labels, and live regions effectively, avoiding overuse when native HTML5 semantics suffice.
WAI-ARIA attributes can be one of the more confusing aspects of accessible coding, so let’s see if we can clear it up a little! WAI-ARIA stands for “Web Accessibility Initiative—Accessible Rich Internet Applications,” but most people will simply refer to them as ARIA attributes. They exist so that developers can manually attach information about the role, name, description, state, and interaction options to non-semantic elements that don’t have that information naturally associated with them. This allows us to create complex widgets and custom tools in an accessible way.
Understanding ARIA's complexity
Many of the misunderstandings around ARIA attributes come from how they were historically used, which isn’t necessarily the same as how they are used today.
In HTML4, there were far fewer semantic elements. If a developer wanted to ...