Focus
Keyboard users need a visible current position.
Platform under construction
CSS Accessibility
Production CSS must keep the interface usable for keyboard users, low-vision users, zoomed layouts, reduced-motion users and real devices.
.button:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 4px;
}
Production mental model
Accessible CSS is not a bonus. It is part of the interface working.
HTML gives meaning, but CSS can protect or destroy that meaning. A link can become invisible, a focus ring can disappear, text can lose contrast and motion can make a page uncomfortable.
Accessible CSS is practical. It means users can read, navigate, focus, zoom, tap and understand the interface under real conditions.
The goal is not to make a separate accessible version. The goal is to make the normal version strong enough for more people.
Contrast
Text and controls need enough difference from the background.
Motion
Reduced-motion preferences should be respected.
Zoom
Layouts must survive larger text and browser zoom.
Visual model
See the release risk before shipping the CSS.
:focus-visible
A clear ring shows where keyboard navigation is.
contrast
Foreground and background remain readable.
reduced
Movement can be simplified when requested.
target
Controls stay easy to hit on real screens.
Good CSS versus fragile CSS
Accessible interaction states
.button:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
* { scroll-behavior: auto; }
}CSS that removes access
* { outline: none; }
.muted { color: #777; background: #777; }
.menu { display: none; }Rules of thumb
Production CSS should be usable, fast, tested and repeatable.
Protect focus
Never remove outlines unless you replace them with an obvious focus-visible style.
Check contrast in context
A color that looks nice on one surface may fail on another.
Respect motion settings
Large movement, parallax, spinning and repeated animation need reduced-motion fallbacks.
Avoid text in images
Real text can resize, translate, copy and remain accessible.
Test zoom and long text
Production layouts should survive 200 percent zoom and longer labels.
Use visual hiding carefully
Visually hidden content should remain available to assistive tech only when that is intended.
Production thinking
The release is not finished until the edge cases are checked.
Why does this matter?
Accessibility is where design quality becomes real. A polished interface that cannot be navigated by keyboard is not finished.
Accessibility
This entire lesson is an accessibility baseline: focus, contrast, motion, target size, readable text and resilient layout.
Production note
Add accessibility checks to every CSS review instead of leaving them for the end of a project.
SEO note
Accessible CSS often supports better structure, clearer navigation and fewer hidden-content mistakes.
Live code lab
Change the CSS and watch the interface respond.
The preview runs in an isolated iframe. Links and forms stay inside the practice area, so you can experiment without leaving the lesson.
Mini assignment
Try this now.
- Remove the focus-visible rule and explain what breaks.
- Make paragraph text very small and judge readability.
- Change the secondary button color and check whether it still has enough contrast.
Practice assignment
Do this before moving to the next lesson.
- Add focus-visible styles to links and buttons.
- Check one text color against its real background.
- Test whether the layout still works with longer button text.
Try it yourself
Build a keyboard-safe action panel
Self-check
Before you continue, prove that you understand CSS Accessibility.
Answer these questions before moving on. Production CSS is not about writing more rules; it is about proving the rules survive real use.
- Can you explain why outline: none is dangerous?
- Can you preserve keyboard orientation?
- Can you test contrast in the actual component?
- Can you simplify motion for reduced-motion users?
- Can you keep controls large enough for touch?
Senior audit upgrade
CSS accessibility needs concrete tests.
Do not treat accessibility as a feeling. Run keyboard-only navigation, contrast checks, reduced-motion checks and 200 percent zoom.
Keyboard-only
Can every interactive control be reached and seen without a mouse?
Contrast
Check text, muted labels, focus rings and disabled states.
Zoom
At 200 percent zoom, content should remain usable without broken overlap.