CSS and Accessibility

Color Contrast

Text should have a sufficient color contrast against its background to be readable by people with low vision. The WCAG recommends a contrast ratio of at least 4.5:1 for normal text.

Focus States

It's crucial to have a visible focus state for interactive elements like links and buttons. This helps keyboard-only users know where they are on the page. Never remove the default outline without providing an alternative style.

a:focus {
  outline: 2px solid blue;
  background-color: lightyellow;
}

Hiding Content

Sometimes you need to hide content visually but keep it available for screen readers (e.g., a "Skip to main content" link). Using display: none; or visibility: hidden; will hide the content from all users, including screen reader users. Instead, use a combination of CSS properties to move the content off-screen.

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