golem
/
twentyGOLEM
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Twenty Twelve: improve skip link visibility, mimicing the core toolbar skiplink. Closes #22025, see #22087. 

git-svn-id: http://core.svn.wordpress.org/trunk@22186 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Lance Willett 2012-10-11 17:17:55 +00:00
parent a2befeb6a8
commit d6950e7b01
2 changed files with 18 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
header.php
View File

@ -38,7 +38,7 @@
<nav id="site-navigation" class="main-navigation" role="navigation">
<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
<div class="skip-link assistive-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a></div>
<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav><!-- #site-navigation -->

21
style.css
View File

@ -460,12 +460,27 @@ a:hover {
}
/* Assistive text */
.skip-link,
.screen-reader-text,
.assistive-text {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
}
.main-navigation .assistive-text:hover,
.main-navigation .assistive-text:active,
.main-navigation .assistive-text:focus {
background: #fff;
border: 2px solid #333;
border-radius: 3px;
clip: auto !important;
color: #000;
display: block;
font-size: 12px;
padding: 12px;
position: absolute;
top: 5px;
left: 5px;
z-index: 100000; /* Above WP toolbar */
}
/* Page structure */
.site {
@ -1650,8 +1665,6 @@ img#wpstats {
/* =IE 7 and 8
----------------------------------------------- */
.ie .skip-link,
.ie .screen-reader-text,
.ie .assistive-text {
clip: rect(1px 1px 1px 1px); /* IE7 */
}