How to change the screen-reader-text heading

  • I want to change the <h2 class=”screen-reader-text”>Posts navigation</h2>
    to <div class=”screen-reader-text”>Posts navigation</div>.

    It can be found from source code under navigation section.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator James Huff

    (@macmanx)

    You don’t want to do that.

    Heading tags are crucial structural elements for screen readers: https://accessibility.psu.edu/headingshtml/

    @sdforever Try:

    
add_filter( 'navigation_markup_template', function( $template, $class ) {
	return '
	<nav class="navigation %1$s" role="navigation" aria-label="%4$s">
		<div class="screen-reader-text">%2$s</div>
		<div class="nav-links">%3$s</div>
	</nav>';
}, 10, 2 );

    This will work only with WP 5.3.0 or higher. aria-label isn’t present in older versions. If you’re using older versions remove aria-label="%4$s".

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to change the screen-reader-text heading’ is closed to new replies.