Modify screen reader markup

[tmg12]

Hi,

Does anyone know how I can modify the markup that is generated by the screen reader link. I want it to be wrapped in P tags not H2 tags.

Thanks,

Tom

[tmg12]

Looking at the genesis_skip_links_output filter to see if I can change the markup that way.

$links = apply_filters( 'genesis_skip_links_output', $links );

  // write HTML, skiplinks in a list with a heading
  $skiplinks  =  '<section>';
  $skiplinks .=  '<p class="screen-reader-text">'. __( 'Skip links', 'genesis' ) .'</p>';
  $skiplinks .=  '<ul class="genesis-skip-link">';

  // Add markup for each skiplink
  foreach ($links as $key => $value) {
    $skiplinks .=  '<li><a href="' . esc_url( '#' . $key ) . '"> ' . $value . '</a></li>';
  }

  $skiplinks .=  '</ul>';
  $skiplinks .=  '</section>' . "\n";

  echo $skiplinks;

This code is from the header.php, I changed the markup to go from h2 to p. It works but had some unwanted formatting issues on other elements of the page.

So, i tried this, hook the filter into the header;

add_action ('genesis_header','skip_links_head');
function skip_links_head() {

$links = apply_filters( 'genesis_skip_links_output', $links );

  // write HTML, skiplinks in a list with a heading
  $skiplinks  =  '<section>';
  $skiplinks .=  '<p class="screen-reader-text">'. __( 'Skip links', 'genesis' ) .'</p>';
  $skiplinks .=  '<ul class="genesis-skip-link">';

  // Add markup for each skiplink
  foreach ($links as $key => $value) {
    $skiplinks .=  '<li><a href="' . esc_url( '#' . $key ) . '"> ' . $value . '</a></li>';
  }

  $skiplinks .=  '</ul>';
  $skiplinks .=  '</section>' . "\n";

  echo $skiplinks;

}

This added new screen reader markup, but didn't modify the existing markup.

Anyone got any ideas?

Thanks,

Tom

[Victor Font]

You're not using the filter correctly:

apply_filter( 'genesis_skip_links_output', 'skip_links_head' );
function skip_links_head() {

  // write HTML, skiplinks in a list with a heading
  $skiplinks  =  '<section>';
  $skiplinks .=  '<p class="screen-reader-text">'. __( 'Skip links', 'genesis' ) .'</p>';
  $skiplinks .=  '<ul class="genesis-skip-link">';

  // Add markup for each skiplink
  foreach ($links as $key => $value) {
    $skiplinks .=  '<li><a href="' . esc_url( '#' . $key ) . '"> ' . $value . '</a></li>';
  }

  $skiplinks .=  '</ul>';
  $skiplinks .=  '</section>' . "\n";

  return $skiplinks;
}

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Christoph]

Hi Tom,

That is pretty much shooting the whole purpose of accessibility (supporting assistive technology) in the foot.
Those old SEO principles are not translating into the new era of semantic markup and accessibility.
Google is already using accessibility as a ranking signal and industry chatter is predicting that accessibility will only gain in importance in the near future.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Author]

Posts