ARIA - Accessible Rich Internet Applications

ARIA (Accessible Rich Internet Applications) is a set of HTML attributes that help make dynamic content and advanced interfaces accessible to assistive technologies. You can think of ARIA as additional hieroglyphs on a temple wall - they add meaning where HTML alone is not sufficient.

The First Rule of ARIA

Do not use ARIA if you can use native HTML!

1<!-- BAD - ARIA on a div -->
2<div role="button" tabindex="0" aria-pressed="false">Click me</div>
3
4<!-- GOOD - native HTML -->
5<button>Click me</button>

A native

<button>

is automatically focusable, responds to Enter and Space, and is recognized by screen readers. Use ARIA only when native HTML does not offer the needed functionality.

ARIA Roles

Roles define what an element is in the context of the interface.

1<!-- Landmark roles -->
2<div role="banner">Page header</div>
3<div role="navigation">Navigation</div>
4<div role="main">Main content</div>
5<div role="complementary">Sidebar</div>
6<div role="contentinfo">Footer</div>
7
8<!-- Widget roles -->
9<div role="tablist">
10    <button role="tab" aria-selected="true">Tab 1</button>
11    <button role="tab" aria-selected="false">Tab 2</button>
12</div>
13<div role="tabpanel">Tab content</div>
14
15<!-- Alert role -->
16<div role="alert">An error occurred! Check the form.</div>

ARIA States & Properties

aria-label

Gives an element an invisible text label.

1<!-- Button with icon - no visible text -->
2<button aria-label="Close dialog">
3    <span class="icon">X</span>
4</button>
5
6<!-- Navigation with label -->
7<nav aria-label="Exhibition navigation">
8    <ul>...</ul>
9</nav>

aria-describedby

Links an element with an additional description.

1<label for="password">Password:</label>
2<input type="password" id="password"
3       aria-describedby="password-help">
4<p id="password-help">
5    Password must have at least 8 characters, an uppercase letter, and a number.
6</p>

aria-hidden

Hides an element from screen readers (but it remains visually visible).

1<!-- Decorative icon - hidden from reader -->
2<button>
3    <span aria-hidden="true" class="icon">&#9776;</span>
4    Menu
5</button>
6
7<!-- NOTE: Never hide content that is important! -->

aria-live

Informs the screen reader about dynamic changes on the page.

1<!-- Live region - reader will announce changes -->
2<div aria-live="polite" id="status">
3    <!-- Content updated dynamically -->
4</div>
5
6<!-- Urgent notification -->
7<div aria-live="assertive" role="alert">
8    Session will expire in 2 minutes!
9</div>

Values of

aria-live

:

• off

  - no announcements (default)

• polite

  - will wait until the reader finishes the current sentence

• assertive

  - will interrupt current reading immediately

aria-expanded

Informs about the state of expandable elements.

1<button aria-expanded="false" aria-controls="menu">
2    Navigation Menu
3</button>
4<nav id="menu" hidden>
5    <ul>
6        <li><a href="/">Home</a></li>
7        <li><a href="/exhibitions">Exhibitions</a></li>
8    </ul>
9</nav>

aria-required and aria-invalid

Form validation.

1<label for="name">Name (required):</label>
2<input type="text" id="name"
3       aria-required="true"
4       aria-invalid="false">
5
6<!-- After failed validation -->
7<input type="email" id="email"
8       aria-required="true"
9       aria-invalid="true"
10       aria-describedby="email-error">
11<p id="email-error" role="alert">
12    Please enter a valid email address.
13</p>

ARIA Summary

Remember the five rules of ARIA:

1. Do not use ARIA if you can use native HTML
2. Do not change the semantics of native elements - do not add

   role="heading"

   to

   <p>

3. All interactive ARIA elements must be keyboard accessible
4. Do not use

   aria-hidden="true"

   on focusable elements
5. All interactive elements must have an accessible name

Testing ARIA

To check if your ARIA attributes work correctly:

1. Screen reader - use VoiceOver (Mac), NVDA (Windows), or TalkBack (Android)
2. Chrome DevTools - the Accessibility tab shows the accessibility tree
3. Extensions - axe DevTools, WAVE

Practical Test

Open a page, turn off the monitor (or close your eyes), and try navigating it using only the keyboard and a screen reader. Is all the information accessible? Do you know what each button does?

ARIA Checklist for Developers

• Does every interactive element have an accessible name (text, aria-label)?
• Are dynamic changes on the page announced via aria-live?
• Do modal dialogs have proper focus trap?
• Are states (expanded, selected, pressed) being updated?
• Do decorative elements have aria-hidden="true"?

ARIA is a powerful tool in the hands of an accessibility builder - like magical amulets that give elements hidden power understood by screen readers. But just like amulets in Egyptian temples, they must be used with knowledge and moderation. Too much ARIA can do more harm than good!