Foundations/Accessibility (A11y)

Accessibility (A11y)

● Ready Web Nuxt 4 + Mobile React Native

Standar aksesibilitas Zenko mengacu pada pedoman WCAG 2.1 Level AA untuk memastikan platform dapat diakses oleh semua pengguna, termasuk navigasi pembaca layar (screen reader) dan keyboard.

Prinsip Aksesibilitas Utama

Ini adalah kebijakan umum yang berlaku di seluruh sistem. Tab Aksesibilitas setiap halaman komponen merujuk balik ke sini untuk aturan umum, lalu menyatakan perilaku spesifik komponen tersebut — bukan mengulang keempat poin ini di puluhan halaman.

Rasio Kontras Warna: Teks tubuh (body text) minimal 4.5:1. Komponen antarmuka (border input, ikon status) dan teks besar/tebal minimal 3:1. Target ini adalah standar WCAG 2.1 AA dan tidak berubah per komponen.
Indikator Fokus Terlihat (:focus-visible): Setiap elemen interaktif menampilkan ring fokus yang sama secara global (didefinisikan sekali di app/assets/css/main.css): outline: 2px solid rgba(47, 111, 235, 0.5); outline-offset: 2px;. Tidak ada komponen yang boleh menimpa ini dengan outline: none tanpa pengganti fokus yang setara.
Navigasi Keyboard (baseline): Semua elemen interaktif harus dapat dijangkau lewat urutan Tab / Shift+Tab sesuai urutan visual, diaktifkan dengan Enter atau Space. Overlay (modal, drawer, dropdown) ditutup dengan Esc dan mengembalikan fokus ke elemen pemicunya. Tab-set/menu mendukung tombol panah kiri/kanan sesuai pola ARIA APG. Tidak ada keyboard trap di mana pun.
Touch Target: Ukuran area sentuh interaktif minimum 44×44pt di mobile (React Native) agar mudah ditekan dan mencegah salah ketuk (mis-tap).
Peran ARIA: Penggunaan atribut eksplisit seperti aria-expanded, aria-invalid, aria-describedby, dan role="switch" sesuai peran masing-masing komponen.