Accessibility is a partnership: HTML provides names and roles; CSS must not break them—visible focus, readable contrast, motion preferences, and content that still makes sense when styles fail.
High-impact checks
- Keyboard: every action reachable; focus order matches reading order.
- Contrast: text vs background (WCAG AA is a common team target).
- Target size: roughly 44×44 CSS px for touch (use padding, not tiny icons alone).
- Do not remove outlines without a visible
:focus-visiblereplacement.
Visually hidden but available to screen readers
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}Use for extra context on icons—not to hide required labels.
Challenge
Icon button with accessible name
- Give the icon button a visible or sr-only text name.
- Ensure
:focus-visiblering is obvious.
Done when: screen reader users hear a name; keyboard users see focus.
Go deeper — Senior review script (5 minutes) (intermediate / experienced)
- Tab through the page once—any missing focus?
- Zoom 200%—does content reflow without loss?
- Toggle reduced motion—does UI remain usable?
- Run automated axe/Lighthouse on the template.
- Spot-check heading order and one form field label.