25% off ProSNIPC25OFF

Skip-to-Content Accessibility Link

Injects a visually hidden skip-navigation link that becomes visible on focus, allowing keyboard users to bypass the header.

Module2 parts · by SnipCraft

PHPMarkup

php
<?php
if ( ! function_exists( 'scseed_skip_to_content' ) ) {
    function scseed_skip_to_content() {
        echo '<a class="scseed-skip-link" href="#scseed-main-content">' .
             esc_html__( 'Skip to main content', 'scseed' ) .
             '</a>';
        // Ensure a matching landmark exists; themes typically have <main id="main"> but add a fallback.
        add_action( 'wp_footer', 'scseed_skip_anchor_fallback' );
    }
    add_action( 'wp_body_open', 'scseed_skip_to_content', 1 );

    function scseed_skip_anchor_fallback() {
        // Only inject the id shim when no element already carries it.
        echo '<script>
(function(){
  if (!document.getElementById("scseed-main-content")) {
    var main = document.querySelector("main, #main, #content, .site-content");
    if (main) { main.id = "scseed-main-content"; }
  }
})();
</script>';
    }
}

CSSStyles

css
.scseed-skip-link {
  position: absolute;
  top: -9999px;
  left: 1rem;
  z-index: 99999;
  background: #0073aa;
  color: #fff;
  padding: 0.6rem 1.1rem;
  border-radius: 0 0 4px 4px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s;
}
.scseed-skip-link:focus {
  top: 0;
  outline: 3px solid #005177;
  outline-offset: 2px;
}
#frontend#ux#accessibility#keyboard