CSS Accessibility
Contrast, focus rings, reduced motion, and inclusive CSS patterns.
Introduction to Accessible CSS
What You'll Learn
Accessibility (a11y) is not only ARIA attributes—CSS strongly affects perception: contrast, focus visibility, target size, motion, and reading order. This tutorial covers practical patterns you can apply today.
- Color contrast and non-color cues
- Visible focus styles for keyboard users
- Respecting
prefers-reduced-motion - Hit targets, line length, and zoom-friendly layouts
WCAG guidelines provide measurable targets (e.g. contrast ratios). CSS is how you meet many of them without breaking your design system.
Color Contrast & Non-Color Indicators
Theory: Text and interactive elements need sufficient contrast against their background. Do not rely on color alone for errors—add icons, text, or patterns.
Example: Safer “muted” text
/* Prefer darker grays on white; #94a3b8 often fails WCAG AA for body text */
body { color: #0f172a; background: #ffffff; }
.text-muted-a11y { color: #475569; }
.text-error {
color: #b91c1c;
font-weight: 600;
}
.text-error::before {
content: "⚠ ";
}Focus Visible: Keyboard & Click
Theory: :focus-visible shows a ring for keyboard users while avoiding ugly outlines on every mouse click. Never use outline: none without a replacement.
Example: Focus ring
a:focus-visible,
button:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 2px;
}Reduced Motion
Theory: Some users experience vestibular disorders or migraines from motion. Honor prefers-reduced-motion: reduce by disabling or shortening animations.
Example
@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;
}
}Touch Targets & Readable Line Length
Theory: Interactive controls should be large enough to tap (roughly 44×44 CSS pixels). Long lines of text are hard to read—use max-width on text columns (often 60–75ch).
Example
.btn-touch {
min-height: 44px;
min-width: 44px;
padding: 0.5rem 1rem;
}
.prose {
max-width: 65ch;
line-height: 1.6;
}Summary
Test with keyboard only, zoom to 200%, and run automated contrast checks. Accessible CSS pairs with semantic HTML: landmarks, headings, and labels do the structural work; your styles make that structure perceivable for everyone.
Accessibility MCQ Test
Practice accessibility concepts with 15 interview-style multiple choice questions.
Accessibility Interview Questions
Prepare for accessibility interviews by focusing on structure, practical usage, and maintainable styling patterns.
Basic Interview Q&A
- What is Accessibility in CSS?Accessibility focuses on structured, readable styling patterns that scale in real projects.
- Why is structure important?Good structure reduces bugs, improves collaboration, and makes updates easier.
- How do selectors affect structure?Selector strategy controls reusability and override complexity.
- What is maintainable CSS?Maintainable CSS is modular, readable, and easy to extend without regressions.
- When should you split files?Split when features/components grow, so each file has a clear responsibility.
- How does naming improve clarity?Consistent naming makes components predictable and easier to debug.
- What is cascade awareness?Understanding cascade helps you avoid accidental overrides and style leaks.
- Why avoid over-specific selectors?Over-specific selectors are hard to override and increase maintenance cost.
- How do utility classes help?Utilities provide quick, reusable single-purpose styles.
- What is a good interview answer style?Give a clear definition first, then one practical implementation example.
Advanced Interview Q&A
- How do cascade layers improve architecture?
@layerdefines priority explicitly, reducing conflicts across modules. - How do container queries help component design?They make components responsive to their parent size, not only viewport size.
- What causes specificity debt?Chained selectors and frequent overrides create brittle style systems.
- How do you optimize CSS delivery?Minify, remove unused styles, and inline critical CSS where useful.
- How do design tokens scale teams?Tokens enforce consistency and simplify theme updates across products.
- When is utility-first strategy appropriate?It works well when rapid UI composition and consistency are priorities.
- How do you benchmark CSS performance?Audit render cost, style recalculations, and layout shifts with DevTools.
- How do you refactor legacy CSS safely?Refactor in slices, add visual regression checks, and remove dead rules gradually.
- What are paint-friendly transitions?Prefer transform/opacity over layout-triggering properties for smooth animation.
- How do you maintain accessibility while styling?Preserve focus visibility, contrast, semantic intent, and non-color indicators.