Focus rings and visually hidden text
Press Tab: the button and link get a clear blue ring, but clicking with a mouse doesn't show it on the button (that is :focus-visible at work). The hidden span is still displayed (not none; position: absolute turns its inline into block), so screen readers announce "Close menu".
CSS decides whether people can read, see where they are, and use a page comfortably: give text enough contrast, keep a clear focus indicator, hide text visually without hiding it from screen readers, survive forced-colours mode, and calm motion for people who ask for less.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a :focus-visible style for buttons that also stays visible in forced colours mode, even though the normal design uses a box-shadow ring.
Write CSS that turns off a .carousel slide animation for users who prefer reduced motion.
Write a .visually-hidden class and use it to label a search button that only shows a magnifying-glass icon.
Explain it without notes
What contrast ratios does WCAG AA require, and for what?
Why is outline: none harmful, and how do you style focus properly?
How do you hide text visually but keep it for screen readers? Why not display: none?
What is forced colours mode, and how should CSS handle it?
How should CSS respond to prefers-reduced-motion?
Preview
Console
Nothing logged yet.Expected console output
size: 1px 1px
display: block
button text for screen readers: Close menu