CSS Accessibility Styling
CSS Accessibility Styling
Good CSS styling should help all users interact with your website, including those with visual or mobility challenges.
1. Use Visible Focus Indicators
The CSS :focus pseudo-class is used to select and style the element that gets focus.
Always use the :focus state so that keyboard and screen reader users can see which element is active.
Example
a:focus,
button:focus,
input:focus {
outline: 2px solid #005fcc;
outline-offset: 2px;
}
Try it Yourself »
2. Provide High Contrast
Always use high contrast between text and background to ensure readability.
3. Avoid Styling that Hides Focus
Never remove outlines without replacing them with another visible focus style.
4. Use Semantic HTML + CSS
Use semantic elements instead of using non-semantic tags like <div> for everything.
Example
nav {
background-color: #333333;
color: white;
}
aside {
background-color: #333333;
color: white;
}
5. Respect User Preferences
The CSS prefers-reduced-motion media feature lets you check if
a user has asked to reduce motion, such as animations or transitions.
Some users have motion sensitivity and prefer websites with less animation. You can use this media query to turn off or tone down animations when needed:
Example
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
Try it Yourself »
You will learn more about media queries in a later chapter.
Summary
- Keep focus outlines visible
- Maintain good color contrast
- Use semantic HTML elements
- Respect motion preferences
