Utiliti Visually-Hidden (sr-only)

Sembunyikan teks daripada skrin tetapi kekalkan untuk pembaca skrin — untuk butang ikon, konteks pautan dan mesej langsung.

Pratonton langsung Buka dalam Playground

visually-hidden.css

/*
  Hide something visually but keep it available to screen readers.
  The :not(:focus):not(:active) part lets focusable content
  (like a skip link) become visible when it receives focus.
*/
.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

Kadangkala pengguna yang boleh melihat dapat konteks daripada susun atur — ikon, kedudukan di halaman — yang tidak dapat oleh pengguna pembaca skrin. Kelas ini tambah teks hanya untuk teknologi bantuan.

display: none / hidden: Buang elemen daripada accessibility tree juga. Pembaca skrin takkan baca — bukan ini yang kita mahu.
visibility: hidden: Juga tersembunyi daripada pembaca skrin, dan masih ambil ruang.
.visually-hidden: Kecilkan elemen kepada 1×1px, potong semua isi, dan keluarkan daripada susun atur dengan position: absolute. Ia tak kelihatan tetapi masih dalam accessibility tree.

Baris demi baris

clip-path: inset(50%) potong kotak sehingga tiada apa yang tinggal. clip: rect(0 0 0 0) yang lebih lama dikekalkan sebagai fallback (ia hanya berfungsi dengan position: absolute).
white-space: nowrap elakkan teks dibalut menjadi lajur tinggi perkataan tunggal, yang boleh menyebabkan sesetengah pembaca skrin berhenti-henti dengan janggal.
Kita elakkan margin: -1px dan helah lama yang serupa — tak diperlukan bila guna clip-path.

Untuk satu butang ikon, aria-label="Close" ialah alternatif. Teks visually-hidden ada satu kelebihan: alat terjemahan pelayar akan menterjemahnya, manakala sesetengahnya tak terjemah aria-label.

Cara guna

HTML

<!-- Icon-only button -->
<button type="button">
  <svg aria-hidden="true" focusable="false" width="20" height="20">…</svg>
  <span class="visually-hidden">Close menu</span>
</button>

<!-- Make repeated "Read more" links unique -->
<a href="/blog/box-model">
  Read more<span class="visually-hidden"> about the box model</span>
</a>