Praktik CSS yang Dapat Merusak Aksesibilitas

CSS telah menjadi bahasa yang sangat kuat. Apa yang dimulai sebagai sarana untuk menambahkan gaya dasar ke teks dan elemen desain lainnya kini mampu melakukan lebih banyak lagi.

Kita dapat menggunakannya untuk membuat hampir semua tata letak yang bisa dibayangkan. Efek khusus dan interaktivitas yang biasanya memerlukan JavaScript atau plugin browser kini didukung secara native. Bahasa telah berubah dari alat dasar menjadi salah satu teknologi dasar di balik setiap situs web.

Tapi seperti alat canggih lainnya, CSS juga dapat memiliki efek samping yang tidak diinginkan. Aksesibilitas adalah salah satu bidang perhatian terbesar. Beberapa implementasi memang bisa lebih berbahaya daripada kebaikan.

Dengan mengingat hal itu, mari kita lihat beberapa praktik CSS yang dapat mengganggu aksesibilitas. Mereka menyertakan fitur umum yang memerlukan pertimbangan cermat sebelum Anda mulai menulis kode. Mari kita mulai!

Menampilkan Teks Penting Menggunakan Properti content

Properti content CSS menawarkan cara yang apik untuk menambahkan penyempurnaan visual ke suatu elemen. Misalnya, Anda dapat menggunakannya dalam kombinasi dengan elemen semu untuk menambahkan ikon sebelum bagian teks atau item daftar. Itu juga dapat menampilkan gambar atau string teks.

Tapi yang terakhir itu bisa sangat merepotkan. Teks yang ditambahkan melalui properti content tidak termasuk dalam model objek dokumen (DOM). Itu berarti teknologi bantu seperti pembaca layar mungkin tidak mengenalinya.

Ini bagus untuk barang-barang dekoratif murni. Namun, hal ini dapat menyebabkan masalah aksesibilitas jika teks memberikan konteks penting ke halaman. Pengguna mungkin kehilangan informasi penting.

Oleh karena itu, sebaiknya hindari penggunaan properti content untuk menampilkan teks. Itu kecuali Anda yakin bahwa itu tidak akan mengganggu kemampuan pengguna untuk memahami halaman.

Membuat Urutan Animasi Berkedip Intens

Animasi adalah area di mana CSS telah mengalami evolusi besar. Efek yang dulunya merupakan wilayah perpustakaan pihak ketiga kini dapat dibuat dengan relatif mudah. Dan karena didukung secara asli, mereka dapat memanfaatkan fitur seperti akselerasi perangkat keras untuk meningkatkan kinerja.

Transisi dan transformasi dasar dapat melakukan keajaiban untuk menciptakan suasana hati dan menarik perhatian pengguna. Dan itu juga memungkinkan untuk membuat efek yang sangat realistis dengan bantuan JavaScript.

Tetapi gaya animasi tertentu dapat memiliki efek negatif. Untuk beberapa pengguna, terlalu banyak gerakan dapat membingungkan – atau jauh lebih buruk. Kedipan yang intens atau efek strobo dapat menyebabkan kejang. Hal ini dimungkinkan di web – sama seperti di film, program televisi, dan permainan video.

WCAG 2.0 menawarkan beberapa panduan yang didukung penelitian untuk membuat animasi yang tidak akan memicu kejang atau reaksi merugikan lainnya. Misalnya, disarankan agar presentasi disetel agar berkedip tidak lebih dari tiga kali per detik, bersamaan dengan menjaga ukuran tetap kecil dan menghindari warna merah.

Untungnya, ini tidak membatasi kemampuan kami untuk membuat pengguna terkesan dengan gerakan. Masih banyak kesempatan untuk menyempurnakan karya kita. Namun jenis animasi yang digunakan dan potensi dampaknya harus diteliti dengan cermat.

Status :hover atau :focus yang tidak intuitif pada Elemen Interaktif

