accessible-by-default

Accessible by default

The web platform ships most of accessibility already built in. Most barriers are not missing ARIA — they are a native element that was replaced by a div, and then partially rebuilt.

So the rule is: use the thing that already does the job, and don't break what it gives you. Everything below follows from that.

Before building a component, check what already exists

Each native element brings keyboard behaviour, focus management, a role, an accessible name, and platform conventions the user already knows. A rebuilt version starts at zero and has to earn all of it back.

The first rule of ARIA: if a native element gives you the semantics, use it instead of the ARIA attribute. No ARIA is better than bad ARIA — a wrong role overrides what the element correctly reported.

Non-negotiables in anything you write

• Never remove focus visibility. outline: none is only acceptable when the same rule paints a visible replacement. Style :focus-visible, keep it at least 3:1 against what surrounds it, and never let sticky headers cover the focused element (WCAG 2.2 adds 2.4.11 for exactly this).
• Keyboard reaches everything, in a sensible order. Reading order is DOM order; CSS reordering (order, grid-area, flex-direction: row-reverse) desyncs the two. Never use tabindex greater than 0.
• Never signal with color alone. Pair it with text, an icon, or a shape.
• Text contrast 4.5:1, large text 3:1, and 3:1 for the visual boundary of any control or meaningful graphic.
• Pointer targets at least 24x24 CSS pixels, or spaced far enough apart to amount to the same thing. 44px is the comfortable choice.
• Reflow at 320 CSS pixels — equivalently 400% zoom — without a second scroll direction. Logical properties, intrinsic grids, and min-inline-size: 0 on flex/grid children get you most of the way.
• Never disable zoom. No user-scalable=no, no maximum-scale=1.
• Every image, icon, and control has a name, and decorative ones are explicitly empty (alt="") rather than unnamed.