Created
April 22, 2016 03:57
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/********** 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 | |
--------------------------------------------- */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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