Genesis 2.2 Beta

I’m very happy to announce that the public beta for Genesis 2.2 is available now!

If you’re not already running the Genesis Beta Tester plugin, go ahead and install/activate it on your site. When you do, you should see the update notification in your dashboard. While you’re at it, head over to Github and download the Genesis sample child theme.

Thanks to the hard work (and extensive knowledge) of Rian Rietveld, Genesis 2.2 will have the most extensive focus on Accessibility of any prior release. Things like better color contrast, keyboard navigation, and better screen reader support make make Genesis 2.2 more usable for your visitors with disabilities.

But as with any feature that changes front end output, we’ve made this opt-in, so that your site doesn’t break when you upgrade. Here’s how to enable it in your child theme.

First, you’ll need to add the theme support for the accessibility features.

//* Add Accessibility support
add_theme_support( 'genesis-accessibility', array( 'headings', 'drop-down-menu',  'search-form', 'skip-links' ) );

(In the future, we may add new accessibility features, but for now, these are the four areas we’ve focused on.)

When you enable the accessibility features in your child theme, it will output special elements in your site’s markup to help disabled visitors navigate your site. But you don’t want these elements to be visible to your entire audience. So we’ll need some special CSS that will deliver these elements to the users who need them, but not to the ones who don’t.

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

It may also be a good idea to do things like adding REM support, better color contrast, etc. You can see all the things we changed in the sample child theme by viewing this diff on Github.

That’s Not All

As usual, we have more than one new thing to talk about in a major release. We’ve also added compatibility code for WordPress 4.2, better compatibility with Schema.org, a database upgrade method for WP-CLI, and a lot more.

We’re very interested in having lots of feedback during this beta period, so if you notice anything during your use of the beta, please shoot us a note via the help form.

This blog was originally posted on Studiopress.com This post is in no way associated with Kembel.ca. For more posts by this author, please click here.