Your daily frequent11y newsletter, brought to you by @ChrisBAshton:
A Deep Dive on Skipping to Content
- Paul Ratcliffe describes a “2021-friendly” implementation of a skip link. It looks something like this (note that the text is hidden visually until it is focused – I’ve omitted this from the code below):
<a href="#skip-link-target">Skip to main content</a><a href="#skip-link-target" id="skip-link-target">Start of main content</a><main>the content</main>
- Paul points out that the use of
<main>markup means savvy screen reader users can skip straight to the main landmark. For those that rely on skip links instead, he recommends a link in the<header>which refers to a link just above the<main>(not inside it, as it would impact SEO). - I hadn’t seen an
<a>element as the target of a skip link before; Paul says this is to give users feedback that the skip link worked. If the page content is too short, the browser wouldn’t scroll and it could be difficult to show that the focus has moved otherwise. - Susanna Celso left some comments for Paul before writing a follow-up blog post, arguing that the proposed implementation could confuse users (linking to a link that links to itself, and also stating that you’ve reached the “start of main content” when technically you’re still outside that landmark. Susanna makes the case for linking to the
<main>element directly, though concedes screen readers will automatically start reading all of the text in that element, which can be an awkward experience. - Susanna concludes that the best link target would be a
<h1>, provided it’s the first element inside the<main>landmark. - An interesting and healthy discussion between two clearly knowledgeable developers – worth reading both posts!
Prefer longer newsletters? You can subscribe to week11y, fortnight11y or even month11y updates! Every newsletter gets the same content; it is your choice to have short, regular emails or longer, less frequent ones. Curated with ♥ by developer @ChrisBAshton.
