The CSS class screen-reader-text

WordPress introduced the class .screen-reader-text in 2009 and extended the use in 2015. Joe Dolson wrote a good post with the extended use of the screen-reader-text class in WordPress 4.2.

Use Use

The screen-reader-text class is used:

  • to hide text from vision that is useful only for screen readers users.
  • for skip links for keyboard navigation before the link get focus [to-do: link to skip links article]

The CSS class screen-reader-text is a WordPress Generated Class. Each theme should have this style in its CSS. The colours, borders and padding of the focus style can be adjusted to the styling of the theme.

Top ↑

The CSS The CSS

/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

The CSS elements that are only visible on keyboard focus (like skiplinks):

.screen-reader-text:focus {
  background-color: #eee;
  clip: auto !important;
  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. */
}

Explanation of some of these CSS properties: Explanation of some of these CSS properties:

  • Set width and height to 1 pixel, because some screen readers don’t announce an element with a size of 0 pixels.
  • margin: -1px; to hide it completely from sight
  • word-wrap: normal; to avoid screen readers reading the text letter for letter, as the text is placed in a 1 pixel wide space. Many screen reader and browser combinations announce broken words as they would appear visually.
  • clip is deprecated, but is added to support older browsers that don’t support clip-path yet.

Note: display: none; and visibility: hidden; hide text from screen, but also for a screen reader, so can’t be used to give extra information to screen reader users.

Top ↑

Practical examples Practical examples

Invisible text to make a link meaningful out of context:

<a href="your-url">
  Read more
 <span class="screen-reader-text"> about cute kittens</span>
</a>

A caption of a table:

<table>
  <caption class="screen-reader-text">The cities of WordCamp Europe</caption>
  [...]
</table>

A heading to make the heading structure meaningful and understandable, this also prevents an overload of H2s and gives the heading structure more context:

<aside>
  <h2 class="screen-reader-text">Contact Information</h2>
  <h3>Address</h3>
  [...]
  <h3>Social media</h3>
  [...]
</aside>

Note: If you include screen-reader-text as a part of a string in your WordPress theme, make sure the construction is translatable (see I18n for WordPress Developers). The word order may vary in different languages.

Top ↑

Resources Resources