Updates

en/articles/understanding-a-skip-link/index.html

@@ -150,4 +150,4 @@
 <span class="token comment">/* Show keyboard focus */</span>
 <span class="token selector">.skip-link:focus-visible</span> <span class="token punctuation">{</span>
   <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>0%<span class="token punctuation">)</span><span class="token punctuation">;</span>
-<span class="token punctuation">}</span></code></pre><h2>The final touches</h2><p>The rest of the skip link styles depends on your design vision. The most important thing is the link should be clearly visible in keyboard focus state.</p><p>WebAIM recommends not to show the link unexpectedly. This can confuse keyboard users who are seeing the interface. A smooth animation will fix this. Then the link will move out from behind the edge of the screen and move back in when there's no longer any focus on it.</p><p>You can place the links on any part of the screen. They're often placed in the top left corner, but this isn't an ironclad rule.</p><p>I've created a list of sites where the skip-link pattern is used. Press <kbd>Tab</kbd> for navigation on Windows and <kbd>Tab</kbd> or <kbd>Option Tab</kbd> on macOS.</p><ul><li><a href="https://www.nytimes.com" rel="noopener">The New York Times</a></li><li><a href="https://www.bbc.com" rel="noopener">BBC</a></li><li><a href="https://www.gov.uk" rel="noopener">GOV.UK</a></li><li><a href="https://www.deque.com" rel="noopener">Deque</a></li><li><a href="https://webaim.org" rel="noopener">WebAIM</a></li><li><a href="https://www.amazon.com" rel="noopener">Amazon</a></li><li><a href="https://www.playstation.com" rel="noopener">PlayStation</a></li><li><a href="https://www.microsoft.com/" rel="noopener">Microsoft</a></li><li><a href="https://worldofwarcraft.com/en-gb/" rel="noopener">World of Warcraft</a></li><li><a href="https://www.reddit.com" rel="noopener">Reddit</a>.</li></ul><h2>Wrapping up</h2><p>Often, the simpler something seems, the more complicated it's in reality. This happened with the skip link too.</p><p>There are quite a few ways to develop the skip link. All of them have pros and cons. I would go for the classic implementation with the link leading to the main block or the <code>h1</code> element with <code>tabindex="-1"</code>. As for styles for hiding the link, all the options are good. You can choose whichever one suits your project best. I prefer to use absolute positioning and the <code>left</code> property with a negative value.</p><h2>Further reading</h2><ul><li><a href="https://webaim.org/techniques/skipnav/" rel="noopener">″Skip Navigation″ Links</a></li><li><a href="https://www.a11yproject.com/posts/skip-nav-links/" rel="noopener">Use skip navigation links</a> by Cameron Cundiff</li><li><a href="https://css-tricks.com/a-deep-dive-on-skipping-to-content/" rel="noopener">A Deep Dive on Skipping to Content</a> by Paul Ratcliffe</li><li><a href="https://plousia.com/blog/some-thoughts-css-tricks-deep-dive-skipping-content" rel="noopener">Some thoughts on CSS Tricks' ″Deep Dive on Skipping to Content″</a> by Susanna Celso</li><li><a href="https://css-tricks.com/how-to-create-a-skip-to-content-link/" rel="noopener">How to Create a ″Skip to Content″ Link</a> by Paul Ryan</li><li><a href="https://benmyers.dev/blog/skip-links/" rel="noopener">Implement a Skip Link for Navigation-Heavy Sites</a> by Ben Myers</li><li><a href="https://axesslab.com/skip-links/" rel="noopener">Your skip links are broken</a> by Hampus Sethfors.</li></ul><hr><p>Thanks to <a href="https://twitter.com/vasiliy_dudin" rel="noopener">Vasily Dudin</a> for help with editing ❤️</p></div><section aria-labelledby="heading"><h2 id="heading">Other articles</h2><ul class="cards cards--in-article"><li class="cards__item cards__item--compact"><a href="/en/articles/css-media-features-for-a11y/" class="cards__item-link">CSS media features to improve accessibility</a> <span class="cards__item-details"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" class="cards__item-details__ico" aria-hidden="true"><path d="m12 19-7-7 7-7"></path><path d="M19 12H5"></path></svg> Previous</span></li></ul></section></main></div><footer><div class="footer wrapper"><div class="footer__column"><span aria-hidden="true">ʢ·͡ᴥ·ʡ∩๐า╭∩าﾉ\</span> <small>Tatiana Fokina, 2021–2024</small></div><div class="footer__column"><small>Build on <a href="https://www.11ty.dev/">11ty</a>, icons by <a href="https://lucide.dev">Lucide</a> </small><small>Find an issue? Let me know on <a href="https://github.com/TatianaFokina/a11y-blog">GitHub</a></small></div></div></footer><script>setTimeout(function(){var e,t,n,a;e=window,a=document,t="script",e.ym=e.ym||function(){(e.ym.a=e.ym.a||[]).push(arguments)},e.ym.l=+new Date,n=a.createElement(t),a=a.getElementsByTagName(t)[0],n.async=1,n.src="https://cdn.jsdelivr.net/npm/yandex-metrica-watch/tag.js",a.parentNode.insertBefore(n,a),ym(83045434,"init",{clickmap:!1,trackLinks:!1,accurateTrackBounce:!0})},2e3)</script><script defer="defer" data-domain="a11y-blog.dev" src="https://analytics.vasiliy-dudin.com/js/script.js"></script></body></html>
+<span class="token punctuation">}</span></code></pre><h2>The final touches</h2><p>The rest of the skip link styles depends on your design vision. The most important thing is the link should be clearly visible in keyboard focus state.</p><p>WebAIM recommends not to show the link unexpectedly. This can confuse keyboard users who are seeing the interface. A smooth animation will fix this. Then the link will move out from behind the edge of the screen and move back in when there's no longer any focus on it.</p><p>You can place the links on any part of the screen. They're often placed in the top left corner, but this isn't an ironclad rule.</p><p>I've created a list of sites where the skip-link pattern is used. Press <kbd>Tab</kbd> for navigation on Windows and <kbd>Tab</kbd> or <kbd>Option Tab</kbd> on macOS.</p><ul><li><a href="https://www.nytimes.com" rel="noopener">The New York Times</a></li><li><a href="https://www.bbc.com" rel="noopener">BBC</a></li><li><a href="https://www.gov.uk" rel="noopener">GOV.UK</a></li><li><a href="https://www.deque.com" rel="noopener">Deque</a></li><li><a href="https://webaim.org" rel="noopener">WebAIM</a></li><li><a href="https://www.amazon.com" rel="noopener">Amazon</a></li><li><a href="https://www.playstation.com" rel="noopener">PlayStation</a></li><li><a href="https://www.microsoft.com/" rel="noopener">Microsoft</a></li><li><a href="https://worldofwarcraft.com/en-gb/" rel="noopener">World of Warcraft</a></li><li><a href="https://www.reddit.com" rel="noopener">Reddit</a>.</li></ul><h2>Wrapping up</h2><p>Often, the simpler something seems, the more complicated it's in reality. This happened with the skip link too.</p><p>There are quite a few ways to develop the skip link. All of them have pros and cons. I would go for the classic implementation with the link leading to the main block or the <code>h1</code> element with <code>tabindex="-1"</code>. As for styles for hiding the link, all the options are good. You can choose whichever one suits your project best. I prefer to use absolute positioning and the <code>left</code> property with a negative value.</p><h2>Further reading</h2><ul><li><a href="https://webaim.org/techniques/skipnav/" rel="noopener">″Skip Navigation″ Links</a></li><li><a href="https://www.a11yproject.com/posts/skip-nav-links/" rel="noopener">Use skip navigation links</a> by Cameron Cundiff</li><li><a href="https://css-tricks.com/a-deep-dive-on-skipping-to-content/" rel="noopener">A Deep Dive on Skipping to Content</a> by Paul Ratcliffe</li><li><a href="https://plousia.com/blog/some-thoughts-css-tricks-deep-dive-skipping-content" rel="noopener">Some thoughts on CSS Tricks' ″Deep Dive on Skipping to Content″</a> by Susanna Celso</li><li><a href="https://css-tricks.com/how-to-create-a-skip-to-content-link/" rel="noopener">How to Create a ″Skip to Content″ Link</a> by Paul Ryan</li><li><a href="https://benmyers.dev/blog/skip-links/" rel="noopener">Implement a Skip Link for Navigation-Heavy Sites</a> by Ben Myers</li><li><a href="https://axesslab.com/skip-links/" rel="noopener">Your skip links are broken</a> by Hampus Sethfors.</li></ul><hr><p>Thanks to <a href="https://twitter.com/vasiliy_dudin" rel="noopener">Vasily Dudin</a> for help with editing ❤️.</p></div><section aria-labelledby="heading"><h2 id="heading">Other articles</h2><ul class="cards cards--in-article"><li class="cards__item cards__item--compact"><a href="/en/articles/css-media-features-for-a11y/" class="cards__item-link">CSS media features to improve accessibility</a> <span class="cards__item-details"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" class="cards__item-details__ico" aria-hidden="true"><path d="m12 19-7-7 7-7"></path><path d="M19 12H5"></path></svg> Previous</span></li></ul></section></main></div><footer><div class="footer wrapper"><div class="footer__column"><span aria-hidden="true">ʢ·͡ᴥ·ʡ∩๐า╭∩าﾉ\</span> <small>Tatiana Fokina, 2021–2024</small></div><div class="footer__column"><small>Build on <a href="https://www.11ty.dev/">11ty</a>, icons by <a href="https://lucide.dev">Lucide</a> </small><small>Find an issue? Let me know on <a href="https://github.com/TatianaFokina/a11y-blog">GitHub</a></small></div></div></footer><script>setTimeout(function(){var e,t,n,a;e=window,a=document,t="script",e.ym=e.ym||function(){(e.ym.a=e.ym.a||[]).push(arguments)},e.ym.l=+new Date,n=a.createElement(t),a=a.getElementsByTagName(t)[0],n.async=1,n.src="https://cdn.jsdelivr.net/npm/yandex-metrica-watch/tag.js",a.parentNode.insertBefore(n,a),ym(83045434,"init",{clickmap:!1,trackLinks:!1,accurateTrackBounce:!0})},2e3)</script><script defer="defer" data-domain="a11y-blog.dev" src="https://analytics.vasiliy-dudin.com/js/script.js"></script></body></html>