Telusuri konten tersembunyi

Fitur web: <details> Elemen <details> yang saling eksklusif hidden="until-found"

Antarmuka web sering kali menyembunyikan konten dari tampilan untuk meningkatkan pengalaman pengguna, menghemat ruang layar, atau meningkatkan performa halaman. Metode tradisional seperti display: none atau visibility: hidden berfungsi untuk menyembunyikan konten secara visual, tetapi juga membuat konten tersembunyi tersebut sama sekali tidak dapat diakses oleh pembaca layar dan fitur browser seperti "Temukan di halaman".

Untuk menyembunyikan konten secara visual, tetapi tetap mengizinkannya agar dapat ditelusuri oleh pengguna dan di-deep link melalui fragmen URL dan link "Scroll ke Fragmen Teks", Anda dapat menggunakan elemen <details> HTML atau atribut hidden="until-found". Elemen <details> umumnya direkomendasikan karena lebih mudah diterapkan dan dikelola, tetapi ada beberapa kasus yang lebih kompleks saat <details> tidak memadai dan hidden="until-found" diperlukan.

Contoh:

  • Jika Anda ingin kontrol penuh atas gaya mekanisme tampilkan/sembunyikan.
  • Jika kontrol UI untuk menampilkan/menyembunyikan konten berada di bagian lain DOM.
  • Jika Anda tidak ingin mendukung penyembunyian konten setelah ditampilkan.

Cara menerapkan

Elemen <details> memiliki teks yang dapat ditelusuri dan diakses secara default, dan tidak memerlukan implementasi khusus. Sebaiknya gunakan <details> daripada hidden="until-found" jika memungkinkan.

Jika Anda perlu menggunakan hidden="until-found", ikuti petunjuk berikut:

  1. Terapkan atribut: Tambahkan atribut HTML hidden="until-found" langsung ke elemen yang berisi konten yang harus disembunyikan dari tampilan.
  2. Sinkronkan status UI: Jika antarmuka memiliki status terkait yang bergantung pada visibilitas konten (misalnya, memperbarui atribut ARIA, mengaktifkan/menonaktifkan class CSS terbuka/tertutup, atau memutar ikon akordeon):
    • Anda HARUS menambahkan pemroses peristiwa untuk peristiwa beforematch.
    • Daftarkan pemroses peristiwa beforematch langsung pada elemen yang membawa atribut hidden="until-found". Karena peristiwa ini menggelembung, Anda juga dapat menggunakan delegasi peristiwa dengan mendaftarkan satu pemroses pada elemen induk (seperti penampung tab) untuk mengelola beberapa bagian tersembunyi sekaligus.
    • Di dalam pemroses peristiwa, jalankan logika untuk menyinkronkan elemen UI terkait (seperti menutup tab terbuka lainnya atau mengubah status tombol beralih).

Kode contoh

Sasaran: Merender penampung tersembunyi yang kontennya tetap tidak terlihat oleh pengguna hingga mereka menelusuri kata dalam bagian tersebut.

Menggunakan elemen <details>

<details>
  <summary>Click to expand</summary>
  <p>This content is visually hidden.</p>
</details>

Pengungkapan yang tidak dapat muncul bersamaan

Saat menangani region konten yang saling eksklusif, seperti akordeon eksklusif, gunakan elemen <details> HTML native dengan atribut name bersama.

<div class="accordion-group">
  <!-- The name attribute creates an exclusive disclosure group -->
  <details class="disclosure" name="my-accordion">
    <summary>Section 1</summary>
    <p>Section 1 content</p>
  </details>

  <details class="disclosure" name="my-accordion" open>
    <summary>Section 2</summary>
    <p>Section 2 content</p>
  </details>

  <details class="disclosure" name="my-accordion">
    <summary>Section 3</summary>
    <p>Section 3 content</p>
  </details>
</div>

Menggunakan atribut hidden="until-found"

<!-- The browser automatically removes hidden="until-found" upon a search match -->
<div class="hidden-container" hidden="until-found">
  <p>This content is visually hidden.</p>
</div>

Pengungkapan kustom yang saling eksklusif

Saat menangani region kustom yang saling eksklusif dan dikontrol oleh tombol eksternal, pastikan hanya panel yang cocok yang tetap terlihat. Dalam pengendali peristiwa beforematch, Anda HARUS menyinkronkan status ARIA terkait seperti menetapkan aria-expanded="true" pada tombol pengontrol.

<div class="custom-accordion">
  <div class="controls">
    <button aria-expanded="true" aria-controls="panel-1" id="btn-1">Section 1</button>
    <button aria-expanded="false" aria-controls="panel-2" id="btn-2">Section 2</button>
  </div>

  <div id="panel-1" class="panel">
    <p>Section 1 content (visible)</p>
  </div>

  <div id="panel-2" class="panel" hidden="until-found">
    <p>Section 2 content (hidden)</p>
  </div>
</div>

const accordion = document.querySelector('.custom-accordion');

accordion.addEventListener('beforematch', (e) => {
  // Hide all panels and synchronize button states before the browser reveals the matched panel
  accordion.querySelectorAll('.panel').forEach((panel) => {
    if (panel !== e.target) {
      panel.hidden = 'until-found';
    }
  });
  accordion.querySelectorAll('button').forEach((btn) => {
    const controls = btn.getAttribute('aria-controls');
    btn.setAttribute('aria-expanded', controls === e.target.id ? 'true' : 'false');
  });
});

Praktik Terbaik untuk hidden="until-found"

  • LAKUKAN penerapan batas, padding, dan latar belakang ke wrapper turunan bertingkat, bukan langsung ke elemen dengan atribut hidden="until-found". Hal ini mencegah pergeseran tata letak atau sisa visual yang tidak diinginkan saat elemen disembunyikan.
  • JANGAN menerapkan display: none, visibility: hidden, atau properti CSS display atau visibility terkait langsung ke elemen dengan atribut hidden="until-found". Tindakan ini akan merusak fungsi native dan menyembunyikan konten secara permanen dari indeks penelusuran.
  • JANGAN gunakan hidden="until-found" untuk informasi sensitif, token data internal, atau data tidak relevan yang tidak boleh ditampilkan melalui penelusuran.
  • JANGAN gunakan hidden="until-found" sebagai pengganti teks "khusus pembaca layar" (.sr-only).

Dukungan browser dan strategi penggantian

JANGAN menghindari hidden="until-found" karena tidak adanya dukungan browser, karena manfaat aksesibilitasnya jauh lebih besar daripada biaya penerapan penggantian.

hidden="until-found" penggantian

Untuk elemen UI standar seperti akordeon atau bagian "Baca selengkapnya", gunakan JavaScript untuk mendeteksi fitur dan menampilkan semua konten jika fitur tidak didukung.

if (!('onbeforematch' in HTMLElement.prototype)) {
  // Expand all hidden content for unsupported browsers
  document.querySelectorAll('[hidden="until-found"]').forEach((el) => {
    el.removeAttribute('hidden');
    // MANDATORY: also update any aria references to this element.
  });
}

Untuk paradigma UI yang saling eksklusif (seperti panel eksklusif kustom tempat konten berbagi wilayah visual yang sama), penggantian harus mengekstrak dan menampilkan semua konten secara linear di bawah area interaktif utama, menggunakan fragmen anchor URL untuk memungkinkan pengguna membuka langsung ke bagian masing-masing.