Skip to content

Instantly share code, notes, and snippets.

@srikat
Created August 19, 2016 06:18
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save srikat/bec4b9002d3e83cfa3e1841763ff61e7 to your computer and use it in GitHub Desktop.
Save srikat/bec4b9002d3e83cfa3e1841763ff61e7 to your computer and use it in GitHub Desktop.
Change skiplinks heading tag from h2 to h1 in Genesis
remove_action ( 'genesis_before_header', 'genesis_skip_links', 5 );
add_action ( 'genesis_before_header', 'sk_skip_links', 5 );
/**
* Add skiplinks for screen readers and keyboard navigation
*
* @since 2.2.0
*/
function sk_skip_links() {
if ( ! genesis_a11y( 'skip-links' ) ) {
return;
}
// Call function to add IDs to the markup
genesis_skiplinks_markup();
// Determine which skip links are needed
$links = array();
if ( genesis_nav_menu_supported( 'primary' ) && has_nav_menu( 'primary' ) ) {
$links['genesis-nav-primary'] = __( 'Skip to primary navigation', 'genesis' );
}
$links['genesis-content'] = __( 'Skip to content', 'genesis' );
if ( 'full-width-content' != genesis_site_layout() ) {
$links['genesis-sidebar-primary'] = __( 'Skip to primary sidebar', 'genesis' );
}
if ( in_array( genesis_site_layout(), array( 'sidebar-sidebar-content', 'sidebar-content-sidebar', 'content-sidebar-sidebar' ) ) ) {
$links['genesis-sidebar-secondary'] = __( 'Skip to secondary sidebar', 'genesis' );
}
if ( current_theme_supports( 'genesis-footer-widgets' ) ) {
$footer_widgets = get_theme_support( 'genesis-footer-widgets' );
if ( isset( $footer_widgets[0] ) && is_numeric( $footer_widgets[0] ) ) {
if ( is_active_sidebar( 'footer-1' ) ) {
$links['genesis-footer-widgets'] = __( 'Skip to footer', 'genesis' );
}
}
}
/**
* Filter the skip links.
*
* @since 2.2.0
*
* @param array $links {
* Default skiplinks.
*
* @type string HTML ID attribute value to link to.
* @type string Anchor text.
* }
*/
$links = apply_filters( 'genesis_skip_links_output', $links );
// write HTML, skiplinks in a list with a heading
$skiplinks = '<section>';
$skiplinks .= '<h1 class="screen-reader-text">'. __( 'Skip links', 'genesis' ) .'</h1>';
$skiplinks .= '<ul class="genesis-skip-link">';
// Add markup for each skiplink
foreach ($links as $key => $value) {
$skiplinks .= '<li><a href="' . esc_url( '#' . $key ) . '" class="screen-reader-shortcut"> ' . $value . '</a></li>';
}
$skiplinks .= '</ul>';
$skiplinks .= '</section>' . "\n";
echo $skiplinks;
}
@srikat
Copy link
Author

srikat commented Aug 19, 2016

Source: genesis/lib/structure/header.php

@LynxXrossed
Copy link

I've spent so much combing the web for this. Thank you very much!
I'm still wondering why genesis chose to wrap "skip-links" in an H2 tag, especially before H1? -Validators prompt you on it.

@rianrietveld
Copy link

rianrietveld commented Dec 30, 2016

Please @srikat, don't change the Skiplink H2 into an H1.
This way you have a double H1 and that worse than having an H2 first.
Now the screen reader (and Google) might think this page is about skiplinks, because the H1 tells what the page is about.

Removing the H2 on the skip links and navigations all together will be better.

The rule that an H1 must be on top of the heading list applies for WCAG 2 AAA. And that is the strictest rule there is. For Genesis and WordPress core we stick to WCAG 2 AA (the worldwide standard), and there starting with an H2 is allowed.
If you validate for accessibility rules, please also check for which rules the errors apply.

The headings are added for the convenience of the screen reader users. They can call a list of heading to navigate.

But you can remove the heading from the skip links if you want to, just don’t add an extra H1, that will confuse screen readers by thinking this page is about skip links.

Maybe it's better to remove the heading from G core, to prevent confusion like this

@amandarush
Copy link

Might be worth removing the heading from skiplinks in core. Since they're at the top of the page with the exception of the page title itself in some screen reader/browser combinations, I think the likelihood that someone would call up the list of headings to find the skiplinks is small.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment