31. Accessibility (A11y)

Aksesibilitas web (web accessibility atau sering disingkat A11y — huruf 'A' diikuti 11 huruf lainnya dan diakhiri 'y') adalah praktik membangun aplikasi web agar dapat digunakan oleh semua orang, termasuk mereka yang memiliki disabilitas sensorik, motorik, kognitif, atau visual.

Mengembangkan aplikasi yang aksesibel bukan sekadar memenuhi kepatuhan hukum (seperti standar WCAG), melainkan juga meningkatkan kualitas User Experience (UX) secara keseluruhan, memperluas jangkauan pengguna, dan memberikan dampak positif pada optimasi mesin pencari (SEO).

A. Alur dan Pilar Utama Aksesibilitas

Bagan di bawah ini menggambarkan pilar-pilar utama yang saling terhubung dalam membangun aplikasi web yang aksesibel:

graph TD
    A[Aplikasi Web Aksesibel] --> B[HTML Semantik]
    A --> C[Navigasi Keyboard]
    A --> D[Atribut ARIA]
    A --> E[Desain Visual & Kontras]

    B --> B1[Landmarks: header, nav, main, footer]
    B --> B2[Elemen Native: button, a, input, select]

    C --> C1[Indikator Fokus: focus-visible]
    C --> C2[Urutan Tab yang Logis]
    C --> C3[Focus Trap pada Dialog / Modal]

    D --> D1[aria-label & aria-labelledby]
    D --> D2[aria-expanded & aria-hidden]
    D --> D3[aria-live untuk Konten Dinamis]

    E --> E1[Rasio Kontras WCAG AA 4.5:1]
    E --> E2[Indikator Non-Warna untuk Informasi]

B. HTML Semantik (Pondasi Utama)

Menggunakan elemen HTML semantik adalah langkah pertama dan terpenting dalam A11y. Elemen semantik secara inheren membawa peran (role), status (state), dan kemampuan navigasi keyboard bawaan yang dipahami oleh pembaca layar (screen reader).

1. Perbandingan HTML Semantik vs Non-Semantik

2. Contoh Penggunaan Landmarks dan Struktur Halaman

<!-- Bagian atas halaman -->
<header>
  <h1>Nama Portal Dokumentasi</h1>
  <!-- Menu Navigasi -->
  <nav aria-label="Navigasi Utama">
    <ul>
      <li><a href="/dashboard">Dashboard</a></li>
      <li><a href="/settings">Pengaturan</a></li>
    </ul>
  </nav>
</header>

<!-- Konten Utama Aplikasi -->
<main id="main-content">
  <article>
    <h2>Judul Artikel Utama</h2>
    <p>Isi artikel dokumentasi di sini...</p>
  </article>
</main>

<!-- Kaki Halaman -->
<footer>
  <p>&copy; 2026 Perusahaan Anda. Seluruh hak cipta dilindungi.</p>
</footer>

[!TIP] Gunakan tautan pintas Skip to Content di bagian paling atas halaman untuk membantu pengguna keyboard melewati navigasi berulang (seperti header/menu samping) dan langsung melompat ke konten utama:

<a href="#main-content" className="sr-only focus:not-sr-only">
  Lompati ke konten utama
</a>

C. Navigasi Keyboard & Manajemen Fokus

Banyak pengguna penyandang disabilitas fisik bergantung penuh pada keyboard untuk menjelajahi web. Aplikasi yang baik harus dapat digunakan tanpa mouse sama sekali.

1. Aturan Emas Navigasi Keyboard

1. Semua Elemen Interaktif Harus Dapat Difokuskan: Elemen seperti tombol, tautan, input form, dan tab panel harus masuk ke dalam urutan tab keyboard.
2. Gunakan Indikator Fokus yang Jelas: Jangan pernah menghapus outline fokus (outline: none atau outline: 0) tanpa memberikan gaya alternatif. Pengguna keyboard mengandalkan outline ini untuk melihat di mana posisi mereka saat ini.
3. Gunakan :focus-visible: Gaya ini hanya akan muncul saat pengguna berinteraksi menggunakan keyboard (bukan mouse), menjaga estetika desain sekaligus memelihara aksesibilitas.

/* Menghias indikator fokus hanya saat menggunakan keyboard */
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 3px solid #3b82f6;
  outline-offset: 2px;
}

2. Urutan Tab (tabindex)

• tabindex="0": Memasukkan elemen non-interaktif secara default (seperti <div> khusus atau kartu informasi) ke dalam urutan tab logis.
• tabindex="-1": Mengeluarkan elemen dari urutan tab keyboard, tetapi tetap memungkinkan elemen tersebut difokuskan secara terprogram melalui JavaScript (misalnya, memfokuskan judul modal saat terbuka).
• Hindari nilai positif (tabindex="1", tabindex="2", dll.) karena akan mengacaukan alur pembacaan alami halaman web.

