Note: We’re improving the handbook and it is still a draft. If you find an error, please comment below.

For quick tips, visit our Quick Start Guide.

New Windows and Tabs New Windows and Tabs

Using the target attribute on links to trigger new windows or tabs can disorient users. Not all screen readers alert users when a new window or tab has opened and for those with cognitive disabilities, they may have trouble interpreting what’s happened. This can be prevented by not using the target attribute on links so they don’t trigger new windows or tabs to open. If you have to use the target attribute, consider using the screen-reader-text class for non-sighted users. For sighted users, consider keeping the warning text visible instead of hiding it or using an icon next to links.

<a href="<?php echo esc_url( 'https://twitter.com/WPAccessibility' ); ?>" target="_blank">
 Our Twitter 
 <span class="screen-reader-text">will open in a new window.</span>
</a>

Further Reading: Links to New Windows, Pop-ups, Other Frames, or External Web Sites by Web Aim

Top ↑

Skip links provide a mechanism that enables users to navigate directly to content or navigation on entering any given page. They are usually placed in the beginning of a WordPress theme before the header navigation in header.php. This way users can choose to either continue to the header navigation, or jump to the site content, and so on. Here’s what a skip link looks like in the Twenty Sixteen theme:

<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentysixteen' ); ?></a>

A skip link will have the id of the div it’s skipping the user to. In the example above, it’d jump to a div with an id of “content”. Skip links use the screen-reader-text class so they’re visually hidden unless focused on, and are still accessible to screen readers. Here’s what the CSS looks like in Twenty Sixteen for skip links.

.site .skip-link {
 background-color: #f1f1f1;
 box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
 color: #21759b;
 display: block;
 font-family: Montserrat, "Helvetica Neue", sans-serif;
 font-size: 14px;
 font-weight: 700;
 left: -9999em;
 outline: none;
 padding: 15px 23px 14px;
 text-decoration: none;
 text-transform: none;
 top: -9999em;
}

.logged-in .site .skip-link {
 box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
 font-family: "Open Sans", sans-serif;
}

.site .skip-link:focus {
 clip: auto;
 height: auto;
 left: 6px;
 top: 7px;
 width: auto;
 z-index: 100000;
}

And the CSS for the screen-reader-text class:

.screen-reader-text {
 clip: rect(1px, 1px, 1px, 1px);
 height: 1px;
 overflow: hidden;
 position: absolute !important;
 width: 1px;
 /* many screen reader and browser combinations announce broken words as they would appear visually */
 word-wrap: normal !important;
}

Further Reading:

Top ↑

Read More Read More

Read more links are used in post excerpts to link the user to full content. You should avoid using non-informative links that can’t be understood outside of context. Some screen readers list all the links pulled from the page and therefore if links can’t be understood outside of context, users can’t be sure where they link to. So it’s best practice to include the post title in your Read More/Continue Reading link. Here’s an example from the Twenty Sixteen theme.

<?php the_content( sprintf(
__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentysixteen' ),
get_the_title()
) ); ?>

Further Reading: