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