golem
/
twentyGOLEM
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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)


git-svn-id: http://svn.automattic.com/wordpress/trunk@18117 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
iandstewart 2011-06-02 19:30:07 +00:00
parent bc6a3ba8f8
commit 8a7dd1e31c
7 changed files with 87 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
wp-content/themes/twentyeleven/colors/dark.css
View File

@ -35,6 +35,7 @@ ins {
background: #00063f; background: #00063f;
} }
input[type=text], input[type=text],
.post-password-required input[type=password],
textarea { textarea {
border: 1px solid #222; border: 1px solid #222;
} }
@ -124,26 +125,32 @@ a {
border-color: #222; border-color: #222;
} }
.page-link { .page-link {
background: #0e0e0e;
border-color: #222;
color: #777;
} }
.page-link a { .page-link a {
background: #272727; background: #242424;
color: #bbb; color: #bbb;
} }
.page-link a:hover { .page-link a:hover {
background: #888; background: #999;
color: #000; color: #000;
} }
.entry-meta .edit-link a { .entry-meta .edit-link a {
background: #555; background: #242424;
color: #000; color: #bbb;
} }
.entry-meta .edit-link a:hover, .entry-meta .edit-link a:hover,
.entry-meta .edit-link a:focus, .entry-meta .edit-link a:focus,
.entry-meta .edit-link a:active { .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;
} }
/* Author Info */ /* Author Info */
@ -166,7 +173,7 @@ a {
/* Comments link */ /* Comments link */
.entry-header .comments-link a { .entry-header .comments-link a {
background: #1a1a1a; background: #242424;
border-color: #222; border-color: #222;
color: #888; color: #888;
} }
@ -178,9 +185,6 @@ a {
.singular .entry-title { .singular .entry-title {
color: #fff; color: #fff;
} }
.singular .entry-meta .edit-link a {
color: #000;
}
/* =Status /* =Status
@ -317,7 +321,7 @@ section.recent-posts .other-recent-posts a[rel="bookmark"]:hover {
} }
section.recent-posts .other-recent-posts .comments-link a, section.recent-posts .other-recent-posts .comments-link a,
section.recent-posts .other-recent-posts .comments-link > span { section.recent-posts .other-recent-posts .comments-link > span {
border-color: #666; border-color: #959595;
color: #bbb; color: #bbb;
} }
section.recent-posts .other-recent-posts .comments-link > span { section.recent-posts .other-recent-posts .comments-link > span {
@ -438,12 +442,14 @@ section.recent-posts .other-recent-posts .comments-link a:hover {
background: #222; background: #222;
border-color: #2c2c2c; border-color: #2c2c2c;
} }
.commentlist > li.bypostauthor .comment-meta {
color: #a8a8a8;
}
/* Comment Form */ /* Comment Form */
#respond { #respond {
background: #222; background: #222;
border-color: #2c2c2c; border-color: #2c2c2c;
color: #bbb;
} }
#respond input[type="text"], #respond input[type="text"],
#respond textarea { #respond textarea {
@ -538,7 +544,7 @@ section.recent-posts .other-recent-posts .comments-link a:hover {
color: #333; color: #333;
} }
.commentlist > li.bypostauthor .comment-meta { .commentlist > li.bypostauthor .comment-meta {
color: #666; color: #959595;
} }
.commentlist > li:before { .commentlist > li:before {
content: none !important; content: none !important;
@ -551,6 +557,6 @@ section.recent-posts .other-recent-posts .comments-link a:hover {
} }
.commentlist .children > li.bypostauthor > article, .commentlist .children > li.bypostauthor > article,
.commentlist .children > li.bypostauthor > article .comment-meta { .commentlist .children > li.bypostauthor > article .comment-meta {
color: #666; color: #959595;
} }
} }

4
wp-content/themes/twentyeleven/comments.php
View File

@ -37,7 +37,7 @@
<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?> <?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?>
<nav id="comment-nav-above"> <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-previous"><?php previous_comments_link( __( '&larr; Older Comments', 'twentyeleven' ) ); ?></div>
<div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;', 'twentyeleven' ) ); ?></div> <div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;', 'twentyeleven' ) ); ?></div>
</nav> </nav>
@ -57,7 +57,7 @@
<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?> <?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?>
<nav id="comment-nav-below"> <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-previous"><?php previous_comments_link( __( '&larr; Older Comments', 'twentyeleven' ) ); ?></div>
<div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;', 'twentyeleven' ) ); ?></div> <div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;', 'twentyeleven' ) ); ?></div>
</nav> </nav>

