Seluruh Section Accessibility dalam HTML telah kita bahas — dari lang sampai uji berlapis — dan sebagian besar isinya ternyata bukan materi tambahan, melainkan kebiasaan menulis HTML yang benar. Chapter ini memadatkan semuanya menjadi sepuluh butir praktik: cukup pendek untuk ditempel di meja kerja, cukup lengkap untuk dipakai sebagai daftar periksa sebelum halaman diterbitkan.

Baca satu butir, praktikkan, lalu lanjut. Setiap butir mencantumkan chapter asalnya di Section Accessibility dalam HTML agar kita tahu ke mana kembali saat butuh contoh kode dan penjelasan penuh.

Sepuluh Butir Praktik #

  1. Pasang lang pada html. Nilai lang="id" memberi tahu mesin suara bahasa yang harus dipakai; tanpa penanda ini, seluruh halaman bisa terbaca dengan pelafalan yang salah.
  2. Jaga heading berurutan. Gunakan satu h1, lalu turun bertingkat tanpa melompat jenjang — heading adalah peta yang dipakai pembaca layar untuk melompat antar bagian.
  3. Tulis alt yang tepat. Deskripsikan fungsi gambar, bukan tampilannya; gambar dekoratif memakai alt kosong agar dilewati.
  4. Pasang label pada setiap kontrol form. Ikat label ke input lewat for/id, kelompokkan pilihan terkait dengan fieldset dan legend.
  5. Pastikan semua bisa dioperasikan keyboard. Setiap kontrol yang bisa diklik harus bisa dijangkau Tab dan diaktifkan Enter/Space; urutan fokus mengikuti urutan DOM.
  6. Tulis teks link yang berdiri sendiri. Pembaca layar menyusun daftar link tanpa konteks sekitarnya — “baca panduan penyeduhan” bekerja, “klik di sini” tidak.
  7. Gunakan landmark semantik. header, nav, main, dan footer otomatis menjadi pintasan lompatan; main tunggal adalah sasaran lompat ke konten.
  8. Jangan menyampaikan informasi lewat warna saja. Galat form diikat ke pesan teks, penanda penting diberi ikon atau teks — warna hanya satu dari beberapa penanda.
  9. Sediakan teks untuk media. Video memakai track kind="captions", audio disertai transkrip di halaman yang sama.
  10. Uji berlapis sebelum terbit. Navigasi keyboard dulu, lalu DevTools dan Lighthouse, ditutup uji singkat dengan pembaca layar.

Rujukan Chapter Terkait #

PraktikRujukan chapter
lang pada dokumenLanguage Attribute
Jenjang headingHeading Hierarchy
Teks altAlternative Text
Label formLabel dan Instruksi Form
Navigasi keyboardKeyboard Navigation
Teks linkLink Text yang Jelas
Landmark semantikSemantic Elements untuk Accessibility
Informasi bukan warna sajaLabel dan Instruksi Form
Teks untuk mediaCaptions dan Transcripts
Uji berlapisMemeriksa Accessibility HTML
Wajar memakai ARIAKapan Menggunakan ARIA

Standar dan Alat Bantu #

Dua nama standar muncul berulang di topik ini. WCAG (Web Content Accessibility Guidelines) adalah kumpulan kriteria yang menjadi rujukan hukum dan industri di banyak negara, sedangkan WAI-ARIA menyediakan atribut untuk menambah makna — namun ingat aturan dari chapter Kapan Menggunakan ARIA: HTML native lebih dulu, aria-* hanya bila native memang tidak menyediakan. Keduanya dirawat W3C di satu portal WAI.

Untuk menguji, tiga alat sudah mencukupi pekerjaan sehari-hari: NVDA (gratis, Windows) dan VoiceOver (bawaan macOS) sebagai pembaca layar, audit Lighthouse di DevTools untuk pemeriksaan otomatis, dan panel DevTools untuk menelusuri pohon aksesibilitas. Alat otomatis hanya menemukan sebagian masalah — sisa pemeriksaan tetap manual.

Tautan Resmi #