CSS Accessibility
Accessible styling includes readable contrast, keyboard focus, flexible text sizing, and content that survives zoom. Meaning remains in the HTML while CSS helps visitors perceive it.
How it works
- Inspect the computed value as well as the declaration. Relative lengths, inheritance, and the cascade may make the final result different from a first guess.
- Prefer a small, predictable rule set. Fix the reason a declaration loses before adding more selectors or importance flags.
A practical example
The HTML supplies the content; the CSS below styles it. Open both together in the playground, then change the lesson rules at the end of the stylesheet.
<article class="card"><span class="badge">This Saturday</span><h2>Neighbourhood repair club</h2><p>Bring a small project. Share a useful skill.</p><a href="#booking">View the workshop</a></article>
body { margin: 0; padding: 24px; font-family: system-ui, sans-serif; color: #25332d; background: #f4f7f2; }
.card { padding: 20px; background: white; border: 1px solid #d4dfd6; }
h2 { margin-top: 0; }
p { line-height: 1.6; }
a { color: #17634c; }
.badge { display: inline-block; margin-bottom: 12px; font-size: .8rem; }
.layout { display: grid; gap: 16px; }
.photo { width: 100%; height: 160px; background: linear-gradient(135deg, #e4af6b, #668cba); }
button, input, select { font: inherit; padding: 8px; }
label { display: block; margin-block: 12px 4px; }
/* This lesson */
a { text-decoration: underline; text-underline-offset: .2em; }
a:focus-visible { outline: 3px solid #835224; outline-offset: 4px; }
p { line-height: 1.7; }
Accessible styling includes readable contrast, keyboard focus, flexible text sizing, and content that survives zoom. Meaning remains in the HTML while CSS helps visitors perceive it.