Pertemuan 12
Responsive Testing, Accessibility, dan Penyempurnaan Visual
Testing di berbagai device, audit accessibility, color contrast check, dan fine-tuning visual.
Tujuan Pembelajaran
Testing responsiveness dengan browser dev tools.
Melakukan accessibility audit.
Mengecek color contrast dan menyempurnakan visual.
Testing di Berbagai Device
Mobile
Layout satu kolom, tombol mudah disentuh.
Tablet
Grid tetap rapi dan spacing nyaman.
Desktop
Konten tidak terlalu melebar dan hierarchy jelas.
Browser Dev Tools
- Buka responsive mode.
- Coba ukuran mobile, tablet, desktop.
- Cek apakah teks keluar dari card.
- Cek apakah tombol dan nav tetap bisa digunakan.
Accessibility Audit
Alt text untuk gambar penting.
Heading hierarchy jelas.
Button dan link punya label yang jelas.
Keyboard navigation tidak membingungkan.
Color Contrast Check
Base
Text
CTA
Danger
Pastikan teks tetap readable di atas background.
Fine-tuning Visual
Spacing.
Font size.
Imagery.
Card alignment.
Button states.
Mini Quiz
Pemeriksaan agar teks tetap terbaca di atas warna background disebut...