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 tautan pelacakan yang dikirim ke email Anda.

Dapatkah saya membeli barang lagi?

Ya, barang dapat dibeli kembali dari riwayat pesanan Anda.

<div class="accordion">
  <details>
    <summary>Apa kebijakan pengembalian Anda?</summary>
    <p>Kebijakan pengembalian kami adalah 30 hari, dengan tanda terima.</p>
  </details>

  <details>
    <summary>Bagaimana cara melacak pesanan saya?</summary>
    <p>Anda dapat melacak pesanan menggunakan tautan pelacakan yang dikirim ke email Anda.</p>
  </details>

  <details>
    <summary>Dapatkah saya membeli barang lagi?</summary>
    <p>Ya, barang dapat dibeli kembali dari riwayat pesanan Anda.</p>
  </details>
</div>

Membuat Accordion yang Aksesibel

Gunakan elemen HTML semantik (details dan summary, atau tombol dengan aria-expanded)
Sediakan interaksi keyboard
Sertakan status fokus (focus states) yang terlihat
Tetapkan hubungan yang dapat diakses (accessible relationship) antara header dan konten
Gunakan transisi CSS seperlunya dan hormati preferensi kurangi gerakan

Accordion yang Tidak Aksesibel (Harap Dihindari)

Contoh tidak aksesibel. Jangan ditiru.

▼ Apa kebijakan pengembalian Anda?

Kebijakan pengembalian kami adalah 30 hari, dengan tanda terima.

▶ Bagaimana cara melacak pesanan saya?

▶ Dapatkah saya membeli barang lagi?

<div class="accordion">
  <div class="item">
    <!-- A div is not focusable and has no role or state -->
    <div class="header" onclick="toggleItem(0)" style="color: #999">
      <span>▼</span> Apa kebijakan pengembalian Anda?
    </div>
    <div class="content" style="display: block">
      Kebijakan pengembalian kami adalah 30 hari, dengan tanda terima.
    </div>
  </div>

  <div class="item">
    <div class="header" onclick="toggleItem(1)" style="color: #999">
      <span>▶</span> Bagaimana cara melacak pesanan saya?
    </div>
    <div class="content" style="display: none">
      Anda dapat melacak pesanan menggunakan tautan pelacakan yang dikirim ke email Anda.
    </div>
  </div>
</div>

Contoh Implementasi Accordion yang Tidak Aksesibel

Menggunakan div untuk tombol accordion, 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) yang dapat dibaca pembaca layar
Tidak ada hubungan antara header dan konten, sehingga pembaca layar tidak bisa menghubungkan judul dengan kontennya
Warna teks judul terlalu pudar (kontras rendah)