Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Ensure enough color contrast for readability
Support keyboard navigation with focus styles
Hide elements visually but keep them for screen readers
Make text readable and resizable
Respect user preferences (dark mode, reduced motion)
Help everyone use your website
Show which element is selected when using keyboard
button:focus { outline: 2px solid blue; }Text must be readable against background
Minimum 4.5:1 ratio for normal textLet users resize text without breaking layout
Use rem units, not fixed pxHide decorative elements, keep important content
.sr-only class for screen-reader-only text/* NEVER do this! */
button:focus {
outline: none; /* ❌ Makes keyboard navigation impossible */
}
/* GOOD - Clear, visible focus */
button:focus {
outline: 3px solid #3b82f6;
outline-offset: 2px;
}
/* BETTER - Custom focus ring */
button:focus-visible {
outline: 3px solid #3b82f6;
outline-offset: 2px;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}
/* Modern approach */
a:focus-visible,
button:focus-visible,
input:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 2px;
border-radius: 4px;
}outline: none unless you replace it with another clear focus indicator. Keyboard users need to see where they are on the page!<div class="container">
<h2>Try tabbing through these buttons</h2>
<p class="hint">Press Tab key to navigate →</p>
<div class="button-group">
<button class="btn btn-primary">Primary Action</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Save Changes</button>
</div>
<div class="links">
<a href="#">Learn More</a>
<a href="#">Documentation</a>
<a href="#">Contact Us</a>
</div>
</div>Loading preview...
/* Visually hide but keep for screen readers */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* Make visible when focused (for skip links) */
.sr-only-focusable:focus {
position: static;
width: auto;
height: auto;
overflow: visible;
clip: auto;
white-space: normal;
}<!-- Add context for screen readers -->
<button>
<svg><!-- icon --></svg>
<span class="sr-only">Delete item</span>
</button>
<!-- Skip to main content link -->
<a href="#main" class="sr-only-focusable">
Skip to main content
</a>
<main id="main">
<!-- Your content -->
</main>.sr-only for icon buttons, decorative images, or additional context that sighted users don't need but screen reader users do!/* ❌ BAD - Low contrast (fails WCAG) */
.text-bad {
color: #cccccc;
background: #ffffff;
/* Contrast ratio: 1.6:1 - Too low! */
}
/* ✅ GOOD - Normal text (WCAG AA) */
.text-normal {
color: #767676;
background: #ffffff;
/* Contrast ratio: 4.5:1 - Passes! */
}
/* ✅ BETTER - Large text (WCAG AA) */
.text-large {
font-size: 24px;
color: #959595;
background: #ffffff;
/* Contrast ratio: 3:1 - Passes for large text! */
}
/* ✅ BEST - High contrast (WCAG AAA) */
.text-best {
color: #333333;
background: #ffffff;
/* Contrast ratio: 7:1 - Excellent! */
}/* Animations by default */
.box {
transition: transform 0.3s ease;
}
.box:hover {
transform: scale(1.1) rotate(5deg);
}
/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
.box {
transition: none;
}
.box:hover {
transform: none; /* No animations */
}
/* Keep functionality, remove motion */
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}/* Light mode (default) */
body {
background: #ffffff;
color: #1f2937;
}
/* Respect dark mode preference */
@media (prefers-color-scheme: dark) {
body {
background: #1f2937;
color: #f3f4f6;
}
a {
color: #60a5fa; /* Better contrast in dark */
}
}Clear labels, focus states, and error messages
Keyboard accessible menus and skip links
Buttons, links, and controls with clear focus
Readable text with proper contrast and sizing
🛠️ Useful Tools: Chrome DevTools (Lighthouse accessibility audit), WebAIM Contrast Checker, axe DevTools browser extension, and NVDA/JAWS screen readers for testing.