A11y -- skip to main / managing focus

[lhenze]

Overview

We need "skip links" to allow users to skip over navigation and get directly to the main content. This applies especially to people using screenreaders, keyboards-only, and screen magnifiers.

Required behavior

When the pages loads, keyboard users should be able to press tab and have a link appear that says "skip to main"; if they press return, it should jump to the main content. If they press tab again, the first interactive element in the main content should get focus.

Note, this works best on Chrome; for Macs, latest Firefox and Safari have some general focus quirks that make this tricky to test.

Implementation

Every page should have a link at the top of the page, which is usually hidden, but appears when focused. It should be linked to #main id, which should be attached to the page's main landmark.

W3c description

https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html

Update

Originally, I thought it wasn't behaving well on the search page, but on revisiting it now, it seems fine.