Οπτικά κρυμμένο
Χρησιμοποιήστε αυτούς τους βοηθούς για να αποκρύψετε οπτικά στοιχεία, αλλά διατηρήστε τα προσβάσιμα σε βοηθητικές τεχνολογίες.
Αποκρύψτε οπτικά ένα στοιχείο, επιτρέποντάς του ωστόσο να εκτεθεί σε υποστηρικτικές τεχνολογίες (όπως προγράμματα ανάγνωσης οθόνης) με .visually-hidden
. Χρησιμοποιείται .visually-hidden-focusable
για την οπτική απόκρυψη ενός στοιχείου από προεπιλογή, αλλά για την εμφάνιση του όταν είναι εστιασμένο (π.χ. από έναν χρήστη μόνο με πληκτρολόγιο). .visually-hidden-focusable
μπορεί επίσης να εφαρμοστεί σε ένα κοντέινερ – χάρη στο :focus-within
, το κοντέινερ θα εμφανίζεται όταν εστιάζει οποιοδήποτε θυγατρικό στοιχείο του κοντέινερ.
Τίτλος για προγράμματα ανάγνωσης οθόνης
Μετάβαση στο κύριο περιεχόμενο<h2 class="visually-hidden">Title for screen readers</h2>
<a class="visually-hidden-focusable" href="#content">Skip to main content</a>
<div class="visually-hidden-focusable">A container with a <a href="#">focusable element</a>.</div>
Και τα δύο visually-hidden
και visually-hidden-focusable
μπορούν επίσης να χρησιμοποιηθούν ως μείγματα.
// Usage as a mixin
.visually-hidden-title {
@include visually-hidden;
}
.skip-navigation {
@include visually-hidden-focusable;
}