Section ini menyusun materi secara bertahap: kerjakan Chapter dari urutan teratas agar setiap konsep baru selalu berpijak pada konsep sebelumnya. Setiap Chapter menyertakan contoh kode yang telah diuji dan dapat Anda ikuti langsung di editor.

# Details dan Summary

Bentuk disclosure tanpa JavaScript dengan pasangan details dan summary, atribut open, hingga contoh FAQ ringkas.

Buka → # Dialog

Tampilkan jendela modal dan non-modal dengan elemen dialog, method showModal, styling ::backdrop, serta returnValue.

Buka → # Button dan Interaksi

Pakai button sebagai pemicu interaksi di luar form: type button, pola dialog dan popover, serta aria-pressed.

Buka → # Disclosure Pattern

Pelajari pola disclosure WAI-ARIA APG dan bandingkan versi native details dengan versi custom tombol dan aria-expanded.

Buka → # Progress dan Meter

Bedakan progress sebagai indikator tugas berjalan dan meter sebagai pengukuran skalar, plus pembaruan via JavaScript.

Buka → # Elemen Interaktif dan Accessibility

Rangkum aksesibilitas komponen interaktif: native dulu, fokus pada dialog, ARIA untuk pola custom, dan checklist audit.

Buka →