HTML // Access

A11Y &
ARIA

Web Accessibility (a11y) ensures the web is usable by everyone, including people with disabilities. It is not a feature; it is the baseline of engineering ethics.

The First Rule of ARIA

"If you can use a native HTML element [HTML5] or attribute with the semantics and behavior you require already built in, then do so instead of re-purposing an element and adding an ARIA role, state or property."

WCAG Principles (POUR)

Perceivable

Information must be presented in ways users can perceive (e.g., Alt text for blind users, Captions for deaf users).

Operable

Interface components must be usable. Everything must work with a keyboard, not just a mouse.

Understandable

Information and operation must be clear. No confusing jargon or unpredictable layout shifts.

Robust

Content must be interpreted reliably by a wide variety of user agents, including assistive technologies.

The Focus Ring

Never set outline: none without providing a replacement style. Keyboard users rely on that ring to know where they are.

Virtual Screen Reader

Interact with element below:

<div onClick="...">
NVDA_LOG_STREAM
// Waiting for focus event...
Warning: Element not reachable via Keyboard (Tab)

Common ARIA Attributes

aria-labelOverwrites text content for screen readers.
aria-hiddenHides decorative elements from assistive tech.
aria-expandedCommunicates open/closed state of menus.
role="alert"Immediately announces important updates.