🛠️ DevTools & Accessibility
Level: Beginner
DevTools adalah alat bawaan browser untuk debugging dan optimasi web.
Accessibility (A11y) memastikan website bisa diakses semua orang, termasuk penyandang disabilitas.
Bayangkan DevTools sebagai kaca pembesar untuk melihat isi web, dan Accessibility sebagai pintu masuk universal agar semua bisa menggunakannya.
📖 Browser DevTools
- Elements: melihat dan mengedit struktur HTML & CSS secara langsung.
- Console: menampilkan log, error, dan menjalankan JavaScript.
- Network: memantau request/response, kecepatan loading.
- Sources: melihat file JS, debugging dengan breakpoint.
- Performance: menganalisis kecepatan rendering.
- Application: memantau storage (cookies, localStorage, sessionStorage).
📖 Prinsip Accessibility
- Perceivable: konten bisa dilihat/didengar (contoh: alt text pada gambar).
- Operable: bisa digunakan dengan keyboard, bukan hanya mouse.
- Understandable: navigasi dan konten mudah dipahami.
- Robust: kompatibel dengan berbagai perangkat & screen reader.
🛠️ Praktik Kecil
Coba langkah berikut:
- Buka halaman web apa saja, tekan
F12 untuk membuka DevTools.
- Pilih tab Elements, ubah teks langsung di HTML dan lihat hasilnya.
- Pilih tab Console, ketik
console.log("Halo DevTools!").
- Gunakan tab Network untuk melihat file apa saja yang dimuat.
👉 Untuk Accessibility, coba tambahkan atribut alt pada gambar:
<img src="foto.jpg" alt="Foto profil Doddy">
🎮 Mini Challenge
Buat halaman HTML sederhana lalu:
- Gunakan DevTools untuk mengubah warna teks secara langsung.
- Tambahkan gambar tanpa
alt, lalu perbaiki dengan menambahkan deskripsi.
- Coba navigasi halaman hanya dengan keyboard (Tab, Enter, Space).
Tugas tambahan: Gunakan tab Lighthouse di Chrome DevTools untuk mengaudit Accessibility halamanmu.