Halo, Rekan Coder! 👋
Yuk, ngobrolin topik yang sering dilupakan tapi sebenernya super penting: Accessibility (atau sering disingkat a11y). Mungkin kamu mikir, “Ah, aplikasi saya udah ganteng, jalan lancar, cukup dong?” Nah, bayangin kamu bangun warung kopi tapi di depan pintunya dikasih tangga tinggi tanpa jalur kursi roda. Wah, kamu barusan ngusir banyak pelanggan tuh! 😱
Bikin aplikasi React yang accessible itu bukan cuma soal jadi “orang baik”. Ini soal mastiin semua orang, termasuk teman-teman disabilitas, bisa pake karya kamu. Plus, Google suka banget sama web yang accessible. Jadi bagus buat SEO!
Nih, saya kasih 3 cara gampang buat ningkatin accessibility di React.
1. Semantic HTML: Fondasi Utama
Kesalahan paling umum? Pake <div> buat segalanya.
“Kan div bisa di-style jadi kayak tombol, Mas!”
Iya bisa. Tapi Screen Reader (alat bantu baca layar) nggak bakal tau kalau itu tombol.
Cara Salah:
// Screen reader cuma bilang: "group"
<div onClick={submitForm} className="btn-primary">
Kirim
</div>Cara Benar:
// Screen reader bilang: "button, Kirim"
<button onClick={submitForm} className="btn-primary">
Kirim
</button>Dengan pake tag HTML yang bener (<button>, <main>, <nav>, <article>), kamu dapet fitur accessibility gratisan dari browser!
2. Alt Text buat Gambar
Ini mah wajib fardhu ‘ain. Setiap tag <img> harus punya prop alt.
Ini gunanya buat jelasin gambar itu isinya apa ke user yang nggak bisa liat gambarnya.
Cara Salah:
<img src="logo.png" />Cara Benar:
<img src="logo.png" alt="Logo Perusahaan" />Kalau gambarnya cuma hiasan doang (kayak background abstrak), pake string kosong alt="". Ini kode buat screen reader supaya nyuekin gambar itu.
3. Jangan Kebanyakan ARIA
ARIA (Accessible Rich Internet Applications) itu emang sakti, tapi aturan pertamanya adalah: Jangan pake ARIA kalau HTML biasa udah cukup.
Pake aria-label kalau kamu punya tombol yang isinya cuma ikon doang tanpa teks.
Contoh:
<button aria-label="Tutup Menu" onClick={closeMenu}>
<svg>...</svg>
</button>Tanpa aria-label, screen reader mungkin cuma bilang “button” doang. Bingung kan? Dengan aria-label, dia bakal bilang “Tutup Menu button”. Jauh lebih jelas!
Cek Kilat: Tes Keyboard ⌨️
Mau ngetes aplikasi kamu? Singkirin mousenya. Coba jelajahi web kamu cuma pake tombol Tab.
- Bisa nggak nyampe ke semua tombol dan link?
- Kelihatan nggak fokusnya ada di mana (biasanya ada garis pinggir/outline)?
Kalau nggak bisa, berarti PR kamu masih banyak!
Penutup
Accessibility itu bukan “fitur tambahan” yang dikerjain kalau sempet. Itu harus jadi kebiasaan dari awal. Mulai dari hal kecil: pake semantic HTML, kasih alt text, dan tes pake keyboard. User kamu (dan ranking SEO kamu) bakal berterima kasih!
Selamat ngoding! 💻❤️