OpenClaw LaunchOpenClaw Launch
♿

Accessibility Styling Guide

Verified

by Community

Learn CSS techniques for building accessible interfaces. Covers focus indicators, color contrast, reduced motion preferences, screen reader-only styles, touch target sizing, and high contrast mode support.

accessibilitya11yinclusivewcagcss

Accessibility Styling Guide

A guide to writing CSS that ensures accessible, inclusive user interfaces for all users regardless of ability.

Usage

Ask about accessible styling, focus management, contrast, motion preferences, or inclusive design patterns.

Examples

  • "Create custom focus indicators that meet WCAG guidelines"
  • "How do I implement prefers-reduced-motion support?"
  • "Style a visually-hidden class for screen readers"

Guidelines

  • Never remove focus outlines without providing alternatives
  • Ensure 4.5:1 contrast ratio for normal text (WCAG AA)
  • Respect prefers-reduced-motion for all animations
  • Size touch targets at least 44x44 CSS pixels
  • Use relative units for text to support browser zoom

More CSS & Styling Skills

🎨
Tailwind Component Library

Build reusable UI component libraries with Tailwind CSS.

📐
CSS Grid Layout Builder

Design complex page layouts with CSS Grid.

📏
Flexbox Pattern Guide

Solve common layout problems with Flexbox patterns.

🎬
CSS Animation Creator

Create smooth CSS animations and transitions.