CSS Accessibility Styling
Good accessibility means a website works for all users, people with disabilities included.
Through careful styling techniques, CSS can improve visual clarity, navigation and the overall user experience.
CSS Accessibility Styling Techniques
The techniques below will help you make your website more accessible.
1. Provide High Color Contrast
Text needs to stand out from its background to be readable, so keep the contrast between them strong. Users with visual impairments or color blindness depend on this most.
Good Color Contrast
Prompt
Create a page that demonstrates good color contrast by setting the body background to white (#ffffff) and text color to black (#000000). Include a heading and a paragraph of text.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Good Color Contrast</title>
<style>
body {
background-color: #ffffff;
color: #000000;
}
</style>
</head>
<body>
<h1>Good Color Contrast</h1>
<p>This text has good color contrast. The background is white and the text is black, making it easy to read for all users.</p>
</body>
</html>
Bad Color Contrast
Prompt
Create a page that demonstrates bad color contrast by setting the body background to light gray (#eeeeee) and text color to a slightly darker gray (#cccccc). Include a heading and a paragraph of text.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bad Color Contrast</title>
<style>
body {
background-color: #eeeeee;
color: #cccccc;
}
</style>
</head>
<body>
<h1>Bad Color Contrast</h1>
<p>This text has bad color contrast. The background is light gray and the text is a slightly darker gray, making it very hard to read.</p>
</body>
</html>
2. Provide Good Font, Font Size and Line Height
Choose an easily readable font, with a suitable size and line height. Set font-size in relative units (like rem) so that users can scale the text through their browser settings.
Good Font Example
Prompt
Create a page that demonstrates good font styling for accessibility. Set the body font-family to Arial, sans-serif, font-size to 1rem, and line-height to 1.6. Include a heading and a paragraph.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Good Font Example</title>
<style>
body {
font-family: Arial, sans-serif;
font-size: 1rem;
line-height: 1.6;
}
</style>
</head>
<body>
<h1>Good Font Example</h1>
<p>This text uses a clean, readable font (Arial), a relative font size (1rem), and a comfortable line height (1.6). This makes it easy to read on all devices.</p>
</body>
</html>
Bad Font Example
Prompt
Create a page that demonstrates bad font styling for accessibility. Set the body font to Georgia serif, font-size 12px, font-style italic, font-variant small-caps, and line-height 90%. Include a heading and a paragraph.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bad Font Example</title>
<style>
body {
font-family: Georgia, serif;
font-size: 12px;
font-style: italic;
font-variant: small-caps;
line-height: 90%;
}
</style>
</head>
<body>
<h1>Bad Font Example</h1>
<p>This text uses a serif font with a small fixed pixel size, italic style, small-caps variant, and a tight line height. This combination makes the text harder to read, especially for users with visual impairments.</p>
</body>
</html>
3. Have Visible Focus Indicators
Interactive elements (like links, buttons, input fields) should always show a clear visual style when focused, which is what the :focus pseudo-class is for.
With that style in place, keyboard users and screen readers can tell which element is currently active.
Example
Prompt
Create a page with a link, a button, and an input field. Use the :focus pseudo-class to give all three a 2px solid orange outline when focused.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Visible Focus Indicators</title>
<style>
a:focus, button:focus, input:focus {
outline: 2px solid orange;
}
</style>
</head>
<body>
<h1>Visible Focus Indicators</h1>
<p>Click on the elements below, or use the Tab key to navigate between them. Each element will show an orange outline when focused.</p>
<p><a href="#">A Link</a></p>
<p><button>A Button</button></p>
<p><input type="text" placeholder="An Input Field"></p>
</body>
</html>
4. Avoid Hiding Focus
Default focus outlines should only ever be removed if another visible focus style takes their place.
Bad Example
Prompt
Create a page with a button that has its focus outline removed using outline: none on the :focus pseudo-class. Include another button for comparison.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bad Focus Example</title>
<style>
button:focus {
outline: none;
}
</style>
</head>
<body>
<h1>Bad Focus Example</h1>
<p>The button below has no visible focus indicator. Try using the Tab key to focus it - you cannot tell which element is active.</p>
<p><button>Button 1</button></p>
<p><button>Button 2</button></p>
</body>
</html>
Good Example
Prompt
Create a page with a button that has a visible 2px solid orange outline on the :focus pseudo-class. Include another button for comparison.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Good Focus Example</title>
<style>
button:focus {
outline: 2px solid orange;
}
</style>
</head>
<body>
<h1>Good Focus Example</h1>
<p>The button below has a visible orange focus indicator. Try using the Tab key to focus it - you can clearly see which element is active.</p>
<p><button>Button 1</button></p>
<p><button>Button 2</button></p>
</body>
</html>
5. Use CSS + Semantic HTML
Leave visual styling to CSS and give content its structure through semantic HTML elements, rather than reaching for non-semantic ones like <div> everywhere.
Example
styles.css
nav {
background-color: #333333;
color: white;
}
aside {
background-color: #333333;
color: white;
}
6. Respect User Preferences
Motion sensitivity leads some users to prefer websites with less animation. To check whether someone has asked to reduce motion, such as animations or transitions, CSS offers the prefers-reduced-motion media feature.
When that setting is active on their computer, this media query lets you turn off or tone down the animations and transitions.
Example
Prompt
Create a page that uses the prefers-reduced-motion media query to disable all animations and transitions when the user prefers reduced motion. Include a simple animated element to demonstrate.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prefers Reduced Motion</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: coral;
animation: slide 2s infinite alternate;
}
@keyframes slide {
from { margin-left: 0; }
to { margin-left: 300px; }
}
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
</style>
</head>
<body>
<h1>Prefers Reduced Motion</h1>
<p>The box below is animated. If your system is set to prefer reduced motion, the animation will be disabled.</p>
<div class="box"></div>
</body>
</html>
Summary
- Keep color contrast high
- Choose fonts that are easy to read
- Leave focus outlines visible
- Structure pages with semantic HTML elements
- Honor what users prefer