Sometimes plain HTML elements do not fully convey meaning to assistive technologies. ARIA (Accessible Rich Internet Applications) is a set of attributes that fill these gaps.

The Golden Rule of ARIA

> No ARIA is better than bad ARIA.

Always prefer native HTML elements first. Use ARIA only when no HTML element can express the meaning you need.

Instead of…	Use…
<div role="button">	<button>
<div role="navigation">	<nav>
<span role="heading">	<h2>

Common ARIA Attributes

role

Tells assistive technology what an element's purpose is:

<div role="alert">Your form has been submitted!</div>

aria-label

Gives an element an accessible name when there is no visible text:

<button aria-label="Close dialog">✕</button>

aria-hidden

Hides decorative elements from screen readers:

<span aria-hidden="true">🎨</span>

aria-describedby

Links an element to a description elsewhere on the page:

<input type="password" id="pw" aria-describedby="pw-hint">
<small id="pw-hint">Must be at least 8 characters.</small>

Your Task

Create a page that demonstrates ARIA attributes:

A <header> with role="banner"

A search <input> with aria-label="Search the site"

A close button with only an icon (✕) and aria-label="Close"

A decorative emoji hidden from screen readers with aria-hidden="true"

A password field linked to a hint using aria-describedby