WordPress.org

Make WordPress Core

Changeset 46195


Ignore:
Timestamp:
09/20/2019 11:40:06 AM (2 months ago)
Author:
afercia
Message:

Accessibility: Bundled Theme: Make the TwentyEleven skip link the first focusable element within the body.

Props poena, williampatton.
Fixes #47891.

Location:
trunk/src/wp-content/themes/twentyeleven
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-content/themes/twentyeleven/functions.php

    r46117 r46195  
    913913    }
    914914endif;
     915
     916/**
     917 * Include a skip to content link at the top of the page so that users can bypass the menu.
     918 *
     919 * @since Twenty Eleven 3.4
     920 */
     921function twentyeleven_skip_link() {
     922    echo '<div class="skip-link"><a class="assistive-text" href="#content">' . esc_html__( 'Skip to primary content', 'twentyeleven' ) . '</a></div>';
     923    if ( ! is_singular() ) {
     924        echo '<div class="skip-link"><a class="assistive-text" href="#secondary">' . esc_html__( 'Skip to secondary content', 'twentyeleven' ) . '</a></div>';
     925    }
     926}
     927add_action( 'wp_body_open', 'twentyeleven_skip_link', 5 );
  • trunk/src/wp-content/themes/twentyeleven/header.php

    r45932 r46195  
    146146            <nav id="access" role="navigation">
    147147                <h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
    148                 <?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
    149                 <div class="skip-link"><a class="assistive-text" href="#content"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
    150                 <?php if ( ! is_singular() ) : ?>
    151                     <div class="skip-link"><a class="assistive-text" href="#secondary"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
    152                 <?php endif; ?>
    153148                <?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. */ ?>
    154149                <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
  • trunk/src/wp-content/themes/twentyeleven/rtl.css

    r43125 r46195  
    109109
    110110/* Assistive text */
    111 #access a.assistive-text:focus {
    112     left: auto;
    113     right: 7.6%;
     111a.assistive-text:focus {
     112    left: auto;
     113    right: 6px;
    114114}
    115115
     
    392392    border-left: none;
    393393    border-right: 1px solid #ddd;
    394     -moz-border-radius: 3px 0  0 3px;
     394    -moz-border-radius: 3px 0 0 3px;
    395395    border-radius: 3px 0 0 3px;
    396396}
     
    548548    #respond .comment-form-author .required,
    549549    #respond .comment-form-email .required {
    550         left: auto;
    551         right: 95%;
     550        left: auto;
     551        right: 95%;
    552552    }
    553553    #content .gallery-columns-3 .gallery-item {
     
    568568@media print {
    569569    #primary {
    570         float: right;
     570        float: right;
    571571    }
    572572    /* Comments */
    573573    .commentlist .avatar {
    574         left: auto;
    575         right: 2.2em;
     574        left: auto;
     575        right: 2.2em;
    576576    }
    577577    .commentlist li.comment .comment-meta {
    578         margin-left: 0;
    579         margin-right: 50px;
     578        margin-left: 0;
     579        margin-right: 50px;
    580580    }
    581581}
  • trunk/src/wp-content/themes/twentyeleven/style.css

    r45289 r46195  
    503503    width: 1px;
    504504}
    505 #access a.assistive-text:focus,
     505
     506a.assistive-text:focus,
    506507.screen-reader-text:hover,
    507508.screen-reader-text:active,
    508509.screen-reader-text:focus {
    509     background: #eee;
    510     border-bottom: 1px solid #ddd;
    511     color: #1982d1;
     510    background-color: #f1f1f1;
     511    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    512512    clip: auto !important;
    513     font-size: 12px;
     513    clip-path: none;
     514    color: #21759b;
     515    display: block;
     516    font-size: 14px;
     517    font-weight: bold;
    514518    height: auto;
    515     position: absolute;
    516     text-decoration: underline;
    517     top: 0;
    518     left: 7.6%;
     519    left: 6px;
     520    line-height: normal;
     521    padding: 17px 22px 15px;
     522    text-decoration: none;
     523    top: 7px;
    519524    width: auto;
    520 }
    521 
     525    z-index: 100000;
     526    /* Above WP toolbar. */
     527}
    522528
    523529/* =Header
Note: See TracChangeset for help on using the changeset viewer.