Two Things You Need to Do to Your Genesis 2.2 Theme

If you’ve updated to Genesis 2.2, there are new accessibility (a11y) items that have been introduced into Genesis 2.2. You need two snippets to activate it for people with disabilities and then make the markup clean for sighted people.

The first snippet activates the a11y items. You put this in the child theme’s functions.php file, preferably in the same area as the other theme support items, because that’s just best practices.

Note: copy and paste the entire block, the overflow code will be included in the clipboard.

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

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. I put it after Plugins in my Sass starter theme that is a fork of BG Mobile First, BG Mobile First JP Sass, available for free on GitHub. In the case of Sass, I gave it its own partial.

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

.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;
}

.screen-reader-text:focus,
.screen-reader-shortcut:focus,
.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;
}

These are both things you should add to all of your existing sites and any themes you have on the market.