The .screen-reader-text helper class

Last week, I mentioned the .screen-reader-text helper class, which visually hides an element (usually text), while still making it available to screen readers. I forgot to include a link to the documentation, but the .screen-reader-text class comes with WordPress. If you’re not on WordPress, you can copy the styles over to any project for your own use.

.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: #eee;
  clip-path: none;
  color: #444;
  display: block;
  font-size: 1em;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000; /* Above WP toolbar. */
}

Using display: none; is a common way of hiding elements with CSS. However, this method hides the element from assistive technology as well as visually. When it comes to accessibility, display: none; should be used with caution and only employed when you are sure the element should not be available to the user.

Here’s a quick example of how you could use the .screen-reader-text helper class to add content to a list of social media icons.

<ul class="social-icons">
  <li>
    <a href="..."  target="_blank">
      <img src="./facebook.png" alt="Facebook logo" />
      <span class="screen-reader-text">Facebook (opens in new tab)</span>
    </a>
  </li>
  <li>
    <a href="..."  target="_blank">
      <img src="./twitter.png" alt="Twitter logo" />
      <span class="screen-reader-text">Twitter (opens in new tab)</span>
    </a>
  </li>
  <li>
    <a href="..."  target="_blank">
      <img src="./linkedin.png" alt="LinkedIn logo" />
      <span class="screen-reader-text">LinkedIn (opens in new tab)</span>
    </a>
  </li>
  <li>
    <a href="..."  target="_blank">
      <img src="./youtube.png" alt="YouTube logo" />
      <span class="screen-reader-text">YouTube (opens in new tab)</span>
    </a>
  </li>
</ul>

This is just a starting point for how you can hide content visually, while still making it readable by assistive technology. It’s a great tool to have in your belt.