CSS Accessibility
📌 Covered in this chapter:
Color Contrast · Focus Visibility · Keyboard Nav · Reduced Motion · Text Resizing · Line Length · Touch Targets · Color-Only Meaning · Screen Readers · High Contrast · sr-only
Welcome to Chapter 46: CSS Accessibility — part of the CSS Complete Roadmap. This lesson covers all subtopics with clear explanations, code examples, and best practices used in professional web development.
📚 What You Will Learn
- WCAG color contrast requirements and testing tools
- Focus-visible styling for keyboard navigation
- prefers-reduced-motion, prefers-contrast media queries
- Touch target sizing and readable typography
- Screen reader-only content with .sr-only utility
💡 Why This Matters
Accessibility is not optional — legal requirement in many countries (ADA, EAA), and 15%+ users have disabilities. CSS plays a critical role: contrast, focus rings, motion sensitivity, text sizing. Accessible CSS is professional CSS.
1Color Contrast & Avoiding Color-Only Meaning
| Level | Normal Text | Large Text (18px+) |
|---|---|---|
| WCAG AA | 4.5:1 ratio | 3:1 ratio |
| WCAG AAA | 7:1 ratio | 4.5:1 ratio |
CSS — Accessible Colors▶ Try in Editor
:root {
--text-primary: #111827; /* on white: 16.6:1 ✅ */
--text-secondary: #4b5563; /* on white: 7.5:1 ✅ AAA */
--color-error: #b91c1c; /* on white: 5.9:1 ✅ */
--color-success: #15803d; /* on white: 4.6:1 ✅ */
}
.error-msg {
color: var(--color-error);
font-weight: 600;
}
.error-msg::before {
content: "⚠ ";
}
/* Icon + text — not color alone */DevTools → Elements → color picker shows contrast ratio. WebAIM Contrast Checker online tool kuda use cheyandi.
2Focus Visibility & Keyboard Navigation
CSS — Focus Styles▶ Try in Editor
/* NEVER do this without replacement */
/* *:focus { outline: none; } ❌ */
:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 2px;
}
.btn:focus-visible {
outline: 3px solid #93c5fd;
outline-offset: 3px;
box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.2);
}
.skip-link {
position: absolute;
top: -100%;
left: 16px;
padding: 12px 20px;
background: #2563eb;
color: #fff;
z-index: 9999;
border-radius: 0 0 8px 8px;
}
.skip-link:focus {
top: 0;
}| Property / Selector | Explanation |
|---|---|
:focus-visible | Keyboard focus ki matrame ring — mouse click ki ledu |
outline-offset | Ring element border nundi gap — clearer visibility |
.skip-link | Keyboard users main content ki skip cheyadaniki |
3prefers-reduced-motion & Touch Targets
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
@media (prefers-contrast: more) {
:root {
--text-primary: #000000;
--border-color: #000000;
}
.btn { border: 2px solid currentColor; }
}
/* Minimum 44x44px touch targets (WCAG 2.5.5) */
.nav-link, .btn, input[type="checkbox"] {
min-height: 44px;
min-width: 44px;
}4Screen Reader Content & Readable Typography
CSS — .sr-only Utility▶ Try in Editor
.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;
}
.prose {
max-width: 65ch;
font-size: clamp(1rem, 2.5vw, 1.125rem);
line-height: 1.7;
}.sr-only — visually hidden but screen readers read cheyochu. Icon buttons ki accessible label provide cheyadaniki essential.
⚠️ Common Mistakes
- outline: none on all elements — keyboard users lost
- Red/green only for error/success — colorblind users fail
- Auto-playing animations ignoring prefers-reduced-motion
- Touch targets below 44px on mobile
- display:none on content that screen readers should read
❓ Mini Quiz
Q1 WCAG AA normal text contrast ratio entha?
Minimum 4.5:1 contrast ratio between text and background.
Q2 .sr-only vs display:none difference enti?
sr-only visually hides but screen readers access cheyochu. display:none completely removes from accessibility tree.
✅ Quick Recap
- 4.5:1 contrast minimum for body text (WCAG AA)
- :focus-visible for keyboard focus — never remove outline without replacement
- prefers-reduced-motion: disable/simplify animations
- 44px minimum touch targets on mobile
- .sr-only for screen-reader-only accessible labels
- Never convey meaning through color alone