We can't find the internet
Attempting to reconnect
Something went wrong!
Hang in there while we get back on track
ARIA: the good parts - Hidde de Vries - NDC Porto 2023
Learn the essential best practices and common pitfalls of using ARIA attributes to improve web accessibility, from semantic roles to custom states and attributes.
- ARIA is a complex topic, and sometimes it’s unnecessary or used wrong by developers.
- The role semantic vs. presentational: ARIA can’t be used to set the presentational aspects of an element, but only to define the semantic meaning.
- Hidden content: ARIA hidden is a state that indicates that the content is not currently perceived by the user.
- When setting aria-label, you should make sure it provides the same information as the visual label.
- ARIA can be used by anyone, not just screen reader users.
- Some ARIA roles are safe to use once you understand how they work.
- Control of focus: ARIA helps to manage focus on a page, making it clear when something has focus.
- Announcing state changes: ARIA helps to announce changes in state, such as an open or closed state.
- group > role: You can use ARIA to define a group of elements and give them a meaningful role.
- Proper use of ARIA can improve the accessibility of a site.
- ARIA can’t replace good design and clear writing, but it can enhance the user experience.
- There are many roles available in ARIA, including role=”menuitem” and role=”menu”.
- aria-label and aria-labelledby are used to provide a text description of an element.
- ARIA relies on the semantic meaning of HTML elements, so it’s important to use the correct HTML tags.
- ARIA can be used to define custom roles and states for elements.
- Some ARIA attributes, such as aria-relevant, can be problematic and are best avoided.
- aria-live is used to indicate that the content that follows is being updated dynamically.
- aria-describedby is used to provide a detailed description of an element.
- aria-valuemin and aria-valuemax are used to define the minimum and maximum value of an element.
- There are several types of ARIA attributes, including states and properties.
- aria-sort and aria-activedescendant can be used to provide additional information about an element.
- aria-haspopup can be used to indicate that an element has a drop-down menu.
- aria-selected can be used to indicate that an option is currently selected.
- aria-required can be used to indicate that an element must be filled out.
- aria-invalid can be used to indicate that an element contains an error.