2
wp-content/themes/twentyeleven/functions.php
View File

@ -441,7 +441,7 @@ function twentyeleven_content_nav( $nav_id ) {
if ( $wp_query->max_num_pages > 1 ) : ?> if ( $wp_query->max_num_pages > 1 ) : ?>
<nav id="<?php echo $nav_id; ?>"> <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-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> <div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) ); ?></div>
</nav><!-- #nav-above --> </nav><!-- #nav-above -->

5
wp-content/themes/twentyeleven/header.php
View File

@ -110,9 +110,10 @@
<?php endif; ?> <?php endif; ?>
<nav id="access" role="navigation"> <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. */ ?> <?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 /* 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' ) ); ?> <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav><!-- #access --> </nav><!-- #access -->

6
wp-content/themes/twentyeleven/inc/theme-options.php
View File

@ -199,7 +199,7 @@ function theme_options_render_page() {
<tr valign="top" class="image-radio-option"><th scope="row"><?php _e( 'Color Scheme', 'twentyeleven' ); ?></th> <tr valign="top" class="image-radio-option"><th scope="row"><?php _e( 'Color Scheme', 'twentyeleven' ); ?></th>
<td> <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 <?php
foreach ( twentyeleven_color_schemes() as $color ) { foreach ( twentyeleven_color_schemes() as $color ) {
?> ?>
@ -221,7 +221,7 @@ function theme_options_render_page() {
<tr valign="top"><th scope="row"><?php _e( 'Link Color', 'twentyeleven' ); ?></th> <tr valign="top"><th scope="row"><?php _e( 'Link Color', 'twentyeleven' ); ?></th>
<td> <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'] ); ?>" /> <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> <a href="#" class="pickcolor hide-if-no-js" id="link-color-example"></a>
<input type="button" class="pickcolor button hide-if-no-js" value="<?php esc_attr_e( 'Select a Color', 'twentyeleven' ); ?>" /> <input type="button" class="pickcolor button hide-if-no-js" value="<?php esc_attr_e( 'Select a Color', 'twentyeleven' ); ?>" />
@ -234,7 +234,7 @@ function theme_options_render_page() {
<tr valign="top" class="image-radio-option"><th scope="row"><?php _e( 'Default Layout', 'twentyeleven' ); ?></th> <tr valign="top" class="image-radio-option"><th scope="row"><?php _e( 'Default Layout', 'twentyeleven' ); ?></th>
<td> <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 <?php
foreach ( twentyeleven_layouts() as $layout ) { foreach ( twentyeleven_layouts() as $layout ) {
?> ?>

2
wp-content/themes/twentyeleven/single.php
View File

@ -15,7 +15,7 @@ get_header(); ?>
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?> <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<nav id="nav-single"> <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-previous"><?php previous_post_link( '%link', __( '&larr; Previous', 'twentyeleven' ) ); ?></span>
<span class="nav-next"><?php next_post_link( '%link', __( 'Next &rarr;', 'twentyeleven' ) ); ?></span> <span class="nav-next"><?php next_post_link( '%link', __( 'Next &rarr;', 'twentyeleven' ) ); ?></span>
</nav><!-- #nav-single --> </nav><!-- #nav-single -->

91
wp-content/themes/twentyeleven/style.css
View File

@ -309,7 +309,7 @@ body {
----------------------------------------------- */ ----------------------------------------------- */
body, input, textarea { body, input, textarea {
color: #333; color: #373737;
font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif; font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300; font-weight: 300;
line-height: 1.625; line-height: 1.625;
@ -428,6 +428,7 @@ sub {
/* Forms */ /* Forms */
input[type=text], input[type=text],
input[type=password],
textarea { textarea {
background: #fafafa; background: #fafafa;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1); -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
@ -438,7 +439,7 @@ textarea {
} }
input[type=text]:focus, input[type=text]:focus,
textarea:focus { textarea:focus {
color: #333; color: #373737;
} }
textarea { textarea {
padding-left: 3px; padding-left: 3px;
@ -462,7 +463,7 @@ input#searchsubmit {
/* Links */ /* Links */
a { a {
color: #1b8be0; color: #1982d1;
text-decoration: none; text-decoration: none;
} }
a:focus, a:focus,
@ -471,13 +472,24 @@ a:hover {
text-decoration: underline; text-decoration: underline;
} }
/* Assitive text */ /* Assistive text */
.section-heading, .assistive-text {
.screen-reader-text {
position: absolute !important; position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px); 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%;
}
/* =Header /* =Header
@ -503,7 +515,7 @@ a:hover {
#site-title a:hover, #site-title a:hover,
#site-title a:focus, #site-title a:focus,
#site-title a:active { #site-title a:active {
color: #1b8be0; color: #1982d1;
} }
#site-description { #site-description {
color: #7a7a7a; color: #7a7a7a;
@ -590,7 +602,7 @@ a:hover {
background: -moz-linear-gradient(#f9f9f9, #e5e5e5); background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
background: -webkit-linear-gradient(#f9f9f9, #e5e5e5); background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
color: #333; color: #373737;
} }
#access ul li:hover > ul { #access ul li:hover > ul {
display: block; display: block;
@ -710,7 +722,7 @@ a:hover {
.entry-title a:hover, .entry-title a:hover,
.entry-title a:focus, .entry-title a:focus,
.entry-title a:active { .entry-title a:active {
color: #1b8be0; color: #1982d1;
} }
.entry-meta { .entry-meta {
color: #666; color: #666;
@ -777,25 +789,19 @@ dl.gallery-item {
margin: 0; margin: 0;
} }
.page-link { .page-link {
background: #f1f1f1;
border-top: 1px solid #ddd;
clear: both; clear: both;
color: #888;
display: block; display: block;
font-size: 13px; margin: 0 0 1.625em;
margin: 1.625em -30px;
padding: 4px 30px;
text-decoration: none;
} }
.page-link a { .page-link a {
background: #d8d8d8; background: #eee;
color: #444; color: #373737;
margin: 0; margin: 0;
padding: 2px 3px; padding: 2px 3px;
text-decoration: none; text-decoration: none;
} }
.page-link a:hover { .page-link a:hover {
background: #777; background: #888;
color: #fff; color: #fff;
font-weight: bold; font-weight: bold;
} }
@ -803,10 +809,10 @@ dl.gallery-item {
margin-right: 6px; margin-right: 6px;
} }
.entry-meta .edit-link a { .entry-meta .edit-link a {
background: #aaa; background: #eee;
-moz-border-radius: 3px; -moz-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
color: #fff; color: #666;
float: right; float: right;
font-size: 12px; font-size: 12px;
font-weight: 300; font-weight: 300;
@ -814,13 +820,25 @@ dl.gallery-item {
padding: 0px 8px; padding: 0px 8px;
} }
.entry-meta .edit-link a:hover { .entry-meta .edit-link a:hover {
background: #777; background: #888;
color: #fff;
} }
.entry-content .edit-link { .entry-content .edit-link {
clear: both; clear: both;
display: block; 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;
}
/* Author Info */ /* Author Info */
#author-info { #author-info {
font-size: 12px; font-size: 12px;
@ -884,7 +902,7 @@ dl.gallery-item {
.entry-header .comments-link a:hover, .entry-header .comments-link a:hover,
.entry-header .comments-link a:focus, .entry-header .comments-link a:focus,
.entry-header .comments-link a:active { .entry-header .comments-link a:active {
background: #1b8be0; background: #1982d1;
border-color: #1573bb; border-color: #1573bb;
border-color: rgba(0,0,0,0.2); border-color: rgba(0,0,0,0.2);
color: #fff; color: #fff;
@ -992,7 +1010,6 @@ blockquote.pull {
} }
.singular .entry-meta .edit-link a { .singular .entry-meta .edit-link a {
bottom: auto; bottom: auto;
color: #fff;
left: 50px; left: 50px;
position: absolute; position: absolute;
right: auto; right: auto;
@ -1042,7 +1059,7 @@ blockquote.pull {
.format-gallery .gallery-thumb { .format-gallery .gallery-thumb {
float: left; float: left;
display: block; display: block;
margin-right: 1.625em; margin: .375em 1.625em 0 0;
} }
@ -1277,7 +1294,7 @@ article.feature-image.small .entry-summary p a {
width: 180px; width: 180px;
} }
article.feature-image.small .entry-summary p a:hover { article.feature-image.small .entry-summary p a:hover {
background: #1b8be0; background: #1982d1;
color: #eee; color: #eee;
color: rgba(255,255,255,0.8); color: rgba(255,255,255,0.8);
} }
@ -1423,7 +1440,7 @@ section.recent-posts .other-recent-posts .entry-title {
font-size: 17px; font-size: 17px;
} }
section.recent-posts .other-recent-posts a[rel="bookmark"] { section.recent-posts .other-recent-posts a[rel="bookmark"] {
color: #333; color: #373737;
float: left; float: left;
max-width: 84%; max-width: 84%;
} }
@ -1455,8 +1472,8 @@ section.recent-posts .other-recent-posts .comments-link > span {
color: #888; color: #888;
} }
section.recent-posts .other-recent-posts .comments-link a:hover { section.recent-posts .other-recent-posts .comments-link a:hover {
color: #1b8be0; color: #1982d1;
border-color: #1b8be0; border-color: #1982d1;
} }
section.recent-posts .other-recent-posts li:after { section.recent-posts .other-recent-posts li:after {
clear: both; clear: both;
@ -1546,6 +1563,9 @@ p img,
.gallery { .gallery {
margin: 0 auto 1.625em !important; margin: 0 auto 1.625em !important;
} }
#content .gallery a img {
border: none;
}
.gallery-caption { .gallery-caption {
} }
img#wpstats { img#wpstats {
@ -1662,7 +1682,7 @@ img#wpstats {
top: -2px; top: -2px;
} }
.widget_search #searchsubmit:active { .widget_search #searchsubmit:active {
background: #1b8be0; background: #1982d1;
border-color: #0861a5; border-color: #0861a5;
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.1); -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.1);
@ -1860,6 +1880,9 @@ a.comment-reply-link {
background: #ddd; background: #ddd;
border-color: #d3d3d3; border-color: #d3d3d3;
} }
.commentlist > li.bypostauthor .comment-meta {
color: #575757;
}
.commentlist > li.bypostauthor .comment-meta a:focus, .commentlist > li.bypostauthor .comment-meta a:focus,
.commentlist > li.bypostauthor .comment-meta a:active, .commentlist > li.bypostauthor .comment-meta a:active,
.commentlist > li.bypostauthor .comment-meta a:hover { .commentlist > li.bypostauthor .comment-meta a:hover {
@ -1892,7 +1915,6 @@ a.comment-reply-link {
border: 1px solid #d3d3d3; border: 1px solid #d3d3d3;
-moz-border-radius: 3px; -moz-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
color: #444;
margin: 0 auto 1.625em; margin: 0 auto 1.625em;
padding: 1.625em; padding: 1.625em;
position: relative; position: relative;
@ -1990,7 +2012,7 @@ a.comment-reply-link {
text-shadow: 0 -1px 0 rgba(0,0,0,0.3); text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
} }
#respond input#submit:active { #respond input#submit:active {
background: #1b8be0; background: #1982d1;
color: #bfddf3; color: #bfddf3;
} }
#respond #cancel-comment-reply-link { #respond #cancel-comment-reply-link {
@ -2007,7 +2029,7 @@ a.comment-reply-link {
width: auto; width: auto;
} }
#reply-title { #reply-title {
color: #333; color: #373737;
font-size: 24px; font-size: 24px;
font-weight: bold; font-weight: bold;
line-height: 30px; line-height: 30px;
@ -2195,9 +2217,6 @@ p.comment-form-comment {
margin: 2.2em -8.8% 0px; margin: 2.2em -8.8% 0px;
padding: 20px 8.8%; padding: 20px 8.8%;
} }
.page-link {
margin: 1.625em 0;
}
/* Make sure we have room for our comment avatars */ /* Make sure we have room for our comment avatars */
.commentlist > li.comment, .commentlist > li.comment,
.commentlist .pingback { .commentlist .pingback {