• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
Petersen Media Group

Petersen Media Group

We help you spend less time ensuring your site is there, and more time making it profitable.

  • Home
  • About Us
  • FAQs
    • WordPress Hosting
    • Hosting Services
  • Benefits
  • Services
    • Choose your plan

Two Things You Need to Do to Your Genesis 2.2 Theme

September 3, 2015 by

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.

Genesis Framework a11y,  accessibility,  Genesis 2.2,  Genesis Framework

Reader Interactions

Comments

  1. Susan Nelson says

    September 4, 2015 at 10:08 AM

    Thank you so much for this!

  2. divakara ganesh says

    May 23, 2016 at 8:04 AM

    Thank you,
    I am developing new theme for my website on genesis frame work.
    Your CSS Saved my 15 mins of time..

Primary Sidebar

Recent Posts

  • Change Genesis .site-title H1 Wrap on the Homepage
  • The Year of 2017 Goals for Petersen Media Group
  • Forever to Finish, Gone in the Blink of an Eye: 2016
  • Add Genesis Custom Post Type Archive Settings
  • Use Minified Stylesheet with Genesis Themes with Front-Page Customizer Backgrounds

Recent Comments

  • Mike Hale on The Year of 2017 Goals for Petersen Media Group
  • Little Shiva on The Year of 2017 Goals for Petersen Media Group
  • Luke Cavanagh on A Response to the WordPress Customizer Expansion: Removal
  • Chris Johnson on Why Partnerships Often Don’t Sail
  • divakara ganesh on Two Things You Need to Do to Your Genesis 2.2 Theme

Archives

  • January 2017
  • August 2016
  • May 2016
  • October 2015
  • September 2015
  • August 2015
  • June 2015
  • April 2015
  • December 2014
  • November 2014
  • October 2014
  • August 2014
  • May 2014
  • April 2014
  • February 2014
  • January 2014
  • November 2013
  • September 2013
  • July 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • January 2000

Categories

  • Business Tips
  • Genesis Framework
  • Investments in You
  • Products
  • Technology
  • Uncategorized
  • WordCamp Slide
  • WordPress Tips

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

Footer

Petersen Media Group was founded on the idea that good work, transparent and honest communication, and radical generosity are the keys to success in business and life.

The WordPress community has shown up over and over to prove this to be true.

We look forward to being entrusted with your business.

Navigation

  • Home
  • About Us
  • Blog
  • Choose Your Plan
  • FAQs
  • Contact
  • Disclaimer

This site is independently owned. It is not sponsored by StudioPress, WP Engine, WordPress, or Automattic Inc.

Theme and various assets used with permission from SEOThemes and GenesisSiteCare.

Copyright © 2019 · Petersen Media Group