Membaca aturan aksesibilitas berbeda dari memastikan halaman benar-benar mematuhinya. Halaman yang tampak rapi masih bisa menyimpan label lepas, hierarki heading pincang, atau kontrol yang tak terjangkau keyboard. Penutup section ini menyusun cara menguji: alat otomatis, walkthrough keyboard, screen reader, pengguna nyata, lalu checklist yang merangkum semuanya.

Pengujian Bertingkat #

Tidak ada satu alat yang menutup semua kebutuhan, sehingga praktik industri menyusun pengujian berlapis: pengujian otomatis menyapu halaman dalam hitungan detik, walkthrough keyboard menguji pengalaman nyata dengan biaya hampir nol, uji screen reader memeriksa pengumuman yang didengar pengguna, dan pengguna nyata dengan disabilitas memvalidasi bahwa halaman memang dapat dipakai.

Alat Otomatis #

Tiga nama muncul hampir di semua proyek. WAVE dari WebAIM dan axe dari Deque hadir sebagai ekstensi browser yang menandai masalah langsung di halaman; keduanya dicari lewat toko ekstensi browser masing-masing. Lighthouse terpasang bawaan Chrome: buka DevTools, pilih tab Lighthouse, centang kategori Accessibility, lalu jalankan analisis dan baca daftar temuan berikut tautan penjelasannya.

Ingat pula batas alat ini: ia memeriksa kode, bukan makna. Atribut alt yang isinya tidak relevan tetap dihitung lulus, dan label yang salah arti pun lolos. Halaman rangkuman evaluasi WAI menyimpan daftar alat penguji dan metode yang diperbarui berkala, cocok dijadikan titik berangkat saat butuh pilihan lain.

Walkthrough Keyboard #

Uji ini meniru kelompok pengguna yang paling mudah kita perkirakan, dan langkahnya hanya lima:

  1. Sisihkan mouse, buka halaman, lalu tekan Tab dari elemen pertama.
  2. Pastikan setiap kontrol interaktif tercapai dan cincin fokusnya terlihat jelas.
  3. Jalankan setiap kontrol dengan Enter atau Space sesuai jenisnya.
  4. Pastikan fokus tak pernah terjebak di satu elemen tanpa jalan keluar.
  5. Uji skip link: tekan Tab di awal halaman dan aktifkan link pertama bila ada.

Temuan umum walkthrough ini berupa menu yang tak bisa dibuka, dialog tanpa jalan keluar, atau urutan fokus yang melompat ke elemen tersembunyi. Semua polanya telah dibahas pada chapter-chapter sebelumnya, sehingga perbaikan tinggal diterapkan.

Sekilas Screen Reader #

Screen reader mengubah teks dan struktur halaman menjadi suara, dan mencobanya adalah cara termurah merasakan halaman dari sisi pengunjung tunanetra. Di Windows, NVDA menjadi pilihan gratis yang populer; di macOS dan iOS, VoiceOver tersedia bawaan sistem. Belajar dasarnya cukup untuk pemeriksaan halaman:

Perintah NVDAHasil
H / Shift+Hlompat ke heading berikutnya / sebelumnya
Klompat ke link berikutnya
Dlompat ke landmark berikutnya
Ctrl+Alt+panahberpindah sel pada mode tabel

Pada VoiceOver, daftar heading, link, dan form tersaji lewat rotor. Dua catatan menjaga uji ini tetap jujur: kuasai alatnya dulu sebelum menilai halaman, karena pemakaian yang keliru menghasilkan temuan palsu; dan screen reader mempercepat penemuan masalah kasar, bukan menggantikan uji dengan pengguna sesungguhnya.

Suara Pengguna Nyata #

Pengujian tertinggi memakai partisipan dengan disabilitas yang mencoba menyelesaikan tugas nyata: mendaftar, mencari produk, mengirim form. Metode ini menemukan persoalan yang tak tertangkap alat maupun simulasi, misalnya istilah yang membingungkan atau alur yang terlalu panjang. Libatkan mereka sejak draf awal, bukan setelah rilis, karena biaya perbaikan paling murah terjadi saat kode baru ditulis.

Checklist Evaluasi Halaman #

Rangkuman seluruh section ini jatuh pada checklist yang bisa dipakai setiap kali menyelesaikan halaman:

  • title deskriptif dan lang terisi pada elemen html;
  • satu h1 dan hierarki heading tanpa lompatan;
  • landmark lengkap: header, nav, main, footer;
  • setiap img beratribut alt, dengan alt="" untuk gambar dekoratif;
  • setiap kontrol form punya label terhubung; kelompok pilihan memakai fieldset dan legend;
  • teks link bermakna tanpa konteks sekitarnya;
  • tabel memakai caption serta th dengan scope, atau headers untuk tabel kompleks;
  • seluruh fungsi berjalan via keyboard dan cincin fokus tetap terlihat;
  • informasi penting tak bergantung pada warna saja;
  • iframe memiliki title;
  • dokumen lolos validator W3C tanpa kesalahan.

