Skip to content

Instantly share code, notes, and snippets.

@ChrisCree
Created April 22, 2016 03:57
Show Gist options
  • Save ChrisCree/43ffb76980abdb9af3ded19299526afd to your computer and use it in GitHub Desktop.
Save ChrisCree/43ffb76980abdb9af3ded19299526afd to your computer and use it in GitHub Desktop.
Genesis accessibility CSS for quick reference along with PHP code to add theme support for HTML5 markup, mobile viewport, and accessibility features in child themes.
/********** Screen Reader Text starts about line 482 ************/
th {
font-weight: 400;
}
/* ## 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;
}
/* # Structure and Layout
---------------------------------------------------------------------------------------------------- */
/********** Break to about line 933 ************/
/* ## Jetpack
--------------------------------------------- */
#wpstats {
display: none;
}
/* # 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;
}
/* # Site Header
---------------------------------------------------------------------------------------------------- */
/********** Break to about line 1119 ************/
.genesis-nav-menu > .search {
padding: 10px 0 0;
}
/* ## 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;
}
/* ## Site Header Navigation
--------------------------------------------- */
<?php
/* Enable HTML5 markup, header responsive viewport meta tag, and accessiblity features.
* Hooking it into after_theme_setup allows them to work outside functions.php file.
*/
// Add HTML5, responsive, and accessibility theme support
add_action( 'after_setup_theme', 'wsm_theme_support' );
function wsm_theme_support() {
// Add HTML5 markup structure
add_theme_support( 'html5', array(
'comment-list',
'comment-form',
'search-form',
'gallery',
'caption',
) );
// Add viewport meta tag for mobile browsers
add_theme_support( 'genesis-responsive-viewport' );
// Add accessibility support
add_theme_support( 'genesis-accessibility', array(
'404-page',
'drop-down-menu',
'headings',
'rems',
'search-form',
'skip-links',
) );
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment