Aksesibilitas pada Aplikasi Single Page (SPA: React & Vue)

Aksesibilitas pada Aplikasi Single Page (SPA: React & Vue)

Arsitektur Single Page Application (SPA) seperti React, Vue, dan Angular telah merevolusi kecepatan web. Alih-alih memuat ulang seluruh halaman HTML dari server setiap kali tautan diklik, SPA hanya mengganti komponen DOM secara asinkron di latar belakang.

Namun, kecepatan ini melahirkan masalah aksesibilitas yang sangat fatal: Ketika halaman tidak dimuat ulang (refresh), Screen Reader tidak tahu bahwa rute telah berubah. Mengadaptasi analisis dari Practical Web Accessibility (Ashley Firth), artikel ini akan membedah cara menambal celah aksesibilitas terbesar dalam ekosistem SPA modern.

---

1. Sindrom Keheningan Rute (The Silent Route Syndrome)

Dalam arsitektur Multi-Page Application (MPA) klasik (seperti WordPress), mengeklik tautan "Tentang Kami" akan memuat ulang halaman secara penuh. Browser akan memindahkan fokus kursor ke bagian paling atas halaman baru, dan Screen Reader akan secara otomatis membacakan tag <title> dokumen: "Tentang Kami - Perusahaan X".

Dalam arsitektur SPA, mengeklik "Tentang Kami" hanya mengganti isi elemen <main>. Apa yang terjadi pada pengguna tunanetra? Mereka mengklik tautan, konten di layar berubah seketika, tetapi Screen Reader tetap diam sepenuhnya. Fokus kursor mereka masih tertinggal di tautan navigasi lama. Pengguna akan mengira tombol tersebut rusak atau situs web mengalami hang.

---

2. Mengembalikan Siklus Hidup Fokus (Focus Management)

Untuk memperbaiki ini, Anda harus mereplikasi perilaku browser klasik secara manual menggunakan JavaScript di dalam pustaka routing Anda (seperti react-router-dom atau vue-router).

Setiap kali rute berubah (URL berubah), Anda wajib:

1. Menangkap event perubahan rute.
2. Memindahkan fokus kursor secara eksplisit menggunakan element.focus().

Ke mana fokus harus dipindahkan? Praktik terbaik industri adalah memindahkan fokus ke elemen wrapper <main> atau langsung ke tag <h1> halaman baru.

Karena tag <h1> biasanya tidak bisa menerima fokus (bukan elemen interaktif), Anda harus menambahkan tabindex="-1" pada elemen tersebut agar ia bisa menerima fokus melalui JavaScript (tetapi tetap tidak bisa diakses melalui tombol Tab).

// Contoh React: Menggeser fokus saat rute berubah
import { useEffect, useRef } from 'react';
import { useLocation } from 'react-router-dom';

const PageWrapper = ({ children, title }) => {
  const headingRef = useRef(null);
  const location = useLocation();

  useEffect(() => {
    // Memindahkan fokus setiap kali path berubah
    if (headingRef.current) {
      headingRef.current.focus();
    }
  }, [location.pathname]);

  return (
    <main>
      <h1 ref={headingRef} tabIndex="-1">{title}</h1>
      {children}
    </main>
  );
};

Dengan kode di atas, setiap kali pengguna berpindah halaman, Screen Reader akan langsung membacakan "Tentang Kami, Heading level 1", memberi tahu pengguna bahwa mereka telah sukses berpindah tempat.

---

3. Menangani Pembaruan Konten Asinkron (Live Regions)

Selain perpindahan halaman, SPA sering memperbarui sebagian kecil antarmuka secara real-time. Misalnya:

• Munculnya pesan toast "Data berhasil disimpan".
• Angka notifikasi di ikon lonceng berubah dari 3 menjadi 4.
• Hasil pencarian yang muncul di bawah search bar saat pengguna mengetik.

Untuk kejadian asinkron ini, Anda harus menggunakan atribut aria-live. Atribut ini mendengarkan perubahan DOM di dalam elemen tersebut dan langsung mengumumkannya ke Screen Reader.

• aria-live="polite": Screen Reader akan menunggu sampai pengguna selesai membaca kalimat saat ini, lalu membacakan pembaruan tersebut. Gunakan untuk sebagian besar notifikasi non-kritis (seperti hasil pencarian).
• aria-live="assertive": Screen Reader akan memotong paksa apa pun yang sedang dibacanya dan segera mengumumkan pembaruan. HANYA gunakan untuk peringatan darurat (seperti "Sesi bank Anda akan berakhir dalam 10 detik").

---

4. Announcer Component (Komponen Pengumum Terpusat)

Banyak kerangka kerja SPA modern memiliki plugin Announcer (Pengumum) bawaan atau pustaka pihak ketiga (seperti react-a11y-announcer).

Ini adalah elemen <div aria-live="polite"> yang disembunyikan secara visual di sudut DOM, yang bertugas khusus menelan string teks dari berbagai komponen aplikasi dan mengumumkannya ke Screen Reader. Pustaka ini secara signifikan mengurangi kerumitan mengelola aria-live di setiap komponen atomik.

---

5. Kesimpulan

Membangun Single Page Application yang cepat secara teknis sangatlah mudah dengan alat modern. Namun, membangun SPA yang inklusif membutuhkan orkestrasi yang matang. Dalam SPA, Front-End Developer bertanggung jawab penuh atas manajemen fokus kursor—tugas yang sebelumnya ditangani secara gratis oleh browser. Dengan menguasai teknik tabindex="-1" dan aria-live, Anda memastikan bahwa kecepatan aplikasi Anda tidak pernah meninggalkan siapa pun dalam keheningan.

---

Referensi

Analisis mengenai kerentanan routing sisi klien (SPA), manajemen fokus kursor DOM, dan teknik implementasi region langsung (live regions) diekstrak dari panduan pengembangan aplikasi dinamis di dalam Practical Web Accessibility oleh Ashley Firth. Teknik integrasi React di atas merujuk pada standar industri rekayasa perangkat lunak modern untuk kepatuhan operasional WCAG.