Dasar Web Accessibility

Seluruh section sebelumnya telah menyiapkan bahan: teks, link, gambar, list, tabel, elemen semantik, form, validasi, hingga metadata. Atribut seperti alt, label, scope, dan caption kita singgung seperlunya di masing-masing bagian. Kini potongan-potongan itu kita rangkai menjadi satu disiplin utuh bernama web accessibility. Chapter ini memulai dari definisi dan penerima manfaatnya, lalu menutup dengan peran HTML semantik sebagai fondasi seluruh section.

Definisi Web Accessibility #

Web accessibility adalah praktik merancang halaman web agar dapat dipakai semua orang, termasuk pengunjung dengan gangguan penglihatan, pendengaran, motorik, maupun kognitif. Halaman aksesibel berarti informasinya bisa dirasakan, fiturnya bisa dioperasikan, dan isinya bisa dipahami tanpa bergantung pada satu indera atau satu perangkat saja. Pengembang kerap menyingkatnya menjadi a11y: huruf a, sebelas huruf di tengah, lalu huruf y. Standar rujukannya adalah WCAG (Web Content Accessibility Guidelines) yang diterbitkan W3C melalui inisiatif WAI. Sebagai gambaran skala, sekitar satu dari enam orang di dunia hidup dengan disabilitas yang berarti, sehingga aksesibilitas bukan kasus pinggiran.

Siapa Saja yang Diuntungkan #

Dugaan yang lazim menyebut accessibility hanya soal disabilitas permanen. Kenyataannya, kondisi seseorang bergerak di antara tiga kategori, dan setiap kategori menuntut desain yang sama:

Jenis gangguan	Permanen	Sementara	Situasional
Penglihatan	buta sejak lahir	katarak pascaoperasi	silau matahari
Pendengaran	tuli	infeksi telinga	ruangan bising
Motorik	kehilangan fungsi tangan	pergelangan terluka	tangan memegang bayi
Kognitif	disleksia	kurang tidur	lingkungan penuh gangguan

Satu kesimpulan menempel dari tabel di atas: desain aksesibel menguntungkan semua pengunjung. Caption video membantu penumpang kereta yang lupa headset, label yang jelas membantu siapa pun yang tergesa, dan teks alternatif membantu mesin pencari.

Empat Prinsip WCAG (POUR) #

WCAG menyusun seluruh kriterianya di bawah empat prinsip yang dikenal dengan singkatan POUR. Versi terkini adalah WCAG 2.2, dan setiap kriteria memiliki jenjang kepatuhan: A sebagai batas minimum, AA sebagai target lazim proyek web, dan AAA yang paling ketat. Tabel berikut merangkum keempat prinsip beserta contoh penerapannya di HTML:

Prinsip	Inti aturan	Contoh penerapan di HTML
Perceivable	informasi dapat dipersepsi setidaknya satu indera	`alt` pada gambar, `caption` pada tabel
Operable	semua fungsi dapat dioperasikan tanpa mouse	navigasi keyboard, skip link
Understandable	konten dan cara kerjanya mudah dipahami	`label` form yang jelas, `lang="id"`
Robust	konten dipahami berbagai user agent termasuk assistive technology	HTML valid, elemen semantik, ARIA yang tepat

Keempat prinsip ini menjadi lensa kita sepanjang section: tiap chapter membedah satu aspek HTML dari sudut pandang POUR.

HTML Semantik sebagai Fondasi #

Sebagian besar syarat WCAG terpenuhi otomatis ketika elemen yang dipilih tepat. Bandingkan dua cara membuat tombol berikut — div yang diberi ARIA manual, dan button native yang tercatat sebagai tombol sekaligus masuk urutan Tab:

html
Dua cara membuat tombol
<!-- Tanggung jawab aksesibilitas ditanggung penulis sendiri -->
<div class="tombol-kirim" role="button" tabindex="0">Kirim</div>

<!-- Peran, fokus keyboard, dan nama dibawakan browser secara gratis -->
<button type="submit">Kirim</button>

Kemampuan	`div` plus ARIA manual	`button` native
Terdaftar di urutan Tab	hanya bila ada `tabindex`	ya
Merespons Enter dan Space	perlu JavaScript	ya
Mengirim data form	tidak	ya

