Akordeon dengan Button dan aria-expanded

Accordion adalah tumpukan judul yang dapat dibuka dan ditutup untuk menampilkan konten. Setiap bagian dapat dibuka sendiri, berbeda dari tab.

Jadikan setiap header accordion sebagai button sungguhan. Tombol dapat menerima fokus, berfungsi dengan Enter dan Spasi, serta otomatis diumumkan oleh pembaca layar.

Waspadai div yang dapat diklik sebagai header. Elemen itu tidak dapat menerima fokus, mengabaikan papan ketik, dan tidak memberi tahu teknologi bantu tentang fungsinya.

Tambahkan aria-expanded ke tombol agar pembaca layar mengumumkan apakah bagian tersebut tertutup atau terbuka. Status tunggal inilah yang membuat accordion aksesibel.

Saat pengguna mengaktifkan tombol, ubah aria-expanded antara true dan false. Pastikan nilainya sesuai dengan apakah panel benar-benar sedang ditampilkan.

Gunakan aria-controls pada tombol dan atur nilainya ke id panel yang dibuka. Pengguna akan mengetahui konten mana yang ditampilkan oleh header tersebut.

Saat sebuah bagian ditutup, berikan atribut hidden pada panelnya. Ini menghapus panel tersebut dari halaman dan pohon aksesibilitas hingga dibuka kembali.

Tempatkan setiap tombol di dalam judul sungguhan seperti h3. Pengguna pembaca layar kemudian dapat berpindah dari satu bagian ke bagian lain menggunakan navigasi judul.

Fitur buka-tutup tunggal adalah disclosure, bukan kumpulan tab. Fitur ini hanya memerlukan tombol dengan aria-expanded, tanpa peran tablist atau tab sama sekali.

Setelah pengubahan, biarkan fokus tetap pada tombol yang ditekan pengguna. Jangan merebut fokus ke panel; hal itu dapat mengejutkan pengguna papan ketik.

Karena tombol membawa statusnya sendiri, pembaca layar selalu mengatakan terbuka atau tertutup. Pengguna selalu mengetahui tindakan yang akan terjadi saat tombol diaktifkan.

Anda telah mempelajari bahwa header accordion adalah button dengan aria-expanded yang dibungkus dalam judul. Ubah statusnya, arahkan ke panel, dan sembunyikan panel saat tertutup.