Advanced
Make the controls accessible
This toolbar has four accessibility bugs, all in the CSS. Fix them:
- the icon button's "Search" label is hidden from everyone; keep it invisible on screen but available to screen readers (no display: none);
- keyboard focus is invisible; give .icon-btn a visible :focus-visible outline at least 2px thick;
- the .hint text is too pale: make it pass 4.5:1 contrast on white;
- the pulsing dot must stop or calm down for users who prefer reduced motion.
What Check tests
- The label is not removed with display: none or visibility: hidden
- The label is visually hidden (no bigger than 1px)
- Keyboard focus shows an outline at least 2px thick
- The hint passes 4.5:1 contrast on white
- Motion is reduced for users who ask for it
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.