Skip To links: visually hide by only setting top: -1000em; (this should make them work well in all screen readers), fixes #21312

git-svn-id: http://core.svn.wordpress.org/trunk@22730 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Ozz 2012-11-20 21:14:49 +00:00
parent 4d00db15b4
commit 769e1236af
4 changed files with 13 additions and 3 deletions

View File

@ -110,7 +110,7 @@ if ( wp_script_is( 'customize-loader', 'queue' ) && current_user_can( 'edit_them
?> ?>
<div id="wpwrap"> <div id="wpwrap">
<a tabindex="1" href="#wpbody-content" class="screen-reader-text screen-reader-shortcut"><?php _e('Skip to main content'); ?></a> <a tabindex="1" href="#wpbody-content" class="screen-reader-shortcut"><?php _e('Skip to main content'); ?></a>
<?php require(ABSPATH . 'wp-admin/menu-header.php'); ?> <?php require(ABSPATH . 'wp-admin/menu-header.php'); ?>
<div id="wpcontent"> <div id="wpcontent">

View File

@ -199,6 +199,11 @@ TABLE OF CONTENTS:
overflow: hidden; overflow: hidden;
} }
.screen-reader-shortcut {
position: absolute;
top: -1000em;
}
.screen-reader-shortcut:focus { .screen-reader-shortcut:focus {
left: 6px; left: 6px;
top: -21px; top: -21px;

View File

@ -348,13 +348,13 @@ class WP_Admin_Bar {
?> ?>
<div id="wpadminbar" class="<?php echo $class; ?>" role="navigation"> <div id="wpadminbar" class="<?php echo $class; ?>" role="navigation">
<a class="screen-reader-text screen-reader-shortcut" href="#wp-toolbar" tabindex="1"><?php _e('Skip to toolbar'); ?></a> <a class="screen-reader-shortcut" href="#wp-toolbar" tabindex="1"><?php _e('Skip to toolbar'); ?></a>
<div class="quicklinks" id="wp-toolbar" role="navigation" aria-label="<?php esc_attr_e('Top navigation toolbar.'); ?>" tabindex="0"> <div class="quicklinks" id="wp-toolbar" role="navigation" aria-label="<?php esc_attr_e('Top navigation toolbar.'); ?>" tabindex="0">
<?php foreach ( $root->children as $group ) { <?php foreach ( $root->children as $group ) {
$this->_render_group( $group ); $this->_render_group( $group );
} ?> } ?>
</div> </div>
<a class="screen-reader-text screen-reader-shortcut" href="<?php echo esc_url( wp_logout_url() ); ?>"><?php _e('Log Out'); ?></a> <a class="screen-reader-shortcut" href="<?php echo esc_url( wp_logout_url() ); ?>"><?php _e('Log Out'); ?></a>
</div> </div>
<?php <?php

View File

@ -625,6 +625,11 @@
overflow: hidden; overflow: hidden;
} }
#wpadminbar .screen-reader-shortcut {
position: absolute;
top: -1000em;
}
#wpadminbar .screen-reader-shortcut:focus { #wpadminbar .screen-reader-shortcut:focus {
left: 6px; left: 6px;
top: 7px; top: 7px;