HTML 10B: Aksesibilitas Dasar untuk Pemula

Aksesibilitas berarti membuat website dapat digunakan oleh lebih banyak orang, termasuk pengguna keyboard, pembaca layar, gangguan penglihatan, atau keterbatasan motorik. Ini bukan fitur tambahan yang dikerjakan paling akhir.

1. Mulai dari HTML Semantik

Gunakan elemen sesuai fungsi.

Jangan membuat tombol dari div hanya karena mudah diberi CSS. Elemen button sudah dapat difokuskan dan diaktifkan dengan keyboard.

2. Bahasa dan Heading

Bahasa membantu pembaca layar memilih pelafalan. Susun heading tanpa melompat berdasarkan ukuran visual.

3. Nama yang Dapat Diakses

Gambar informatif membutuhkan alt; input membutuhkan label; iframe membutuhkan title.

Jika tombol hanya menampilkan ikon, berikan nama.

Gunakan ARIA ketika HTML biasa belum cukup. Aturan praktisnya: elemen HTML semantik lebih baik daripada meniru elemen dengan ARIA.

4. Uji dengan Keyboard

Coba gunakan halaman tanpa mouse:

1. Tekan Tab untuk berpindah kontrol.
2. Pastikan fokus terlihat.
3. Gunakan Enter atau Space untuk mengaktifkan tombol.
4. Pastikan tidak ada bagian yang menjebak fokus.

Jangan menghapus outline fokus tanpa memberikan pengganti yang jelas.

5. Warna Bukan Satu-satunya Petunjuk

Pesan kesalahan harus memiliki teks atau ikon bermakna, bukan hanya mengubah border menjadi merah.

Checklist Awal

• Setiap halaman memiliki lang dan judul yang jelas.
• Heading membentuk struktur logis.
• Link memiliki teks tujuan.
• Form memiliki label.
• Semua fungsi dapat digunakan dengan keyboard.
• Fokus keyboard terlihat.
• Gambar memiliki alt yang sesuai.
• Video penting memiliki caption.

Latihan

Buka salah satu halaman latihan Anda dan navigasikan hanya dengan keyboard. Catat elemen yang tidak bisa dicapai, tidak memiliki nama jelas, atau tidak menunjukkan fokus.

Rangkuman

Aksesibilitas dimulai dari HTML yang benar. Gunakan elemen bawaan, sediakan nama yang jelas, dan uji dengan keyboard sebelum menambahkan ARIA yang kompleks.