Web Accessibility

Aksesibilitas adalah usaha membuat halaman dapat dipakai oleh semua pengunjung, termasuk yang mengandalkan pembaca layar, papan ketik semata, atau perangkat bantuan lainnya. Sepanjang course kita telah menyentuh potongan-potongannya: atribut alt pada gambar, label pada form, lang pada elemen html, serta urutan heading yang tertib. Kini kita mengenal sumber resminya: W3C WAI (Web Accessibility Initiative), yang menghimpun tutorial, standar WCAG, dan panduan pola ARIA dalam satu hub di w3.org/WAI. Section penutup ini memetakan isi hub tersebut beserta cara memakainya saat belajar mandiri.

Tutorials WAI #

Bagian Tutorials pada hub WAI membahas aksesibilitas per jenis konten. Daftar bahasanya menyentuh kebutuhan harian kita, dan setiap tutorial memuat praktik baik beserta contoh kode yang dapat dibaca sambil menulis:

Karena fokusnya konten, tutorial ini menjadi pelengkap yang pas bagi dokumentasi elemen: dokumentasi menjelaskan cara memakai elemen, sedangkan tutorial menegaskan cara memakainya secara aksesibel.

WCAG 2.2 dan Level Kepatuhan #

WCAG (Web Content Accessibility Guidelines) adalah standar W3C yang menetapkan kriteria keberhasilan untuk konten web. Kriteria dikelompokkan di bawah empat prinsip: perceivable, operable, understandable, dan robust. Setiap kriteria diberi level kepatuhan — A sebagai dasar, AA yang lazim menjadi target proyek, dan AAA yang paling ketat. Halaman WCAG 2.2 Quickref menolong kita menyaring kriteria berdasarkan topik, misalnya hanya yang menyangkut teks alternatif.

APG: Pola Komponen ARIA #

ARIA (Accessible Rich Internet Applications) adalah sekumpulan atribut untuk memperkaya semantik elemen ketika HTML murni belum cukup. Panduan resmi pemakaiannya bernama ARIA Authoring Practices Guide (APG): kumpulan pola komponen seperti accordion, modal dialog, tabs, dan disclosure. Setiap pola dijelaskan lengkap: interaksi papan ketik yang diharapkan, atribut ARIA yang dipakai, dan contoh yang bisa diuji. Ketika kita menulis komponen interaktif dari JavaScript, APG menjadi checklist perilaku yang perlu ditiru.

Alur Contoh: Mencari Pola Disclosure #

Anggap kita perlu membuat bagian teks yang bisa dibuka-tutup pengunjung. Alurnya: buka APG, pilih daftar patterns, cari kata disclosure, lalu baca halaman polanya. Di sana kita jumpai definisi disclosure — tombol yang menampilkan atau menyembunyikan bagian konten — lengkap dengan perilaku tombol yang diharapkan. Menariknya, HTML menyediakan pasangan details dan summary yang memberi perilaku serupa tanpa JavaScript; APG tetap relevan ketika kebutuhan melampaui versi bawaan tersebut.

Latihan berikut mempraktikkan pola tersebut dengan pasangan bawaan HTML:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Latihan Pola Disclosure</title>
</head>
<body>
  <main>
    <h1>Warung Melati</h1>
    <p>Informasi singkat yang dapat dibuka dan ditutup oleh pengunjung.</p>
    <section>
      <h2>Menu Hari Ini</h2>
      <details>
        <summary>Tampilkan daftar menu</summary>
        <ul>
          <li>Soto ayam — 15.000</li>
          <li>Nasi goreng — 13.000</li>
          <li>Es teh manis — 5.000</li>
        </ul>
      </details>
    </section>
    <section>
      <h2>Jam Buka</h2>
      <details>
        <summary>Tampilkan jam buka</summary>
        <p>Setiap hari pukul 07.00 sampai 21.00 WIB.</p>
      </details>
    </section>
  </main>
</body>
</html>

Output yang Dihasilkan:

Saat halaman dibuka, hanya judul dan teks ringkasan "Tampilkan daftar
menu" serta "Tampilkan jam buka" yang terlihat. Klik pada ringkasan
membuka isi bagian; klik lagi menutupnya kembali.

Mari kita telaah perannya satu per satu:

1. Baris 11 (<p>): kalimat pengantar yang menjelaskan sifat interaktif halaman.
2. Baris 12-22 (<section> pertama): satu bagian konten yang memuat satu komponen disclosure.
3. Baris 14-21 (<details>): elemen yang menampung bagian yang dapat dibuka-tutup; statusnya tertutup secara default.
4. Baris 15 (<summary>): teks yang selalu terlihat dan menjadi sasaran klik maupun fokus papan ketik.
5. Baris 16-20 (<ul>): isi yang baru muncul setelah bagian dibuka.
6. Baris 23-29: bagian kedua dengan pola yang sama, membuktikan bahwa satu halaman boleh memuat beberapa disclosure.

Struktur yang benar dan praktik aksesibel telah kita bangun; tinggal satu kebiasaan penjaga, yaitu memeriksa hasilnya dengan alat pemeriksa. Chapter terakhir course ini menuntaskan alat tersebut: validator resmi W3C.

Referensi resmi untuk pendalaman:

• W3C WAI — Web Accessibility Tutorials
• W3C WAI — ARIA Authoring Practices Guide
• W3C — WCAG 2.2
• W3C WAI — WCAG 2.2 Quick Reference

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Latihan Pola Disclosure</title>
</head>
<body>
  <main>
    <h1>Warung Melati</h1>
    <p>Informasi singkat yang dapat dibuka dan ditutup oleh pengunjung.</p>
    <section>
      <h2>Menu Hari Ini</h2>
      <details>
        <summary>Tampilkan daftar menu</summary>
        <ul>
          <li>Soto ayam — 15.000</li>
          <li>Nasi goreng — 13.000</li>
          <li>Es teh manis — 5.000</li>
        </ul>
      </details>
    </section>
    <section>
      <h2>Jam Buka</h2>
      <details>
        <summary>Tampilkan jam buka</summary>
        <p>Setiap hari pukul 07.00 sampai 21.00 WIB.</p>
      </details>
    </section>
  </main>
</body>
</html>