ButtonsLesson 110Preview gratis
Icon Buttons
Lesson ini bagian dari How To · Semua level
Ringkasan
Icon button adalah tombol yang hanya menampilkan ikon tanpa teks yang terlihat. Karena maknanya tidak selalu jelas, tombol seperti ini wajib memiliki nama aksesibel melalui aria-label. Ukuran area klik dan kontras ikon juga perlu diperhatikan agar nyaman digunakan.
Poin kunci
- Gunakan aria-label untuk memberi nama pada tombol yang hanya berisi ikon.
- Flexbox membantu memusatkan ikon di dalam tombol.
- Area klik sebaiknya cukup besar, minimal sekitar 44 x 44 piksel.
- Ikon dekoratif di dalam tombol diberi aria-hidden agar tidak dibacakan ganda.
- Sediakan keadaan hover dan focus-visible yang jelas.
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.