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
parent
bc6a3ba8f8
commit
8a7dd1e31c
|
|
@ -35,6 +35,7 @@ ins {
|
|||
background: #00063f;
|
||||
}
|
||||
input[type=text],
|
||||
.post-password-required input[type=password],
|
||||
textarea {
|
||||
border: 1px solid #222;
|
||||
}
|
||||
|
|
@ -124,26 +125,32 @@ a {
|
|||
border-color: #222;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
/* Author Info */
|
||||
|
|
@ -166,7 +173,7 @@ a {
|
|||
|
||||
/* Comments link */
|
||||
.entry-header .comments-link a {
|
||||
background: #1a1a1a;
|
||||
background: #242424;
|
||||
border-color: #222;
|
||||
color: #888;
|
||||
}
|
||||
|
|
@ -178,9 +185,6 @@ a {
|
|||
.singular .entry-title {
|
||||
color: #fff;
|
||||
}
|
||||
.singular .entry-meta .edit-link a {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
|
||||
/* =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 > span {
|
||||
border-color: #666;
|
||||
border-color: #959595;
|
||||
color: #bbb;
|
||||
}
|
||||
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;
|
||||
border-color: #2c2c2c;
|
||||
}
|
||||
.commentlist > li.bypostauthor .comment-meta {
|
||||
color: #a8a8a8;
|
||||
}
|
||||
|
||||
/* Comment Form */
|
||||
#respond {
|
||||
background: #222;
|
||||
border-color: #2c2c2c;
|
||||
color: #bbb;
|
||||
}
|
||||
#respond input[type="text"],
|
||||
#respond textarea {
|
||||
|
|
@ -538,7 +544,7 @@ section.recent-posts .other-recent-posts .comments-link a:hover {
|
|||
color: #333;
|
||||
}
|
||||
.commentlist > li.bypostauthor .comment-meta {
|
||||
color: #666;
|
||||
color: #959595;
|
||||
}
|
||||
.commentlist > li:before {
|
||||
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 .comment-meta {
|
||||
color: #666;
|
||||
color: #959595;
|
||||
}
|
||||
}
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
|
||||
<?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( __( '← Older Comments', 'twentyeleven' ) ); ?></div>
|
||||
<div class="nav-next"><?php next_comments_link( __( 'Newer Comments →', 'twentyeleven' ) ); ?></div>
|
||||
</nav>
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
|
||||
<?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( __( '← Older Comments', 'twentyeleven' ) ); ?></div>
|
||||
<div class="nav-next"><?php next_comments_link( __( 'Newer Comments →', 'twentyeleven' ) ); ?></div>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -441,7 +441,7 @@ function twentyeleven_content_nav( $nav_id ) {
|
|||
|
||||
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">←</span> Older posts', 'twentyeleven' ) ); ?></div>
|
||||
<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">→</span>', 'twentyeleven' ) ); ?></div>
|
||||
</nav><!-- #nav-above -->
|
||||
|
|
|
|||
|
|
@ -110,9 +110,10 @@
|
|||
<?php endif; ?>
|
||||
|
||||
<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' ) ); ?>
|
||||
</nav><!-- #access -->
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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 ) {
|
||||
?>
|
||||
|
|
@ -221,7 +221,7 @@ function theme_options_render_page() {
|
|||
|
||||
<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>
|
||||
<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>
|
||||
<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 ) {
|
||||
?>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ get_header(); ?>
|
|||
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
|
||||
|
||||
<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', __( '← Previous', 'twentyeleven' ) ); ?></span>
|
||||
<span class="nav-next"><?php next_post_link( '%link', __( 'Next →', 'twentyeleven' ) ); ?></span>
|
||||
</nav><!-- #nav-single -->
|
||||
|
|
|
|||
|
|
@ -309,7 +309,7 @@ body {
|
|||
----------------------------------------------- */
|
||||
|
||||
body, input, textarea {
|
||||
color: #333;
|
||||
color: #373737;
|
||||
font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-weight: 300;
|
||||
line-height: 1.625;
|
||||
|
|
@ -428,6 +428,7 @@ sub {
|
|||
|
||||
/* Forms */
|
||||
input[type=text],
|
||||
input[type=password],
|
||||
textarea {
|
||||
background: #fafafa;
|
||||
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
|
||||
|
|
@ -438,7 +439,7 @@ textarea {
|
|||
}
|
||||
input[type=text]:focus,
|
||||
textarea:focus {
|
||||
color: #333;
|
||||
color: #373737;
|
||||
}
|
||||
textarea {
|
||||
padding-left: 3px;
|
||||
|
|
@ -462,7 +463,7 @@ input#searchsubmit {
|
|||
|
||||
/* Links */
|
||||
a {
|
||||
color: #1b8be0;
|
||||
color: #1982d1;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:focus,
|
||||
|
|
@ -471,13 +472,24 @@ a:hover {
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 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%;
|
||||
}
|
||||
|
||||
|
||||
/* =Header
|
||||
|
|
@ -503,7 +515,7 @@ a:hover {
|
|||
#site-title a:hover,
|
||||
#site-title a:focus,
|
||||
#site-title a:active {
|
||||
color: #1b8be0;
|
||||
color: #1982d1;
|
||||
}
|
||||
#site-description {
|
||||
color: #7a7a7a;
|
||||
|
|
@ -590,7 +602,7 @@ a:hover {
|
|||
background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
|
||||
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 {
|
||||
display: block;
|
||||
|
|
@ -710,7 +722,7 @@ a:hover {
|
|||
.entry-title a:hover,
|
||||
.entry-title a:focus,
|
||||
.entry-title a:active {
|
||||
color: #1b8be0;
|
||||
color: #1982d1;
|
||||
}
|
||||
.entry-meta {
|
||||
color: #666;
|
||||
|
|
@ -777,25 +789,19 @@ dl.gallery-item {
|
|||
margin: 0;
|
||||
}
|
||||
.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;
|
||||
margin: 0 0 1.625em;
|
||||
}
|
||||
.page-link a {
|
||||
background: #d8d8d8;
|
||||
color: #444;
|
||||
background: #eee;
|
||||
color: #373737;
|
||||
margin: 0;
|
||||
padding: 2px 3px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.page-link a:hover {
|
||||
background: #777;
|
||||
background: #888;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -803,10 +809,10 @@ dl.gallery-item {
|
|||
margin-right: 6px;
|
||||
}
|
||||
.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;
|
||||
font-weight: 300;
|
||||
|
|
@ -814,13 +820,25 @@ dl.gallery-item {
|
|||
padding: 0px 8px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
/* Author Info */
|
||||
#author-info {
|
||||
font-size: 12px;
|
||||
|
|
@ -884,7 +902,7 @@ dl.gallery-item {
|
|||
.entry-header .comments-link a:hover,
|
||||
.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);
|
||||
color: #fff;
|
||||
|
|
@ -992,7 +1010,6 @@ blockquote.pull {
|
|||
}
|
||||
.singular .entry-meta .edit-link a {
|
||||
bottom: auto;
|
||||
color: #fff;
|
||||
left: 50px;
|
||||
position: absolute;
|
||||
right: auto;
|
||||
|
|
@ -1042,7 +1059,7 @@ blockquote.pull {
|
|||
.format-gallery .gallery-thumb {
|
||||
float: left;
|
||||
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;
|
||||
}
|
||||
article.feature-image.small .entry-summary p a:hover {
|
||||
background: #1b8be0;
|
||||
background: #1982d1;
|
||||
color: #eee;
|
||||
color: rgba(255,255,255,0.8);
|
||||
}
|
||||
|
|
@ -1423,7 +1440,7 @@ section.recent-posts .other-recent-posts .entry-title {
|
|||
font-size: 17px;
|
||||
}
|
||||
section.recent-posts .other-recent-posts a[rel="bookmark"] {
|
||||
color: #333;
|
||||
color: #373737;
|
||||
float: left;
|
||||
max-width: 84%;
|
||||
}
|
||||
|
|
@ -1455,8 +1472,8 @@ section.recent-posts .other-recent-posts .comments-link > span {
|
|||
color: #888;
|
||||
}
|
||||
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 {
|
||||
clear: both;
|
||||
|
|
@ -1546,6 +1563,9 @@ p img,
|
|||
.gallery {
|
||||
margin: 0 auto 1.625em !important;
|
||||
}
|
||||
#content .gallery a img {
|
||||
border: none;
|
||||
}
|
||||
.gallery-caption {
|
||||
}
|
||||
img#wpstats {
|
||||
|
|
@ -1662,7 +1682,7 @@ img#wpstats {
|
|||
top: -2px;
|
||||
}
|
||||
.widget_search #searchsubmit:active {
|
||||
background: #1b8be0;
|
||||
background: #1982d1;
|
||||
border-color: #0861a5;
|
||||
-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);
|
||||
|
|
@ -1860,6 +1880,9 @@ a.comment-reply-link {
|
|||
background: #ddd;
|
||||
border-color: #d3d3d3;
|
||||
}
|
||||
.commentlist > li.bypostauthor .comment-meta {
|
||||
color: #575757;
|
||||
}
|
||||
.commentlist > li.bypostauthor .comment-meta a:focus,
|
||||
.commentlist > li.bypostauthor .comment-meta a:active,
|
||||
.commentlist > li.bypostauthor .comment-meta a:hover {
|
||||
|
|
@ -1892,7 +1915,6 @@ a.comment-reply-link {
|
|||
border: 1px solid #d3d3d3;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
color: #444;
|
||||
margin: 0 auto 1.625em;
|
||||
padding: 1.625em;
|
||||
position: relative;
|
||||
|
|
@ -1990,7 +2012,7 @@ a.comment-reply-link {
|
|||
text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
|
||||
}
|
||||
#respond input#submit:active {
|
||||
background: #1b8be0;
|
||||
background: #1982d1;
|
||||
color: #bfddf3;
|
||||
}
|
||||
#respond #cancel-comment-reply-link {
|
||||
|
|
@ -2007,7 +2029,7 @@ a.comment-reply-link {
|
|||
width: auto;
|
||||
}
|
||||
#reply-title {
|
||||
color: #333;
|
||||
color: #373737;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
line-height: 30px;
|
||||
|
|
@ -2195,9 +2217,6 @@ p.comment-form-comment {
|
|||
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 */
|
||||
.commentlist > li.comment,
|
||||
.commentlist .pingback {
|
||||
|
|
|
|||
Loading…
Reference in New Issue