Intermediate
Make the page keyboard-friendly
Keyboard users are stuck on this page. Fix three things:
1. Add a skip link as the very first focusable element, pointing to the main content: give <main> the id main and link to #main. Hide it off-screen until it's focused (not with display: none).
2. The Save control is a div with a click handler. Replace it with a real <button> that still calls save().
3. Delete the CSS rule that removes focus outlines (you may add a :focus-visible style instead).
What Check tests
- The first focusable element is a link to
#main <main>has the idmain- The skip link isn't hidden with display: none or visibility: hidden
- Save is a real
<button> - Clicking Save still shows the saved message
- The CSS no longer removes focus outlines
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.