Accessibility (a11y) - Beranda

Accessibility (disingkat a11y) adalah praktik membuat web yang dapat diakses oleh semua orang, termasuk pengguna dengan disabilitas visual, motorik, kognitif, atau auditori.

Hal yang akan dipelajari:

Bagian 1

1. Pengenalan Accessibility
2. HTML Semantik
3. ARIA
4. Keyboard Navigation
5. Forms Accessibility
6. Color Contrast

HTML Semantik

Gunakan elemen HTML sesuai maknanya, bukan hanya untuk styling.

<!-- Buruk -->
<div class="button" onclick="submit()">Kirim</div>

<!-- Baik -->
<button type="submit">Kirim</button>

Elemen penting: <header>, <nav>, <main>, <article>, <section>, <footer>, <aside>.

ARIA Attributes

Gunakan ARIA hanya ketika HTML semantik tidak cukup.

<button aria-expanded="false" aria-controls="menu-1">
  Menu
</button>
<div id="menu-1" hidden>...</div>

<div role="alert" aria-live="assertive">
  Form berhasil dikirim
</div>

Atribut penting: aria-label, aria-labelledby, aria-describedby, aria-hidden, role.

Keyboard Navigation

Semua interaksi harus dapat diakses via keyboard.

• Tab order logis dan dapat diprediksi
• Fokus visual yang jelas: :focus-visible { outline: 2px solid blue; }
• Trap fokus untuk modal: pengguna tidak keluar dari dialog sebelum menutupnya
• Escape key untuk menutup modal atau menu

document.addEventListener("keydown", (e) => {
  if (e.key === "Escape") {
    closeModal();
  }
});

Form Accessibility

<label for="email">Email</label>
<input id="email" type="email" aria-required="true" aria-invalid="false" />
<span id="email-error" role="alert"></span>

• Setiap input harus punya <label> yang terhubung via for
• Error message dihubungkan dengan aria-describedby
• Gunakan aria-invalid untuk state error

Color Contrast

Rasio kontras minimum:

• Normal text: 4.5:1
• Large text (18pt+ atau 14pt bold): 3:1

Tools: WebAIM Contrast Checker, axe DevTools, Lighthouse.

Screen Reader Testing

• NVDA (Windows, gratis)
• VoiceOver (macOS, built-in)
• JAWS (Windows, komersial)

Uji dengan monitor mati: apakah semua informasi masih tersampaikan?

Checklist

• Semua gambar informatif punya alt text
• Video punya caption dan transcript
• Warna bukan satu-satunya cara menyampaikan informasi
• Skip link ke konten utama
• Fokus tidak hilang atau terjebak
• Konten dapat di-zoom 200% tanpa hilang