Aksesibilitas (accessibility, sering disingkat a11y) artinya halaman bisa dipakai semua orang, termasuk yang gak melihat layar, gak memakai mouse, atau harus memperbesar tulisan. Bayangin kamu menelepon Bu Sri dan minta dia membacakan halaman pesannya. Kalau dia cuma bilang "ada tulisan, ada tulisan, ada gambar", kamu gak bisa memesan. Kalau dia bilang "ada judul Kamar Teras, ada foto ranjang ganda menghadap bukit, ada tombol Pesan kamar", kamu bisa. Screen reader (pembaca layar) adalah Bu Sri di telepon itu, dan yang dia bacakan ditentukan oleh HTML-mu, bukan oleh tampilannya.
🧪 Tebakan cepat: Tombol "Pesan kamar, bayar di tempat" di halaman Bu Sri dibuat dari
<div>hijau denganonclick. Pengguna mouse bisa memesan. Bagaimana dengan pengguna keyboard dan screen reader? Jawabannya ada di bagian "Semantic HTML dulu".
Siapa yang terbantu
WHO (2023) memperkirakan 1,3 miliar orang hidup dengan disabilitas yang berarti: 16% penduduk dunia, 1 dari 6 orang. Ada yang tunanetra dan memakai screen reader, ada yang gak bisa memakai mouse dan berpindah dengan Tab, ada yang matanya sudah rabun seperti Pak Hadi (58) dan memperbesar halaman.
Kebanyakan situs belum siap. WebAIM memeriksa beranda 1 juta situs (Februari 2026) dan menemukan kegagalan WCAG di 95,9% halaman. Enam yang paling sering:
| Masalah | Halaman yang punya |
|---|---|
| Teks kontras rendah | 83,9% |
| Gambar tanpa alt | 53,1% |
| Input form tanpa label | 51% |
| Link kosong (tanpa nama) | 46,3% |
| Tombol kosong | 30,6% |
| Bahasa halaman gak disebut | 13,5% |
Lima dari enam itu dibetulkan di HTML, bukan di CSS. Pelajaran ini membahas gambar tanpa alt, tombol yang bukan tombol, dan bahasa halaman; label form ada di pelajaran berikutnya.
Pohon aksesibilitas: yang diterima screen reader
Browser membaca HTML-mu lalu membuat pohon aksesibilitas (accessibility tree): daftar hal-hal di halaman, masing-masing dengan role (apa dia: button, link, heading, image), name (namanya: "Pesan kamar, bayar di tempat"), dan state (keadaannya: ditekan atau tidak). Screen reader gak melihat warna atau ukuran; dia cuma membaca pohon ini. Di Chrome kamu bisa melihatnya di DevTools, panel Elements, tab Accessibility.
Kami membuat dua versi halaman Bu Sri yang tampilannya sama persis, lalu membaca pohonnya dari Chromium 147. Lab di halaman ini memakai halaman yang sama dan menampilkan pohon yang sama.
| Bagian halaman | Versi div | Versi semantic |
|---|---|---|
| Kepala, navigasi, isi, kaki halaman | gak ada, cuma teks dan link | banner, navigation "Navigasi utama", main, contentinfo |
| Judul kamar | heading "Kamar Teras" level 3 |
heading "Kamar Teras" level 1 |
| Foto kamar | image "" (tanpa nama) |
image "Kamar Teras: ranjang ganda di depan jendela besar yang menghadap bukit hijau" |
| Pesan kamar | teks "Pesan kamar, bayar di tempat" |
button "Pesan kamar, bayar di tempat" |
| Berhenti di Tab | 7 (4 link, 3 tombol malam) | 8 (ditambah tombol Pesan) |
Pohon ini baru setengah cerita. Tes terakhirnya tetap dengan screen reader sungguhan: NVDA di Windows, VoiceOver di Mac dan iPhone, TalkBack di Android. Tes itu gak kami lakukan di sini.
Semantic HTML dulu
Semantic HTML artinya memakai elemen yang memang dibuat untuk tugasnya: <button> untuk aksi, <a href> untuk pindah halaman, <h1> sampai <h6> untuk judul, dan landmark untuk bagian besar halaman:
<header class="top">
<p class="logo">Homestay Kabut</p>
<nav aria-label="Navigasi utama">
<a href="#beranda">Beranda</a>
<a href="#kamar" aria-current="page">Kamar</a>
</nav>
</header>
<main class="kabut">
<h1 class="title">Kamar Teras</h1>
<img class="mist" src="kabut.svg" alt="">
<img class="photo" src="kamar-teras.svg" alt="Kamar Teras: ranjang ganda di depan jendela besar yang menghadap bukit hijau" width="320" height="150">
<p class="price">Rp 350.000 / malam</p>
<button class="book">Pesan kamar, bayar di tempat</button>
<h2 class="sub">Aturan menginap</h2>
<p class="note">Gratis batal sampai 3 hari sebelum check-in.</p>
</main>
<footer class="foot">Homestay Kabut, Dieng</footer>
<header>,<nav>,<main>,<footer>menjadi landmark: banner, navigation, main, contentinfo. Pengguna screen reader bisa loncat langsung ke landmark, misalnya langsung ke isi utama tanpa mendengar menu dulu.<nav>ada di dalam<header>, karena navigasi situs adalah bagian kepala halaman. Halaman cuma punya satu<main>.<button>otomatis bisa difokus dengan Tab, ditekan dengan Enter atau Spasi, dan diumumkan sebagai "button".- Ukuran judul diatur
class, bukan tag. Jadi memilih<h1>atau<h2>adalah soal struktur, dan tampilannya tetap sama.
Jadi jawaban tebakannya: pengguna keyboard gak bisa sampai ke tombol itu, karena <div> gak pernah dapat giliran Tab, dan screen reader cuma menerima teks "Pesan kamar, bayar di tempat", bukan tombol. Itu jawaban tebakannya.
ARIA: kalau HTML gak cukup
ARIA adalah singkatan dari Accessible Rich Internet Applications, spesifikasi W3C berisi atribut yang mengubah pohon aksesibilitas: role (misalnya role="button"), aria-label (nama), dan state seperti aria-pressed atau aria-current. ARIA gak mengubah perilaku. Div yang diberi role="button" memang jadi button di pohon Chromium, tapi tetap gak bisa difokus, dan Enter atau Spasi gak menekannya.
Makanya ada aturan pertama ARIA dari W3C: kalau ada elemen HTML asli yang sudah punya makna dan perilakunya, pakai itu. ARIA untuk yang gak ada padanannya di HTML, misalnya aria-pressed di tombol malam. WebAIM menemukan beranda yang memakai ARIA justru rata-rata punya lebih banyak kesalahan (59,1) daripada yang tanpa ARIA (42).
Alt text: informatif atau hiasan
Atribut alt di <img> adalah nama gambar di pohon. Tanya: kalau gambarnya hilang, apa yang hilang dari halaman?
| Kasus | Tulis | Di pohon Chromium |
|---|---|---|
| Foto Kamar Teras: membantu tamu memutuskan | alt="Kamar Teras: ranjang ganda di depan jendela besar..." |
image dengan nama itu |
| Garis kabut di bawah judul: cuma hiasan | alt="" |
hilang dari pohon, gak dibacakan |
| Lupa menulis alt | (gak ada atribut alt) | image "": ada gambar, tanpa nama |
- Untuk gambar dekoratif, tulis
alt=""(alt kosong), jangan buang atributnya. Tanpa atribut, screen reader tahu ada gambar tapi gak tahu isinya, dan ada screen reader yang lalu membacakan nama filenya. - Tulis yang dilihat dan penting, singkat. Gak perlu awali dengan "gambar" atau "foto", karena role-nya sudah image.
- Gambar yang jadi satu-satunya isi link (misalnya logo ke Beranda): alt-nya menjadi nama link, jadi tulis tujuannya.
Di latihan nanti, kode awalnya <div class="header"> berisi <div class="nav">, lalu <div class="content"> dengan <h3>Welcome</h3>, <img src="hero.jpg" /> tanpa alt, dan <h1>About Us</h1>. Ganti div-div itu dengan <header>, <nav> di dalamnya, dan <main>; beri gambarnya alt yang menjelaskan isinya (bukan alt kosong); jadikan Welcome <h1> dan About Us <h2>.
Heading berurutan dan bahasa halaman
Pengguna screen reader sering melompat dari heading ke heading untuk mengenali isi halaman, seperti membaca daftar isi. Jadi urutannya harus masuk akal: satu <h1> untuk judul halaman, lalu <h2> untuk bagian-bagiannya, <h3> di dalam <h2>, tanpa meloncati level. Versi div Bu Sri mulai dari h3 lalu ke h1; WebAIM mencatat level heading yang terloncati di 41,8% beranda.
<html lang="id"> memberi tahu bahasa halaman (WCAG 3.1.1, Language of Page). Menurut penjelasan WCAG, dengan begitu screen reader bisa memakai aturan pengucapan yang benar. Tanpa lang, kalimat "Gratis batal sampai 3 hari" bisa dibacakan dengan logat bahasa lain. Halaman berbahasa Inggris memakai lang="en".
Zoom 200% dan layar 320px
Pak Hadi memperbesar halaman supaya tulisannya terbaca. Dua kriteria WCAG level AA mengaturnya:
- 1.4.4 Resize Text: teks bisa diperbesar sampai 200% tanpa ada isi atau fungsi yang hilang.
- 1.4.10 Reflow: isi tetap bisa dibaca tanpa geser ke samping di lebar setara 320 CSS px. Itu lebar layar 1.280px yang di-zoom 400%, atau HP kecil.
Kami membuka halaman Bu Sri di lebar 320px di Chromium, WebKit, dan Firefox. Dengan max-width: 320px, kartunya menyusut dan halamannya tetap 320px. Dengan width: 320px, kartunya tetap 362px (ditambah padding dan border), halamannya jadi 378px, dan tamu harus menggeser ke samping 58px untuk tiap baris. Pakai max-width, jangan lebar tetap.
⚠️ Jebakan yang sering ketemu
<div>atau<span>yang diberionclick. Mouse bisa, keyboard dan screen reader gak. Pakai<button>.- Menambah ARIA sebelum memakai HTML yang tepat.
role="button"gak membuat div bisa difokus. Aturan pertama ARIA: elemen aslinya dulu. - Alt kosong di foto informatif, atau alt hilang di hiasan. Foto kamar butuh alt yang menjelaskan; garis hiasan butuh
alt="". Latihan menolak alt kosong untuk gambar utamanya. - Memilih heading dari ukurannya. Judul halaman itu
<h1>walau tampilannya kecil; atur ukurannya dengan CSS. - Lupa
langdi<html>. Satu atribut, dan screen reader tahu bahasa halamannya.
TL;DR: Aksesibilitas berarti halaman bisa dipakai semua orang; 1 dari 6 orang di dunia hidup dengan disabilitas (WHO 2023), dan 95,9% beranda di WebAIM Million 2026 masih gagal WCAG. Screen reader membaca pohon aksesibilitas: role, name, dan state tiap hal, yang dibangun browser dari HTML-mu. Semantic HTML dulu: <header> (banner), <nav> di dalamnya (navigation), satu <main>, <footer>, dan <button> untuk aksi, karena <div onclick> gak bisa difokus. ARIA (Accessible Rich Internet Applications) cuma mengubah pohon, bukan perilaku; pakai elemen HTML aslinya kalau ada. Gambar informatif diberi alt yang menjelaskan isinya, gambar dekoratif alt="" (bukan tanpa alt, yang jadi image ""). Heading berurutan: satu <h1>, lalu <h2>, tanpa meloncat. <html lang="id"> menyebut bahasanya. Halaman harus tetap utuh saat di-zoom 200% (WCAG 1.4.4) dan tanpa geser ke samping di lebar 320px (WCAG 1.4.10): pakai max-width, bukan lebar tetap. Tes terakhirnya dengan screen reader sungguhan.
