CSS Accessibility

Accessibility (a11y) means making your website usable by as many people as possible.

1. Color Contrast

Ensure there is sufficient contrast between text and background colors.

Good Contrast (Easy to read)

Bad Contrast (Hard to read)

2. Focus Indicators

Never remove the default outline on focus unless you replace it with another visible indicator. Keyboard users rely on this.

3. Responsive Font Sizes

Use relative units like em or rem for font sizes so users can scale text according to their browser settings.

4. Hide Content Correctly

To hide content visually but keep it available for screen readers, use a specific CSS class instead of display: none.

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

Example

/* Good Focus Style */
button:focus {
  outline: 3px solid #4A90E2;
  outline-offset: 2px;
}