Skip to content
Permalink
Browse files

Accessibility: Bundled Theme: Make the TwentyEleven skip link the fir…

…st focusable element within the body.

Props poena, williampatton.
Fixes #47891.


git-svn-id: https://develop.svn.wordpress.org/trunk@46195 602fd350-edb4-49c9-b593-d223f7449a82
  • Loading branch information
afercia committed Sep 20, 2019
1 parent a63e490 commit f326f7ebfb50352ea77c28dcf75b3a080b2f56d8
@@ -912,3 +912,16 @@ function wp_body_open() {
do_action( 'wp_body_open' );
}
endif;
/**
* Include a skip to content link at the top of the page so that users can bypass the menu.
*
* @since Twenty Eleven 3.4
*/
function twentyeleven_skip_link() {
echo '<div class="skip-link"><a class="assistive-text" href="#content">' . esc_html__( 'Skip to primary content', 'twentyeleven' ) . '</a></div>';
if ( ! is_singular() ) {
echo '<div class="skip-link"><a class="assistive-text" href="#secondary">' . esc_html__( 'Skip to secondary content', 'twentyeleven' ) . '</a></div>';
}
}
add_action( 'wp_body_open', 'twentyeleven_skip_link', 5 );
@@ -145,11 +145,6 @@

<nav id="access" role="navigation">
<h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
<?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
<div class="skip-link"><a class="assistive-text" href="#content"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
<?php if ( ! is_singular() ) : ?>
<div class="skip-link"><a class="assistive-text" href="#secondary"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
<?php endif; ?>
<?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assigned to the primary location is the one used. If one isn't assigned, the menu with the lowest ID is used. */ ?>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav><!-- #access -->
@@ -108,9 +108,9 @@ input#s {
}

/* Assistive text */
#access a.assistive-text:focus {
a.assistive-text:focus {
left: auto;
right: 7.6%;
right: 6px;
}

/* =Header
@@ -391,7 +391,7 @@ section.recent-posts .other-recent-posts .comments-link > span {
.commentlist .children li.comment {
border-left: none;
border-right: 1px solid #ddd;
-moz-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
.commentlist .children li.comment .comment-meta {
@@ -547,8 +547,8 @@ section.recent-posts .other-recent-posts .comments-link > span {
/* Use the available space in the smaller comment form */
#respond .comment-form-author .required,
#respond .comment-form-email .required {
left: auto;
right: 95%;
left: auto;
right: 95%;
}
#content .gallery-columns-3 .gallery-item {
padding-right: 0;
@@ -567,16 +567,16 @@ section.recent-posts .other-recent-posts .comments-link > span {

@media print {
#primary {
float: right;
float: right;
}
/* Comments */
.commentlist .avatar {
left: auto;
right: 2.2em;
left: auto;
right: 2.2em;
}
.commentlist li.comment .comment-meta {
margin-left: 0;
margin-right: 50px;
margin-left: 0;
margin-right: 50px;
}
}

@@ -502,24 +502,30 @@ a:hover {
height: 1px;
width: 1px;
}
#access a.assistive-text:focus,

a.assistive-text:focus,
.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
background: #eee;
border-bottom: 1px solid #ddd;
color: #1982d1;
background-color: #f1f1f1;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
font-size: 12px;
clip-path: none;
color: #21759b;
display: block;
font-size: 14px;
font-weight: bold;
height: auto;
position: absolute;
text-decoration: underline;
top: 0;
left: 7.6%;
left: 6px;
line-height: normal;
padding: 17px 22px 15px;
text-decoration: none;
top: 7px;
width: auto;
z-index: 100000;
/* Above WP toolbar. */
}


/* =Header
----------------------------------------------- */

0 comments on commit f326f7e

Please sign in to comment.
You can’t perform that action at this time.