Accessibility in CSS is crucial because it ensures that all users, including those with disabilities, can effectively navigate and understand web content. To achieve this, first, use high-contrast colors wisely by meeting WCAG contrast ratios, testing combinations with tools like WebAIM Contrast Checker, avoiding reliance on color alone to convey meaning, considering dark mode and dyslexia-friendly preferences. Second, make focus states visible and clear by keeping :focus styles visible, avoiding outline: none unless replacing it, and combining border, box-shadow, or background tweaks for better visibility. Third, ensure readability when zoomed by using relative units, avoiding fixed widths and problematic absolute positioning, and not blocking text resizing on mobile. Fourth, hide elements responsibly by using a .visually-hidden class instead of display: none or visibility: hidden to keep content accessible to screen readers.

Accessibility (a11y) isn’t an extra feature — it’s a core part of building websites. If your CSS gets in the way of accessibility, even the most semantic HTML won't help much. Here's how to make sure your styling supports good accessibility.

Use high-contrast colors wisely

Color contrast is one of the easiest things to overlook and one of the most impactful for readability. Text needs to be clearly distinguishable from its background. The WCAG recommends at least a 4.5:1 contrast ratio for normal text and 3:1 for large text or UI components.

• Use tools like WebAIM Contrast Checker to test combinations.
• Don’t rely on color alone to convey information (e.g., red asterisks for required fields — add an icon or text too).
• Consider dark mode users — test your color choices in different lighting conditions.

Some people with dyslexia or visual impairments prefer off-black text on off-white backgrounds instead of pure black/white. So while high contrast is important, usability also matters beyond just passing a formula.

Make focus states visible and clear

Keyboard navigation is essential for many users, and focus styles are what make that possible. By default, browsers show a focus outline, but designers often remove it without replacing it.

• Always keep :focus styles visible.
• Avoid outline: none unless you're replacing it with something better.
• Use more than just outline — combine border, box-shadow, or background tweaks for better visibility.

For example:

button:focus,
input:focus {
  outline: none;
  border-color: #005fcc;
  box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.3);
}

This keeps the interface clean but still accessible.

Ensure content remains readable when zoomed

Many users rely on browser zoom to read content. Your layout should handle this gracefully up to at least 200%. Avoid setting fixed widths that cause horizontal scrolling when zoomed.

• Use relative units like em, rem, or % instead of pixels for layout and font sizing.
• Avoid position: absolute in ways that might hide content when zoomed.
• Test by zooming your browser and checking if all content is still usable.

Also, don’t use text-size-adjust: none; unless absolutely necessary — it prevents mobile users from resizing text themselves.

Hide elements responsibly

Sometimes you need to visually hide something but keep it available for screen readers (like a label only needed for assistive tech). Using display: none or visibility: hidden removes it completely from the accessibility tree.

Instead, use a class like this:

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

Now you can apply .visually-hidden to elements you want hidden visually but still accessible to screen readers.

That’s basically it. These aren’t complicated rules, but they make a real difference when applied consistently.

The above is the detailed content of CSS tutorial for accessibility (a11y) best practices. For more information, please follow other related articles on the PHP Chinese website!