Changeset 18117

Timestamp:

06/02/2011 07:30:07 PM (15 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:

• colors/dark.css (modified) (9 diffs)
• comments.php (modified) (2 diffs)
• functions.php (modified) (1 diff)
• header.php (modified) (1 diff)
• inc/theme-options.php (modified) (3 diffs)
• single.php (modified) (1 diff)
• style.css (modified) (25 diffs)

trunk/wp-content/themes/twentyeleven/colors/dark.css

@@ -36 +36 @@
 }
 input[type=text],
+.post-password-required input[type=password],
 textarea {
         border: 1px solid #222;
@@ -125 +126 @@
 }
 .page-link {
-        background: #0e0e0e;
-        border-color: #222;
-        color: #777;
 }
 .page-link a {
-        background: #272727;
+        background: #242424;
         color: #bbb;
 }
 .page-link a:hover {
-        background: #888;
+        background: #999;
         color: #000;
 }
 .entry-meta .edit-link a {
-        background: #555;
-        color: #000;
+        background: #242424;
+        color: #bbb;
 }
 .entry-meta .edit-link a:hover,
 .entry-meta .edit-link a:focus,
 .entry-meta .edit-link a:active {
-        background: #888;
+        background: #999;
+        color: #000;
+}
+
+/* Password Protected Posts */
+.post-password-required input[type=password] {
+        background: #ddd;
+}
+.post-password-required input[type=password]:focus {
+        background: #fff;
 }
 
@@ -167 +174 @@
 /* Comments link */
 .entry-header .comments-link a {
-        background: #1a1a1a;
+        background: #242424;
         border-color: #222;
         color: #888;
@@ -178 +185 @@
 .singular .entry-title {
         color: #fff;
-}
-.singular .entry-meta .edit-link a {
-        color: #000;
 }
 
@@ -318 +322 @@
 section.recent-posts .other-recent-posts .comments-link a,
 section.recent-posts .other-recent-posts .comments-link > span {
-        border-color: #666;
+        border-color: #959595;
         color: #bbb;
 }
@@ -439 +443 @@
         border-color: #2c2c2c;
 }
+.commentlist > li.bypostauthor .comment-meta {
+        color: #a8a8a8;
+}
 
 /* Comment Form */
@@ -444 +451 @@
         background: #222;
         border-color: #2c2c2c;
-        color: #bbb;
 }
 #respond input[type="text"],
@@ -539 +545 @@
         }
         .commentlist > li.bypostauthor .comment-meta {
-                color: #666;
+                color: #959595;
         }
         .commentlist > li:before {
@@ -552 +558 @@
         .commentlist .children > li.bypostauthor > article,
         .commentlist .children > li.bypostauthor > article .comment-meta {
-                color: #666;
-        }
-}
+                color: #959595;
+        }
+}

trunk/wp-content/themes/twentyeleven/comments.php

@@ -38 +38 @@
                 <?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?>
                 <nav id="comment-nav-above">
-                        <h1 class="section-heading"><?php _e( 'Comment navigation', 'twentyeleven' ); ?></h1>
+                        <h1 class="assistive-text"><?php _e( 'Comment navigation', 'twentyeleven' ); ?></h1>
                         <div class="nav-previous"><?php previous_comments_link( __( '&larr; Older Comments', 'twentyeleven' ) ); ?></div>
                         <div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;', 'twentyeleven' ) ); ?></div>
@@ -58 +58 @@
                 <?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?>
                 <nav id="comment-nav-below">
-                        <h1 class="section-heading"><?php _e( 'Comment navigation', 'twentyeleven' ); ?></h1>
+                        <h1 class="assistive-text"><?php _e( 'Comment navigation', 'twentyeleven' ); ?></h1>
                         <div class="nav-previous"><?php previous_comments_link( __( '&larr; Older Comments', 'twentyeleven' ) ); ?></div>
                         <div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;', 'twentyeleven' ) ); ?></div>

trunk/wp-content/themes/twentyeleven/functions.php

@@ -442 +442 @@
         if ( $wp_query->max_num_pages > 1 ) : ?>
                 <nav id="<?php echo $nav_id; ?>">
-                        <h1 class="section-heading"><?php _e( 'Post navigation', 'twentyeleven' ); ?></h1>
+                        <h1 class="assistive-text"><?php _e( 'Post navigation', 'twentyeleven' ); ?></h1>
                         <div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'twentyeleven' ) ); ?></div>
                         <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

