Best Practices dan Aksesibilitas (a11y)
Apakah website kamu bisa digunakan oleh orang buta warna? Atau oleh mereka yang tuna netra dan memakai
Screen Reader? Bagaimana jika kodenya dilihat oleh developer lain, apakah mereka akan pusing?
Aksesibilitas (sering disingkat a11y) dan Best Practices memastikan kodemu
tidak cuma jalan di layar normal, tetapi juga ramah untuk semua pengguna dan mudah dipelihara
(maintainable).
♿ Apa itu a11y? Mitos vs Fakta
a11y berasal dari kata bahasa inggris "accessibility". Huruf 'a' diikuti 11 huruf, lalu diakhiri huruf 'y'. Tujuan a11y adalah memastikan website dapat diakses oleh semua golongan, termasuk penyandang disabilitas (pengguna Screen Reader, keyboard navigation, pembaca braille).
❌ Mitos a11y
- "Cuma untuk orang buta."
- "Bikin desain web jadi jelek & kaku."
- "A11y susah dan cuma buang-buang waktu."
- "Cukup tambah atribut
aria-*aja beres."
✅ Fakta a11y
- Bantu lansia & orang di layar silau dsb.
- Desain bagus dan a11y jalan beriringan.
- Hanya butuh HTML yang semantik/benar.
No ARIA is better than bad ARIA.
🛠️ 4 Aturan Emas Aksesibilitas
Selalu gunakan alt="" pada Gambar
Screen Reader membaca teks alt untuk memberitahu tunanetra gambar apa itu. Jika gambar gagal
loading, teks ini yang muncul.
❌ Salah (Akan dibaca "IMG_001.jpg" oleh mesin)
<img src="anjing-lucu.jpg">
✅ Benar (Deskriptif)
<img src="anjing-lucu.jpg" alt="Anjing Golden bermain bola di taman">
*Note: Jika gambar hanya hiasan dekoratif, biarkan
kosong: alt="" agar di-skip Screen Reader.
Gantungkan Nasib pada HTML Semantik
Gunakan tag sesuai fungsinya. Tombol ya pakai <button>, list ya pakai <ul>. Jangan gunakan div untuk segalanya!
❌ Salah (Tidak bisa difokus pakai tombol Tab)
<div class="btn" onclick="submit()">Kirim</div>
✅ Benar (Keyboard navigasi jalan)
<button type="button">Kirim</button>
Urutan Heading Harus Logis (H1 ke H2 ke H3)
Screen Reader membaca Outline heading seperti daftar
isi buku. Jangan lompat dari <h1>
langsung ke <h4> hanya karena cari
ukuran font-nya yang kecil!
<h1> Judul Artikel (Hanya ada 1) </h1>
<h2> Bab 1: Pengenalan </h2>
<h3> Sub-bab 1.1: Sejarah </h3>
<h3> Sub-bab 1.2: Perkembangan </h3>
<h2> Bab 2: Kesimpulan </h2>
Teks Link Harus Punya Konteks (Descriptive Links)
Tunanetra sering meminta Screen Reader membacakan hanya link-nya saja. Jika semua link di websitemu tulisannya "Klik di sini", "Baca selengkapnya", "Info Lanjut", mereka tidak akan tahu tujuannya ke mana.
❌ Salah (Membingungkan Screen Reader)
Untuk baca panduan HTML, <a href="#">Klik di Sini</a>
✅ Benar (Jelas & Deskriptif)
Baca <a href="#">Panduan Lengkap HTML</a> dari kami.
💎 HTML Code Best Practices (Format & Gaya)
Sekarang kita bahas dari sisi "Kebersihan Kode" (Clean Code). Kode yang bersih gampang di-maintain oleh Programmer lain di masa depan (ataupun kamu sendiri bulan depan).
Gunakan Tab atau Spasi (biasanya 2 atau 4 spasi). Visualisasikan keterkaitan parent-child.
<ul>
<li>
<a href="#">Menu</a>
</li>
</ul>Nama tag HTML dan nama atribut WAJIB lowercase di standard baru.
<DIV CLASS="KOTAK">...</DIV> ❌
<div class="kotak">...</div> ✅
Setiap Value pada atribut HTML harus di dalam Double Quotes
" "
<a href=https://google.com> ❌
<a href="https://google.com"> ✅
Pisahkan presentasi (CSS) dengan Struktur (HTML). Pakailah Class!
<p style="color:red; font-size:14px">...</p> ❌
<p class="warning-text">...</p> ✅
🤦♂️ Kesalahan Umum yang Sering Terjadi
- Lupa menutup Tag.
<div> <p> Hello </div>(P-nya tidak ditutup). - Sarang yang Salah (Bad Nesting). Memasukkan Block element (seperti div/h1) ke dalam Inline element (seperti span/a). Dilarang menyarangkan H1 ke dalam <a> atau <p>!
- Banyak id yang Sama. Atribut
id="..."sifatnya UNIK, hanya boleh ada satu nama ID per satu halaman (misal: cuma boleh ada satuid="header"). Kalau dipakai berulang-ulang jadi warning di validator web. - Lupa tag
<title>di Head. Menjadikan nama tab browsermu aneh (biasanya mencetak base URL website atau path file komputermu).
Selamat! Anda Lulus HTML Dasar!
Anda telah menyelesaikan 10 seri Kurikulum HTML untuk pemula. Mulai dari pemahaman cara kerja web, tag pembentuk halaman, HTML Semantik, Meta tags SEO, hingga Best Practices & Aksesibilitas.
Materi Ini Bermanfaat?
Seluruh rangkaian kursus HTML ini kami susun dengan penuh dedikasi dan disediakan 100%
Gratis tanpa iklan yang mengganggu.
Jika kamu merasa panduan ini membantumu melangkah lebih dekat menjadi seorang Web Developer, kamu bisa mendukung kreativitas kami
dengan memberikan donasi "traktir kopi". Dukunganmu, sekecil apapun, akan sangat menjadi bahan bakar
kami untuk terus meracik kurikulum-kurikulum canggih berikutnya! 🔥
Pembayaran 100% aman via Clicky.id (QRIS, GoPay, OVO, Transfer Bank)
🤝 Berbagi Pintu Rezeki
Masih banyak ratusan talenta di luar sana yang terhalang meraih mimpiannya karena mahalnya biaya kursus IT. Satu klik darimu bisa memberikan harapan bagi mereka yang kesulitan finansial untuk belajar *coding* dengan standar industri!
Template Pesan (Tinggal Copy)