CSS Accessibility and Compatibility

CSS accessibility means styling a website so that people with different abilities can read, understand, and use it comfortably.

Accessible CSS supports users who may have:

• Low vision or colour blindness
• Difficulty reading small text
• Limited hand movement
• Sensitivity to motion
• A need to navigate with a keyboard

CSS cannot make a website fully accessible by itself, but it plays an important role.

Use Readable Text

Text should be large enough and easy to read. Avoid decorative fonts for long paragraphs.

body {
  font-family: Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

p {
  max-width: 70ch;
}

In this example:

• 1rem provides a readable default size.
• line-height creates space between lines.
• 70ch prevents paragraphs from becoming too wide.

Avoid disabling browser zoom because some users need to enlarge the page.

Provide Good Colour Contrast

Text must be clearly visible against its background.

.notice {
  color: #222;
  background-color: #f5f5f5;
}

Light-grey text on a white background can be difficult to read:

/* Avoid this low-contrast combination */
.notice {
  color: #ccc;
  background-color: white;
}

Do not use colour as the only way to communicate information. Add text, icons, borders, or other visual clues.

.error {
  color: #b00020;
  border-left: 4px solid #b00020;
}

Keep Keyboard Focus Visible

People who cannot use a mouse may navigate with the Tab key. The focused element needs a clear outline.

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid #1f4ed8;
  outline-offset: 3px;
}

The :focus-visible pseudo-class displays the outline when keyboard focus needs to be shown.

Avoid removing focus styles without adding a suitable replacement:

/* Avoid this */
button:focus {
  outline: none;
}

Create Large Clickable Areas

Buttons and links should be large enough to select comfortably.

.button {
  display: inline-block;
  padding: 12px 20px;
  min-height: 44px;
  border-radius: 6px;
}

Also provide enough space between nearby controls to prevent accidental clicks.

Make Links Easy to Identify

Links should not depend only on colour. An underline makes them easier to recognise.

.content a {
  color: #1746b0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.content a:hover {
  text-decoration-thickness: 2px;
}

Always provide a visible :hover or :focus-visible effect for interactive elements.

Respect Reduced-Motion Preferences

Some users experience discomfort from spinning, zooming, or rapidly moving content. The prefers-reduced-motion media query can reduce these effects.

.card {
  transition: transform 0.3s ease;
}

.card:hover {
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }

  .card:hover {
    transform: none;
  }
}

This keeps the page comfortable for users who have enabled reduced motion on their device.

Do Not Hide Important Content Incorrectly

Using display: none removes content visually and usually hides it from assistive technology.

For text meant only for screen-reader users, use a visually hidden class:

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

Accessible CSS uses readable text, strong contrast, visible focus styles, comfortable controls, and limited motion. Test your website with keyboard navigation, zoom, and different screen sizes to find accessibility problems early.