.screen-reader-text ( position: absolute; top: -9999px; left: -9999px; )Deze klasse kan een item van de pagina verwijderen, het uit de stroom halen en geen overloop veroorzaken.
Het is beter dan display: none;of zelfs visibility: hidden;wanneer het doel is om het element visueel te verbergen, maar het toegankelijk te laten voor schermlezers.
Snook heeft een walkthrough van een meer robuuste klasse waarbij rekening wordt gehouden met meer situaties.
.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 gebruikt een nog robuustere klasse, waarbij rekening wordt gehouden met het tonen van het element als het focus heeft.
.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. */ )