Belajar HTML - Aksesibilitas Konten Dasar

#Pendahuluan

Aksesibilitas web berarti memastikan konten bisa dipakai oleh semua orang — termasuk pengguna yang tidak memakai mouse, yang buta, atau yang memiliki gangguan motorik. Episode 10 membahas aksesibilitas konten dasar: prinsip yang mengaturnya, atribut ARIA yang paling sering dipakai, fokus keyboard, dan cara mengujinya.

ARIA (Accessible Rich Internet Applications) adalah kumpulan atribut yang melengkapi makna HTML untuk alat bantu. Namun aturan pentingnya: gunakan elemen HTML asli dulu — ARIA hanya pelengkap, bukan pengganti struktur yang benar.

#Prinsip Aksesibilitas Web

#Empat Pilar WCAG

Standar WCAG (Web Content Accessibility Guidelines) merangkum aksesibilitas dalam empat prinsip:

• Perceivable: konten harus bisa dirasakan, misalnya lewat teks alternatif.
• Operable: konten harus bisa dioperasikan, termasuk lewat keyboard.
• Understandable: konten dan navigasi harus mudah dipahami.
• Robust: konten harus bekerja dengan beragam alat bantu dan perangkat.

Keempat pilar ini menjadi lensa untuk menilai setiap keputusan markup. Contoh nyata: gambar tanpa alt melanggar prinsip perceivable; menu yang hanya bisa diklik mouse melanggar operable.

#Atribut ARIA Dasar

#Memberi Nama pada Elemen

aria-label memberi nama aksesibel pada elemen yang tidak punya teks terlihat:

aria-label untuk ikon

<button type="button" aria-label="Tutup dialog">x</button>

Tombol berisi huruf x di atas tidak punya teks bermakna. aria-label="Tutup dialog" memberi tahu screen reader apa yang dilakukan tombol — sementara tampilan visual tetap bersih.

#Menghubungkan dengan Konten Terlihat

aria-labelledby menghubungkan elemen dengan teks yang sudah ada di halaman:

aria-labelledby

<h2 id="judul-panel">Pengaturan</h2>
<div aria-labelledby="judul-panel">...</div>

Gunakan aria-labelledby ketika sudah ada teks terlihat yang bisa dipakai sebagai nama. aria-label dipakai ketika tidak ada teks terlihat sama sekali.

#Mengumumkan Pembaruan

aria-live memberi tahu screen reader bahwa konten berubah tanpa fokus berpindah:

aria-live untuk pemberitahuan

<p id="notifikasi" aria-live="polite"></p>

Dengan aria-live="polite", perubahan teks di dalamnya diumumkan setelah aktivitas pengguna selesai. Pola ini wajib untuk pemberitahuan yang muncul dari JavaScript — misalnya "Data berhasil disimpan".

#Fokus Keyboard

#Mengapa Fokus Penting

Sebagian pengguna tidak memakai mouse — mereka berpindah elemen dengan tombol Tab. Browser menyediakan fokus bawaan untuk tautan, tombol, dan kontrol form. Jangan pernah menghapus kemampuan ini.

#tabindex

tabindex mengatur urutan dan kemampuan fokus:

• tabindex="0": elemen bisa difokuskan mengikuti urutan dokumen.
• tabindex="-1": elemen bisa difokuskan lewat JavaScript, tapi bukan urutan tab.
• Nilai positif: memaksa urutan — sebaiknya dihindari karena merusak alur alami.

tabindex untuk elemen non-interaktif

<div tabindex="0" role="button" aria-label="Buka menu">Menu</div>

Contoh di atas menjadikan div bisa difokuskan dan dibaca sebagai tombol. Idealnya pakai button asli — tapi jika terpaksa memakai div, atribut-atribut ini wajib hadir.

#Kontras dan Target

Selain fokus, pastikan kontras teks terhadap latar cukup tinggi (minimum 4.5 banding 1 untuk teks biasa) dan target klik tidak terlalu kecil. Aturan target sentuh akan kita bahas lagi di episode 21.

#Menguji Aksesibilitas

#Screen Reader dan Alat Otomatis

Langkah pengujian paling mendasar: navigasi dengan keyboard saja. Buka halaman, tekan Tab berulang kali, dan pastikan urutan fokus masuk akal serta ada penanda fokus yang terlihat.

Untuk pengujian lanjutan:

• Gunakan screen reader seperti NVDA (Windows) atau VoiceOver (macOS).
• Jalankan Lighthouse atau axe DevTools untuk audit otomatis.
• Pastikan halaman lolos tanpa error kritis di hasil audit.

npx lighthouse http://localhost:8080 --only-categories=accessibility

Perintah npx lighthouse http://localhost:8080 --only-categories=accessibility menghasilkan laporan skor aksesibilitas lengkap dengan daftar perbaikan. Jalankan setelah server lokal berjalan.

#Kesalahan Umum dan Solusinya

#ARIA Menjadi Pengganti Semantik

Atribut ARIA tidak memperbaiki struktur yang salah. Tombol yang ditulis sebagai div tetap bukan button untuk semua perilaku. Perbaiki elemennya dulu, baru tambahkan ARIA jika benar-benar perlu.

#aria-hidden di Konten yang Perlu Dibaca

aria-hidden="true" menyembunyikan elemen dari alat bantu. Jangan pasang pada elemen yang mengandung fokus atau konten penting — pengguna kehilangan akses ke elemen tersebut.

#Penutup

Episode 10 memberi kalian dasar aksesibilitas: empat prinsip WCAG, atribut ARIA yang paling sering dipakai, manajemen fokus keyboard, dan cara menguji dengan alat otomatis serta screen reader.

Inti yang harus dibawa pulang:

• Empat prinsip WCAG: perceivable, operable, understandable, robust.
• Gunakan elemen HTML asli dulu; ARIA hanya pelengkap.
• aria-label untuk elemen tanpa teks; aria-labelledby untuk teks yang sudah ada.
• aria-live untuk mengumumkan pembaruan konten.
• Jangan menghapus fokus keyboard; tabindex dipakai dengan hati-hati.

Di episode 11 selanjutnya kita akan membahas elemen media tambahan — audio, video, picture, dan source — untuk menyisipkan media yang kaya dengan fallback format yang benar.