Μετάβαση στο κύριο περιεχόμενο Μετάβαση στην πλοήγηση εγγράφων
Check
in English

Οπτικά κρυμμένο

Χρησιμοποιήστε αυτούς τους βοηθούς για να αποκρύψετε οπτικά στοιχεία, αλλά διατηρήστε τα προσβάσιμα σε βοηθητικές τεχνολογίες.

Αποκρύψτε οπτικά ένα στοιχείο, επιτρέποντάς του ωστόσο να εκτεθεί σε υποστηρικτικές τεχνολογίες (όπως προγράμματα ανάγνωσης οθόνης) με .visually-hidden. Χρησιμοποιείται .visually-hidden-focusableγια την οπτική απόκρυψη ενός στοιχείου από προεπιλογή, αλλά για την εμφάνιση του όταν είναι εστιασμένο (π.χ. από έναν χρήστη μόνο με πληκτρολόγιο). .visually-hidden-focusableμπορεί επίσης να εφαρμοστεί σε ένα κοντέινερ – χάρη στο :focus-within, το κοντέινερ θα εμφανίζεται όταν εστιάζει οποιοδήποτε θυγατρικό στοιχείο του κοντέινερ.

Μετάβαση στο κύριο περιεχόμενο
Ένα δοχείο με στοιχείο εστίασης .
html 
<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;
}