Genesis accessibility functions for reference

accessibility.php

// In /lib/functions/formatting.php

**
 * Return more link text plus hidden title for screen readers, to improve accessibility.
 *
 * @since 2.2.0
 *
 * @param string  $more_link_text Text of the more link.
 *
 * @return string $more_link_text with or withput the hidden title.
 */
 function genesis_a11y_more_link( $more_link_text )  {

 	if ( genesis_a11y( 'screen-reader-text' ) && ! empty( $more_link_text ) ) {
		$more_link_text .= ' <span class="screen-reader-text">' . __( 'about ', 'genesis' ) . get_the_title() . '</span>';
 	}
 	return $more_link_text;

 }


// In /lib/functions/general.php
/**
 * Determine if theme support genesis-accessibility is activated by the child theme.
 * Assumes the presence of a screen-reader-text class in the stylesheet (required generated class as from WordPress 4.2)
 *
 * Adds screen-reader-text by default.
 * Skip links to primary navigation, main contant, sidebars and footer, semantic headings and a keyboard accessible drop-down-menu
 * can be added as extra features as: 'skip-links', 'headings', 'drop-down-menu'
 *
 * @since 2.2.0
 *
 * @param string $arg Optional. Specific accessibility feature to check for support. Default is screen-reader-text.
 *
 * @return bool True if current theme supports genesis-accessibility, or an specific feature of it, false otherwise.
 */
function genesis_a11y( $arg = 'screen-reader-text' ) {

	//* No a11y if not html5
	if ( ! genesis_html5() ) {
		return false;
	}

	$feature = 'genesis-accessibility';

	if ( 'screen-reader-text' === $arg ) {
		return current_theme_supports( $feature );
	}

	$support = get_theme_support( $feature );

	// No support for feature.
	if ( ! $support ) {
		return false;
	}



// In /lib/functions/widgetize.php

add_filter( 'genesis_register_sidebar_defaults', 'genesis_a11y_register_sidebar_defaults' );
/**
 * Widget heading filter, default H4 in Widgets and sidebars modified to an H3 if genesis_a11y( 'headings' ) support
 *
 * For using a semantic heading structure, improves accessibility
 *
 * @since 2.2.0
 *
 * @param array $args Arguments
 *
 * @return array $args
 */
function genesis_a11y_register_sidebar_defaults( $args ) {

	if ( genesis_a11y( 'headings' ) ) {
		$args['before_title'] = '<h3 class="widgettitle widget-title">';
    	$args['after_title']  = "</h3>\n";
	}

    return $args;
}

/**
 * Adds an H2 title to widget areas.
 *
 * For using a semantic heading structure, improves accessibility
 *
 * @since 2.2.0
 *
 * @uses genesis_a11y( 'headings' ) to check for semantic heading support
 *
 * @global $wp_registered_sidebars
 *
 * @return string $heading Widget area heading or null
 */
function genesis_sidebar_title( $id ) {

	if ( genesis_a11y( 'headings' ) && $id ) {

		global $wp_registered_sidebars;

		if ( array_key_exists( $id, $wp_registered_sidebars ) ) {
			$name = $wp_registered_sidebars[$id]['name'];
		} else {
			$name = $id;
		}

		$heading = '<h2 class="genesis-sidebar-title screen-reader-text">' . $name . '</h2>';

		return apply_filters( 'genesis_sidebar_title_output', $heading, $id );
	}

}

drop-down-menu.js

// In /lib/js/drop-down-menu.js

/**
 * This script adds keyboard accessibility to a drop down menu.
 *
 * @since 2.2.0
 *
 * need the following css to make it work:
 *
 *  .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;
 *  }
 *
*/

var genesis_drop_down_menu = ( function( $ ) {
	'use strict';

	/**
	 * Add class to menu item on hover.
	 *
	 * @since 2.2.0
	 */
	var menuItemEnter = function() {
		$( this ).addClass( 'genesis-hover' );
	},

	/**
	 * Remove a class when focus leaves menu item.
	 *
	 * @since 2.2.0
	 */
	menuItemLeave = function() {
		$( this ).removeClass( 'genesis-hover' );
	},

	/**
	 * Toggle menu item class when a link fires a focus or blur event.
	 *
	 * @since 2.2.0
	 */
	menuItemToggleClass = function() {
		$( this ).parents( '.menu-item' ).toggleClass( 'genesis-hover' );
	},

	/**
	 * Bind behaviour to events.
	 *
	 * @since 2.2.0
	 */
	ready = function() {
		$( '.menu li' )
			.on( 'mouseenter.genesis-hover', menuItemEnter )
			.on( 'mouseleave.genesis-hover', menuItemLeave )
			.find( 'a' )
			.on( 'focus.genesis-hover blur.genesis-hover', menuItemToggleClass );
	};

	// Only expose the ready function to the world
	return {
		ready: ready
	};

})( jQuery );

jQuery( genesis_drop_down_menu.ready );

skip-links.js

//In /lib/ls/skip-links.js
/**
 * This file fixes the browser bug for skip-links: While the visual focus of the browser shifts to the element being linked to, the input focus stays where it was.
 * Affects Internet Explorer and Chrome
 * http://www.nczonline.net/blog/2013/01/15/fixing-skip-to-content-links/
*/

function ga_skiplinks() {
    'use strict';
    var element = document.getElementById( location.hash.substring( 1 ) );

    if ( element ) {
        if ( ! /^(?:a|select|input|button|textarea)$/i.test( element.tagName ) ) {
            element.tabIndex = -1;
        }
        element.focus();
    }
}

if ( window.addEventListener ) {
    window.addEventListener( 'hashchange', ga_skiplinks, false );
} else { // IE8 and earlier
    window.attachEvent( 'onhashchange', ga_skiplinks, false );
}
	// No args passed in to add_theme_support(), so accept none.
	if ( ! isset( $support[0] ) ) {
		return false;
	}

	// Support for specific arg found.
	if ( in_array( $arg, $support[0] ) ) {
		return true;
	}

}

Style.css

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

.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;
	color: #333;
	background: #fff;
	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 {
	margin: 0;
}

.genesis-skip-link li {
	height: 0;
	width: 0;
	list-style: none;
}

/* Display outline on focus */
:focus {
	color: #333;
	outline: #ccc solid 1px;
}


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