Hidden Skip Links

skip-to-main.html

!-- HTML -->
<a href="#main-content" class="skip-link">Skip to main content</a>

<nav>
  <!-- Your navigation content -->
</nav>

<main id="main-content" tabindex="-1">
  <!-- Your main content -->
</main>

<!-- CSS -->
<style>
.skip-link {
  /* Position the link */
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 100;
  
  /* Basic styling */
  background: #ffffff;
  color: #000000;
  padding: 10px 20px;
  text-decoration: none;
  
  /* Ensure proper width for longer text */
  width: auto;
  height: auto;
  margin: 0;
  
  /* Add a border when focused */
  border: 2px solid transparent;
  
  /* Transition for smooth appearance */
  transition: top 0.3s ease;
}

/* Show the link when it receives focus */
.skip-link:focus {
  top: 0;
  border-color: #000000;
  outline: none;
}

/* Ensure main content can receive focus */
main:focus {
  outline: none;
}
</style>