Changeset 59857

Timestamp:

02/22/2025 01:36:54 AM (20 months ago)

Author:

joedolson

Message:

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.

Location:

trunk/src/wp-content/themes/twentyten

Files:

• header.php (modified) (2 diffs)
• style.css (modified) (1 diff)

trunk/src/wp-content/themes/twentyten/header.php

@@ -64 +64 @@
 <?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">
@@ -102 +104 @@
 
                         <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
                                 /*

trunk/src/wp-content/themes/twentyten/style.css

@@ -349 +349 @@
 }
 
+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