Pengunjung yang melihat layar dapat memindai halaman dengan mata dalam hitungan detik, tetapi pengguna screen reader perlu cara lain untuk merasakan keseluruhan halaman. Jawabannya ada pada heading: struktur h1 sampai h6 berfungsi sebagai peta navigasi yang bisa dijelajahi dengan cepat. Chapter ini membahas cara screen reader memakai heading, aturan hierarki yang benar, kebiasaan menulis heading yang deskriptif, serta kesalahan umum saat heading dipilih karena gaya tampilan.

Heading sebagai Peta Navigasi #

Screen reader menyediakan jalan pintas khusus untuk berpindah antar heading: tombol H menuju heading berikutnya dan Shift+H menuju heading sebelumnya pada pembaca layar NVDA, sementara VoiceOver menyediakan daftar heading lewat rotor. Pengguna juga dapat memanggil daftar seluruh heading halaman lalu memilih tujuan seperti membaca daftar isi buku. Karena itulah heading dijuluki peta navigasi: halaman dengan heading utuh terasa ringkas, sedangkan halaman tanpa heading terasa seperti satu paragraf panjang tanpa jeda. Uji cepatnya: bayangkan seluruh heading halaman ditampilkan sebagai daftar tanpa konten di bawahnya; bila daftar itu masih menceritakan alur halaman, peta tersebut berfungsi.

Satu h1 dan Urutan Tanpa Lompatan #

Aturan praktisnya berlapis: satu halaman satu h1 yang menyatakan topik utama, h2 untuk bagian besar, h3 untuk rincian di dalam bagian, dan seterusnya. Spesifikasi HTML sebenarnya tidak melarang lebih dari satu h1, namun kebiasaan yang mapan dan paling aman bagi semua alat adalah satu h1 per halaman. Dua aturan turunannya penting dihafal:

  • Menurun tidak boleh melompat: h2 tidak boleh langsung diikuti h4 tanpa ada h3 di antaranya.
  • Menaik bebas melompat: setelah rincian h4, kembali ke h2 untuk bagian berikutnya adalah hal yang wajar.

Heading yang Deskriptif Tanpa Konteks #

Karena heading sering dibaca sendirian dalam daftar peta navigasi, teksnya harus bermakna tanpa bergantung pada kalimat sekitar. Judul seperti “Bagian 2” atau “Baca juga” memberi sedikit informasi ketika muncul bersama sembilan heading lain; bandingkan dengan “Langkah Penyiraman” yang langsung memberi bayangan isi. Pengguna menekan H, mendengar satu baris teks, lalu memutuskan berhenti atau melanjutkan — keputusan itu diambil hanya dari teks heading tersebut.

Heading untuk Struktur, Bukan Gaya #

Kesalahan paling umum pemula adalah memilih level heading karena ukurannya terlihat pas: h4 dipakai hanya karena lebih kecil, atau judul artikel ditulis p class="judul" agar tidak tebal. Padahal level heading adalah pernyataan struktur, bukan ukuran huruf; tampilan diatur CSS pada section HTML dan CSS nanti tanpa menyentuh struktur. Kebalikannya juga salah: paragraf tebal p strong tak akan muncul di peta navigasi meski terlihat seperti judul.

Membandingkan Dokumen Terstruktur dan Rusak #

Kita amati dua dokumen berisi artikel yang sama. Versi pertama tersusun benar:

html artikel-terstruktur.html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tips Menanam Lidah Buaya</title>
</head>
<body>
  <article>
    <h1>Tips Menanam Lidah Buaya</h1>
    <p>Lidah buaya menyukai sinar matahari banyak dan air sedikit.</p>
    <h2>Memilih Media Tanam</h2>
    <p>Gunakan campuran tanah dan pasir dengan porsi yang sama.</p>
    <h3>Sebelum Menyiram</h3>
    <p>Periksa tanah hingga kering sedalam dua centimeter.</p>
    <h2>Menyiram dengan Benar</h2>
    <p>Siram dua minggu sekali pada pagi hari.</p>
  </article>
</body>
</html>

Output yang Dihasilkan:

text 
Daftar heading di screen reader menampilkan:
  - Tips Menanam Lidah Buaya      (h1)
    - Memilih Media Tanam         (h2)
      - Sebelum Menyiram          (h3)
    - Menyiram dengan Benar       (h2)

