Pengguna pembaca layar jarang membaca halaman kata demi kata dari atas ke bawah. Mereka menekan tombol H pada keyboard, dan pembaca layar melompat dari satu heading ke heading berikutnya sambil membacakan isi teksnya. Dalam beberapa detik pengguna sudah memetakan isi halaman: judul, bagian, sub-bagian. Fitur lompat heading inilah alat navigasi yang paling sering dipakai — lebih sering daripada membaca linear.

Konsekuensinya tegas: heading yang tertata benar menjadi peta yang bisa dipercaya, sedangkan heading yang asal jalan menjadi peta yang menyesatkan. Kita sudah mengenal enam tingkat heading pada chapter heading di Section Text dan Semantics. Chapter ini memeriksa sisi yang tidak terlihat mata: jenjangnya.

Heading yang Dilompati, Bukan Sekadar Dibaca #

Pembaca layar mengumpulkan seluruh elemen h1–h6 menjadi daftar navigasi tersendiri. Pengguna melompat dengan tombol H, mundur dengan Shift+H, dan di sebagian pembaca layar menekan angka 1–6 untuk langsung menuju level tertentu — judul, bagian, dan sub-bagian semua terbaca dari daftar ini tanpa konteks paragraf di sekitarnya.

Karena itu dua hal menentukan mutu peta: teks heading-nya dan jenjang angkanya. Teks yang kosong membuat lompatan tanpa arah; jenjang yang melompat-lompat membuat pengguna salah membaca kedalaman isi.

Tiga Aturan Jenjang #

  1. Satu h1 per halaman — judul halaman itu sendiri, ditulis sekali.
  2. Tanpa lompatan tingkat — setiap turun harus satu tingkat: h2 ke h3, bukan h2 langsung ke h4. Naik boleh melompat: h3 kembali ke h2 adalah pola normal penutup sub-bagian.
  3. Jenjang mengikuti struktur isi, bukan tampilan — level menandai kedalaman pembahasan, bukan besar kecilnya huruf.

Contoh Struktur yang Benar #

html 
<h1>Menu Seduh Kedai Kopi Siti</h1>
<p>Dua belas pilihan seduh manual, diperbarui setiap Senin.</p>
<h2>Kopi Hitam</h2>
<h3>Tubruk</h3>
<h3>V60</h3>
<h2>Kopi Susu</h2>
<h3>Es Kopi Susu</h3>
<h3>Kopi Susu Gula Aren</h3>

Mari kita bedah peta yang terbentuk:

  1. Baris 1 (h1): satu-satunya level satu — diumumkan sebagai “heading level 1” dan menjadi titik berangkat navigasi.
  2. Baris 3 (h2 “Kopi Hitam”): bagian besar pertama, satu tingkat di bawah judul halaman.
  3. Baris 4-5 (h3 “Tubruk” dan “V60”): sub-bagian dari Kopi Hitam — turun satu tingkat, sesuai kedalaman isinya.
  4. Baris 6 (h2 “Kopi Susu”): naik satu tingkat dari h3 — penutup sub-bagian sekaligus pembuka bagian baru; pola ini sah dan normal.
  5. Baris 7-8 (h3): dua sub-bagian Kopi Susu, jenjang kembali turun satu tingkat.

Contoh Struktur yang Keliru #

html 
<h1>Menu Seduh Kedai Kopi Siti</h1>
<p>Dua belas pilihan seduh manual, diperbarui setiap Senin.</p>
<h4><img src="ikon-kopi.svg" alt=""></h4>
<p>Berlaku sepanjang Desember.</p>
<h2>Kopi Hitam</h2>
<h5>V60</h5>

Empat galat tersembunyi di sini:

  1. Baris 3 (h4 setelah h1): lompatan tiga tingkat tanpa h2 dan h3 — pengguna pembaca layar menduga sedang berada jauh di dalam sub-bagian yang tidak pernah ada.
  2. Baris 3 (img alt="" di dalam heading): heading tanpa teks — diumumkan sebagai “heading level 4” tanpa nama; ikon hias bukan pengganti judul. Keluarkan ikon dari heading, atau beri alt yang berteks.
  3. Baris 6 (h5 setelah h2): lompatan tiga tingkat kedua — peta makin rusak; seharusnya h3.
  4. Pola keseluruhan: markup ini valid menurut parser, tetapi salah kaprah secara struktur — halaman tampak beres di mata, sementara peta yang didengar pengguna berantakan.

Ukuran huruf bawaan browser membuat jenjang terlihat oleh mata. Bandingkan dua panel berikut — isi sama, jenjang berbeda:

Pada panel kanan, judul raksasa h1 langsung diikuti baris mungil h4 — lompatan tiga tingkat yang terlihat jelas pada ukuran hurufnya, dan terdengar lebih parah lagi: pengguna pembaca layar menduga sedang jauh di dalam sub-bagian yang tidak pernah dibuka. Baris h4 berisi ikon alt="" juga tidak punya nama — pada daftar heading, ia hanya diumumkan sebagai “heading level 4” tanpa teks.

Ringkasan #

  • Pembaca layar menavigasi halaman dengan lompatan heading — teks dan levelnya dibaca tanpa konteks.
  • Satu h1 per halaman, turun satu tingkat setiap kali, naik boleh melompat.
  • Jenjang mengikuti struktur isi; ukuran huruf diatur CSS.
  • Heading kosong yang hanya berisi ikon alt="" menjadi lompatan tanpa nama.

Chapter berikutnya membahas lapis peta berikutnya: elemen semantik yang membentuk wilayah halaman.