Accessibility

Overview

Making web UIs usable by everyone, including keyboard-only and assistive-technology users. Covers WCAG 2.1/2.2 AA, semantic HTML, ARIA, keyboard/focus management, screen readers, contrast, and testing. Optimize for AA — that is the legal bar (ADA, EN 301 549, AODA) in most jurisdictions.

Core Rules (internalize these first)

1. First rule of ARIA: don't use ARIA. A native <button>/<a>/<input>/<nav> ships focus, keyboard, role, and state for free. ARIA only describes; it never adds behavior. Bad ARIA is worse than none.
2. Second rule: don't change native semantics. <button role="heading"> is a footgun. Don't override roles of interactive elements.
3. aria-hidden="true" on a focusable element is a trap — it hides the element from the a11y tree while leaving it in the Tab order, so SR users land on "nothing." Hide the whole subtree and remove it from tab order (inert), never one or the other.
4. Never outline: none without a replacement. Removing the focus ring with no :focus-visible style is the single most common WCAG 2.4.7 failure.
5. Automated tools catch ~30–40% of issues. axe/Lighthouse find contrast, missing alt/labels, dup IDs — never "is the focus order sane," "does the SR announcement make sense," "is this keyboard-operable." Manual keyboard + SR passes are mandatory.

Accessible Name Computation (the thing people get wrong)

The accessible name is what a screen reader announces. Resolution order (first non-empty wins):