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…
<code>&lt;div role="button"&gt;</code>	<code>&lt;button&gt;</code>
<code>&lt;div role="navigation"&gt;</code>	<code>&lt;nav&gt;</code>
<code>&lt;span role="heading"&gt;</code>	<code>&lt;h2&gt;</code>

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