tabindex=-1 for accessibility

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-      scale=1.0" />    <meta http-equiv="X-UA-Compatible" content="ie=edge" />    <title>Document</title>    <style>      #navigationLink {        opacity: 0;      }     #navigationLink:focus {        opacity: 1;     }    </style>  </head><body>   <div id="sidebarMenu">     <ul id="navigation" tabindex="-1">       <li><a href="/about">About</a></li>       <li><a href="/contact">Contact Us</a></li>       <li><a href="/signup">Sign up</a></li>     </ul>   </div>   <div id="mainContent">     <p>Lorem ipsum stuff</p>     <a id="navigationLink" href="#navigation">Click me to set focus to sidebar</a>   </div> </body></html>

The navigation link is hidden by default; when you tab to it though, it will show. When you click on the link, it will go to the navigation sidebar, but since it’s technically a tabbable element, the focus element will wrap the sidebar element. Useful for accessibility. And this is just straight up HTML only.

Sources:

https://frontendmasters.com/courses/javascript-accessibility/coding-a-skip-link-wiring-it-up/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store