AKSESIBILITAS PADA CSS

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.