DISKON TERBATAS! Masukkan kupon "skillbaru" saat checkout di kelas apa saja

Logo Koala Skodev mengetik

Skodev

Belajar coding dalam bahasa Indonesia

AKSESIBILITAS PADA CSS

Pelajari bagaimana memastikan konten web kamu mudah diakses untuk semua pengguna dengan menerapkan aksesibilitas pada CSS yang efektif. Mulai dari penggunakan warna, hingga kontrol fokus, semua akan dibahas di sini.

Pengantar

Aksesibilitas pada CSS (Cascading Style Sheets) merujuk pada praktik yang memungkinkan konten web dapat diakses oleh semua orang, termasuk mereka yang memiliki berbagai hambatan, seperti penglihatan rendah, buta warna, epilepsi fotosensitif, dan lain sebagainya.

Menyajikan konten dengan cara yang dapat diakses membantu memastikan bahwa semua pengguna dapat berinteraksi dengan konten tersebut, meskipun mereka memiliki keterbatasan sensorik atau fisik.

Penggunaan Warna

Warna merupakan aspek penting dalam desain dan aksesibilitas web. Kamu harus memastikan bahwa kontras antara warna latar belakang dan teks cukup, sehingga pengguna dengan penglihatan rendah atau buta warna dapat dengan mudah membaca informasi.

body {
  background-color: #FFFFFF;
  color: #333333;
}

Pada contoh di atas, kita menggunakan warna latar belakang putih (#FFFFFF) dan warna teks abu-abu gelap (#333333), yang memberikan kontras yang baik dan mudah dibaca bagi sebagian besar pengguna.

Menggunakan CSS untuk Mengubah Tampilan Fokus

Focus adalah indikator visual yang menunjukkan di mana interaksi keyboard saat ini atau di mana pengguna berinteraksi melalui alat bantu seperti pembaca layar. Kamu dapat menyesuaikan tampilan ‘focus outline’ dengan menggunakan aturan CSS outline.

a:focus {
  outline: 3px solid #FF0000;
}

Pada contoh di atas, tautan yang sedang difokuskan akan memiliki ‘outline’ tebal berwarna merah.

Menggunakan Ukuran yang Relatif

Dalam hal aksesibilitas, menggunakan ukuran huruf dan elemen yang relatif (seperti em, %, vh, vw) alih-alih absolut (seperti px) sangat penting. Pengguna dengan masalah penglihatan mungkin perlu meningkatkan ukuran teks di situs web untuk membuatnya lebih mudah dibaca.

body {
  font-size: 1em;
}

Pada contoh di atas, ukuran font tubuh disetel ke 1em, yang relatif terhadap ukuran font utama peramban.

Kesimpulan

Aksesibilitas seharusnya menjadi bagian penting dalam merancang dan membangun situs web. Dengan CSS, kamu dapat membuat penyesuaian dan peningkatan yang membuat konten kamu mudah diakses oleh semua pengguna, tidak peduli apa hambatan yang mereka hadapi.

👈🏼 Vendor prefix CSS
Apa itu Framework CSS 👉🏼