CSS Accessibility

Imagine building a public park with beautiful play zones and picnic tables, but when you look at the entrance, there are only steep, rocky stairs—no ramps, paths, or clear signs. Visitors using wheelchairs or strollers would be completely blocked from enjoying your park. Web accessibility (A11y) is building those essential ramps and signs for your website. It is the art of styling your page so that everyone, including visually impaired users navigating with screen readers or people unable to use a mouse, can browse your site easily. Using correct focus indicators, high color contrast, and hidden labels keeps your page inclusive and accessible to everyone.

In this page:

Keyboard Navigation and Focus States
Color Contrast and Text Legibility
The Screen Reader Only (.sr-only) Hack
Respecting Motion Settings with prefers-reduced-motion
Styling ARIA States

Keyboard Navigation and Focus States

Keyboard-only and visually impaired users rely on the Tab key to navigate webpages chronologically. You must ensure that every interactive element has a visible focus indicator (like a border outline) so users can see where they are on the page.

Note: Use the :focus-visible selector to apply prominent outlines only when elements are focused using a keyboard.

Warning: Never use CSS outline: none to hide browser focus outlines without replacing them with custom focus styles.

Example: Keyboard Navigation and Focus States

css

<style>
a:focus-visible {
  outline: 3px solid orange;
}
</style>
<a href="#">Tab to me to see a visible focus outline</a>

Color Contrast and Text Legibility

Web Content Accessibility Guidelines (WCAG) require that your text colors have sufficient contrast against the background fill. This ensures that users with visual impairments or people reading screens under bright sunlight can read your content.

Note: Aim to maintain a contrast ratio of at least 4.5:1 for regular paragraph text.

Warning: Using light gray text on white backgrounds makes your page inaccessible, causing search engine bots to mark down your quality score.

Example: Color Contrast and Text Legibility

css

<style>
.good { color: #111; background: #fff; }
.poor { color: #ccc; background: #fff; }
</style>
<p class="good">4.5:1 contrast, easy to read</p>
<p class="poor">Poor contrast, hard to read</p>

The Screen Reader Only (.sr-only) Hack

Sometimes you need to provide extra instructions or labels specifically for screen-reader users without displaying them visually on the screen. The .sr-only class hides text visually while keeping it fully accessible to screen readers.

Note: Use the .sr-only class to describe the action of icon-only buttons clearly.

Warning: Do not use display: none to hide accessibility labels, as screen readers will completely ignore them.

Example: The Screen Reader Only (.sr-only) Hack

css

<style>
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}
</style>
<button>🔍<span class="sr-only">Search</span></button>

Respecting Motion Settings with prefers-reduced-motion

Some users suffer from motion sickness or vestibular disorders that can be triggered by rapid, bouncing, or spinning web animations. The prefers-reduced-motion media query allows you to disable or slow down your animations automatically based on their system settings.

Note: Use prefers-reduced-motion to swap rapid moving animations with clean, instant transitions automatically.

Warning: Failing to respect motion settings can cause physical discomfort for some of your visitors.

Example: Respecting Motion Settings with prefers-reduced-motion

css

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none;
    transition: none;
  }
}

Styling ARIA States

When building interactive components (like custom dropdown tabs or modals), you must use standard ARIA attributes (like aria-expanded="true") to describe their active states to screen readers. You can also target these attributes directly inside your stylesheets to apply custom styles based on their active states.

Note: Use ARIA state selectors in your CSS to keep your styles and accessibility states cleanly aligned.

Warning: Never use custom data attributes as a replacement for standard accessibility ARIA roles.

Example: Styling ARIA States

css

<style>
[aria-expanded="true"] {
  background: #eee;
}
</style>
<button aria-expanded="true">Open</button>

Common Mistakes

Hiding browser focus outlines using CSS (outline: none) without replacing them with custom focus styles.
Using low-contrast color combinations that make your text unreadable on mobile screens.
Using display: none to hide elements from screens while expecting screen readers to read them.

Chapter Summary

Web accessibility ensures your website can be navigated by anyone, regardless of physical or cognitive abilities.
Always include distinct focus indicators on your interactive elements using :focus-visible selectors.
Use the .sr-only class to hide decorative text, prefers-reduced-motion to disable rapid animations, and ARIA selectors to style active layout states.

Browser Support

Standard CSS accessibility selectors and prefers-reduced-motion queries are supported natively by all modern web browsers.

🔒

Chapter Quiz — Complete all 25 topics to unlock

0/25 topics done

Complete these topics first:

← Previous Lesson CSS Dark Mode Next Lesson → CSS Performance