.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 de desbordamiento.
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 sólida 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 que muestra 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. */ )
