WordPress introduced the class .screen-reader-text in 2009. Since then, it’s been the canonical way that WordPress handles any HTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. output that is targeted at screen readers. Introducing new HTML in the admin that uses this class has never been an issue; but adding more hidden text to output into themed content has been an ongoing problem.
Starting with WordPress 4.2, core Core is the set of software required to run WordPress. The Core Development Team builds WordPress. will be making greater usage of the .screen-reader-text class in front-end code, so theme and plug-in developers need to know how to work with it.
It’s easy to hide text — but the .screen-reader-text class is not about hiding text. It’s about providing text to a targeted audience that’s using a non-visual method to access it. So the simplest methods of hiding text – display: none; and visibility: hidden; aren’t an option. These techniques really do hide the text – from all devices, and all assistive technology Assistive technology is an umbrella term that includes assistive, adaptive, and rehabilitative devices for people with disabilities and also includes the process used in selecting, locating, and using them. Assistive technology promotes greater independence by enabling people to perform tasks that they were formerly unable to accomplish, or had great difficulty accomplishing, by providing enhancements to, or changing methods of interacting with, the technology needed to accomplish such tasks.
https://en.wikipedia.org/wiki/Assistive_technology.
How to use screen-reader text
The purpose of screen-reader targeted text is to provide additional context for links, document structure, and form fields. Usually, that context is readily available to a sighted user because of visual cues and familiar patterns.
Screen reader text has many specific applications. One common example of this is a link that says “read more”. On its own, this link lacks context in a screen reader. While a sighted visitor can easily identify the context from the surrounding text and images, a screen reader user benefits from including the title of the target in the link:
<a href="{article.permalink}#more">read more<span class="screen-reader-text"> of the title of {article.title}</span></a>
Another use of .screen-reader-text is to hide labels in forms. Search forms are a common place where designers use placeholders and image buttons to convey the purpose of the form. Adding a label that’s available to screen readers make the form usable for screen reader users, without altering the design.
Defining the class
When you define classes for .screen-reader-text, there are two common methods: absolute positioning and clipping.
The clip method is used by WordPress core, and is the preferred method. The ‘clip’ property has been deprecated, but its replacement ‘clip-path’ has poor browser support, so providing both is necessary.
Note: this CSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. is updated on October 2017
/* 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 absolute positioning method is simpler, but requires you to provide alternate styles for right-to-left and left-to-right languages:
.screen-reader-text {
position: absolute !important;
left: -999em;
}
It’s common to see the absolute positioning method also using negative positioning on the top margin — this is not recommended. While the arbitrary measurement of -999em is effective almost 100% of the time off the left margin, almost no value will be universally usable off the top margin. Additionally, if any object that can receive focus (such as a link, button, or form input) is positioned off the top of the screen, it will cause the browser to automatically scroll to the top of the window if that element receives focus. This can be disorienting for anybody using a keyboard to navigate the page. It’s also worth noting that the off-left positioning method can have a negative impact on web site performance.
Bring Hidden Text into Focus
In some cases, it’ll be necessary to bring your hidden text into view when it receives keyboard focus. This is relatively rare, and primarily effects Skip links, which need to be made visible for keyboard users. You shouldn’t apply a focus state on most screen reader text; if that text doesn’t need to be seen in order for the context to be understood by a sighted user, don’t make it visible on focus.
If you do need to bring screen reader text into focus, you can use these base styles to move the text into view when using the clip method:
.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. */
}
Using the absolute positioning method, it’s simply a matter of changing the value of the left positioning so that the text is on screen.
#classes, #plugins-2, #screen-reader, #themes-2