Mari kita telaah poin penting versi terstruktur tersebut:

  1. Baris 10 (h1): satu-satunya h1 menyatakan topik seluruh artikel, sehingga peta memiliki titik awal yang jelas.
  2. Baris 12 (h2): bagian besar pertama berada satu level di bawah h1, tanpa lompatan.
  3. Baris 14 (h3): rincian “Sebelum Menyiram” turun satu level dari bagian induknya, sehingga relasi keduanya terdengar.
  4. Baris 16 (h2): kembali ke h2 untuk bagian berikutnya; naik dua level seperti ini sah dan memang diharapkan.

Versi kedua membawa isi yang sama tetapi strukturnya rusak:

html artikel-rusak.html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tips Menanam Lidah Buaya</title>
</head>
<body>
  <p class="judul-besar">Tips Menanam Lidah Buaya</p>
  <p>Lidah buaya menyukai sinar matahari banyak dan air sedikit.</p>
  <p class="subjudul">Memilih Media Tanam</p>
  <p>Gunakan campuran tanah dan pasir dengan porsi yang sama.</p>
  <h4>Sebelum Menyiram</h4>
  <p>Periksa tanah hingga kering sedalam dua centimeter.</p>
  <h2>Menyiram dengan Benar</h2>
  <p>Siram dua minggu sekali pada pagi hari.</p>
  <p class="label-kecil">Penutup</p>
  <p>Semoga tanaman tumbuh subur.</p>
</body>
</html>

Meski dokumen ini lolos validator tanpa satu kesalahan sintaks pun, peta navigasinya pincang karena tiga masalah:

  1. Baris 9 dan 11: judul artikel dan judul bagian ditulis dengan p, sehingga tidak masuk daftar heading sama sekali; pengguna hanya menemukan dua heading lepas tanpa akar h1.
  2. Baris 13 (h4): heading pertama yang muncul adalah h4 tanpa h1, h2, atau h3 di depannya; pendengar langsung kehilangan level dasar.
  3. Baris 17: label “Penutup” hanya paragraf bergaya kecil; bila bagian itu memang penting, tempatnya adalah h2, bukan teks biasa yang tak terhitung.

Contoh rusak di atas lolos pemeriksa sintaks karena validator hanya memastikan aturan bahasa HTML, bukan kualitas struktur. Kita sendiri yang menjamin hierarkinya masuk akal. Setelah peta heading benar, persoalan berikutnya adalah memastikan seluruh peta itu dapat dikelilingi tanpa mouse, itulah topik chapter Keyboard Navigation.

Referensi resmi untuk pendalaman:

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

artikel-rusak.html

Unduh berkas
html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tips Menanam Lidah Buaya</title>
</head>
<body>
  <p class="judul-besar">Tips Menanam Lidah Buaya</p>
  <p>Lidah buaya menyukai sinar matahari banyak dan air sedikit.</p>
  <p class="subjudul">Memilih Media Tanam</p>
  <p>Gunakan campuran tanah dan pasir dengan porsi yang sama.</p>
  <h4>Sebelum Menyiram</h4>
  <p>Periksa tanah hingga kering sedalam dua centimeter.</p>
  <h2>Menyiram dengan Benar</h2>
  <p>Siram dua minggu sekali pada pagi hari.</p>
  <p class="label-kecil">Penutup</p>
  <p>Semoga tanaman tumbuh subur.</p>
</body>
</html>

artikel-terstruktur.html

Unduh berkas
html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tips Menanam Lidah Buaya</title>
</head>
<body>
  <article>
    <h1>Tips Menanam Lidah Buaya</h1>
    <p>Lidah buaya menyukai sinar matahari banyak dan air sedikit.</p>
    <h2>Memilih Media Tanam</h2>
    <p>Gunakan campuran tanah dan pasir dengan porsi yang sama.</p>
    <h3>Sebelum Menyiram</h3>
    <p>Periksa tanah hingga kering sedalam dua centimeter.</p>
    <h2>Menyiram dengan Benar</h2>
    <p>Siram dua minggu sekali pada pagi hari.</p>
  </article>
</body>
</html>