Skip to Main Content

Lesson 9 Project

ARIA and Accessibility

Accessible Rich Internet Applications, commonly known as ARIA, is a standard created by the World Wide Web Consortium. ARIA provides additional information that helps assistive technologies understand the purpose, relationships, and current condition of elements on a webpage.

ARIA is especially useful when HTML, CSS, and JavaScript are used to build custom interactive components. It can improve the experience of people who use screen readers, keyboard navigation, and other assistive technologies.

ARIA should support semantic HTML rather than replace it. Native HTML elements should be used whenever they already provide the needed meaning and behavior.

Roles

ARIA roles define the purpose of an element or region. They help assistive technologies determine whether an element functions as a landmark, widget, alert, dialog, or another type of component.

Abstract Roles
Abstract roles organize related ARIA roles and define characteristics shared by those roles.
  • input is a superclass for widgets that accept user input.
  • section is a superclass for structural containment roles.

Important: ARIA standards state that authors must not use abstract roles directly in web content.

Document Structure Roles
Document structure roles describe the organization and purpose of content on a page.
  • article identifies a self-contained section of content.
  • heading identifies a heading for a section.
Landmark Roles
Landmark roles identify major areas of a webpage.
  • banner identifies site-oriented introductory content.
  • navigation identifies a collection of navigational links.
Live Region Roles
Live-region roles identify areas whose content may change dynamically.
  • alert identifies important, time-sensitive information.
  • status identifies advisory information that does not require immediate attention.
Widget Roles
Widget roles identify interactive controls and components.
  • tab identifies a selectable item within a tab list.
  • searchbox identifies an input used to enter search criteria.
Window Roles
Window roles identify dialogs displayed within the main browser window.
  • dialog identifies a dialog or application window.
  • alertdialog identifies an urgent dialog that requires a response.
ARIA Standards: Role Categories