Motion, Focus, and Accessibility Tutorial | SovranCode

Course contentsMotion, Focus, and Accessibility · 16 topics

CSS Foundations

CSS Introduction Selectors and Relationships Cascade, Specificity, and Inheritance Values, Units, and Color

Layout Systems

The Box Model and Sizing Normal Flow, Display, and Positioning Flexbox CSS Grid

Applied CSS Systems

Backgrounds, Borders, and Visual Layers Interactive States and Pseudo-elements Overflow, Stacking Contexts, and Layering Transforms, Transitions, and Animation CSS Architecture, Components, and Maintenance

Responsive and Responsible CSS

Responsive Design and Container Queries Typography and Rhythm Motion, Focus, and Accessibility

CSS 63 min

Motion, Focus, and Accessibility

Style visible focus, reduced-motion alternatives, robust states, and accessible contrast.

CSS can support or block access. Keyboard focus needs a visible indicator, information must not depend on color alone, motion should respect user preference, and visually hidden text must remain available to assistive technology.

See the core pattern

Read this rule set from the outside in. Identify the inputs, the decision or transformation, and the result before changing it.

:focus-visible {
  outline: 3px solid #718817;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation: none !important;
  }
}

Working rules

Test every interactive element with a keyboard
Keep focus indicators visible against every surface
Offer a reduced-motion path without removing useful state changes

A common mistake

outline: none removes essential navigation feedback unless an equally visible replacement is provided.

Guided practice

Name the pseudo-class that targets keyboard-like focus without styling every pointer click.

Copy the example into the editable notebook below.
Change one thing at a time and keep the program or rule valid.
Explain the result in one sentence without relying on jargon.

CSS DEEP DIVE · ABOUT 35 MIN

Finish an inclusive CSS mini-project

Read the explanation, predict the visual result, then edit and run a complete example. Finish with a repair, an independent build, and a knowledge check.

Design states for more than a pointer

Hover is only one way to reach an interface. Keyboard users need a visible focus indicator, and touch users may never encounter a useful hover state. :focus-visible lets browsers apply focus styling when their heuristics indicate it should be visible. Keep the default outline until you have an effective replacement. Test the ring against all adjacent surfaces and ensure an overflow-clipped ancestor does not hide it. Use actual links and buttons so CSS enhances existing behavior rather than attempting to recreate semantics.

Respect preferences without removing information

A reduced-motion preference asks you to reduce unnecessary movement, not hide the result of an action. Apply transitions to named properties and provide a targeted reduced-motion rule for decorative transforms and animations. Avoid a global tiny-duration animation hack when you can disable the specific motion directly; scripts can depend on animation events, so changes need testing. Errors, selected states, and success messages should include text or another clear cue rather than color alone. Also check forced-color behavior and keep important controls visible when your chosen palette is replaced.

Navigate with Tab, then emulate reduced motion in your browser's rendering tools. Compare the button movement without removing the button's label or focus indicator.

Saved CSS practice

Edit the CSS inside the style element. Account work syncs; guest work stays on this device.

Code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS practice</title>
<style>
body { font: 1rem/1.7 system-ui; padding: 2rem; color: #172b40; }
form { display: grid; gap: .75rem; max-width: 30rem; }
input, button { font: inherit; padding: .75rem; border: 2px solid #172b40; }
button { background: #173c88; color: white; transition: transform 150ms ease; }
button:hover { transform: translateY(-2px); }
:focus-visible { outline: 3px solid #b04c00; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { button { transition: none; } button:hover { transform: none; } }
</style>
</head>
<body>
<main><h1>Workshop signup</h1><p>Practice keyboard navigation through this small form.</p><form><label for="email">Email address</label><input id="email" type="email" required><button type="submit">Check email format</button></form><p>No signup is sent by this preview. Browser validation is only one part of a real form.</p></main>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS practice</title>
<style>
body { font: 1rem/1.7 system-ui; padding: 2rem; color: #172b40; }
form { display: grid; gap: .75rem; max-width: 30rem; }
input, button { font: inherit; padding: .75rem; border: 2px solid #172b40; }
button { background: #173c88; color: white; transition: transform 150ms ease; }
button:hover { transform: translateY(-2px); }
:focus-visible { outline: 3px solid #b04c00; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { button { transition: none; } button:hover { transform: none; } }
</style>
</head>
<body>
<main><h1>Workshop signup</h1><p>Practice keyboard navigation through this small form.</p><form><label for="email">Email address</label><input id="email" type="email" required><button type="submit">Check email format</button></form><p>No signup is sent by this preview. Browser validation is only one part of a real form.</p></main>
</body>
</html>

Result

Practice here: edit your HTML or CSS and compare the result. Live preview updates after a short pause. Scripts, form submissions, and external resources are blocked. Wide previews scroll inside this panel. Running code does not grade or save it; use the separate learning and save controls.

Run in new window

Loading saved work…

Edit the CSS inside the style element and compare the result in the live preview. Your work saves automatically; you can also download a local copy.

DEBUGGING CHALLENGE

Find the faulty assumption

Explain the problem and write your repair before opening the solution.

button:focus { outline: none; }
button:hover { transform: scale(1.2); transition: all 1s; }

Reveal repair and explanation

button:focus-visible { outline: 3px solid #b04c00; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { button:hover { transform: none; transition: none; } }

Keep a visible focus treatment and provide a reduced-motion alternative. A hover effect cannot replace keyboard feedback.

INDEPENDENT LAB

Build it without copying

Combine the course into a responsive workshop page: readable article text, a Grid card collection, a wrapping Flexbox toolbar, and a labeled form. Audit it with a keyboard and reduced motion.

Code

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Finish an inclusive CSS mini-project lab</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Build your solution here. */
  </style>
</head>
<body>
  <main>
    <h1>Finish an inclusive CSS mini-project</h1>
    <p>Replace this starter content with the structure your solution needs.</p>
  </main>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Finish an inclusive CSS mini-project lab</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Build your solution here. */
  </style>
</head>
<body>
  <main>
    <h1>Finish an inclusive CSS mini-project</h1>
    <p>Replace this starter content with the structure your solution needs.</p>
  </main>
</body>
</html>

Result

Practice here: edit your HTML or CSS and compare the result. Live preview updates after a short pause. Scripts, form submissions, and external resources are blocked. Wide previews scroll inside this panel. Running code does not grade or save it; use the separate learning and save controls.

Self-review checklist

All controls have visible, unclipped keyboard focus and meaningful labels.The page reflows at 320px and 200% zoom without losing content.Motion has a reduced-motion alternative and states are not communicated by color alone.You can explain the cascade, sizing, and layout choices in your own stylesheet.

What did you test and change?

Loading saved work…

This lab is saved separately from the worked example. The checklist is a self-review, not an automatic grade.

CSS knowledge check

Answer both questions correctly to pass this lesson check. Account scores are recomputed on the server. This is a learning check, not certification.

1. Which is a safe reason to remove the default focus outline?The design looks cleanerAn equally visible focus treatment replaces itThe page supports mouse hover

2. What should reduced motion change?Hide all controlsRemove all state feedbackReduce unnecessary movement while preserving information

Loading saved work…