Struktur judul dan landmark

Cara umum membaca halaman dengan pembaca layar adalah melompat dari judul ke judul, jadi halaman tanpa elemen h2 terbaca seperti buku tanpa bab.

Judul adalah daftar isi

Pembaca yang bisa melihat membaca sekilas. Mereka melirik baris-baris besar yang tebal, menemukan bagian yang mereka cari, lalu mulai membaca di sana. Pengguna pembaca layar melakukan hal yang sama dengan judul. MDN mencatat bahwa teknik yang umum adalah melompat cepat dari judul ke judul untuk mengetahui isi sebuah halaman, dan bahwa kebanyakan pembaca layar bisa mendaftar setiap judul di halaman. Itu hanya berhasil kalau judulnya benar-benar elemen h1 sampai h6. Paragraf yang dibuat besar dan tebal dengan CSS tampak seperti judul, tetapi diumumkan sebagai teks biasa.

WCAG 2.2 membahas ini dalam kriteria keberhasilan 1.3.1 Info dan Hubungan, pada level A: struktur yang ditampilkan secara visual juga harus tersedia di kode. Kriteria 2.4.6 Judul dan Label, pada level AA, menambahkan bahwa judul harus menggambarkan topik bagiannya. Judul yang berbunyi "Lainnya" atau "Bagian 2" lolos uji pertama dan gagal di uji kedua.

Tiga aturan dari MDN

Pertama, jangan melompati tingkat. Turun dari h1 ke h2 ke h3. Orang yang mendengar h4 tepat sesudah h1 akan bertanya-tanya ke mana tingkat yang hilang. Kedua, utamakan satu h1 per halaman yang menamai isinya, mirip elemen title. Standar HTML mengizinkan lebih dari satu, tetapi MDN menyebut satu h1 sebagai praktik terbaik yang biasa. Ketiga, jangan memilih tingkat judul karena ukurannya. Kalau h3 tampak terlalu kecil, ubah ukuran fonnya dengan CSS dan pertahankan tingkat yang sesuai dengan strukturnya.

Menulis judul yang berguna

Daftar judul hanya sebaik kata-katanya. Taruh kata yang berguna di depan, karena orang yang memindai daftar berisi dua puluh judul mendengar awal setiap judul lalu lanjut: "Jam buka" lebih baik daripada "Kapan kamu bisa berkunjung". Buat judul singkat dan berbeda satu sama lain, supaya tidak ada dua bagian yang sama-sama bernama "Detail". Lalu uji kerangkanya. Panel aksesibilitas di alat pengembang browser, atau daftar judul pembaca layar, menampilkan judul-judulnya saja. Baca berurutan dan tanyakan apakah masuk akal sebagai daftar isi. Kalau ya, pembaca sekilas yang bisa melihat juga diuntungkan.

Landmark

Judul membagi isi; landmark membagi halaman menjadi wilayah. Elemen header, nav, main, dan footer masing-masing membawa peran bawaan, sehingga pembaca layar bisa menawarkan daftar wilayah dan langsung melompat ke isi utama atau navigasi. Halaman biasanya punya satu main. Kamu mendapat peran-peran ini cuma-cuma dengan memilih elemen yang tepat, dan itulah aturan pertama ARIA dalam praktik: tidak perlu atribut tambahan.

<header>
  <nav>
    <a href="/">Home</a> <a href="/menu">Menu</a>
  </nav>
</header>
<main>
  <h1>Corner Bakery</h1>
  <h2>Bread</h2>
  <h3>Sourdough</h3>
</main>
<footer>12 Mill Lane</footer>