Guide
Accessibility and CSS
Accessibility is not a QA checkbox added at the end of delivery. It starts in the CSS architecture itself.
Focus visibility, reduced motion, readable spacing, logical properties, colour contrast, and keyboard-safe interaction patterns all depend on how styles are organised.
Where CSS causes accessibility problems
- focus styles removed with no replacement
- hover-only interactions
- animation that ignores reduced motion preferences
- fixed dimensions that break zoom and text resize
- visual order that fights source order
- theme overrides that damage colour contrast
How LSCSS helps
- state classes keep interaction states explicit
- theme layers isolate visual overrides safely
- shallow selectors reduce override chaos
- logical properties improve international support
- utilities support consistent spacing and visibility rules
Start here
Review the accessibility demos, then compare how component state, focus handling, and reduced motion fit inside maintainable CSS.
Recommended reading
Good accessibility usually looks boring. That is often a sign it is working properly.