9/3/2015 - 3:32 PM

genesis-2-2-accessibility-changes-and-features In genesis-sample-develop theme

/* ## The second snippet removes them from normal browser visibility but leaves them in the markup for screen readers. 
This block goes in the child theme’s style.css, preferably in the areas before specific areas of the site. 
Defaults, Common Classes, or as a new area before Site Header are all good options. 

/* ## Screen reader text
--------------------------------------------- */

.screen-reader-text span,
.screen-reader-shortcut {
	position: absolute !important;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	width: 1px;
	border: 0;
	overflow: hidden;
	color: #333;
	background: #fff;

.genesis-nav-menu .search input[type="submit"]:focus,
.widget_search input[type="submit"]:focus  {
	clip: auto !important;
	height: auto;
	width: auto;
	display: block;
	font-size: 1em;
	font-weight: bold;
	padding: 15px 23px 14px;
	z-index: 100000; /* Above WP toolbar. */
	text-decoration: none;
	box-shadow: 0 0 2px 2px rgba(0,0,0,.6);

.more-link {
    position: relative;

/* # Skip Links
---------------------------------------------------------------------------------------------------- */
.genesis-skip-link li {
	height: 0;
	width: 0;
	list-style: none;

/* ## Accessible Menu
--------------------------------------------- */

.menu .menu-item:focus {
	position: static;

.menu .menu-item > a:focus + ul.sub-menu,
.menu .menu-item.sfHover > ul.sub-menu {
	left: auto;
	opacity: 1;

For an accessible website you need a semantic heading structure. This means, the weight (number) of a heading has meaning, like in a book. One H1 per page, the site title for the homepage, the page title for a page, the archive title for an archive, the category title for a category, you get the idea. The H1 says: this is what the page is about.

So if you activate ‘headings’, the heading structure will be as follows:

    H1: one representing the title for a page, single, archive, search, the 404
    H2: skip links, main navigation, sidebars (and in the content)
    H3: widget-titles (and in the content)
    H4, H5, H6: only in the content

By “content” I mean: what the content manager enters in the Admin editor of a post/page.
Every sidebar will have a screen-reader-text class hidden H2, the widgets title will be an H3.

<h2 class="genesis-sidebar-title screen-reader-text">Primary Sidebar</h2>
// 1: add_theme_support in functions.php

Add to the functions.php of your child theme (or the file where you store your add_theme_support options) the code:

add_theme_support( 'genesis-accessibility', 
  array( 'headings', 'drop-down-menu', 'search-form', 'skip-links', 'rems' ) 

// In the array there are several options. You don’t need to add them all, just the ones you need for your theme.
<aside class="sidebar sidebar-primary widget-area" 
  aria-label="Primary Sidebar" 

<div class="archive-pagination pagination">
    <li class="pagination-previous"><a href="your-url">« Previous Page</a></li>
    <li><a href="your-url"><span class="screen-reader-text">Page </span>1</a></li>
    <li class="active" aria-label="Current page"><a href="your-url"><span class="screen-reader-text">Page </span>2</a></li>

Add Accessibility support

There are two different ways you can activate the accessibility options:

    Add the function add_theme_support for genesis-accessibility in your functions.php and add some extra CSS
    If you can’t change your child theme yourself, use the plugin Genesis Accessible, that will activate the options and also add the CSS for you. This plugin can be found in the WordPress plugin repository. You can read on this website with the installation information how to activate the accessibility options.

Note: All CSS mentioned here is also included into the Sample Child theme for Genesis 2.2. 
// Add skip link needs to secondary nav
add_filter( 'genesis_attr_nav-secondary', 'leaven_add_nav_secondary_id' );
function leaven_add_nav_secondary_id( $attributes ) {
	$attributes['id'] = 'genesis-nav-secondary';
	return $attributes;

add_filter( 'genesis_skip_links_output', 'leaven_add_nav_secondary_skip_link' );
function leaven_add_nav_secondary_skip_link( $links ) {
	$new_links = $links;
	array_splice( $new_links, 1 );

	if ( has_nav_menu( 'secondary' ) ) {
		$new_links['genesis-nav-secondary'] = __( 'Skip to secondary navigation', 'leaven' );

	return array_merge( $new_links, $links );