Make WordPress Core

Changeset 18117


Ignore:
Timestamp:
06/02/2011 07:30:07 PM (14 years ago)
Author:
iandstewart
Message:

Twenty Eleven: accessibility improvements and minor style fixes for galleries; See #17524

  • Improved color contrast for light and dark color schemes
  • Skip link for skipping directly to sidebar content
  • Skip links visible on :focus
  • Using a more semantic, general class name of .assistive-text instead of .section-heading and .screen-reader-text
  • Focus styles for password inputs (and a minor style fix)
Location:
trunk/wp-content/themes/twentyeleven
Files:
7 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-content/themes/twentyeleven/colors/dark.css

    r18072 r18117  
    3636}
    3737input[type=text],
     38.post-password-required input[type=password],
    3839textarea {
    3940    border: 1px solid #222;
     
    125126}
    126127.page-link {
    127     background: #0e0e0e;
    128     border-color: #222;
    129     color: #777;
    130128}
    131129.page-link a {
    132     background: #272727;
     130    background: #242424;
    133131    color: #bbb;
    134132}
    135133.page-link a:hover {
    136     background: #888;
     134    background: #999;
    137135    color: #000;
    138136}
    139137.entry-meta .edit-link a {
    140     background: #555;
    141     color: #000;
     138    background: #242424;
     139    color: #bbb;
    142140}
    143141.entry-meta .edit-link a:hover,
    144142.entry-meta .edit-link a:focus,
    145143.entry-meta .edit-link a:active {
    146     background: #888;
     144    background: #999;
     145    color: #000;
     146}
     147
     148/* Password Protected Posts */
     149.post-password-required input[type=password] {
     150    background: #ddd;
     151}
     152.post-password-required input[type=password]:focus {
     153    background: #fff;
    147154}
    148155
     
    167174/* Comments link */
    168175.entry-header .comments-link a {
    169     background: #1a1a1a;
     176    background: #242424;
    170177    border-color: #222;
    171178    color: #888;
     
    178185.singular .entry-title {
    179186    color: #fff;
    180 }
    181 .singular .entry-meta .edit-link a {
    182     color: #000;
    183187}
    184188
     
    318322section.recent-posts .other-recent-posts .comments-link a,
    319323section.recent-posts .other-recent-posts .comments-link > span {
    320     border-color: #666;
     324    border-color: #959595;
    321325    color: #bbb;
    322326}
     
    439443    border-color: #2c2c2c;
    440444}
     445.commentlist > li.bypostauthor .comment-meta {
     446    color: #a8a8a8;
     447}
    441448
    442449/* Comment Form */
     
    444451    background: #222;
    445452    border-color: #2c2c2c;
    446     color: #bbb;
    447453}
    448454#respond input[type="text"],
     
    539545    }
    540546    .commentlist > li.bypostauthor .comment-meta {
    541         color: #666;
     547        color: #959595;
    542548    }
    543549    .commentlist > li:before {
     
    552558    .commentlist .children > li.bypostauthor > article,
    553559    .commentlist .children > li.bypostauthor > article .comment-meta {
    554         color: #666;
    555     }
    556 }
     560        color: #959595;
     561    }
     562}
  • trunk/wp-content/themes/twentyeleven/comments.php

    r18039 r18117  
    3838        <?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?>
    3939        <nav id="comment-nav-above">
    40             <h1 class="section-heading"><?php _e( 'Comment navigation', 'twentyeleven' ); ?></h1>
     40            <h1 class="assistive-text"><?php _e( 'Comment navigation', 'twentyeleven' ); ?></h1>
    4141            <div class="nav-previous"><?php previous_comments_link( __( '&larr; Older Comments', 'twentyeleven' ) ); ?></div>
    4242            <div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;', 'twentyeleven' ) ); ?></div>
     
    5858        <?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?>
    5959        <nav id="comment-nav-below">
    60             <h1 class="section-heading"><?php _e( 'Comment navigation', 'twentyeleven' ); ?></h1>
     60            <h1 class="assistive-text"><?php _e( 'Comment navigation', 'twentyeleven' ); ?></h1>
    6161            <div class="nav-previous"><?php previous_comments_link( __( '&larr; Older Comments', 'twentyeleven' ) ); ?></div>
    6262            <div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;', 'twentyeleven' ) ); ?></div>
  • trunk/wp-content/themes/twentyeleven/functions.php

    r18040 r18117  
    442442    if ( $wp_query->max_num_pages > 1 ) : ?>
    443443        <nav id="<?php echo $nav_id; ?>">
    444             <h1 class="section-heading"><?php _e( 'Post navigation', 'twentyeleven' ); ?></h1>
     444            <h1 class="assistive-text"><?php _e( 'Post navigation', 'twentyeleven' ); ?></h1>
    445445            <div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'twentyeleven' ) ); ?></div>
    446446            <div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) ); ?></div>
  • trunk/wp-content/themes/twentyeleven/header.php

    r17959 r18117  
    111111
    112112            <nav id="access" role="navigation">
    113                 <h1 class="section-heading"><?php _e( 'Main menu', 'twentyeleven' ); ?></h1>
     113                <h1 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h1>
    114114                <?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
    115                 <div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentyeleven' ); ?>"><?php _e( 'Skip to content', 'twentyeleven' ); ?></a></div>
     115                <div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
     116                <div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
    116117                <?php /* Our navigation menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
    117118                <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
  • trunk/wp-content/themes/twentyeleven/inc/theme-options.php

    r18101 r18117  
    200200                <tr valign="top" class="image-radio-option"><th scope="row"><?php _e( 'Color Scheme', 'twentyeleven' ); ?></th>
    201201                    <td>
    202                         <fieldset><legend class="screen-reader-text"><span><?php _e( 'Color Scheme', 'twentyeleven' ); ?></span></legend>
     202                        <fieldset><legend class="assistive-text"><span><?php _e( 'Color Scheme', 'twentyeleven' ); ?></span></legend>
    203203                        <?php
    204204                            foreach ( twentyeleven_color_schemes() as $color ) {
     
    222222                <tr valign="top"><th scope="row"><?php _e( 'Link Color', 'twentyeleven' ); ?></th>
    223223                    <td>
    224                         <fieldset><legend class="screen-reader-text"><span><?php _e( 'Link Color', 'twentyeleven' ); ?></span></legend>
     224                        <fieldset><legend class="assistive-text"><span><?php _e( 'Link Color', 'twentyeleven' ); ?></span></legend>
    225225                            <input type="text" name="twentyeleven_theme_options[link_color]" id="link-color" value="<?php echo esc_attr( $options['link_color'] ); ?>" />
    226226                            <a href="#" class="pickcolor hide-if-no-js" id="link-color-example"></a>
     
    235235                <tr valign="top" class="image-radio-option"><th scope="row"><?php _e( 'Default Layout', 'twentyeleven' ); ?></th>
    236236                    <td>
    237                         <fieldset><legend class="screen-reader-text"><span><?php _e( 'Color Scheme', 'twentyeleven' ); ?></span></legend>
     237                        <fieldset><legend class="assistive-text"><span><?php _e( 'Color Scheme', 'twentyeleven' ); ?></span></legend>
    238238                        <?php
    239239                            foreach ( twentyeleven_layouts() as $layout ) {
  • trunk/wp-content/themes/twentyeleven/single.php

    r17959 r18117  
    1616
    1717                    <nav id="nav-single">
    18                         <h1 class="section-heading"><?php _e( 'Post navigation', 'toolbox' ); ?></h1>
     18                        <h1 class="assistive-text"><?php _e( 'Post navigation', 'toolbox' ); ?></h1>
    1919                        <span class="nav-previous"><?php previous_post_link( '%link', __( '&larr; Previous', 'twentyeleven' ) ); ?></span>
    2020                        <span class="nav-next"><?php next_post_link( '%link', __( 'Next &rarr;', 'twentyeleven' ) ); ?></span>
  • trunk/wp-content/themes/twentyeleven/style.css

    r18099 r18117  
    310310
    311311body, input, textarea {
    312     color: #333;
     312    color: #373737;
    313313    font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif;
    314314    font-weight: 300;
     
    429429/* Forms */
    430430input[type=text],
     431input[type=password],
    431432textarea {
    432433    background: #fafafa;
     
    439440input[type=text]:focus,
    440441textarea:focus {
    441     color: #333;
     442    color: #373737;
    442443}
    443444textarea {
     
    463464/* Links */
    464465a {
    465     color: #1b8be0;
     466    color: #1982d1;
    466467    text-decoration: none;
    467468}
     
    472473}
    473474
    474 /* Assitive text */
    475 .section-heading,
    476 .screen-reader-text {
     475/* Assistive text */
     476.assistive-text {
    477477    position: absolute !important;
    478478    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    479479    clip: rect(1px, 1px, 1px, 1px);
     480}
     481#access a.assistive-text:active,
     482#access a.assistive-text:focus {
     483    background: #eee;
     484    border-bottom: 1px solid #ddd;
     485    color: #1982d1;
     486    clip: auto !important;
     487    font-size: 12px;
     488    position: absolute;
     489    text-decoration: underline;
     490    top: 0;
     491    left: 7.6%;
    480492}
    481493
     
    504516#site-title a:focus,
    505517#site-title a:active {
    506     color: #1b8be0;
     518    color: #1982d1;
    507519}
    508520#site-description {
     
    591603    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
    592604    background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
    593     color: #333;
     605    color: #373737;
    594606}
    595607#access ul li:hover > ul {
     
    711723.entry-title a:focus,
    712724.entry-title a:active {
    713     color: #1b8be0;
     725    color: #1982d1;
    714726}
    715727.entry-meta {
     
    778790}
    779791.page-link {
    780     background: #f1f1f1;
    781     border-top: 1px solid #ddd;
    782792    clear: both;
    783     color: #888;
    784     display: block;
    785     font-size: 13px;
    786     margin: 1.625em -30px;
    787     padding: 4px 30px;
    788     text-decoration: none;
     793    display: block;
     794    margin: 0 0 1.625em;
    789795}
    790796.page-link a {
    791     background: #d8d8d8;
    792     color: #444;
     797    background: #eee;
     798    color: #373737;
    793799    margin: 0;
    794800    padding: 2px 3px;
     
    796802}
    797803.page-link a:hover {
    798     background: #777;
     804    background: #888;
    799805    color: #fff;
    800806    font-weight: bold;
     
    804810}
    805811.entry-meta .edit-link a {
    806     background: #aaa;
     812    background: #eee;
    807813    -moz-border-radius: 3px;
    808814    border-radius: 3px;
    809     color: #fff;
     815    color: #666;
    810816    float: right;
    811817    font-size: 12px;
     
    815821}
    816822.entry-meta .edit-link a:hover {
    817     background: #777;
     823    background: #888;
     824    color: #fff;
    818825}
    819826.entry-content .edit-link {
    820827    clear: both;
    821828    display: block;
     829}
     830
     831/* Password Protected Posts */
     832.post-password-required .entry-header .comments-link {
     833    margin: 1.625em 0 0;
     834}
     835.post-password-required input[type=password] {
     836    margin: 0.8125em 0;
     837}
     838.post-password-required input[type=password]:focus {
     839    background: #f7f7f7;
    822840}
    823841
     
    885903.entry-header .comments-link a:focus,
    886904.entry-header .comments-link a:active {
    887     background: #1b8be0;
     905    background: #1982d1;
    888906    border-color: #1573bb;
    889907    border-color: rgba(0,0,0,0.2);
     
    9931011.singular .entry-meta .edit-link a {
    9941012    bottom: auto;
    995     color: #fff;
    9961013    left: 50px;
    9971014    position: absolute;
     
    10431060    float: left;
    10441061    display: block;
    1045     margin-right: 1.625em;
     1062    margin: .375em 1.625em 0 0;
    10461063}
    10471064
     
    12781295}
    12791296article.feature-image.small .entry-summary p a:hover {
    1280     background: #1b8be0;
     1297    background: #1982d1;
    12811298    color: #eee;
    12821299    color: rgba(255,255,255,0.8);
     
    14241441}
    14251442section.recent-posts .other-recent-posts a[rel="bookmark"] {
    1426     color: #333;
     1443    color: #373737;
    14271444    float: left;
    14281445    max-width: 84%;
     
    14561473}
    14571474section.recent-posts .other-recent-posts .comments-link a:hover {
    1458     color: #1b8be0;
    1459     border-color: #1b8be0;
     1475    color: #1982d1;
     1476    border-color: #1982d1;
    14601477}
    14611478section.recent-posts .other-recent-posts li:after {
     
    15461563.gallery {
    15471564    margin: 0 auto 1.625em !important;
     1565}
     1566#content .gallery a img {
     1567    border: none;
    15481568}
    15491569.gallery-caption {
     
    16631683}
    16641684.widget_search #searchsubmit:active {
    1665     background: #1b8be0;
     1685    background: #1982d1;
    16661686    border-color: #0861a5;
    16671687    -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.1);
     
    18611881    border-color: #d3d3d3;
    18621882}
     1883.commentlist > li.bypostauthor .comment-meta {
     1884    color: #575757;
     1885}
    18631886.commentlist > li.bypostauthor .comment-meta a:focus,
    18641887.commentlist > li.bypostauthor .comment-meta a:active,
     
    18931916    -moz-border-radius: 3px;
    18941917    border-radius: 3px;
    1895     color: #444;
    18961918    margin: 0 auto 1.625em;
    18971919    padding: 1.625em;
     
    19912013}
    19922014#respond input#submit:active {
    1993     background: #1b8be0;
     2015    background: #1982d1;
    19942016    color: #bfddf3;
    19952017}
     
    20082030}
    20092031#reply-title {
    2010     color: #333;
     2032    color: #373737;
    20112033    font-size: 24px;
    20122034    font-weight: bold;
     
    21952217        margin: 2.2em -8.8% 0px;
    21962218        padding: 20px 8.8%;
    2197     }
    2198     .page-link {
    2199         margin: 1.625em 0;
    22002219    }
    22012220    /* Make sure we have room for our comment avatars */
Note: See TracChangeset for help on using the changeset viewer.