CSS Accessibility and Reduced Motion

Accessible CSS helps people read, navigate and interact with the same HTML using different preferences and input methods.

Check foreground/background contrast, ensure keyboard focus is obvious using :focus-visible, and avoid relying on color alone to communicate meaning. Keep text at readable sizes and test zoom/reflow.

Use @media (prefers-reduced-motion: reduce) to remove or minimize nonessential movement. CSS can enhance accessibility, but semantic HTML and correctly associated form labels remain necessary.

When a keyboard user tabs into a control, :focus-visible can show a ring. With reduced motion enabled, a media-query override prevents unnecessary animation.

A real button remains visible to both pointer and keyboard users.

HTML

<button type="button" class="safe-action">Save changes</button>

CSS

.safe-action { padding: 12px 18px; background: #1d4ed8; color: #fff; border: 2px solid transparent; border-radius: 8px; font-weight: 700; } .safe-action:focus-visible { outline: 3px solid #f59e0b; outline-offset: 4px; }

Rendered output

Observe: Press Tab to see the focus ring around the button.

Move on hover only when reduced motion is not requested.

HTML

<button type="button" class="safe-action">Save changes</button>

CSS

.safe-action { padding: 12px 18px; background: #0f766e; color: white; border: 0; border-radius: 8px; transition: transform 200ms ease; } .safe-action:hover { transform: translateY(-3px); } .safe-action:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .safe-action { transition: none; } .safe-action:hover { transform: none; } }

Rendered output

Observe: Users requesting reduced motion see the state without movement.

When a keyboard user tabs into a control, :focus-visible can show a ring. With reduced motion enabled, a media-query override prevents unnecessary animation.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• Removing outline without a replacement makes focus hard to locate.

• Low-contrast text can be unreadable even when its font size seems large.

Navigate the demos using only Tab and Shift+Tab. Enable reduced motion in your operating system and compare hover behavior.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Accessibility is a baseline requirement, not a decoration added at the end.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.