CSS 10C: Dasar Aksesibilitas dalam Styling

Pilihan warna, ukuran, fokus, dan gerakan menentukan apakah halaman dapat digunakan banyak orang. Aksesibilitas sebaiknya diperiksa sejak awal.

1. Demo Styling yang Lebih Aksesibel

2. Hal yang Diperbaiki Contoh

• Teks memiliki kontras kuat terhadap latar.
• Pesan tidak mengandalkan warna saja; kata “Error” tetap menjelaskan keadaan.
• Fokus keyboard terlihat melalui :focus-visible.
• Input dan tombol memiliki tinggi minimal 44px.
• Ukuran teks memakai rem dan line-height tanpa satuan.
• Container tidak memiliki tinggi tetap sehingga teks dapat membesar.
• Gerakan dikurangi melalui prefers-reduced-motion.

3. Jangan Menyembunyikan Isi Penting

display: none menghapus elemen dari tampilan dan umumnya dari pohon aksesibilitas. Jika label perlu disembunyikan secara visual tetapi tetap dibaca pembaca layar, gunakan pola visually-hidden yang tepat, bukan display: none.

Pemeriksaan Singkat

• Dapatkah semua kontrol dicapai dengan tombol Tab?
• Apakah fokus selalu terlihat?
• Apakah teks masih terbaca pada zoom 200%?
• Apakah informasi tetap jelas tanpa membedakan warna?
• Apakah konten tidak terpotong pada layar sempit?
• Apakah gerakan dapat dikurangi?

Latihan

Jalankan contoh hanya dengan keyboard. Zoom browser hingga 200%, lalu periksa apakah tombol, input, dan pesan masih terlihat utuh. Coba hapus outline untuk memahami mengapa fokus menjadi sulit ditemukan.

Ringkasan

CSS yang aksesibel memiliki kontras memadai, fokus terlihat, target interaksi cukup besar, teks yang dapat membesar, serta gerakan yang menghormati preferensi pengguna.