[Accessibility] Tingkatkan Aksesibilitas (WCAG 2.1 AA)

[Ardelyo]

🎯 Deskripsi

Meskipun dokumen arsitektur menyebutkan dukungan WCAG 2.1 Level AA, belum ada implementasi konkret untuk aksesibilitas.

📍 Aspek yang Perlu Ditingkatkan

1. Skip Navigation Link

Tidak ada skip link untuk pengguna keyboard/screen reader.

2. Focus Management

Saat modal/dialog dibuka (seperti CreationStudio), fokus tidak dipindahkan dengan benar.

3. ARIA Labels

Beberapa elemen interaktif tidak memiliki label yang memadai:

• Icon buttons tanpa aria-label
• Gambar tanpa alt text yang deskriptif

4. Color Contrast

Desain "Luminous Dark" dengan opacity rendah perlu divalidasi untuk kontras warna.

5. Keyboard Navigation

• Tab order perlu diverifikasi
• Escape key untuk menutup modal

✅ Solusi yang Diharapkan

1. Tambah Skip Link

// Di awal App.tsx
<a href="#main-content" className="sr-only focus:not-sr-only">
  Langsung ke konten utama
</a>

2. Focus Trap untuk Modal

// Gunakan library seperti @radix-ui/react-dialog
// atau implementasi manual focus trap

3. ARIA Labels

// Sebelum
<button onClick={onClose}><X /></button>

// Sesudah
<button onClick={onClose} aria-label="Tutup dialog"><X /></button>

4. Audit dengan Tools

• Run axe DevTools
• Test dengan screen reader (NVDA/VoiceOver)
• Validasi dengan WAVE

📋 Kriteria Selesai

• Skip link tersedia
• Focus management di modal benar
• Semua icon button punya aria-label
• Color contrast lolos WCAG AA
• Navigasi keyboard berfungsi penuh
• Audit aksesibilitas score > 90