Merancang untuk aksesibilitas
Aksesibilitas adalah topik yang relatif besar. Kami tidak dapat membahas secara lengkap sepenuhnya dalam satu modul Belajar. Namun, ada beberapa prinisp inti yang ingin Anda terapkan di setiap halaman yang Anda buat. Merancang halaman yang dapat diakses dari awal selalu lebih mudah daripada kembali ke halaman yang ada untuk membuatnya dapat diakses.
Gunakan HTML sesuai tujuan desain
HTML menyediakan banyak elemen yang dapat Anda gunakan untuk membuat halaman, termasuk tombol, tautan, dan kontrol formulir. Masing-masing elemen tersebut memiliki serangkaian fungsionalitas bawaan, seperti dapat diklik, dapat ditautkan, atau menerima fokus.
Catatan
Fokus adalah istilah pengembangan web yang berarti kontrol dapat menerima input dari keyboard. Tombol dapat menerima fokus, memungkinkan seseorang mengaktifkan atau "mengeklik"-nyal dengan memilih Bilah Spasi.
Dengan CSS dan JavaScript, dimungkinkan untuk membuat elemen apa pun terlihat seperti jenis kontrol yang lain. Misalnya, Anda dapat menggunakan <span> untuk membuat elemen <button>, dan <b> dapat menjadi <a>. Meskipun kemampuan ini menyediakan beberapa pintasan untuk menata gaya atau letak halaman Anda, kemampuan ini menghapus fungsionalitas bawaan. Alat seperti pembaca layar tidak akan dapat memahami bahwa <span> sedang digunakan sebagai <a>. Seseorang yang menelusuri keyboard tidak akan dapat mengatur fokus pada elemen <div> yang telah diprogram untuk mensimulasikan elemen <button>.
Elemen HTML lain yang sering dilewati adalah header (<h1> lalu <h6>). Dari sudut visual, tag header dimulai dari ukuran teks terbesar hingga terkecil. Konvensi ini mengarahkan banyak pengembang ke elemen header forgo dan sebaliknya membuat gaya <div> atau elemen generik lainnya.
Sayangnya, elemen generik bergaya hanya menyampaikan informasi visual daripada struktural. Pengguna pembaca layar sangat bergantung pada judul untuk menemukan informasi dan menelusuri halaman. Menulis konten judul deskriptif dan menggunakan tag judul semantik penting untuk membuat situs yang mudah dinavigasi bagi pengguna pembaca layar.
Sebagai praktik terbaik, Anda harus selalu menggunakan HTML yang sesuai saat membuat kontrol di halaman. Jika Anda menginginkan hyperlink, gunakan <a>, atau gunakan <button> untuk tombol.
Gunakan petunjuk visual yang baik
Pengembang sering berpikir tentang pembaca layar sebagai satu-satunya alat aksesibilitas. Namun, pengguna bisa menggunakan banyak alat lain, atau mereka mungkin tidak menggunakan alat sama sekali. Pengguna yang menggunakan browser akan mengandalkan petunjuk visual tertentu untuk memahami cara berinteraksi dengan halaman Anda.
Salah satu fitur hebat CSS adalah menyediakan kontrol penuh atas cara menampilkan halaman, termasuk menghapus elemen tampilan tertentu. Misalnya, Anda bisa menghapus kerangka dari kotak teks atau menghapus garis bawah dari hyperlink. Sayangnya, menghapus jenis petunjuk tersebut dapat membuatnya lebih menantang bagi seseorang yang bergantung pada mereka untuk mengenali jenis kontrol.
Pertimbangkan keyboard
Beberapa pengguna tidak dapat menggunakan mouse atau trackpad/touchpad. Sebagai gantinya, pengguna ini mengandalkan interaksi keyboard ke tab dari satu elemen ke elemen yang lain. Penting bagi halaman Anda untuk menyajikan konten Anda dalam urutan logis sehingga pengguna keyboard dapat mengakses setiap elemen interaktif saat mereka menjelajah.
Saat pengguna menelusuri halaman dengan tab, fokus beralih dari satu kontrol ke kontrol lain berdasarkan urutan kontrol dicantumkan di sumber HTML. Kontrol untuk halaman Anda harus dicantumkan di sumber HTML secara berurutan sesuai penelusuran halaman yang Anda perkirakan, sambil mengandalkan CSS untuk menata halaman secara visual kepada pengguna.
Misalnya, bayangkan Anda membuat formulir dengan dua kolom. Anda akan mempertimbangkan bagaimana aliran alami ketika seseorang mengisi formulir, lalu mencantumkan kontrol dalam urutan tersebut. Kemudian Anda dapat menggunakan CSS untuk membuat kolom dan menampilkan kontrol pada lokasi yang sesuai.
Navigasi keyboard sangat bergantung pada HTML semantik. Kontrol tertentu (seperti tombol) menerima fokus, sedangkan elemen-elemendiv tidak. Jika Anda membuat ulang kontrol yang sudah ada di HTML, Anda membuatnya lebih sulit bagi seseorang untuk menggunakan halaman Anda dengan keyboard.
Penting
Navigasi keyboard perlu diuji secara manual, dan Anda harus melakukannya di setiap halaman yang Anda buat. WebAIM memiliki informasi lebih lanjut tentang strategi navigasi keyboard.