CSS Accessibility

CSS Accessibility

CSS accessibility focuses on making websites usable for everyone, including users with visual, motor, or cognitive impairments. Good accessibility improves usability, SEO, and overall user experience.

Why Accessibility Matters

• Helps users with disabilities navigate content
• Improves keyboard and screen reader support
• Enhances readability and clarity
• Often required by accessibility guidelines (WCAG)

Color Contrast

Text must have enough contrast with the background to be readable.

• Avoid light gray text on white backgrounds
• Use strong contrast for body text
• Check contrast ratios when choosing colors

body {
  color: #222;
  background: #fff;
}

Readable Font Sizes

Use scalable units and avoid very small font sizes.

body {
  font-size: 1rem;
  line-height: 1.6;
}

Avoid fixing font sizes in pixels for long text.

Focus Styles

Keyboard users rely on visible focus indicators. Never remove focus outlines without providing a replacement.

:focus {
  outline: 3px solid #1f4bd8;
  outline-offset: 2px;
}

This helps users understand where they are on the page.

Hover Is Not Enough

Information that appears on hover should also be accessible via focus.

.button:hover,
.button:focus {
  background: #eef3ff;
}

Accessible Hiding

Avoid using display: none for content that should be read by screen readers.

Use a visually hidden utility class instead:

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Spacing and Click Targets

Clickable elements should be large enough and spaced apart.

.button {
  padding: 10px 16px;
  border-radius: 10px;
}

This helps users with motor impairments.

Avoid Text in Images

Text inside images cannot be resized or read by screen readers. Use real text whenever possible.

Code Challenge

Goal: Improve accessibility using CSS best practices.

HTML:

<a href="#" class="btn">Continue</a>

Task:

• Ensure good color contrast
• Add visible focus styles
• Make hover and focus styles consistent
• Ensure comfortable click area

Try a Solution:

.btn {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 10px;
  background: #1f4bd8;
  color: #fff;
  text-decoration: none;
}

.btn:hover,
.btn:focus {
  background: #1638a8;
}

.btn:focus {
  outline: 3px solid #000;
  outline-offset: 2px;
}

What’s Next?

Next, you will learn how to build complete page layouts using CSS.