CSS Accessibility (a11y)
Web accessibility ensures everyone can use your site - including users with visual impairments, motor disabilities, and cognitive differences. CSS plays a crucial role in accessibility through focus management, color contrast, text sizing, and reduced motion support.
CSS Accessibility Rules
- Focus indicators - Never remove :focus without a replacement. Use :focus-visible for keyboard-only rings
- Color contrast - WCAG AA requires 4.5:1 for normal text, 3:1 for large text. Test with DevTools
- Don't rely on color alone - Color-blind users can't distinguish red/green. Add icons, underlines, or text labels
- Text sizing - Use rem/em for font-size. Users who increase browser font size need your layout to adapt
- Touch targets - Minimum 44px × 44px for interactive elements on touch devices
- Visually hidden - sr-only class hides text visually but keeps it for screen readers
- prefers-reduced-motion - Disable or simplify animations for users with motion sensitivity
Accessibility Code
/* Focus indicators - NEVER remove! */
:focus-visible {
outline: 2px solid #667eea;
outline-offset: 2px;
}
/* Remove default only for mouse clicks */
:focus:not(:focus-visible) {
outline: none;
}
/* Screen reader only (visually hidden) */
.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;
}
/* Skip to content link */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #667eea;
color: white;
padding: 8px 16px;
z-index: 1000;
}
.skip-link:focus { top: 0; }
/* Touch-friendly targets */
button, a, [role="button"] {
min-height: 44px;
min-width: 44px;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* High contrast mode */
@media (prefers-contrast: high) {
.card { border: 2px solid currentColor; }
.btn { border: 2px solid currentColor; }
}Tip
The .sr-only CSS pattern is one of the most important accessibility tools. It hides text visually but keeps it readable by screen readers. Use it for button labels, form instructions, and icon-only elements that need text alternatives.
Ensure accessibility with high contrast ratios, visible focus outlines, and 44x44px touch targets
Common Mistake
Using display: none to hide content for accessibility. display: none removes the element from BOTH visual display AND the accessibility tree. Screen readers can't read it. Use .sr-only for visually-hidden-but-accessible content.
Practice Task
Accessibility audit: (1) Add :focus-visible outlines to all interactive elements, (2) Check color contrast ratios with DevTools (min 4.5:1), (3) Add .sr-only labels to icon-only buttons, (4) Add @media (prefers-reduced-motion: reduce) to disable decorative animations.
Quick Quiz
Key Takeaways
- Web accessibility ensures everyone can use your site - including users with visual impairments, motor disabilities, and cognitive differences.
- Focus indicators - Never remove :focus without a replacement. Use :focus-visible for keyboard-only rings
- Color contrast - WCAG AA requires 4.5:1 for normal text, 3:1 for large text. Test with DevTools
- Don't rely on color alone - Color-blind users can't distinguish red/green. Add icons, underlines, or text labels