ARIA (Accessible Rich Internet Applications) is a set of attributes you can add to HTML elements to make web content and applications more accessible, especially dynamic content and advanced user interface controls. The Authoring Practices Guide (APG) provides guidance on how to use ARIA correctly.
What is ARIA?
- ARIA provides extra information to assistive technologies that isn’t available in native HTML. It helps define the roles, states, and properties of custom UI components.
- Example: If you create a custom dropdown menu using <div> elements, a screen reader won’t know it’s a menu. ARIA attributes like role=”menu”, aria-haspopup=”true”, and aria-expanded=”false/true” can be used to describe its function and state.
- First Rule of ARIA: The most important rule is: if a native HTML element already has the accessibility features you need, use it instead of creating a custom component with ARIA. For example, use a <button> element instead of a <div> with role=”button”.
What is the APG?
- The APG (Authoring Practices Guide) is a resource from the W3C that provides design patterns and code examples for creating accessible web components.
- It demonstrates how to correctly implement ARIA for common widgets like accordions, sliders, tabs, and modals.
- The APG is an essential guide for developers to ensure their custom components are usable by people who rely on assistive technologies.
