Accordion
Seperangkat judul (heading) interaktif yang ditumpuk secara vertikal yang masing-masingnya menampilkan bagian konten terkait.
Accordion yang Aksesibel (WCAG 2.2)
Apa kebijakan pengembalian Anda?
Kebijakan pengembalian kami adalah 30 hari, dengan tanda terima.
Bagaimana cara melacak pesanan saya?
Anda dapat melacak pesanan menggunakan link/tautan pelacakan yang dikirim ke email Anda.
Dapatkah saya membeli barang lagi?
Ya, barang dapat dibeli kembali dari riwayat pesanan Anda.
Membuat Accordion Yang Aksesibel
- Gunakan elemen HTML semantik
- Sediakan interaksi keyboard
- Sertakan status fokus (Focus states)
- Tetapkan hubungan yang dapat diakses (accesible relationship) antara header dan konten
- Gunakan transisi CSS seperlunya
Accordion yang Tidak Aksesibel (Harap Dihindari)
▼Apa kebijakan pengembalian Anda?
Kebijakan pengembalian kami adalah 30 hari, dengan tanda terima.
▶Bagaimana cara melacak pesanan saya?
▶Dapatkah saya membeli barang lagi?
Contoh Implementasi Accordion Yang Tidak Aksesibel
- Menggunakan div untuk tombol akordion, sehingga tidak dapat difokus atau dioperasikan dengan keyboard
- Tidak ada indikator keyboard focus, sehingga pengguna tidak tahu elemen mana yang sedang aktif
- Tidak ada indikator status terbuka/tertutup (aria-expanded atau indikator visual apakah panel sedang terbuka atau tertutup)
- Tidak ada hubungan antara header dan konten, Pembaca layar tidak bisa menghubungkan judul dengan kontennya
- Tidak memberikan label yang jelas untuk setiap bagian akordion