Lewati ke konten utama Lewati ke navigasi dokumen
Check
in English

Tersembunyi secara visual

Gunakan helper ini untuk menyembunyikan elemen secara visual tetapi tetap dapat diakses oleh teknologi bantu.

Sembunyikan elemen secara visual sambil tetap membiarkannya diekspos ke teknologi bantu (seperti pembaca layar) dengan .visually-hidden. Gunakan .visually-hidden-focusableuntuk menyembunyikan elemen secara visual secara default, tetapi untuk menampilkannya saat difokuskan (misalnya oleh pengguna keyboard saja). .visually-hidden-focusablejuga dapat diterapkan ke wadah–terima kasih kepada :focus-within, wadah akan ditampilkan saat elemen turunan apa pun dari wadah menerima fokus.

Lewati ke konten utama
Wadah dengan elemen yang dapat difokuskan .
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>

Keduanya visually-hiddendan visually-hidden-focusablejuga dapat digunakan sebagai mixin.

// Usage as a mixin

.visually-hidden-title {
  @include visually-hidden;
}

.skip-navigation {
  @include visually-hidden-focusable;
}