Skip to content
CMPSC 302: Web Design

ARIA Roles and Attributes

ARIA (Accessible Rich Internet Applications) offers web developers a way to make sure that all content on a given site is accessible and well-described. It is not, however, a substitute for semantic HTML which, if used properly, often abrogates the need to use ARIA roles, attritbutes, or properties in the first place. In this lesson, we explore what ARIA is and does and when to apply ARIA practices.

Learning Objectives

Section titled “Learning Objectives”
  1. Apply HTML, CSS, Markdown, and basic Javascript to develop well-structured, responsive World Wide Web Consortium (W3C) standards-compliant web sites.
  2. Evaluate and implement web accessibility measures consistent with the Web Content Accessibility Guidelines (WCAG) version 2 specification.
  3. Design front-end user experiences using accepted web design patterns, methods, and information structures.
  4. Identify and use strategies of successful visual rhetoric for the web.
  5. Compare and select web technologies such as static site generators or frameworks as appropriate candidates for building web sites. Course Resources

Text

Section titled “Text”
The Coding Workbook, “Getting Started with CSS”

ARIA Roles and Attributes

Section titled “”

ARIA

Section titled “ARIA”

ARIA roles and attributes allow elements which depart from the truly semantic web to gain semantic and functional relevance for a11y.

First, some vocabulary:

TermPurpose
roleAdds semantic meaning to an element which does not have any inherent sematics
attributesAllows modification of element states and properties with respect to assistive technologies

ARIA “rules”

Section titled “ARIA “rules””

As defined by the W3C:

  1. Use native semantic elements first, only using ARIA where these elements don’t exist, or accessibility features are not supported.
  2. Do not change native semantic elements unless absolutely necessarily
  3. All ARIA controls must be usable with keyboard control
  4. Accessible elements must have an accessible name
  5. ARIA attributes or roles added to parent elements will characterize child elements unless others are added at a lower level
ARIA roles
Section titled “ARIA roles”

For example:

For more on the available ARIA roles, see the original spec and information on per element usage.

ARIA attributes
Section titled “ARIA attributes”

Attributes describe the states and properties of an element. Broadly speaking, defining these in HTML means using sensible default values representing initial states, changing these when scripts alter their values in the course of page use.

While this course will revisit ARIA attributes during work with Javascript, an example of where it’s easier to use semantics demonstrates much of the above discussion. The cannonical example is a progress bar (courtesy of MDN). Initially, a developer could build:

<div
  id="percent-loaded"
  role="progressbar"
  aria-valuenow="75"
  aria-valuemin="0"
  aria-valuemax="100"></div>

The above element is perfectly usable. It features a role, several attributes which model a progress bar and cater to accessibility. However, there exists a semantic <progress> element:

<progress id="percent-loaded" value="75" max="100">75 %</progress>

This element has all of the above ARIA values built in based on its semantic purpose. It’s easier to use, and incorporates less overall maintenance work and, possibly, scripting work.

For a full list of states, properties, and values, have a look at this excellent Github repo.