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-focusable
untuk menyembunyikan unsur secara visual secara lalai, tetapi untuk memaparkannya apabila ia difokuskan (cth oleh pengguna papan kekunci sahaja). .visually-hidden-focusable
juga boleh digunakan pada bekas–terima kasih kepada :focus-within
, bekas itu akan dipaparkan apabila mana-mana elemen anak bekas menerima fokus.
<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-hidden
dan visually-hidden-focusable
juga boleh digunakan sebagai campuran.
// Usage as a mixin
.visually-hidden-title {
@include visually-hidden;
}
.skip-navigation {
@include visually-hidden-focusable;
}