Hone

Lessons · HTML and CSS · put the mouse down and Tab

Put the mouse down and Tab

Tab through the page. Thirty seconds finds controls you cannot reach, focus you cannot see, and an order that makes no sense.

Hone is a place to practise programming. This is one of its lessons, written out in full and free to read without an account.

What it is for

Nothing else costs so little. An automated scanner finds roughly a third of what matters and reports zero problems on a page whose alt text all says 'image'.

How to think about it

Tab from the top and watch. Then read the page's headings on their own and ask whether they make an outline. Those two passes are most of a manual audit and neither needs a tool.

Worked example

<a href="#main" id="skip">Skip to content</a><nav>…</nav><main id="main"><button id="b1">One</button><div id="d" role="button">Two</div><button id="b2">Three</button></main>
Tab three times and focus is on b1. Tab a fourth time and it is on b2 -- the div was never in the order at all, and only pressing the key shows it.

Your turn

What a checker cannot tell you about alt text.

whether any of it is 

The trap

A scanner reporting zero problems means only that it found none of the things it can detect. It is a floor worth having and never a verdict.

Practise put the mouse down and Tab on HoneA question on it now, a coding challenge where there is one, and it is remembered for review. Free, no email needed.