D. Atribut ARIA (Accessible Rich Internet Applications)

ARIA adalah spesifikasi dari W3C yang menambahkan atribut HTML khusus untuk membantu pembaca layar mengenali komponen UI yang kompleks (seperti tab, modal, accordion, atau autocomplete).

[!IMPORTANT] Aturan Pertama ARIA: Jika Anda dapat menggunakan elemen HTML bawaan (native) yang memiliki semantik dan perilaku yang sama, gunakan elemen native tersebut daripada meniru perilakunya dengan ARIA.

1. Atribut ARIA yang Sering Digunakan

E. Aksesibilitas Form

Formulir adalah gerbang interaksi penting dalam aplikasi. Kesalahan aksesibilitas pada formulir dapat mencegah pengguna menyelesaikan proses transaksi atau registrasi.

1. Selalu Hubungkan <label> dengan <input>

Gunakan atribut htmlFor (atau for pada HTML murni) untuk menghubungkan label dengan input. Hal ini membantu pembaca layar membacakan label yang benar saat input mendapat fokus, sekaligus memperbesar area klik pengguna.

// ❌ HINDARI (Pembaca layar tidak mengetahui label ini milik input yang mana):
<div>
  <span>Username:</span>
  <input type="text" name="username" />
</div>

//  SELALU GUNAKAN:
<div>
  <label htmlFor="username-field">Username:</label>
  <input id="username-field" type="text" name="username" />
</div>

2. Penanganan Pesan Kesalahan (Validation Error)

Gunakan aria-invalid untuk menandai input yang bermasalah, dan hubungkan deskripsi kesalahan menggunakan aria-describedby:

const FormInputError = () => {
  const isError = true;

  return (
    <div className="flex flex-col gap-1">
      <label htmlFor="email">Alamat Email</label>
      <input
        id="email"
        type="email"
        aria-invalid={isError ? "true" : "false"}
        aria-describedby="email-error"
        className="border border-red-500"
      />
      {isError && (
        <span id="email-error" className="text-red-500 text-sm">
          Format email tidak valid. Gunakan format nama@domain.com
        </span>
      )}
    </div>
  );
};

F. Kontras Warna & Desain Visual

Desain visual yang indah harus dapat dilihat dengan nyaman oleh semua orang, termasuk mereka yang memiliki gangguan penglihatan seperti rabun atau buta warna.

1. Rasio Kontras Teks (WCAG AA):
   • Teks biasa (kurang dari 18pt atau 14pt tebal): Minimal 4.5:1 terhadap latar belakang.
   • Teks besar (18pt atau lebih besar, atau 14pt tebal atau lebih besar): Minimal 3:1.
   • Elemen visual non-teks (seperti batas input atau ikon penting): Minimal 3:1.
2. Jangan Hanya Mengandalkan Warna untuk Informasi: Jangan menyampaikan status penting (berhasil, gagal, peringatan) hanya lewat perubahan warna. Tambahkan teks deskriptif atau ikon yang memiliki alternatif tekstual.

// ❌ HINDARI (Hanya mengandalkan warna hijau/merah):
<span className="text-red-500">Form bermasalah.</span>

//  SELALU GUNAKAN (Menambahkan ikon dan teks penjelasan yang jelas):
<div className="flex items-center gap-2 text-red-700">
  <span aria-hidden="true">⚠️</span>
  <span>Gagal menyimpan data: Pastikan koneksi internet Anda stabil.</span>
</div>

G. Media & Alternatif Teks (Alt Text)

Semua gambar non-dekoratif wajib memiliki atribut alt yang menjelaskan isi dari gambar tersebut.

• Gambar Informatif: Tulis deskripsi yang ringkas dan menjelaskan konteks gambar.

  <img src="/chart.png" alt="Grafik pertumbuhan pengguna aktif bulanan naik 20% pada Q1 2026" />
  

• Gambar Dekoratif: Gunakan string kosong alt="" agar pembaca layar mengabaikan gambar tersebut. Jangan abaikan atribut alt sepenuhnya, karena pembaca layar akan membacakan nama file gambar (yang biasanya tidak ramah pengguna seperti /img-98319-final.jpg).

  <img src="/divider.png" alt="" />
  

H. Contoh Komponen React Aksesibel (Interactive Modal Dialog)

Di bawah ini adalah contoh implementasi Modal Component dalam React yang menerapkan Focus Trap, penanganan tombol keyboard (Escape untuk menutup), struktur semantik ARIA, serta pengembalian fokus (focus restoration):

import React, { useEffect, useRef } from "react";

interface ModalProps {
  isOpen: boolean;
  onClose: () => void;
  title: string;
  children: React.ReactNode;
}