CSS mahir menata elemen interaktif. Pertimbangkan apa yang mungkin dilakukan dengan item sehari-hari seperti hyperlink dan bidang formulir. Mereka dapat disesuaikan hingga tidak dapat dikenali jika dibandingkan dengan tampilan standarnya.

Itu semua baik dan bagus. Namun, penting juga untuk memikirkan tentang apa yang terjadi saat pengguna berinteraksi dengan suatu elemen. Bayangkan mengklik tombol yang tidak menawarkan isyarat visual apa pun untuk mengonfirmasi apa yang telah terjadi. Atau menggunakan keyboard untuk tab melalui menu yang tidak menyorot tautan saat ini.

Mereka mungkin sederhana, tetapi interaksi mikro ini membantu memberikan konteks kepada pengguna. Mengonfirmasi klik tombol atau memahami item menu yang menjadi fokus kursor Anda hanyalah dua contoh. Dan masing-masing menghadirkan rasa percaya diri saat pengunjung menjelajahi situs web.

Gaya awal elemen interaktif hanyalah setengah dari pertempuran. Menawarkan gaya intuitif untuk pseudo-class :hover dan :focus melengkapi pengalaman pengguna.

Perlu dicatat bahwa gaya ini harus mudah terlihat. Dalam praktiknya, itu berarti menggunakan lebih dari sekadar warna sebagai indikator. Menambahkan animasi, kerangka, atau ikon dapat membantu memastikan tidak ada orang yang tertinggal.

Mengambil Dasar-dasar Desain yang Dapat Diakses begitu saja

Kita semua pernah ke sana. Tenggat waktu proyek semakin dekat dan Anda perlu menyelesaikan sesuatu. Dalam perlombaan untuk meluncurkan, beberapa item terkait aksesibilitas mungkin lolos dari celah.

Cukup sering, dasar-dasar desain yang dapat diakseslah yang tertinggal. Praktik-praktik CSS yang mungkin diterima begitu saja oleh desainer dan dianggap sudah memenuhi standar.

Contoh utama termasuk dasar-dasar seperti tipografi yang dapat dibaca dan rasio kontras warna yang dapat diterima. Tanpa mempertimbangkan dan menguji item-item ini, situs web mungkin tidak dapat diakses seperti yang Anda kira.

Itulah mengapa perlu meluangkan waktu ekstra untuk meninjau aspek yang lebih luas dari gaya situs Anda. Bahkan jika suatu barang lolos pemeriksaan "bola mata", bekerja lebih keras untuk melakukan audit. Anda mungkin akan terkejut melihat betapa banyak peluang untuk peningkatan halus yang akan Anda temukan.

Ini tentang Menggunakan CSS Secara Bertanggung Jawab

Karena CSS sangat kuat, mudah untuk tergoda oleh kemungkinan yang ditawarkannya. Mengapa puas dengan animasi dasar jika Anda bisa membuat sesuatu yang sinematik? Dan bagaimana mungkin kami tidak menyukai kenyamanan menggunakannya untuk menghasilkan konten?

Semuanya bermuara pada empati dan tanggung jawab. Seperti alat apa pun, CSS mampu melakukan hal-hal hebat. Namun hanya karena kami dapat mengimplementasikan fitur tertentu tidak berarti fitur tersebut tepat untuk aksesibilitas. Kita hidup di dunia di mana orang dari semua lapisan masyarakat akan mengkonsumsi apa yang kita bangun. Dan tugas kami untuk memastikan mereka dapat melakukannya tanpa hambatan.

Sisi baiknya adalah menghindari praktik di atas dapat dilakukan oleh semua orang. Sebagian besar, ini masalah memikirkan dampak potensial dari apa yang kita lakukan. Dari sana, pengujian memberi kami data yang kami butuhkan untuk menyempurnakan lebih lanjut.

CSS ada untuk mempermudah aksesibilitas. Semuanya tergantung bagaimana kita memilih untuk menggunakannya.