Daftar isi artikel berguna ketika pembaca ingin langsung menemukan satu jawaban. Namun, daftar isi yang terlihat rapi bisa tetap bermasalah: tautannya menuju bagian salah, judul tertutup header, atau target berubah setelah editor memperbaiki heading.
Saya menyarankan membuat versi sederhana dahulu, lalu mengujinya dengan satu tugas pembaca. Misalnya, pada panduan pencatatan stok, pembaca ingin langsung menemukan cara memeriksa saldo minus. Ia seharusnya bisa mengenali pilihan itu dan tiba pada penjelasan yang benar.
Pilih bagian yang memang membantu navigasi
Daftar isi tidak perlu menampilkan setiap subheading. Untuk artikel dengan banyak H3, seluruh daftar dapat menjadi lebih sulit dipindai daripada artikelnya sendiri. Mulai dengan bagian utama, lalu tambahkan subbagian bila pembaca benar-benar memerlukannya.
Label tautan harus menjelaskan tujuan. Periksa saldo minus lebih berguna daripada Bagian ketiga. Ketika label lebih singkat daripada heading, pastikan maknanya tetap sama.
Susun struktur sebelum memilih plugin. Panduan heading untuk konten pencarian yang mudah dibaca membantu menentukan hubungan H2 dan H3. Daftar isi kemudian mengikuti struktur tersebut.
Untuk artikel pendek dengan dua bagian yang sudah mudah ditemukan, daftar isi mungkin tidak menambah manfaat. Pilih berdasarkan kebutuhan navigasi, bukan jumlah kata yang dianggap wajib oleh alat.
Cocokkan tautan dengan ID yang unik
Jump link memakai bagian URL setelah tanda pagar, disebut fragment. Tautan #saldo-minus menunjuk elemen dengan id="saldo-minus" pada dokumen itu.
ID harus unik dalam satu dokumen. Dua heading dengan ID yang sama membuat tujuan ambigu. MDN menjelaskan bahwa ID digunakan untuk mengidentifikasi elemen, termasuk melalui fragment link. Atribut ID HTML.
Berikut potongan HTML ilustratif untuk dipasang pada template yang sesuai:
<nav aria-label="Daftar isi artikel">
<ul>
<li><a href="#saldo-awal">Isi saldo awal</a></li>
<li><a href="#saldo-minus">Periksa saldo minus</a></li>
</ul>
</nav>
<h2 id="saldo-awal">Isi saldo awal sebelum mencatat transaksi</h2>
<p>Penjelasan pengisian saldo awal ditempatkan di sini.</p>
<h2 id="saldo-minus">Periksa saldo minus</h2>
<p>Langkah diagnosis saldo minus ditempatkan di sini.</p>
Ini contoh hubungan elemen, bukan artikel stok yang siap diterbitkan. Pada CMS, periksa HTML hasil render. Editor mungkin membentuk ID otomatis dari heading, menambahkan akhiran untuk duplikat, atau memakai pengaturan anchor tersendiri.
Gunakan link HTML biasa untuk fungsi dasar. Jika JavaScript dipakai untuk menandai bagian aktif atau animasi, pertahankan tujuan link yang bisa dibuka secara normal.
Periksa apakah header menutupi tujuan
Pada website dengan header yang tetap menempel, browser dapat menggulir ke heading yang akhirnya tertutup. Pembaca merasa tautan salah meskipun fragment dan ID cocok.
Salah satu penyesuaian CSS yang dapat dicoba adalah memberi ruang atas pada target:
article h2[id],
article h3[id] {
scroll-margin-top: 6rem;
}
Nilai 6rem hanya contoh. Sesuaikan dengan tinggi header dan jarak yang nyaman pada template sebenarnya. Properti scroll-margin-top mengatur jarak di sisi atas area scroll elemen. Referensi CSS MDN.
Uji kembali pada layar kecil, zoom, dan kondisi header berubah tinggi. Jangan menganggap satu angka cocok bagi seluruh perangkat. Periksa pula apakah banner tambahan membuat heading kembali tertutup.
Jalankan matriks pemeriksaan singkat
Gunakan artikel yang mempunyai heading pendek, heading panjang, dan subbagian. Tambahkan catatan hasil aktual pada dokumen pemeriksaan, termasuk browser serta tanggal tes.
| Kondisi | Tindakan | Hasil yang diharapkan |
|---|---|---|
| Klik biasa | Pilih item tengah daftar isi | Heading tujuan terlihat dan sesuai label |
| Keyboard | Tab ke tautan, lalu Enter | Fokus terlihat dan navigasi dapat diikuti |
| URL langsung | Buka URL lengkap dengan fragment di tab baru | Bagian yang dituju dapat ditemukan |
| Layar kecil | Buka daftar, pilih bagian, lanjut membaca | Navigasi tidak menutupi isi atau terpotong |
| JavaScript gagal atau dinonaktifkan untuk tes | Gunakan link dasar | Target HTML tetap tersedia |
| Heading diubah | Periksa link lama dan daftar terbaru | Tidak ada tujuan hilang tanpa keputusan editorial |
| Browser Back | Navigasi lalu kembali | Perilaku tidak membingungkan atau menjebak pembaca |
Untuk kebutuhan aksesibilitas, periksa juga nama navigasi dan urutan fokus dengan teknologi asistif yang digunakan tim. Tes visual dan keyboard saja belum membuktikan seluruh kombinasi pembaca layar sudah benar.
Jaga tujuan ketika tulisan diperbarui
Editor dapat mengganti Penyebab masalah menjadi Periksa saldo minus tanpa harus mengganti ID saldo-minus yang sudah dipakai orang. Pisahkan label editorial dari identitas target jika CMS mendukungnya.
Jika generator otomatis mengganti ID mengikuti heading, dokumentasikan perilakunya. Sebelum terbit, bandingkan fragment lama dengan ID baru. Tautan dari artikel lain, bookmark, atau materi bantuan mungkin menuju bagian tersebut.
Untuk bagian yang dihapus, tentukan apakah ada pengganti yang benar-benar sesuai. Jangan mengarahkan semua fragment lama ke paragraf pertama tanpa mempertimbangkan janji tautannya. Jika bagian digabung, pertahankan target lama di lokasi yang relevan bila implementasinya memungkinkan.
Ukur kemudahan menemukan jawaban
Daftar isi yang mengikuti scroll belum tentu lebih nyaman. Pada layar kecil, panel itu dapat mengambil ruang yang dibutuhkan untuk membaca. Bandingkan dengan versi tetap melalui tugas yang sama.
Minta pembaca menemukan satu jawaban, lalu catat apakah ia mengenali label, tiba di bagian yang benar, dan dapat melanjutkan membaca. Klik daftar isi menunjukkan penggunaan navigasi; ia tidak membuktikan pemahaman atau kenaikan ranking.
Mulai dari satu artikel panjang. Perbaiki target yang salah, jarak header, dan label yang kabur sebelum menambahkan animasi atau fitur lain. Daftar isi selesai ketika pembaca dapat memakai tautannya untuk mencapai jawaban yang dijanjikan.
