|
|
# Accessibility |
|
|
## Yang Sudah Ada |
|
|
- `aria-label` pada sidebar, bottom nav, tombol icon |
|
|
- `aria-current="page"` pada link nav aktif |
|
|
- `aria-expanded` pada grup menu collapsible |
|
|
- `aria-modal="true"` pada sheet & dialog |
|
|
- `aria-labelledby` / `aria-describedby` pada dialog |
|
|
- `aria-pressed` pada tombol theme |
|
|
- `aria-hidden` pada elemen dekoratif & overlay tersembunyi |
|
|
- `role="status"`, `role="alertdialog"`, `role="dialog"`, `role="group"` |
|
|
- Label eksplisit pada input login (`for` + `id`) |
|
|
- Focus ring cyan pada input (`focus:ring-2`) |
|
|
- `color-scheme` CSS mengikuti tema |
|
|
- Keyboard: dialog OK button auto-focus |
|
|
|
|
|
## Gap vs Enterprise (`16-uiux-enterprise.mdc`) |
|
|
| Aspek | Status | |
|
|
|-------|--------| |
|
|
| Responsive | ✅ Kuat | |
|
|
| Dark Mode | ✅ + Light + System | |
|
|
| Accessibility | ⚠️ Partial | |
|
|
| Enterprise Dashboard | ✅ | |
|
|
|
|
|
## Gap Spesifik |
|
|
- Tidak ada skip-to-content link |
|
|
- Focus trap belum eksplisit di sheet/dialog (hanya backdrop click) |
|
|
- Tidak ada `prefers-reduced-motion` override |
|
|
- Kontras beberapa teks `slate-500` di dark perlu verifikasi WCAG |
|
|
- Tabel mobile: aksi via tap baris tanpa `aria-describedby` untuk screen reader |
|
|
- Bahasa `lang="en"` padahal konten campuran ID/EN |
|
|
- Swagger UI: aksesibilitas bergantung pihak ketiga |
|
|
|
|
|
## Rekomendasi Singkat |
|
|
- Tambah skip link ke `#app-content` |
|
|
- Trap focus + Escape close untuk sheet/dialog |
|
|
- `lang="id"` atau locale switcher |
|
|
- Audit kontras dengan axe/Lighthouse
|
|
|
|
