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

joedolson · joedolson · commit 854c9d4ace6a · 2025-02-22T01:36:54.000Z
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
diff --git a/src/wp-content/themes/twentyten/header.php b/src/wp-content/themes/twentyten/header.php
@@ -63,6 +63,8 @@
 <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 @@
 			</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().
diff --git a/src/wp-content/themes/twentyten/style.css b/src/wp-content/themes/twentyten/style.css
@@ -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
 -------------------------------------------------------------- */
