Twenty Fifteen: Use a heading heirarchy to provide a better navigation experience when using screenreading software.

Props davidakennedy, rianrietveld, iamtakashi, afercia, davidakennedy, fixes #30065.

Built from https://develop.svn.wordpress.org/trunk@30072


git-svn-id: http://core.svn.wordpress.org/trunk@30072 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Ian Stewart 2014-10-28 21:03:22 +00:00
parent 027d026077
commit 9d0e0a00f9
10 changed files with 36 additions and 12 deletions

View File

@ -24,7 +24,7 @@
?> ?>
</div><!-- .author-avatar --> </div><!-- .author-avatar -->
<div class="author-description"> <div class="author-description">
<h2 class="author-title"><?php echo get_the_author(); ?></h2> <h3 class="author-title"><?php echo get_the_author(); ?></h3>
<p class="author-bio"> <p class="author-bio">
<?php the_author_meta( 'description' ); ?> <?php the_author_meta( 'description' ); ?>
<a class="author-link" href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" rel="author"> <a class="author-link" href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" rel="author">

View File

@ -14,7 +14,13 @@
<?php twentyfifteen_post_thumbnail(); ?> <?php twentyfifteen_post_thumbnail(); ?>
<header class="entry-header"> <header class="entry-header">
<?php the_title( sprintf( '<h1 class="entry-title"><a href="%s" rel="bookmark">', esc_url( twentyfifteen_get_link_url() ) ), '</a></h1>' ); ?> <?php
if ( is_single() ) :
the_title( sprintf( '<h1 class="entry-title"><a href="%s">', esc_url( twentyfifteen_get_link_url() ) ), '</a></h1>' );
else :
the_title( sprintf( '<h2 class="entry-title"><a href="%s">', esc_url( twentyfifteen_get_link_url() ) ), '</a></h2>' );
endif;
?>
</header> </header>
<!-- .entry-header --> <!-- .entry-header -->

View File

@ -14,7 +14,7 @@
<?php twentyfifteen_post_thumbnail(); ?> <?php twentyfifteen_post_thumbnail(); ?>
<header class="entry-header"> <header class="entry-header">
<?php the_title( sprintf( '<h1 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h1>' ); ?> <?php the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
</header><!-- .entry-header --> </header><!-- .entry-header -->
<div class="entry-summary"> <div class="entry-summary">

View File

@ -18,7 +18,7 @@
if ( is_single() ) : if ( is_single() ) :
the_title( '<h1 class="entry-title">', '</h1>' ); the_title( '<h1 class="entry-title">', '</h1>' );
else : else :
the_title( sprintf( '<h1 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h1>' ); the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' );
endif; endif;
?> ?>
</header><!-- .entry-header --> </header><!-- .entry-header -->

View File

@ -119,8 +119,8 @@ function twentyfifteen_widgets_init() {
'description' => __( 'Add widgets here to appear in your sidebar.', 'twentyfifteen' ), 'description' => __( 'Add widgets here to appear in your sidebar.', 'twentyfifteen' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">', 'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>', 'after_widget' => '</aside>',
'before_title' => '<h1 class="widget-title">', 'before_title' => '<h2 class="widget-title">',
'after_title' => '</h1>', 'after_title' => '</h2>',
) ); ) );
} }
add_action( 'widgets_init', 'twentyfifteen_widgets_init' ); add_action( 'widgets_init', 'twentyfifteen_widgets_init' );

View File

@ -29,8 +29,18 @@
<div id="sidebar" class="sidebar"> <div id="sidebar" class="sidebar">
<header id="masthead" class="site-header" role="banner"> <header id="masthead" class="site-header" role="banner">
<div class="site-branding"> <div class="site-branding">
<?php
if ( is_front_page() && is_home() ) : ?>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1> <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<p class="site-description"><?php bloginfo( 'description' ); ?></p> <?php else : ?>
<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
<?php endif;
$description = get_bloginfo( 'description', 'display' );
if ( ! empty( $description ) ) : ?>
<p class="site-description"><?php echo esc_html( $description ); ?></p>
<?php endif;
?>
<button class="secondary-toggle"><?php esc_html_e( 'Menu and widgets', 'twentyfifteen' ); ?></button> <button class="secondary-toggle"><?php esc_html_e( 'Menu and widgets', 'twentyfifteen' ); ?></button>
</div><!-- .site-branding --> </div><!-- .site-branding -->
</header><!-- .site-header --> </header><!-- .site-header -->

View File

@ -34,7 +34,7 @@ function twentyfifteen_paging_nav() {
if ( $links ) : if ( $links ) :
?> ?>
<nav class="navigation pagination" role="navigation"> <nav class="navigation pagination" role="navigation">
<h1 class="screen-reader-text"><?php esc_html_e( 'Posts navigation', 'twentyfifteen' ); ?></h1> <h2 class="screen-reader-text"><?php esc_html_e( 'Posts navigation', 'twentyfifteen' ); ?></h2>
<div class="nav-links"> <div class="nav-links">
<?php echo $links; ?> <?php echo $links; ?>
</div><!-- .nav-links --> </div><!-- .nav-links -->
@ -71,7 +71,7 @@ function twentyfifteen_post_nav() {
?> ?>
<nav class="navigation post-navigation" role="navigation"> <nav class="navigation post-navigation" role="navigation">
<h1 class="screen-reader-text"><?php esc_html_e( 'Post navigation', 'twentyfifteen' ); ?></h1> <h2 class="screen-reader-text"><?php esc_html_e( 'Post navigation', 'twentyfifteen' ); ?></h2>
<div class="nav-links"> <div class="nav-links">
<?php <?php
if ( is_attachment() ) : if ( is_attachment() ) :
@ -98,7 +98,7 @@ function twentyfifteen_comment_nav() {
if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) :
?> ?>
<nav class="navigation comment-navigation" role="navigation"> <nav class="navigation comment-navigation" role="navigation">
<h1 class="screen-reader-text"><?php esc_html_e( 'Comment navigation', 'twentyfifteen' ); ?></h1> <h2 class="screen-reader-text"><?php esc_html_e( 'Comment navigation', 'twentyfifteen' ); ?></h2>
<div class="nav-links"> <div class="nav-links">
<?php <?php
if ( $prev_link = get_previous_comments_link( esc_html__( 'Older Comments', 'twentyfifteen' ) ) ) : if ( $prev_link = get_previous_comments_link( esc_html__( 'Older Comments', 'twentyfifteen' ) ) ) :

View File

@ -22,6 +22,12 @@ get_header(); ?>
<?php if ( have_posts() ) : ?> <?php if ( have_posts() ) : ?>
<?php if ( is_home() && ! is_front_page() ) : ?>
<header>
<h1 class="page-title screen-reader-text"><?php echo esc_html( get_the_title( get_option( 'page_for_posts' ) ) ); ?></h1>
</header>
<?php endif; ?>
<?php while ( have_posts() ) : the_post(); ?> <?php while ( have_posts() ) : the_post(); ?>
<?php <?php

View File

@ -1284,7 +1284,9 @@ img.aligncenter {
font-family: "Noto Sans", sans-serif; font-family: "Noto Sans", sans-serif;
font-size: 22px; font-size: 22px;
font-size: 2.2rem; font-size: 2.2rem;
font-weight: 700;
line-height: 1.3636; line-height: 1.3636;
margin-bottom: 0;
} }
.site-description { .site-description {

View File

@ -4,7 +4,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '4.1-alpha-30071'; $wp_version = '4.1-alpha-30072';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.