Dasar Aksesibilitas Website

Aksesibilitas berarti mengurangi hambatan agar lebih banyak orang dapat memahami dan mengoperasikan website. Fondasinya bukan plugin atau skor otomatis, melainkan HTML yang tepat, urutan yang logis, informasi yang tidak bergantung pada satu indra, dan pengujian dengan cara interaksi berbeda.

Mulai dari alur pengguna

Ambil satu tugas nyata: pengguna membuka menu, membaca artikel, lalu mengirim formulir kontak. Tuliskan langkahnya dan uji tanpa mouse. Audit berbasis tugas lebih mudah ditindaklanjuti daripada daftar ratusan kriteria tanpa konteks.

1. Fokus masuk ke tautan “Lewati ke konten”.
2. Pengguna dapat membuka dan menutup menu.
3. Urutan fokus mengikuti urutan visual yang masuk akal.
4. Semua field memiliki label dan instruksi.
5. Error menjelaskan masalah serta cara memperbaikinya.
6. Setelah submit, hasilnya diumumkan tanpa memindahkan fokus secara membingungkan.

Gunakan semantik sebelum ARIA

Tombol native sudah dapat diaktifkan dengan Enter dan Space. Tautan native dikenali sebagai tujuan navigasi. Label native menghubungkan nama field dengan input. Mengganti elemen tersebut dengan div berarti kita harus membangun ulang seluruh perilaku secara manual.

<button type="button" aria-expanded="false"
        aria-controls="mobile-menu">
  Menu
</button>

<nav id="mobile-menu" aria-label="Navigasi mobile" hidden>
  <a href="/">Beranda</a>
  <a href="/blog.html">Artikel</a>
</nav>

ARIA menjelaskan hubungan dan keadaan yang belum diwakili markup. JavaScript harus menyinkronkan hidden dan aria-expanded. ARIA yang salah dapat memberi informasi lebih buruk daripada tidak ada ARIA.

Pastikan keyboard dapat mencapai dan meninggalkan komponen

Gunakan Tab untuk maju, Shift+Tab untuk mundur, Enter dan Space untuk aktivasi, serta Escape untuk menutup komponen sementara seperti dialog. Hindari tabindex positif karena ia menciptakan urutan fokus buatan yang sulit dipelihara.

:focus-visible {
  outline: 3px solid #745cff;
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

Jangan menghapus outline tanpa pengganti yang setara. Indikator fokus harus terlihat pada latar terang, gelap, gambar, dan tombol berwarna.

Buat form yang menjelaskan dirinya sendiri

<label for="email">Email</label>
<p id="email-hint">Kami menggunakan email untuk membalas pesan.</p>
<input id="email" name="email" type="email"
       autocomplete="email" required
       aria-describedby="email-hint email-error">
<p id="email-error" class="field-error"></p>

Placeholder bukan pengganti label karena menghilang ketika pengguna mengetik dan sering memiliki kontras rendah. Instruksi harus tersedia sebelum error terjadi. Gunakan atribut autocomplete yang tepat agar browser dan teknologi bantu dapat membantu pengisian.

Tulis pesan error yang dapat diperbaiki

“Input tidak valid” tidak memberi langkah berikutnya. Sebut field, masalah, dan format yang diharapkan. Setelah submit gagal, arahkan fokus ke ringkasan error atau field pertama yang salah, tetapi jangan memindahkan fokus pada setiap karakter yang diketik.

function showEmailError(input, message) {
  const error = document.querySelector("#email-error");
  input.setAttribute("aria-invalid", "true");
  error.textContent = message;
}

showEmailError(
  emailInput,
  "Masukkan alamat lengkap, misalnya nama@example.com."
);

Ketika nilai sudah benar, hapus aria-invalid dan kosongkan pesan. Untuk status submit asinkron, live region yang sopan dapat mengumumkan “sedang mengirim”, “berhasil”, atau “gagal”.

Tulis alt berdasarkan fungsi gambar

Jenis gambar	Pendekatan
Dekoratif	alt=""
Menyampaikan informasi	Jelaskan informasi yang relevan dengan konteks
Tautan berupa logo	Nama tujuan tautan, misalnya “NgodingSantai, beranda”
Grafik kompleks	Ringkasan pada alt dan penjelasan data di dekat gambar

Jangan mengawali alt dengan “gambar dari” kecuali jenis medianya penting. Pembaca layar sudah mengetahui bahwa elemen tersebut gambar. Jangan mengulang caption atau paragraf yang sama persis jika tidak menambah informasi.

Jangan menyampaikan informasi dengan warna saja

Field error dapat menggunakan border merah, tetapi juga membutuhkan ikon, teks, atau atribut yang menjelaskan masalah. Link di dalam paragraf sebaiknya memiliki underline atau pembeda selain warna. Grafik perlu pola, label, atau bentuk selain perbedaan hue.

Periksa kontras seluruh state: default, hover, focus, active, disabled, placeholder, dan tema gelap. Tombol dengan warna aksen terang mungkin membutuhkan teks gelap, sedangkan aksen lebih gelap membutuhkan teks putih.

Zoom, reflow, dan target sentuh

Uji halaman pada zoom 200% dan viewport sempit. Konten harus reflow tanpa scroll dua dimensi, kecuali komponen yang memang membutuhkan seperti tabel kode. Jangan menonaktifkan zoom melalui meta viewport.

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Hindari maximum-scale=1 atau user-scalable=no -->

Beri ukuran dan jarak yang cukup pada tombol, terutama kontrol ikon. Target visual dapat lebih kecil, tetapi area kliknya perlu nyaman dan tidak terlalu dekat dengan target lain.

Hormati preferensi gerakan

Animasi parallax, smooth scrolling panjang, dan perubahan skala dapat mengganggu sebagian pengguna. Gunakan prefers-reduced-motion untuk mengurangi efek non-esensial, bukan sekadar mempercepatnya sedikit.

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card,
  .modal {
    animation: none;
    transition: none;
  }
}

Alat otomatis dan pengujian manual

Lighthouse, axe, dan pemeriksaan browser dapat menemukan label hilang, kontras tertentu, atau atribut tidak valid. Alat tidak dapat memastikan apakah alt berguna, urutan bacaan masuk akal, atau pesan error mudah dipahami.

• Jalankan audit otomatis sebagai penyaring awal.
• Uji keyboard dari awal sampai akhir tugas.
• Periksa accessibility tree dan accessible name.
• Uji satu pembaca layar yang tersedia pada sistem.
• Uji zoom, mode kontras tinggi jika tersedia, dan tema gelap.
• Minta pengguna lain mencoba tanpa diberi petunjuk langkah.

Prioritas perbaikan

1. Hambatan yang membuat tugas mustahil: kontrol tidak dapat diakses, dialog menjebak fokus, form tidak bisa dikirim.
2. Informasi yang hilang: label, nama kontrol, heading, alt yang penting.
3. Hambatan visual: kontras, reflow, fokus tidak terlihat.
4. Kenyamanan: ukuran target, pesan status, motion, konsistensi.
5. Regresi: tambahkan pemeriksaan otomatis dan checklist review.

Referensi resmi

• W3C WAI: Introduction to Web Accessibility
• W3C WAI: Labeling Controls
• W3C: WCAG 2.2 Quick Reference
• MDN: Accessibility