Ilustrasi lengkapnya ada pada dua halaman berisi konten yang sama. Halaman pertama ditulis dengan div untuk semuanya:

html
halaman-div.html
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Toko Bunga Melati</title>
</head>
<body>
  <div class="banner">Toko Bunga Melati</div>
  <div class="menu">
    <a href="www.example.com/produk">Produk</a>
    <a href="www.example.com/kontak">Kontak</a>
  </div>
  <div class="konten">
    <div class="judul-bagian">Bunga Minggu Ini</div>
    <p>Peony impor tiba setiap Rabu. Pesan lewat formulir kontak.</p>
  </div>
  <div class="kaki">Toko Bunga Melati, Jl. Melati No. 10</div>
</body>
</html>

Halaman kedua ditulis dengan elemen semantik:

html
halaman-semantik.html
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Toko Bunga Melati</title>
</head>
<body>
  <header>
    <h1>Toko Bunga Melati</h1>
    <nav aria-label="Navigasi utama">
      <ul>
        <li><a href="www.example.com/produk">Produk</a></li>
        <li><a href="www.example.com/kontak">Kontak</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section>
      <h2>Bunga Minggu Ini</h2>
      <p>Peony impor tiba setiap Rabu. Pesan lewat formulir kontak.</p>
    </section>
  </main>
  <footer>
    <p>Toko Bunga Melati, Jl. Melati No. 10</p>
  </footer>
</body>
</html>

Output yang Dihasilkan:

text
Kedua halaman tampak mirip di layar, tetapi screen reader membacanya berbeda:
  halaman-div.html      -> "Toko Bunga Melati" dibaca sebagai teks biasa;
                           tidak ada banner, navigasi, atau heading
  halaman-semantik.html -> "banner, Toko Bunga Melati, level 1";
                           "navigasi utama, daftar, 2 item";
                           "level 2, Bunga Minggu Ini"

Mari kita bedah halaman semantik:

Baris 9-16 (header … </header>): header dideklarasikan sebagai banner, dan h1 memberi judul dokumen yang tercatat di peta heading.
Baris 10-14 (nav + ul): nav menandai kumpulan navigasi; aria-label="Navigasi utama" memberinya nama.
Baris 15-19 (main): main menandai konten utama sehingga keyboard dapat melompat langsung ke sini.
Baris 16-18 (section + h2): pembagian bagian disertai heading, bukan sekadar teks tebal.
Baris 20-22 (footer): penutup halaman dikenali sebagai landmark contentinfo.

Pada halaman-div.html, teks “Bunga Minggu Ini” hanyalah div, sehingga tak pernah diumumkan sebagai heading dan daftar isi halaman menjadi kosong. Struktur semantik mencapai semua itu tanpa CSS, tanpa JavaScript, dan tanpa biaya tambahan.

Setelah fondasi jelas, kita membedah struktur yang paling sering dipakai untuk bernavigasi: heading. Chapter berikutnya menjelaskan cara heading membentuk peta halaman di mata screen reader beserta aturan hierarkinya.

Referensi resmi untuk pendalaman:

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

html
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Toko Bunga Melati</title>
</head>
<body>
  <div class="banner">Toko Bunga Melati</div>
  <div class="menu">
    <a href="www.example.com/produk">Produk</a>
    <a href="www.example.com/kontak">Kontak</a>
  </div>
  <div class="konten">
    <div class="judul-bagian">Bunga Minggu Ini</div>
    <p>Peony impor tiba setiap Rabu. Pesan lewat formulir kontak.</p>
  </div>
  <div class="kaki">Toko Bunga Melati, Jl. Melati No. 10</div>
</body>
</html>

html
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Toko Bunga Melati</title>
</head>
<body>
  <header>
    <h1>Toko Bunga Melati</h1>
    <nav aria-label="Navigasi utama">
      <ul>
        <li><a href="www.example.com/produk">Produk</a></li>
        <li><a href="www.example.com/kontak">Kontak</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section>
      <h2>Bunga Minggu Ini</h2>
      <p>Peony impor tiba setiap Rabu. Pesan lewat formulir kontak.</p>
    </section>
  </main>
  <footer>
    <p>Toko Bunga Melati, Jl. Melati No. 10</p>
  </footer>
</body>
</html>