FAQ membantu pembaca menemukan jawaban singkat tanpa menggulir banyak paragraf. Untuk latihan awal, kita dapat memakai elemen HTML bawaan: details sebagai wadah dan summary sebagai judul yang dapat dibuka atau ditutup.
Buat berkas latihan
Simpan contoh di bawah sebagai faq.html, lalu buka di browser. Contoh tidak memerlukan instalasi library, koneksi server, ataupun akun layanan.
<!doctype html>
<html lang="id">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Latihan FAQ</title>
<style>
body { font: 1rem/1.6 system-ui; max-width: 42rem;
margin: auto; padding: 1.5rem; color: #102d46; }
details { border: 1px solid #667788; border-radius: .5rem;
margin-block: 1rem; padding: 1rem; }
summary { cursor: pointer; font-weight: bold; }
summary:focus-visible { outline: 3px solid #102d46; outline-offset: 4px; }
</style>
<h1>Pertanyaan tentang kelas latihan</h1>
<details>
<summary>Apakah harus menginstal aplikasi?</summary>
<p>Tidak. Contoh ini cukup dibuka di browser.</p>
</details>
<details open>
<summary>Apa yang harus disiapkan?</summary>
<p>Editor teks dan browser untuk membuka berkas HTML.</p>
</details>
</html>Kenali bagian utamanya
Letakkan pertanyaan dalam summary, lalu tulis jawaban setelahnya di dalam details yang sama. Atribut open membuat bagian kedua terbuka pada saat awal halaman dimuat. Tanpa atribut tersebut, bagian pertama dimulai dalam keadaan tertutup.
Gunakan pertanyaan yang spesifik. Judul seperti “Info lainnya” menyulitkan pembaca memutuskan apakah perlu membuka jawaban. Pisahkan pertanyaan jika satu jawaban sudah membahas dua masalah yang berbeda.
Uji dengan mouse dan keyboard
- Klik pertanyaan pertama dan periksa apakah jawabannya muncul.
- Klik kembali untuk menutupnya.
- Tekan Tab sampai judul pertanyaan mendapat fokus.
- Coba Enter atau Spasi untuk membuka dan menutupnya.
- Ubah lebar jendela dan periksa apakah teks tetap terbaca tanpa terpotong.
Perilaku dan tampilan penanda bawaan dapat berbeda antarbrowser. Uji pada browser yang digunakan pengunjung. Jangan menghilangkan indikator fokus atau mengganti summary dengan div yang sekadar terlihat dapat diklik.
Latihan pengembangan
Tambahkan satu FAQ tentang cara mengirim tugas. Gunakan jawaban dua kalimat dan sebuah tautan yang mempunyai label jelas. Simpan, muat ulang halaman, lalu pastikan ketiga pertanyaan dapat ditelusuri dengan keyboard.
Jangan menyembunyikan instruksi penting yang harus dibaca semua pengunjung hanya demi halaman terlihat ringkas. Contoh ini juga bukan jaminan aksesibilitas penuh; periksa struktur judul, urutan fokus, dan keterbacaan desain secara keseluruhan.
Lengkapi latihan dengan panduan alt text gambar.
Referensi resmi
Dokumentasi rujukan, diperiksa 3 November 2026.