Accessibility & ARIA

Over 1 billion people live with disabilities. Accessible HTML ensures your application works for everyone — screen reader users, keyboard navigators, and people with motor or cognitive impairments.

In this lesson

STEP 1

ARIA attributes supplement native HTML when semantics are insufficient — but native elements always come first.

STEP 2

aria-label provides an accessible name when visible text is insufficient (e.g., icon-only buttons).

STEP 3

tabindex values greater than 0 disrupt natural keyboard flow — only use 0 or -1.

Interactive Example

An icon-only button with proper ARIA

Editable in-browser

Interactive Editor

typescript

· An icon-only button with proper ARIA

Output Console

In-Browser Sandbox

Modify code and click "Run Code" (or ⌘+Enter) to evaluate output in real time.

What happens here?

The button gets aria-label so screen readers announce its purpose.
The SVG icon is marked aria-hidden='true' because it is decorative.
focusable='false' prevents the SVG from receiving keyboard focus in IE.

Quick check

What is the first rule of ARIA?

Next: Phase 2 Hands-On Drill

Ready to write code?

Solve the coding challenge in the in-browser IDE with live visible and hidden specification tests.