export const AccessibleModal = ({
  isOpen,
  onClose,
  title,
  children,
}: ModalProps) => {
  const modalRef = useRef<HTMLDivElement>(null);
  const closeButtonRef = useRef<HTMLButtonElement>(null);
  const previousFocusRef = useRef<HTMLElement | null>(null);

  // Mengatur Keyboard Handler dan Focus Management
  useEffect(() => {
    if (isOpen) {
      // Simpan elemen yang aktif sebelum modal dibuka
      previousFocusRef.current = document.activeElement as HTMLElement;
      
      // Berikan fokus ke tombol tutup saat modal terbuka
      closeButtonRef.current?.focus();
      
      // Kunci scroll halaman belakang
      document.body.style.overflow = "hidden";
    }

    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === "Escape") {
        onClose();
      }
    };

    if (isOpen) {
      document.addEventListener("keydown", handleKeyDown);
    }

    return () => {
      document.removeEventListener("keydown", handleKeyDown);
      document.body.style.overflow = "unset";
      
      // Kembalikan fokus ke elemen sebelumnya saat modal ditutup
      previousFocusRef.current?.focus();
    };
  }, [isOpen, onClose]);

  // Implementasi Focus Trap (Mencegah fokus keluar dari Modal saat menekan Tab)
  const handleTabTrap = (e: React.KeyboardEvent) => {
    if (e.key !== "Tab") return;
    if (!modalRef.current) return;

    // Kumpulkan seluruh elemen yang dapat difokuskan di dalam modal
    const focusableSelector =
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
    const focusableElements = modalRef.current.querySelectorAll(focusableSelector);
    
    if (focusableElements.length === 0) return;

    const firstElement = focusableElements[0] as HTMLElement;
    const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement;

    if (e.shiftKey) {
      // Jika Shift + Tab dan fokus berada di elemen pertama, pindahkan ke elemen terakhir
      if (document.activeElement === firstElement) {
        lastElement.focus();
        e.preventDefault();
      }
    } else {
      // Jika Tab biasa dan fokus berada di elemen terakhir, pindahkan ke elemen pertama
      if (document.activeElement === lastElement) {
        firstElement.focus();
        e.preventDefault();
      }
    }
  };

  if (!isOpen) return null;

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
      role="dialog"
      aria-modal="true"
      aria-labelledby="modal-title"
      onKeyDown={handleTabTrap}
    >
      {/* Backdrop Klik untuk Menutup */}
      <div 
        className="absolute inset-0" 
        onClick={onClose} 
        aria-hidden="true" 
      />

      {/* Konten Utama Dialog */}
      <div
        ref={modalRef}
        className="relative w-full max-w-md p-6 bg-white rounded-lg shadow-xl dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800"
      >
        <div className="flex items-center justify-between mb-4">
          <h2 
            id="modal-title" 
            className="text-lg font-bold text-zinc-900 dark:text-white"
          >
            {title}
          </h2>
          <button
            ref={closeButtonRef}
            onClick={onClose}
            aria-label="Tutup dialog"
            className="p-1 rounded-md text-zinc-500 hover:bg-zinc-100 dark:hover:bg-zinc-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-500"
          >
            ✕
          </button>
        </div>
        
        <div className="text-zinc-600 dark:text-zinc-300">
          {children}
        </div>
      </div>
    </div>
  );
};

I. Perkakas & Pengujian Aksesibilitas (Testing Tools)

Menjaga aksesibilitas memerlukan pengujian berkelanjutan. Berikut adalah perkakas yang direkomendasikan untuk mendeteksi masalah aksesibilitas sejak dini:

1. Pengujian Otomatis saat Pembuatan Kode (Linting)

Gunakan plugin ESLint eslint-plugin-jsx-a11y untuk menangkap kesalahan penulisan markup React secara real-time di editor Anda:

npm install eslint-plugin-jsx-a11y --save-dev

2. Alat Audit Browser (Automated Audits)

• Lighthouse: Terintegrasi langsung di Chrome DevTools untuk memberikan skor aksesibilitas dasar.
• Axe DevTools: Ekstensi browser yang dikembangkan oleh Deque Systems, sangat akurat untuk menemukan dan memandu perbaikan masalah aksesibilitas.

3. Pengujian Manual (Manual Verification)

• Navigasi Keyboard: Coba matikan mouse Anda dan jelajahi seluruh fitur aplikasi hanya dengan tombol Tab, Shift + Tab, Space, Enter, dan tombol panah.
• Pembaca Layar (Screen Readers):
  • VoiceOver (bawaan macOS / iOS).
  • NVDA (gratis, populer di Windows).
  • JAWS (standar industri Windows).

J. Referensi Tambahan

• MDN Web Docs - Accessibility: Panduan dasar terlengkap mengenai aksesibilitas web.
• W3C Web Accessibility Initiative (WAI): Standar resmi internasional untuk aksesibilitas web.
• WebAIM (Web Accessibility in Mind): Komunitas dan artikel praktis tentang standar kontras warna, keyboard, dan pengujian pembaca layar.
• A11y Project: Repositori checklist aksesibilitas yang sangat ramah pemula dan praktis.