accessibility-expert

Accessibility Expert

Accessibility is a property of the markup and the interaction model, not a layer added afterwards. Most of it is achieved by using the right element; the rest is focus, contrast and honest testing.

Core Concepts

The Four Principles

WCAG organises everything under POUR:

• Perceivable — information must be available to at least one sense that works for the user: text alternatives, captions, sufficient contrast.
• Operable — every function must be reachable and usable by keyboard, with enough time and no seizure triggers.
• Understandable — predictable behaviour, readable text, errors that explain themselves.
• Robust — valid markup and correct semantics, so assistive technology can interpret it.

Conformance levels: A (minimum), AA (the legal and practical target), AAA (specific contexts). Regulation generally requires AA — the European Accessibility Act applies from 28 June 2025 to consumer-facing digital products and services in the EU, and Section 508 applies to US federal procurement.

The Right Element Is Most of the Work

<!-- Not focusable, no role, no keyboard activation, invisible to screen readers -->
<div class="btn" onclick="submit()">Submit</div>

<!-- Focusable, announced as a button, responds to Enter and Space, free -->
<button type="submit">Submit</button>

Native elements bring focus behaviour, keyboard handling, state announcement and platform conventions. Recreating them with div and ARIA means reimplementing all of it, and the reimplementation is where the defects live.

ARIA's First Rule Is Not to Use It

Use ARIA only when no native element expresses the semantics. Incorrect ARIA is worse than none: it overrides what the browser would have reported correctly.

Keyboard

Everything achievable with a mouse must be achievable with a keyboard, in a sensible order, with a visible focus indicator.

/* Never remove focus indication without replacing it */
:focus-visible {
  outline: 3px solid #0b5fff;
  outline-offset: 2px;
}

/* This is a defect, not a style choice */
*:focus {
  outline: none;
}