Artikel ini merupakan bagian dari seri Belajar HTML untuk Pemula di hanifmu.com. Setelah memahami Clean Code HTML, kita bahas topik terakhir: Accessibility atau A11y. Membuat website yang bisa diakses oleh semua orang, termasuk penggunaan assistive technology.
Apa itu Accessibility (A11y)?
Accessibility (A11y) adalah praktik membuat website yang bisa diakses oleh semua orang, termasuk pengguna dengan disabilitas. A11y adalah singkatan dari “accessibility” dengan 11 huruf di antara a dan y.
Mengapa Accessibility Penting?
- Inklusif — Semua orang bisa mengakses informasi
- Legal — Beberapa negara mewajibkan aksesibilitas
- SEO — Website accessible biasanya lebih SEO-friendly
- Pengalaman lebih baik — Semua pengguna mendapat pengalaman yang lebih baik
Jenis Disabilitas
Penggunaan Screen Reader
Pengguna tunanetra atau low vision menggunakan screen reader untuk membaca konten:
<!-- ❌ Screen reader tidak bisa membaca -->
<div onclick="submitForm()">Kirim</div>
<!-- ✅ Screen reader bisa membaca -->
<button type="submit">Kirim</button>
Penggunaan Keyboard
Pengguna yang tidak bisa menggunakan mouse navigasi dengan keyboard:
<!-- ❌ Tidak bisa diakses dengan keyboard -->
<div class="button" onclick="action()">Klik</div>
<!-- ✅ Bisa diakses dengan keyboard -->
<button type="button" onclick="action()">Klik</button>
Penggunaan Zoom
Pengguna low vision memperbesar layar:
<!-- ❌ Tidak responsif -->
<div style="width: 500px;">Konten</div>
<!-- ✅ Responsif -->
<div style="max-width: 100%;">Konten</div>
Semantic HTML untuk Aksesibilitas
Gunakan Tag yang Tepat
<!-- ❌ Non-semantic -->
<div class="button">Klik</div>
<div class="link">Baca selengkapnya</div>
<!-- ✅ Semantic -->
<button type="button">Klik</button>
<a href="/artikel">Baca selengkapnya</a>
Gunakan Heading secara Hierarkis
<!-- ❌ Loncat level -->
<h1>Judul</h1>
<h3>Sub-judul</h3>
<!-- ✅ Hierarkis -->
<h1>Judul</h1>
<h2>Sub-judul</h2>
ARIA Attributes
ARIA (Accessible Rich Internet Applications) attributes membantu screen reader memahami elemen interaktif.
role
Memberi tahu screen reader fungsi elemen:
<div role="button" tabindex="0" onclick="action()">Klik</div>
<div role="navigation">
<a href="/">Beranda</a>
</div>
<div role="alert">Error terjadi!</div>
aria-label
Memberi label yang dibaca screen reader:
<button aria-label="Tutup">×</button>
<input type="text" aria-label="Cari artikel" />
<nav aria-label="Navigasi utama">
<a href="/">Beranda</a>
</nav>
aria-describedby
Menjelaskan elemen lebih lanjut:
<input
type="text"
aria-describedby="name-help"
/>
<span id="name-help">Masukkan nama lengkap Anda</span>
aria-hidden
Menyembunyikan elemen dari screen reader:
<div aria-hidden="true">Konten dekoratif</div>
<span aria-hidden="true">★</span> Rating: 5/5
aria-expanded
Menandakan elemen bisa diperluas/diperkecil:
<button aria-expanded="false" aria-controls="menu">
Menu
</button>
<div id="menu" hidden>
<a href="/">Beranda</a>
<a href="/tentang">Tentang</a>
</div>
Keyboard Navigation
Tab Order
Pastikan elemen bisa diakses dengan Tab:
<!-- Urutan tab mengikuti urutan kode -->
<input type="text" /> <!-- Tab pertama -->
<input type="email" /> <!-- Tab kedua -->
<button type="submit">Kirim</button> <!-- Tab ketiga -->
tabindex
Mengontrol urutan tab:
<!-- tabindex="0" — Mengikuti urutan DOM -->
<div tabindex="0">Bisa difokuskan</div>
<!-- tabindex="-1" — Bisa difokuskan dengan JS tapi tidak dengan Tab -->
<div tabindex="-1">Fokus via JS</div>
<!-- tabindex="5" — Urutan tab tinggi (hindari penggunaan ini) -->
<div tabindex="5">Tab terakhir</div>
Skip Navigation
Tautan untuk melewati navigasi:
<body>
<a href="#main-content" class="skip-link">Langsung ke konten</a>
<header>
<nav>
<a href="/">Beranda</a>
<a href="/tentang">Tentang</a>
</nav>
</header>
<main id="main-content">
<article>
<h1>Judul Artikel</h1>
<p>Isi artikel...</p>
</article>
</main>
</body>
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #000;
color: white;
padding: 8px;
z-index: 100;
}
.skip-link:focus {
top: 0;
}
Form Accessibility
Label yang Terhubung
<!-- ✅ Menggunakan for dan id -->
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<!-- ✅ Membungkus input -->
<label>
Email:
<input type="email" name="email" />
</label>
Pesan Error
<label for="email">Email:</label>
<input
type="email"
id="email"
aria-describedby="email-error"
aria-invalid="true"
/>
<span id="email-error" role="alert">
Email tidak valid
</span>
Fieldset dan Legend
<fieldset>
<legend>Jenis Kelamin</legend>
<input type="radio" name="jk" value="laki-laki" id="lk" />
<label for="lk">Laki-laki</label>
<input type="radio" name="jk" value="perempuan" id="pr" />
<label for="pr">Perempuan</label>
</fieldset>
Color Contrast
Pastikan kontras warna cukup untuk dibaca:
Standar WCAG
- Level AA — Kontras minimal 4.5:1 untuk teks normal
- Level AAA — Kontras minimal 7:1 untuk teks normal
Tools untuk Mengecek Kontras
Contoh Kontras yang Baik
/* ✅ Kontras baik */
body {
color: #333; /* Gelap */
background-color: #fff; /* Terang */
}
/* ❌ Kontras buruk */
body {
color: #999; /* Abu-abu terang */
background-color: #fff; /* Terang */
}
Image Accessibility
Alt Text
<!-- ✅ Deskriptif -->
<img src="chart.png" alt="Grafik penjualan Q1 2026 naik 20%" />
<!-- ✅ Gambar dekoratif -->
<img src="dekorasi.png" alt="" role="presentation" />
Caption
<figure>
<img src="diagram.png" alt="Diagram arsitektur sistem" />
<figcaption>Gambar 1: Arsitektur sistem monolitik</figcaption>
</figure>
Multimedia Accessibility
Video dengan Subtitle
<video controls>
<source src="video.mp4" type="video/mp4" />
<track src="subtitle.vtt" kind="captions" label="Indonesia" />
</video>
Audio dengan Transkrip
<audio controls>
<source src="podcast.mp3" type="audio/mpeg" />
</audio>
<p>
<a href="transkrip.txt">Download transkrip</a>
</p>
Checklist Aksesibilitas
- Semua gambar punya alt text
- Form punya label yang terhubung
- Heading hierarkis (h1 → h2 → h3)
- Link teks deskriptif (hindari “klik di sini”)
- Cukup kontras warna (minimal 4.5:1)
- Semua fungsionalitas bisa diakses keyboard
- Skip navigation tersedia
- ARIA labels untuk elemen interaktif
- Video/audio punya subtitle/transkrip
- Tidak ada konten yang berkedip (bisa menyebabkan kejang)
Tools untuk Mengecek Aksesibilitas
- Lighthouse — Audit aksesibilitas di Chrome DevTools
- axe DevTools — Extension untuk mengecek aksesibilitas
- WAVE — Web Accessibility Evaluation Tool
- Screen reader — NVDA (Windows), VoiceOver (Mac)
Ringkasan
- Accessibility membuat website inklusif untuk semua orang
- Gunakan semantic HTML untuk struktur yang jelas
- ARIA attributes membantu screen reader
- Pastikan semua elemen bisa diakses keyboard
- Kontras warna minimal 4.5:1
- Alt text untuk semua gambar
- Form punya label yang terhubung
- Video/audio punya subtitle/transkrip
Penutup
Selamat! Kamu sudah menyelesaikan seri Belajar HTML untuk Pemula. Dari pengenalan HTML hingga accessibility, kamu sudah punya bekal yang cukup untuk membuat website yang baik, benar, dan bisa diakses oleh semua orang.
Selanjutnya, kamu bisa belajar CSS untuk styling dan JavaScript untuk interaktivitas. Terima kasih sudah belajar di hanifmu.com!