Correct method for styling screen reader page text?

Question

The following markup is rendered by WordPress’ the_posts_pagination():

<nav class="navigation pagination" role="navigation">
  <h2 class="screen-reader-text">Posts navigation</h2>
  <div class="nav-links">
    <span class="page-numbers current"><span class="meta-nav screen-reader-text">Page </span>1</span>
    <a class="page-numbers" href="http://example.com/blog/page/2/"><span class="meta-nav screen-reader-text">Page </span>2</a>
    <a class="next page-numbers" href="http://example.com/blog/page/2/">Next page</a>
  </div>
</nav>

Is it bad practice to use css to hide the screen reader text which prints 'Posts navigation' above these links? Or if I hide it in a media query for large screens is that acceptable?

Answer 1

These texts are for Screenreaders. They explain parts of the HTML which are not self explanatory without seeing the layout. So, for usual Webbrowsers, these texts don't need to be visible.

This is how WordPress suggets to style .screen-reader-text:

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000; /* Above WP toolbar. */
}

Answer 2

It is not always advisable to hide output with CSS as that output is still view-able in the browser console, but in this case, the only option is with CSS.

If you take a look at the source code for the_posts_pagination(), you will see that it simply echos the output from get_the_posts_pagination(). If you look into the source code, you'll see that this is basically just a wrapper function for paginate_links().

Not to get carried away here, get_the_posts_pagination() uses the private function _navigation_markup() to display the screen reader text and the appropriate text. If you look at any of these above functions, there is just no way to remove this screen reader text, not even by just passing an empty string to the screen_reader_text argument because of the following line in _navigation_markup()

2359  if ( empty( $screen_reader_text ) ) {
2360     $screen_reader_text = __( 'Posts navigation' );
2361  }

Beside the fact of the above, there are also no filters provided by any of these functions to alter the output