Enable Accessibility Features

Unless otherwise indicated, the code snippets you see below should be placed into your theme’s functions.php file.

The following code will activate Genesis accessibility features, which are included in Genesis 2.2 Beta:

<?php
//* Do NOT include the opening php tag shown above. Copy the code shown below.
 
//* Enable Genesis Accessibility Components
add_theme_support( 'genesis-accessibility', array(
    '404-page',
    'drop-down-menu',
    'headings',
    'rems',
    'search-form',
    'skip-links',
) );

When activating Genesis accessibility features, the following CSS is necessary. The CSS provided below pertains specifically to menu accessibility:

/* ## 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;
}

Below you will find the CSS used for screen reader text:

/* ## Screen reader text
--------------------------------------------- */
 
.screen-reader-text,
.screen-reader-text span,
.screen-reader-shortcut {
	border: 0;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}
 
.screen-reader-text:focus,
.screen-reader-shortcut:focus,
.genesis-nav-menu .search input[type="submit"]:focus,
.widget_search input[type="submit"]:focus  {
	background: #fff;
	box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
	clip: auto !important;
	color: #333;
	display: block;
	font-size: 1em;
	font-weight: bold;
	height: auto;
	padding: 15px 23px 14px;
	text-decoration: none;
	width: auto;
	z-index: 100000; /* Above WP toolbar. */
}
 
.more-link {
	position: relative;
}

Below is the CSS used for skip links:

/* Skip Links
---------------------------------------------------------------------------------------------------- */
.genesis-skip-link {
	margin: 0;
}
 
.genesis-skip-link li {
	height: 0;
	list-style: none;
	width: 0;
}
 
/* Display outline on focus */
:focus {
	color: #333;
	outline: #ccc solid 1px;
}

In certain situations, it might be necessary to eliminate skip links from pages. Here’s a sample code to remove them from a page_landing.php file:

<?php
//* Do NOT include the opening php tag shown above. Copy the code shown below.
 
//* Remove Skip Links from a template
remove_action ( 'genesis_before_header', 'genesis_skip_links', 5 );
 
//* Dequeue Skip Links Script
add_action( 'wp_enqueue_scripts','child_dequeue_skip_links' );
function child_dequeue_skip_links() {
 
	wp_dequeue_script( 'skip-links' );
 
}
What are your feelings