Accessibility: Kapan Digital Tidak Boleh Ada yang Tertinggal

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect." — Tim Berners-Lee, W3C Director

Mengapa Kamu Perlu Baca Artikel Ini?

Overview: Apa Itu Accessibility (A11y)?

Accessibility (A11y) = praktik membuat produk digital bisa digunakan oleh semua orang, termasuk penyandang disabilitas.

Dua Standar yang Harus Kamu Tahu

Prinsip WCAG: POUR

graph TD
    A[WCAG POUR] --> B[Perceivable]
    A --> C[Operable]
    A --> D[Understandable]
    A --> E[Robust]

    B --> B1[Alt text]
    B --> B2[Caption/Transkrip]
    B --> B3[Kontras warna 4.5:1]

    C --> C1[Keyboard navigation]
    C --> C2[Skip links]
    C --> C3[No keyboard trap]

    D --> D1[Language jelas]
    D --> D2[Navigasi konsisten]
    D --> D3[Error suggestions]

    E --> E1[Valid HTML]
    E --> E2[ARIA tepat]
    E --> E3[Screen reader compatible]

Spektrum Disabilitas yang Harus Ditampung

Level WCAG: Mana yang Harus Kamu Targetkan?

Risiko Jika Kamu Skip Accessibility

WCAG 2.2: 9 Hal Baru yang Perlu Kamu Tahu

Versi terbaru (Oktober 2023) menambahkan 9 Success Criteria baru:

Kerangka Hukum: ADA dan Section 508

Americans with Disabilities Act (ADA)

Sejak Facebook v. Nizzud (2019) dan Domino's Pizza v. Laredo (2019), courts secara konsisten memutuskan ADA berlaku untuk websites.

Section 508

Untuk entitas federal AS, semua EICT harus memenuhi standar Access Board.

Implementasi Praktis: Dari Teori ke Kode

1. Semantic HTML: Fondasi yang Tidak Boleh Di-skip

Gunakan element HTML sesuai fungsinya:

<!-- ❌ Bad: Tidak semantic -->
<div class="header">
  <div class="nav">
    <div class="logo">Brand</div>
  </div>
</div>

<!-- ✅ Good: Semantic dengan landmarks -->
<header>
  <nav aria-label="Main navigation">
    <a href="/" aria-label="Home">Brand</a>
  </nav>
</header>
<main id="main-content">
  <article>...</article>
</main>
<footer>...</footer>

2. Alt Text: Deskripsi untuk yang Tidak Bisa Melihat

3. Keyboard Navigation: Fokus dan Tab Order

/* ✅ Good: Focus indicator yang jelas */
:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

/* ❌ Bad: outline: none tanpa alternatif */
button:focus {
  outline: none;
}

4. Skip Links: Navigasi Efisien untuk Keyboard Users

<!-- Letakkan di first element body -->
<a href="#main-content" class="skip-link">
  Skip to main content
</a>

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #005fcc;
  color: white;
  padding: 8px 16px;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

5. Color Contrast: Bukan Sekadar Estetika

:root {
  /* ✅ Good: Contrast sufficient */
  --text-primary: #1a1a2e;   /* 15.5:1 against white */
  --text-secondary: #4a4a68; /* 7.2:1 against white */

  /* ❌ Bad: Contrast insufficient */
  --text-muted: #888888; /* 2.8:1 against white */
}

6. ARIA: Gunakan Dengan Bijak

// ❌ Bad: ARIA tidak perlu
<div role="button" tabindex="0" onClick={handleClick}>
  Submit
</div>

// ✅ Good: HTML native
<button type="submit">Submit</button>

// ❌ Bad: Label tidak terhubung
<input type="text" placeholder="Email" />

// ✅ Good: Explicit association
<label htmlFor="email">Email</label>
<input id="email" type="email" />

7. Forms: Error Handling yang Informatif

<label htmlFor="password">Password</label>
<input
  id="password"
  type="password"
  aria-describedby="password-requirements password-error"
  aria-invalid="true"
/>
<p id="password-requirements">
  Minimal 8 karakter, 1 huruf besar, 1 angka
</p>
<p id="password-error" role="alert">
  Password harus mengandung minimal 8 karakter
</p>

Tools: Audit, Testing, Monitoring

Automated Testing (Cepat, Scalable)

npx lighthouse https://example.com --only-categories=accessibility

npm install @axe-core/react

npx pa11y https://example.com

Screen Reader Testing: Ground Truth

Contrast & Visual Tools

Manual Testing Checklist

• Tab navigation tanpa mouse — semua fungsi accessible?
• Focus state jelas — terlihat?
• Form bisa dipakai keyboard — semua inputs reachable?
• Tidak ada "trap" — modal/dropdown bisa di-escape?

Testing Checklist: Sebelum Launch

Healthcare Apps: Checklist Tambahan

Action Plan: Dari Mana Mulai?

First-Principles: Accessibility ≈ API Contract untuk Manusia

Engineer yang paham ini biasanya:

• Code lebih semantic
• UX lebih robust
• Bug lebih sedikit

Accessibility Tools = Observability Layer untuk UX

Tanpa ini:

• UI kelihatan "normal"
• Tapi broken untuk sebagian user

Dengan ini:

• UX jadi measurable (seperti latency / error rate)

Kesimpulan

Accessibility bukan feature yang ditambahkan di akhir — ia adalah fundamental architecture principle.

Accessibility yang baik = good design. Ketika kita membangun untuk edge cases, seluruh user experience meningkat.

Digital yang truly universal = digital yang bekerja untuk semua orang, tanpa terkecuali.

Referensi