.screen-reader-text {
position: absolute;
top: -9999px;
left: -9999px;
}Esta clase puede eliminar un elemento de la página, sacándolo del flujo y no provoca un desplazamiento desbordado.
Es mejor que display: none; o incluso visibility: hidden; cuando el objetivo es ocultar el elemento visualmente pero dejarlo accesible para los lectores de pantalla.
Snook tiene un tutorial de una clase más robusta que tiene en cuenta más situaciones.
.element-invisible {
position: absolute !important;
height: 1px; width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}WordPress usa una clase aún más robusta teniendo en cuenta mostrar el elemento en caso de que tenga el foco.
.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;
width: 1px;
word-wrap: normal !important;
}
.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. */
}