Semantic HTML5

Home / Topic / Semantic HTML5 / Accessibility and ARIA Roles in Semantic HTML

Accessibility and ARIA Roles in Semantic HTML

Accessibility is a key aspect of inclusive web development. Creating accessible sites involves ensuring that everyone, regardless of their abilities, can navigate, understand, and enjoy the content. Semantics in HTML already enhances accessibility, but we can go further with the use of ARIA (Accessible Rich Internet Applications) roles. In this chapter, we will explore how semantic HTML and ARIA attributes can work together to create an inclusive user experience.

What is ARIA and Why is it Important?

ARIA (Accessible Rich Internet Applications) is a set of attributes developed to improve the accessibility of web applications. ARIA roles and properties help provide additional context to interactive elements, especially when they are not natively accessible. This facilitates navigation for people who rely on assistive technologies, like screen readers.

Example of an ARIA Attribute

A common use of ARIA is the aria-label attribute, which provides a description to interactive elements lacking visual context.

html

"In this example, the button has the text X, which does not provide enough context. The aria-label attribute adds a clear description of its function: 'Close the dialog'."

ARIA Roles: Providing Additional Context

ARIA roles describe the function of an element when semantic HTML alone is not sufficient. Roles are used in cases like custom or interactive elements where the screen reader needs more information to correctly interpret the element's purpose.

Example of Role Usage

If you have a custom navigation list created with <div>, you can add the navigation role so it is recognized correctly:

html

"Here, the navigation role gives context to the div, indicating to screen readers that it contains navigation links, enhancing the accessibility experience."

Common ARIA Attributes

aria-label: Adds a custom label to an element.
aria-labelledby: Associates an element with another element that serves as its label.
aria-describedby: Provides additional description by referencing another element on the page.
aria-hidden: Indicates whether the element is visible to assistive technologies.

Example of `aria-labelledby`

html

"The aria-labelledby attribute on the paragraph refers to the heading with id section-title, providing additional context and ensuring that screen readers correctly associate these elements."

Navigation with ARIA Roles and Properties

ARIA roles can enhance navigation in custom components like menus, dialogs, and tabs. A common example is a tab menu (tabs) that provides navigation to different content sections.

html

"In this example, the tablist attribute groups the buttons as tabs, and each button has the role of tab, indicating its specific function. This allows users of assistive technologies to understand the tab menu structure."

Complete Example of an Accessible Page with ARIA

Below, we show an example of an accessible page that combines semantic HTML and ARIA attributes to enhance navigation and understanding.

html

"This complete page example uses semantic HTML with ARIA roles for better accessibility. Each section has a role and descriptive attributes so that screen readers can navigate and understand the content."

Best Practices for Accessibility with ARIA

Use roles and attributes when necessary: ARIA complements semantic HTML but should not replace it.
Avoid excessive use of ARIA: Overuse of ARIA roles and properties can confuse users of assistive technologies.
Test accessibility: Use accessibility checking tools to ensure ARIA roles work correctly.

Conclusion

In this chapter, we have learned how to use semantic HTML together with ARIA attributes and roles to enhance web page accessibility. Applying these concepts makes navigation more inclusive and allows people with disabilities to enjoy a quality user experience. In the next chapter, we will explore how semantic HTML and a clear structure can improve SEO and the performance of our pages in search engines.

Back to previous chapter

Mark as read and continue