What is a skip navigation link, what problem does it solve, and how do you test it?

Every time a user loads a page, keyboard and screen reader users must traverse all content before the main area. On a site with a 40-item navigation menu, that's 40 Tab presses before reaching the first article — on every page. A skip link solves this with a single Tab + Enter.

Implementation: a visually hidden link as the first focusable element on the page, revealed on focus, with its href pointing to the ID of the main content element. The target element must be programmatically focusable — add tabindex="-1" to the <main> element so that focus() can be called on it even though it's not natively focusable.

Testing procedure:

1. Reload the page. Press Tab once. The skip link should appear — typically "Skip to main content".
2. Press Enter to activate it. Verify that focus has moved to (or near) the start of the main content — Tab one more time should reach the first interactive element within the main content.
3. Verify the skip link is not permanently visible — it should only appear on focus (a common visual design requirement).
4. Verify that navigating forward from the skipped content (pressing Tab after the main content) doesn't expose a focus gap.

Common failure: the skip link exists and is focusable, but the target (<main id="main">) lacks tabindex="-1". Clicking the href anchor scrolls the page (because browsers handle anchor navigation natively) but does not move keyboard focus — Tab still starts from where it was. Screen reader users are not helped.