What are ARIA attributes?

It is no secret that having an accessible website is essential for the success of any online business.

At Torresburriel Estudio’s blog, we have frequently discussed usability (if not always) and the importance of a solid UX strategy. These are key factors in ensuring that Google favors us in search results, improving our ranking and visibility.

But what about people with disabilities who face difficulties accessing our content compared to those without such limitations?

Photo by Ben Kolde on Unsplash

In this post, we will explore what ARIA attributes are and how they can help make your company and projects more accessible and visible.

What are ARIA attributes?

ARIA stands for Accessible Rich Internet Applications, an initiative by the W3C to improve web accessibility. ARIA attributes are used to make websites more accessible for people with disabilities, enhancing the experience for those who rely on screen readers or other assistive technologies.

Read also: Web accessibility testing.

Sometimes, simply writing semantic HTML is not enough. This is where ARIA tags play a crucial role. They enhance our HTML, especially when working with dynamic elements generated with JavaScript. However, it is important to note that elements that already have semantic value should not use attributes that redundantly define their function, as stated in ARIA’s first rule of use.

It is important to remember that ARIA does not compete with HTML semantics but complements it. It was created to help communicate specific changes in web applications to assistive technologies. Most popular browsers and screen readers already support it.

Why should you implement ARIA attributes?

If you still have doubts about incorporating ARIA attributes, we assure you that it is worth it. Here are some of the key benefits:

• Detailed information for assistive technologies: ARIA attributes provide specific information that helps assistive technologies interpret and present content more accurately.
• Improved navigation: They make websites easier to navigate for people with disabilities, which can significantly boost organic traffic. By making your site more accessible, you reach a broader audience. Read also: UX best practices for designing a nav menu.
• Easy implementation: Implementing ARIA is straightforward and does not require complex technical procedures. Once you understand its logic and functionality, you can quickly incorporate it to enhance the user experience.
• Expanded audience reach: Making your website accessible to people with disabilities increases your potential user base, leading to higher traffic and more customers, directly benefiting your business.
• Stronger brand image: Demonstrating a commitment to accessibility and inclusion improves brand perception. Users appreciate companies that show social responsibility and strive to be inclusive.

ARIA attributes

ARIA attributes play a crucial role in improving web accessibility, making websites more user-friendly for people with disabilities. These attributes fall into three main categories: roles, properties, and states. Below, we explore each component and how they contribute to a better user experience.

ARIA roles

In most cases, using native semantic HTML is ideal for describing a page’s structure and element functionality. However, when HTML semantics are insufficient, ARIA roles fill the gaps.

• New or conceptual elements: ARIA roles can define elements that lack full browser support or are not recognized by screen readers.
  Example: <button role=”tab”>Tab</button>
• Fixing non-semantic HTML: If HTML is improperly implemented, ARIA roles can correct it.
  Example: <div role=”button”>Button</div>

ARIA roles clearly specify an element’s function, helping assistive technologies interpret it correctly. The syntax for applying a role is simple: role=”role name”

ARIA properties and states

ARIA properties and states provide additional information that complements roles. These attributes enhance user interaction and ensure screen readers and other assistive technologies can effectively communicate changes and statuses.

• ARIA Properties: Generally static throughout an application’s lifecycle.
  Example: aria-labelledby links an element to its label.
• ARIA States: Dynamic attributes that change based on user interaction.
  Example: aria-checked indicates whether a checkbox is selected.

ARIA properties and states are classified into several categories to cover different aspects of accessibility:

• Widget attributes: Define interactions with specific widgets.
• Live region attributes: Indicate dynamically updating areas, such as real-time notifications.
• Drag-and-drop attributes: Make drag-and-drop operations accessible.
• Relationship attributes: Define relationships between elements, such as linking a label to its corresponding form field.

How to use ARIA attributes?

ARIA attributes work by adding metadata to web content, allowing assistive technologies to help users more effectively. While the list of ARIA attributes is extensive, you don’t need to use all of them to improve your website’s accessibility. Here are some of the most important attributes and how to use them correctly:

• aria-describedby: Establishes a relationship between an element and another element or group providing additional information.
• aria-expanded: Indicates whether an expandable element (e.g., menus, collapsible sections) is expanded or collapsed.
• aria-haspopup: Specifies if an element has a popup menu, listbox, tree, or dialog.
• aria-hidden: Indicates whether an element is invisible or should be ignored by assistive technologies.
• aria-label: Provides a label for an element that isn’t descriptive enough on its own.
• aria-live: Notifies assistive technologies about dynamically updating page areas.
• aria-checked: Specifies the status of checkable elements like checkboxes.
• aria-controls: Links an element to another element it controls, such as a button that opens a modal dialog.
• aria-required: Marks a field as mandatory.
• aria-disabled: Indicates that an element is inactive and non-interactive.

Basic rules for using ARIA attributes

To ensure ARIA attributes enhance accessibility rather than become obstacles, it’s crucial to follow these basic rules:

1. HTML tag compatibility: Not all HTML elements support roles, states, or properties. Some tags already have implicit roles, so redefining them is unnecessary.
2. Inheritance relationships: Some ARIA attributes should be used in combination with others on parent or child elements. Following these inheritance relationships ensures effective accessibility.
3. ARIA specification compliance: ARIA is a standardized specification that must be strictly followed. Do not create new ARIA attributes by adding aria-* prefixes to undefined elements.
4. Impact on child elements: Certain ARIA attributes affect not only the element they are applied to but also all child elements. For example, role=”presentation” can remove implicit semantics from all child elements.

Final thoughts

As you can see from this blog post, proper ARIA implementation is essential for improving web accessibility. It’s important to educate yourself on its use and apply it correctly in all web developments.

In an increasingly digital world, every step toward accessibility not only enhances the web experience but also strengthens our commitment to a more inclusive and accessible internet for all.

This is a translation of the following article from our corporate website:

¿Qué son los atributos ARIA? | Torresburriel Estudio