All six exercises / Exercise 06
Find the bug
The control the Tab key skips
Replace a pointer-only control with a native button.
Observe the evidence
The orange control has a click handler, but it is a div. Try reaching it with Tab from the preceding link.
Starting code
<div class="action">Show hint</div>
<!-- A click listener is attached in JavaScript. -->Working demonstration
This preview is deliberately broken at first. Its behaviour is contained here.
Give me a hint
A visual button is not necessarily a button in the document.
Read the solution and corrected code
<button class="action" type="button">Show hint</button>
<!-- The same click listener still works. -->The broken div is intentionally inaccessible as a teaching example. All exercise controls outside that preview remain native controls. In the repaired version, Tab reaches the button and Space or Enter activates it. A native button also exposes the correct role.
Make the lesson your own
Navigate your own page using only Tab, Shift+Tab, Enter and Space. Keep a visible focus indicator and use meaningful control labels.