ARIA

Category: Design

What is ARIA?

ARIA (Accessible Rich Internet Applications) is a set of attributes that help make web content and web applications more accessible to people with disabilities. It complements HTML by providing additional semantics that assistive technologies (such as screen readers) can use for better communication with users.

ARIA is developed by the World Wide Web Consortium (W3C) and is part of their initiatives for web accessibility.

Main components of ARIA

Roles

Define the type of element and its purpose in the user interface. The roles tell the assistive technologies "what is this".

landmark roles: banner, navigation, main
widget roles: button, slider, dialog
document structure roles: heading, list, table

Properties

Provide additional information about the elements that cannot be defined solely by the role.

aria-label: provides a label for the element
aria-describedby: connects the element with a description
aria-required: shows that the field is required

States

Describe the current state of interactive elements. The states can change during the application's operation.

aria-checked: for radio buttons and checkboxes
aria-disabled: shows that the element is disabled
aria-expanded: shows whether a menu or section is open

Why is it important to use ARIA?

Improved accessibility: Helps people with disabilities use web applications
Support for dynamic content: Makes Ajax and dynamically loaded content accessible
Improved semantics: Adds value to elements that HTML itself cannot fully describe
Compatibility: Works with assistive technologies such as screen readers
Legal requirement: Many pages require websites to be accessible

Frequently used ARIA roles

role="banner"

For an area containing the site logo and branding

role="navigation"

For navigation menus and links

role="main"

For the main content of the page

role="complementary"

For sidebars and additional content

role="contentinfo"

For content information such as footer

role="search"

For search areas

role="button"

For elements that behave like buttons

role="dialog"

For modal dialogs and windows

Good practices for using ARIA

Use semantic HTML, when possible: ARIA should be used only when HTML does not provide the necessary semantics
Do not overuse ARIA: More ARIA does not always mean better accessibility
Test with assistive technologies: Ensure that the ARIA attributes work with screen readers
Do not change the semantics of the elements: Do not use ARIA in a way that contradicts the natural semantics of the element
Keep the states synchronized: Ensure that the ARIA states reflect the actual state of the elements

Important warning

First rule of ARIA: Do not use ARIA if you can use a semantic HTML element that already has the necessary semantics and behavior.

For example, use <button> instead of <div role="button">, because <button> already has built-in semantics, focus and keyboard support.

ARIA and HTML5

HTML5 element	Equivalent ARIA role	Note
<header>	role="banner"	Use the HTML5 element when possible
<nav>	role="navigation"	HTML5 element is preferred
<main>	role="main"	HTML5 element is preferred
<aside>	role="complementary"	HTML5 element is preferred
<footer>	role="contentinfo"	HTML5 element is preferred
<section>	role="region"	Give aria-label to section elements