HTML - Accessibility (ARIA basics)

What it actually means

Accessibility ensures that users with disabilities can use your website using screen readers, keyboards, or assistive tools. ARIA (Accessible Rich Internet Applications) adds meaning where native HTML is not enough.

How to use it correctly

  • Always prefer semantic HTML first

  • Use ARIA only when no semantic tag exists

Key rules:

  • aria-label gives an element a readable name

  • aria-hidden="true" hides content from screen readers

  • role defines what an element represents

  • Every form control must have an associated <label>

Example:

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

Bad usage:

<div role="button">Click</div>

Correct:

<button>Click</button>

Why this matters

  • Screen readers rely on ARIA to announce meaning

  • Keyboard-only users depend on correct roles and focus

  • Accessibility is a legal requirement in many countries

  • Poor ARIA breaks usability more than no ARIA

Practical rule

If you can replace an ARIA role with a native HTML element, do it.