WordPress.org

Make WordPress Core

Changeset 18117


Ignore:
Timestamp:
06/02/11 19:30:07 (3 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.