Langkau ke kandungan utama Langkau ke navigasi dokumen
Check
in English

Tersembunyi secara visual

Gunakan pembantu ini untuk menyembunyikan unsur secara visual tetapi pastikan ia boleh diakses oleh teknologi bantuan.

Sembunyikan elemen secara visual sambil masih membenarkannya terdedah kepada teknologi bantuan (seperti pembaca skrin) dengan .visually-hidden. Gunakan .visually-hidden-focusableuntuk menyembunyikan unsur secara visual secara lalai, tetapi untuk memaparkannya apabila ia difokuskan (cth oleh pengguna papan kekunci sahaja). .visually-hidden-focusablejuga boleh digunakan pada bekas–terima kasih kepada :focus-within, bekas itu akan dipaparkan apabila mana-mana elemen anak bekas menerima fokus.

Langkau ke kandungan utama
Bekas dengan elemen boleh fokus .
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>

Kedua -duanya visually-hiddendan visually-hidden-focusablejuga boleh digunakan sebagai campuran.

// Usage as a mixin

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

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