Materi
Tutorial Page Regions W3C WAI memakai elemen header, nav, main, aside, dan footer untuk menandai wilayah halaman. Teknologi bantu menyajikan wilayah itu sebagai landmark, sehingga pengguna pembaca layar bisa langsung melompat ke menu atau ke isi utama. MDN menambahkan dua aturan untuk main: satu dokumen tidak boleh punya lebih dari satu main yang tampil, dan isinya adalah isi khas halaman itu, bukan menu, logo, atau hak cipta yang berulang di semua halaman.
| Elemen | Landmark | Catatan |
|---|---|---|
| header (tingkat halaman) | banner | Di dalam article atau section tidak menjadi banner |
| nav | navigation | Bila lebih dari satu, beri nama dengan aria-label atau aria-labelledby |
| main | main | Satu per halaman |
| aside | complementary | Isi pelengkap |
| footer (tingkat halaman) | contentinfo | Di dalam article atau section tidak menjadi contentinfo |
Kriteria 1.3.1 Info and Relationships (tingkat A) meminta struktur yang terlihat secara visual juga bisa ditentukan secara terprogram. Judul yang hanya dibuat besar dan tebal lewat CSS pada elemen p tidak tercatat sebagai heading, sehingga tidak muncul di daftar heading pembaca layar. Aturan satu h1 dan tingkat heading tanpa lompatan sudah dibahas di kelas SEO untuk Halaman Web dengan sumber W3C WAI yang sama, jadi tidak diulang di sini.
Kriteria 3.1.1 Language of Page (tingkat A) meminta bahasa utama halaman bisa ditentukan terprogram, dengan teknik H57: atribut lang pada elemen html. Alasannya, pembaca layar memuat aturan pelafalan sesuai bahasa itu. Kriteria 3.1.2 Language of Parts (tingkat AA) meminta bagian yang berbahasa lain, misalnya kutipan berbahasa Inggris, diberi lang sendiri. Nilainya tag bahasa BCP 47 seperti id untuk bahasa Indonesia dan en untuk bahasa Inggris; MDN mencatat lang kosong berarti bahasanya tidak diketahui.
<html lang="id">
<body>
<header>
<p>Toko Buku Cendana</p>
<nav aria-label="Menu utama">…</nav>
</header>
<main>
<h1>Buku baru bulan ini</h1>
<p lang="en">Reading is to the mind what exercise is to the body.</p>
</main>
<footer>…</footer>
</body>
</html>
