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-focusable
untuk menyembunyikan elemen secara visual secara default, tetapi untuk menampilkannya saat difokuskan (misalnya oleh pengguna keyboard saja). .visually-hidden-focusable
juga dapat diterapkan ke wadah–terima kasih kepada :focus-within
, wadah akan ditampilkan saat elemen turunan apa pun dari wadah 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>
Keduanya visually-hidden
dan visually-hidden-focusable
juga dapat digunakan sebagai mixin.
// Usage as a mixin
.visually-hidden-title {
@include visually-hidden;
}
.skip-navigation {
@include visually-hidden-focusable;
}