@@ -111 +111 @@
 
                         <nav id="access" role="navigation">
-                                <h1 class="section-heading"><?php _e( 'Main menu', 'twentyeleven' ); ?></h1>
+                                <h1 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h1>
                                 <?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
-                                <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>
+                                <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>
+                                <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>
                                 <?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. */ ?>
                                 <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>

trunk/wp-content/themes/twentyeleven/inc/theme-options.php

@@ -200 +200 @@
                                 <tr valign="top" class="image-radio-option"><th scope="row"><?php _e( 'Color Scheme', 'twentyeleven' ); ?></th>
                                         <td>
-                                                <fieldset><legend class="screen-reader-text"><span><?php _e( 'Color Scheme', 'twentyeleven' ); ?></span></legend>
+                                                <fieldset><legend class="assistive-text"><span><?php _e( 'Color Scheme', 'twentyeleven' ); ?></span></legend>
                                                 <?php
                                                         foreach ( twentyeleven_color_schemes() as $color ) {
@@ -222 +222 @@
                                 <tr valign="top"><th scope="row"><?php _e( 'Link Color', 'twentyeleven' ); ?></th>
                                         <td>
-                                                <fieldset><legend class="screen-reader-text"><span><?php _e( 'Link Color', 'twentyeleven' ); ?></span></legend>
+                                                <fieldset><legend class="assistive-text"><span><?php _e( 'Link Color', 'twentyeleven' ); ?></span></legend>
                                                         <input type="text" name="twentyeleven_theme_options[link_color]" id="link-color" value="<?php echo esc_attr( $options['link_color'] ); ?>" />
                                                         <a href="#" class="pickcolor hide-if-no-js" id="link-color-example"></a>
@@ -235 +235 @@
                                 <tr valign="top" class="image-radio-option"><th scope="row"><?php _e( 'Default Layout', 'twentyeleven' ); ?></th>
                                         <td>
-                                                <fieldset><legend class="screen-reader-text"><span><?php _e( 'Color Scheme', 'twentyeleven' ); ?></span></legend>
+                                                <fieldset><legend class="assistive-text"><span><?php _e( 'Color Scheme', 'twentyeleven' ); ?></span></legend>
                                                 <?php
                                                         foreach ( twentyeleven_layouts() as $layout ) {

trunk/wp-content/themes/twentyeleven/single.php

@@ -16 +16 @@
 
                                         <nav id="nav-single">
-                                                <h1 class="section-heading"><?php _e( 'Post navigation', 'toolbox' ); ?></h1>
+                                                <h1 class="assistive-text"><?php _e( 'Post navigation', 'toolbox' ); ?></h1>
                                                 <span class="nav-previous"><?php previous_post_link( '%link', __( '&larr; Previous', 'twentyeleven' ) ); ?></span>
                                                 <span class="nav-next"><?php next_post_link( '%link', __( 'Next &rarr;', 'twentyeleven' ) ); ?></span>

trunk/wp-content/themes/twentyeleven/style.css

@@ -310 +310 @@
 
 body, input, textarea {
-        color: #333;
+        color: #373737;
         font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif;
         font-weight: 300;
@@ -429 +429 @@
 /* Forms */
 input[type=text],
+input[type=password],
 textarea {
         background: #fafafa;
@@ -439 +440 @@
 input[type=text]:focus,
 textarea:focus {
-        color: #333;
+        color: #373737;
 }
 textarea {
@@ -463 +464 @@
 /* Links */
 a {
-        color: #1b8be0;
+        color: #1982d1;
         text-decoration: none;
 }
@@ -472 +473 @@
 }
 
-/* Assitive text */
-.section-heading,
-.screen-reader-text {
+/* Assistive text */
+.assistive-text {
         position: absolute !important;
         clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
         clip: rect(1px, 1px, 1px, 1px);
+}
+#access a.assistive-text:active,
+#access a.assistive-text:focus {
+        background: #eee;
+        border-bottom: 1px solid #ddd;
+        color: #1982d1;
+        clip: auto !important;
+        font-size: 12px;
+        position: absolute;
+        text-decoration: underline;
+        top: 0;
+        left: 7.6%;
 }
 
@@ -504 +516 @@
 #site-title a:focus,
 #site-title a:active {
-        color: #1b8be0;
+        color: #1982d1;
 }
 #site-description {
@@ -591 +603 @@
         background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
         background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
-        color: #333;
+        color: #373737;
 }
 #access ul li:hover > ul {
@@ -711 +723 @@
 .entry-title a:focus,
 .entry-title a:active {
-        color: #1b8be0;
+        color: #1982d1;
 }
 .entry-meta {
@@ -778 +790 @@
 }
 .page-link {
-        background: #f1f1f1;
-        border-top: 1px solid #ddd;
         clear: both;
-        color: #888;
-        display: block;
-        font-size: 13px;
-        margin: 1.625em -30px;
-        padding: 4px 30px;
-        text-decoration: none;
+        display: block;
+        margin: 0 0 1.625em;
 }
 .page-link a {
-        background: #d8d8d8;
-        color: #444;
+        background: #eee;
+        color: #373737;
         margin: 0;
         padding: 2px 3px;
@@ -796 +802 @@
 }
 .page-link a:hover {
-        background: #777;
+        background: #888;
         color: #fff;
         font-weight: bold;
@@ -804 +810 @@
 }
 .entry-meta .edit-link a {
-        background: #aaa;
+        background: #eee;
         -moz-border-radius: 3px;
         border-radius: 3px;
-        color: #fff;
+        color: #666;
         float: right;
         font-size: 12px;
@@ -815 +821 @@
 }
 .entry-meta .edit-link a:hover {
-        background: #777;
+        background: #888;
+        color: #fff;
 }
 .entry-content .edit-link {
         clear: both;
         display: block;
+}
+
+/* Password Protected Posts */
+.post-password-required .entry-header .comments-link {
+        margin: 1.625em 0 0;
+}
+.post-password-required input[type=password] {
+        margin: 0.8125em 0;
+}
+.post-password-required input[type=password]:focus {
+        background: #f7f7f7;
 }
 
@@ -885 +903 @@
 .entry-header .comments-link a:focus,
 .entry-header .comments-link a:active {
-        background: #1b8be0;
+        background: #1982d1;
         border-color: #1573bb;
         border-color: rgba(0,0,0,0.2);
@@ -993 +1011 @@
 .singular .entry-meta .edit-link a {
         bottom: auto;
-        color: #fff;
         left: 50px;     
         position: absolute;
@@ -1043 +1060 @@
         float: left;
         display: block;
-        margin-right: 1.625em;
+        margin: .375em 1.625em 0 0;
 }
 
@@ -1278 +1295 @@
 }
 article.feature-image.small .entry-summary p a:hover {
-        background: #1b8be0;
+        background: #1982d1;
         color: #eee;
         color: rgba(255,255,255,0.8);
@@ -1424 +1441 @@
 }
 section.recent-posts .other-recent-posts a[rel="bookmark"] {
-        color: #333;
+        color: #373737;
         float: left;
         max-width: 84%;
@@ -1456 +1473 @@
 }
 section.recent-posts .other-recent-posts .comments-link a:hover {
-        color: #1b8be0;
-        border-color: #1b8be0;
+        color: #1982d1;
+        border-color: #1982d1;
 }
 section.recent-posts .other-recent-posts li:after {
@@ -1546 +1563 @@
 .gallery {
         margin: 0 auto 1.625em !important;
+}
+#content .gallery a img {
+    border: none;
 }
 .gallery-caption {
@@ -1663 +1683 @@
 }
 .widget_search #searchsubmit:active {
-        background: #1b8be0;
+        background: #1982d1;
         border-color: #0861a5;
         -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.1);
@@ -1861 +1881 @@
         border-color: #d3d3d3;
 }
+.commentlist > li.bypostauthor .comment-meta {
+        color: #575757;
+}
 .commentlist > li.bypostauthor .comment-meta a:focus,
 .commentlist > li.bypostauthor .comment-meta a:active,
@@ -1893 +1916 @@
         -moz-border-radius: 3px;
         border-radius: 3px;
-        color: #444;
         margin: 0 auto 1.625em;
         padding: 1.625em;
@@ -1991 +2013 @@
 }
 #respond input#submit:active {
-        background: #1b8be0;
+        background: #1982d1;
         color: #bfddf3;
 }
@@ -2008 +2030 @@
 }
 #reply-title {
-        color: #333;
+        color: #373737;
         font-size: 24px;
         font-weight: bold;
@@ -2195 +2217 @@
                 margin: 2.2em -8.8% 0px;
                 padding: 20px 8.8%;
-        }
-        .page-link {
-                margin: 1.625em 0;
         }
         /* Make sure we have room for our comment avatars */