Προσβασιμότητα / φιλικό προς το SEO CSS Απόκρυψη - CSS-Κόλπα

Anonim
.screen-reader-text ( position: absolute; top: -9999px; left: -9999px; )

Αυτή η τάξη μπορεί να αφαιρέσει ένα στοιχείο από τη σελίδα, αφαιρώντας το από τη ροή και δεν προκαλεί κύλιση υπερχείλισης.

Είναι καλύτερο από display: none;ή ακόμα και visibility: hidden;όταν ο στόχος είναι να αποκρύψετε το στοιχείο οπτικά, αλλά να το αφήσετε προσβάσιμο για αναγνώστες οθόνης.

Το Snook έχει μια καθοδήγηση μιας πιο ισχυρής τάξης λαμβάνοντας υπόψη περισσότερες καταστάσεις.

.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 χρησιμοποιεί μια ακόμη πιο ισχυρή τάξη λαμβάνοντας υπόψη το στοιχείο που θα πρέπει να έχει εστίαση.

.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. */ )