Bundled Theme: A11y: Fix skip link in Twenty Ten.

Fix the source positioning of the skip link in Twenty Ten and add CSS for visibility on focus.

Props anonymized_3085, iammattthomas, joedolson, sabernhardt, shailu25, mukesh27, poena.
Fixes #14795.

git-svn-id: https://develop.svn.wordpress.org/trunk@59857 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Joe Dolson 2025-02-22 01:36:54 +00:00
parent 00ae6b88db
commit 854c9d4ace
2 changed files with 17 additions and 2 deletions

View File

@ -63,6 +63,8 @@ if ( is_singular() && get_option( 'thread_comments' ) ) {
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div id="wrapper" class="hfeed">
<?php // Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. ?>
<a href="#content" class="screen-reader-text skip-link"><?php _e( 'Skip to content', 'twentyten' ); ?></a>
<div id="header">
<div id="masthead">
<div id="branding" role="banner">
@ -101,8 +103,6 @@ if ( is_singular() && get_option( 'thread_comments' ) ) {
</div><!-- #branding -->
<div id="access" role="navigation">
<?php // Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. ?>
<div class="skip-link screen-reader-text"><a href="#content"><?php _e( 'Skip to content', 'twentyten' ); ?></a></div>
<?php
/*
* Our navigation menu. If one isn't filled out, wp_nav_menu() falls back to wp_page_menu().

View File

@ -348,6 +348,21 @@ a:hover {
width: 1px;
}
a.skip-link:focus {
background-color: #ddd;
clip-path: none;
color: #333;
display: block;
font-size: 16px;
height: auto;
left: 5px;
line-height: 1.5;
padding: 16px 24px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
}
/* =Header
-------------------------------------------------------------- */