Senior LevelCSS & Modern Layouts
What CSS techniques ensure WCAG 2.2 accessibility compliance?
❓ Interview Prompt: List CSS-specific WCAG requirements: contrast ratios, focus indicators, motion, text sizing, and touch targets.
WCAG 2.2 CSS Requirements:
1
Contrast Ratio (1.4.3): Text must have ≥4.5:1 contrast against background (3:1 for large text 18px+ bold).
2
Focus Visible (2.4.7): All interactive elements must show a visible focus indicator. Use
:focus-visible with 3px+ outlines.3
Text Resize (1.4.4): Content must remain readable at 200% browser zoom. Use
rem units, not px.4
Motion (2.3.3): Respect
prefers-reduced-motion. No auto-playing animations lasting >5 seconds.5
Touch Target (2.5.8): Interactive elements must be ≥24×24 CSS pixels with ≥24px spacing.
6
Reflow (1.4.10): No horizontal scrolling at 320px viewport width.
7
Text Spacing (1.4.12): Content must work with increased letter-spacing (0.12em) and line-height (1.5).
Code Implementation Example
css
/* Focus indicator (WCAG 2.4.7) */
:focus-visible {
outline: 3px solid #3d2c2e;
outline-offset: 2px;
}
/* Touch target minimum size (WCAG 2.5.8) */
button, a {
min-height: 44px;
min-width: 44px;
padding: 12px 16px;
}
/* Respect motion preferences (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition-duration: 0.01ms !important; }
}💡WCAG-compliant focus indicators, touch targets, and motion respect.
🎯 Interview Key Takeaway
WCAG 2.2 requires visible focus, 4.5:1 contrast, 44px touch targets, rem sizing, and prefers-reduced-motion support.
#WCAG#Accessibility#Compliance#Senior
Back to all CSS & Modern Layouts Questions→