Aksesibilitas & SEO Dasar
Menulis HTML yang bisa dipakai semua orang (termasuk pengguna pembaca layar dan keyboard) sekaligus ramah mesin pencari.
Aksesibilitas: web untuk semua
Aksesibilitas (sering disingkat a11y) berarti website bisa dipakai oleh siapa saja: pengguna tunanetra dengan pembaca layar, orang yang tidak bisa memakai mouse, pengguna dengan layar kecil atau koneksi lambat, dan orang yang sedang tangan penuh. Kabar baiknya: HTML yang benar sudah memenuhi sebagian besar kebutuhan itu.
Daftar periksa HTML ramah akses
| Praktik | Alasan |
|---|---|
Atribut lang di <html> | Pembaca layar memilih pelafalan bahasa yang benar |
alt pada setiap gambar bermakna | Tunanetra mengetahui isi gambar |
| Heading berurutan (h1 → h2 → h3) | Pengguna melompat antar bagian lewat heading |
<label> pada setiap input | Fungsi kolom dibacakan; area klik lebih luas |
Elemen semantik (nav, main, …) | Landmark yang bisa dilompati |
| Teks tautan yang jelas | "Unduh panduan HTML" lebih berguna daripada "klik di sini" |
<button> untuk aksi, <a> untuk pindah halaman | Keduanya otomatis bisa difokus dan ditekan lewat keyboard |
| Kontras warna cukup | Terbaca oleh pengguna low vision |
ARIA: bantuan tambahan
Bila elemen semantik tidak cukup, atribut ARIA menambah informasi untuk teknologi bantu. Aturan pertamanya: jangan pakai ARIA jika elemen HTML biasa sudah cukup.
<nav aria-label="Menu utama">...</nav>
<button aria-label="Tutup jendela">✕</button>
<div role="alert">Pesan kesalahan muncul di sini</div>aria-label: nama untuk elemen yang tidak punya teks (misalnya tombol ikon).aria-hidden="true": sembunyikan hiasan dari pembaca layar.role: menegaskan peran elemen.
SEO dasar (Search Engine Optimization)
SEO membantu halamanmu muncul di hasil pencarian. Sebagian besar dasarnya adalah HTML yang rapi:
<title>unik dan deskriptif untuk tiap halaman (±50–60 karakter).<meta name="description">yang menarik (±150 karakter), sering tampil di bawah judul hasil pencarian.- Satu
<h1>yang memuat topik utama, laluh2,h3yang teratur. - Teks tautan deskriptif dan
altgambar yang bermakna. - Konten asli yang berguna dan URL yang mudah dibaca.
Kabar baik: perbaikan aksesibilitas dan SEO saling menguatkan. Halaman yang mudah dipahami pembaca layar juga mudah dipahami mesin pencari.