Halaman berikut sengaja disiapkan sebagai bahan latihan: jalankan seluruh checklist terhadapnya, lalu cobakan pula walkthrough keyboard dan Lighthouse.

html halaman-uji.html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Berlangganan Buletin Toko Bunga Melati</title>
</head>
<body>
  <a href="#konten-utama">Langsung ke konten utama</a>
  <header>
    <p>Toko Bunga Melati</p>
  </header>
  <main id="konten-utama">
    <h1>Berlangganan Buletin Mingguan</h1>
    <p>Dapatkan daftar tanaman baru setiap Senin pagi.</p>
    <form action="www.example.com/berlangganan" method="post">
      <label for="email-buletin">Alamat email (wajib)</label>
      <input type="email" id="email-buletin" name="email" autocomplete="email" required>
      <button type="submit">Berlangganan</button>
    </form>
    <h2>Rekap Buletin Terakhir</h2>
    <table>
      <caption>Isi buletin pekan ini</caption>
      <thead>
        <tr>
          <th scope="col">Rubrik</th>
          <th scope="col">Ringkasan</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">Tanaman baru</th>
          <td>Monstera variegata masuk stok hari Rabu.</td>
        </tr>
        <tr>
          <th scope="row">Kelas menanam</th>
          <td>Kelas media tanam dibuka Sabtu depan.</td>
        </tr>
      </tbody>
    </table>
  </main>
  <footer>
    <p>Toko Bunga Melati, Jl. Melati No. 10</p>
  </footer>
</body>
</html>

Output yang Dihasilkan:

text 
Checklist berjalan tanpa temuan pada halaman ini:
  - skip link pertama menuju main id="konten-utama"
  - satu h1 diikuti h2 tanpa lompatan
  - form dengan label terhubung dan autocomplete="email"
  - tabel dengan caption serta th scope="col" dan scope="row"
  - header, main, dan footer lengkap sebagai landmark

Mari kita petakan beberapa poin checklist ke bagian halamannya:

  1. Baris 9 (skip link): link pertama memberi jalan pintas keyboard, sejalan dengan pola chapter Keyboard Navigation.
  2. Baris 14 dan 21 (h1 lalu h2): hierarki turun satu level tanpa lompatan, sehingga peta heading utuh.
  3. Baris 16-20 (form): label terhubung lewat for dan id, isian wajib bertanda teks, dan autocomplete="email" membantu pengisian.
  4. Baris 22-40 (tabel): caption memperkenalkan tabel, sementara scope mengikat setiap sel ke judul kolom dan barisnya.
  5. Baris 10-44 (struktur halaman): tiga landmark — header, main, footer — menyusun halaman, dan seluruh URL fiktif memakai domain example.com.

Dengan checklist ini, section Accessibility selesai: fondasi, tiap kategori elemen, dan cara mengujinya telah kita bahas. Section berikutnya, HTML dan CSS, membawa kita ke lapisan tampilan — dan di sana kita bertemu kembali topik seperti gaya fokus dan kontras warna dari sisi CSS.

Referensi resmi untuk pendalaman:

Berkas Sumber

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

halaman-uji.html

Unduh berkas
html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Berlangganan Buletin Toko Bunga Melati</title>
</head>
<body>
  <a href="#konten-utama">Langsung ke konten utama</a>
  <header>
    <p>Toko Bunga Melati</p>
  </header>
  <main id="konten-utama">
    <h1>Berlangganan Buletin Mingguan</h1>
    <p>Dapatkan daftar tanaman baru setiap Senin pagi.</p>
    <form action="www.example.com/berlangganan" method="post">
      <label for="email-buletin">Alamat email (wajib)</label>
      <input type="email" id="email-buletin" name="email" autocomplete="email" required>
      <button type="submit">Berlangganan</button>
    </form>
    <h2>Rekap Buletin Terakhir</h2>
    <table>
      <caption>Isi buletin pekan ini</caption>
      <thead>
        <tr>
          <th scope="col">Rubrik</th>
          <th scope="col">Ringkasan</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">Tanaman baru</th>
          <td>Monstera variegata masuk stok hari Rabu.</td>
        </tr>
        <tr>
          <th scope="row">Kelas menanam</th>
          <td>Kelas media tanam dibuka Sabtu depan.</td>
        </tr>
      </tbody>
    </table>
  </main>
  <footer>
    <p>Toko Bunga Melati, Jl. Melati No. 10</p>
  </footer>
</body>
</html>