♿ accessibility WCAG 2.2
Accessible Showcase
12 komponen standar — aria-*, role, keyboard nav, visually-hidden.
02
Buttons
aria-disabled, aria-busy♿ aria-label, aria-disabled, aria-busy, focus-visible
03
Form Inputs
fieldset, legend, aria-invalid, aria-describedby♿ fieldset/legend, aria-invalid, aria-describedby, role=alert
04
Cards
aria-label, semanticSiswa Aktif
342
↑ 3.5%
Surat Terbit
28
↑ 12%
Pending
7
↓ 2
05
Data Table
aria-sort, scope, caption♿ aria-sort, scope=col, caption, role=grid
| NIS | Nama | Kelas | Status |
|---|---|---|---|
| 242507024 | Anisa Putri | 9C | Mutasi |
| 242507001 | Budi Santoso | 7A | Aktif |
| 242507055 | Citra Dewi | 8B | Aktif |
| 242507089 | Dimas P. | 9A | Lulus |
06
Modal
role=dialog, aria-modal, aria-labelledby♿ role=dialog, aria-modal, aria-labelledby, aria-describedby, focus trap
Konfirmasi Hapus
Yakin ingin menghapus data siswa Anisa Putri (9C)?
07
Badges & Alerts
role=alert, role=status♿ role=alert (urgent), role=status (polite), aria-live
DefaultSuccessWarningDanger
ℹ️
Info: Tahun ajaran dimulai 15 Juli 2026.
✅
Berhasil: Data siswa diimpor.
⚠️
Peringatan: 3 siswa belum ada NISN.
❌
Error: Koneksi gagal.
08
Tabs
role=tablist, role=tab, aria-selected♿ role=tablist, role=tab, aria-selected, aria-controls, keyboard arrows
09
Progress Bar
role=progressbar, aria-valuenow♿ role=progressbar, aria-valuenow, aria-valuemin, aria-valuemax
Impor data — 68%
Sinkronisasi — 100%
Penyimpanan — 85%
10
Accordion
aria-expanded, aria-controls♿ button + aria-expanded, aria-controls, region role
Buka menu Siswa → klik tombol "+ Tambah Siswa" → isi formulir → simpan.
Buka menu Persuratan → pilih jenis surat → isi data → klik "Cetak".
Hubungi admin TU untuk reset password akun portal.
11
Toast
role=status, aria-live=polite♿ role=status, aria-live=polite (non-urgent)
Berhasil. Surat B/027 dicatat.
12
Empty State
role=region, aria-labelBelum ada surat
Belum ada surat que terbit bulan ini.