Aksesibilitas desain web adalah penyediaan cara alternatif bagi orang-orang dengan kebutuhan yang berbeda untuk mengakses website kita, untuk mendapatkan informasi yang sama ^1. Sebuah website seharusnya dapat diakses oleh semua orang, terlepas dari kemampuan atau ketidakmampuan mereka.
Website yang aksesibel adalah website yang inklusif, yang berarti dapat digunakan oleh berbagai pengguna termasuk mereka dengan disabilitas. Kategori disabilitas mungkin bervariasi dari banyak sumber, berikut ini 4 kategori menurut Webaim ^2 :
- Visual - Kebutaan, gangguan penglihatan, buta warna.
- Auditori - Ketulian dan kesulitan mendengar
- Motorik - Ketidakmampuan menggunakan mouse, respon yang lambat, kontrol motorik yang terbatas
- Kognitif - Gangguan pembelajaran, mudah terganggu, ketidakmampuan mengingat atau fokus pada sejumlah besar informasi
Dalam membuat website yang aksesibel, kita berupaya untuk memberikan kemudahan bagi orang-orang dengan kemampuan atau ketidakmampuan. Tetapi tentu saja kita tidak dapat meng-cover semua kasus hanya dengan kode. Sebagai contoh, untuk orang dengan "penglihatan rendah", kita mungkin dapat meningkatkan kontras warna pada web. Tetapi bagaimana dengan orang buta?
Untuk kasus seperti kebutaan atau ketidakmampuan non-penglihatan seperti orang lumpuh, para ilmuwan telah membuat perangkat lunak atau alat fisik (disebut teknologi bantu) untuk mengatasi masalah ini. Orang dengan gangguan penglihatan mungkin menggunakan pembaca layar (screen reader) dan keyboard braille. Orang lumpuh dapat menggunakan alat pelacak mata untuk memindahkan mouse. Anda dapat melihat berbagai alat untuk membantu penyandang disabilitas di sini.
Aspek Pengembangan Web yang Aksesibel
Untuk memastikan website kita aksesibel, pengembangan web itu sendiri juga harus mempertimbangkan beberapa aspek. Hal ini agar alat bantu aksesibilitas seperti pembaca layar dapat berjalan dengan lancar, menyediakan informasi yang dimaksudkan untuk pengguna.
HTML Semantik (Struktur Dokumen)
Semantik berarti "berkaitan dengan makna". Menulis HTML semantik berarti menggunakan elemen HTML untuk menyusun konten berdasarkan makna setiap elemen, bukan penampilannya ^3. Ya, HTML dapat memiliki makna, lihat kode di bawah ini:
<div> <div> <div>five words</div> </div> <div> <div>three words</div> <div>forty-six words</div> <div>forty-four words</div> </div> <div> <div>seven words</h2> <div>sixty-eight words</div> <div>forty-four words</div> </div> </div>
bandingkan dengan kode berikut
<main> <header> <h1>five words</h1> </header> <section> <h2>three words</h2> <p>forty-six words</p> <p>forty-four words</p> </section> <section> <h2>seven words</h2> <p>sixty-eight words</p> <p>forty-four words</p> </section> </main>
Potongan kedua memberikan lebih banyak makna tentang struktur elemen. Tetapi ini bukan hanya manfaat dari HTML semantik, ini juga mempengaruhi aksesibilitas halaman.
HTML semantik dianggap sebagai dasar aksesibilitas web. Hal ini karena teknologi bantu aksesibilitas seperti pembaca layar (yang membantu pengguna disabilitas untuk menjelajahi web) bergantung pada struktur semantik dan makna halaman web untuk menyampaikan informasi kepada penggunanya ^4.
Pertimbangkan struktur dari dua halaman di atas. Dengan menggunakan <h1>, <h2>, dan kemudian <p>, struktur halaman A akan lebih baik, dan akan membantu pembaca layar untuk memindai halaman dengan urutan yang baik. Halaman B mungkin memberi kebingungan kepada pengguna karena secara struktural elemennya tidak bertingkat.
Deskripsi Media
Dalam sebuah website, media seperti gambar, video dan audio cenderung menjadi sumber informasi utama. Ketidakmampuan untuk mengekstrak konten media hampir berarti informasi tidak akan diterima. Dalam HTML, kita dapat menambahkan deskripsi media menggunakan atribut alt.
<img src="/ifographic" alt="infographic explaining the transformation process of a sopciety" />
Teks di dalam atribut alt akan dibaca oleh pembaca layar untuk pengguna. Mendeskripsikan konten media dalam atribut alt adalah pekerjaan yang sulit, karena Anda harus menyampaikan informasi keseluruhan dengan benar dalam kalimat yang relatif singkat.
Terkadang itu ada hanya untuk tujuan dekoratif. Kita tidak perlu memberikan deskripsi apa pun untuk ini, tetapi praktik yang baik adalah memberikannya atribut alt="" kosong.
Berikut adalah bagaimana teks alt biasanya seharusnya ^5:
- Akurat dan setara
- Ringkas, tetapi jangan mengorbankan maknanya
- Tidak berlebihan, tidak mengandung frasa seperti "gambar ..." atau "grafis ..."
Terkadang sebuah gambar bukan hanya sekedar konten, tetapi memiliki fungsi spesifik seperti menavigasi ke halaman lain. Faktor ini juga mempengaruhi teks yang harus kita gunakan dalam atribut alt.
Untuk media seperti audio atau video, kita dapat menyediakan transkrip yang dapat diunduh, atau membuat subtitle yang disematkan ke video.
Memanfaatkan Warna dengan Benar
Ketika menjelajahi web, lazim ditemukan pesan kesalahan yang berwarna merah. Ini adalah praktik yang baik karena warna merah biasanya mengindikasikan "kesalahan". Tetapi apakah itu cukup bagi audiens dengan buta warna?
Bagaimana dengan orang dengan gangguan penglihatan? Menghadapi kasus teks dan latar belakang yang kurang kontras akan sangat mempersulit membaca. Berikut hal-hal yang perlu diperhatikan mengenai warna untuk meningkatkan aksesibilitas web:
- Kontras warna. Anda dapat memeriksa dengan menggunakan salah satu dari banyak analisis kontras warna.
- Tambahkan ikon atau gambar tambahan untuk mendukung status suatu tindakan. Seperti menambahkan ikon tanda seru pada teks kesalahan.
- Hindari instruksi yang spesifik warna
- Sertakan nama warna dan tampilkan contoh
- Jangan hanya mengandalkan pengkodean warna ^6. Orang dengan "deuteranopia" mungkin melihat warna yang berbeda. Menambahkan pola atau arsiran pada warna latar belakang dapat membantu membedakan warna.
Menggunakan Peran WAI-ARIA
Peran ARIA memberikan makna semantik pada konten, memungkinkan pembaca layar dan alat lainnya untuk menyajikan dan mendukung interaksi dengan objek dengan cara yang konsisten dengan ekspektasi pengguna terhadap jenis objek tersebut ^7.
Elemen seperti <input type="radio"> memiliki peran implisit radio. Tetapi beberapa elemen HTML non-semantik tidak memiliki peran, seperti <div> atau <span>. Untuk elemen ini, atribut peran dapat memberikan semantik.
Peran ARIA ditambahkan ke elemen HTML menggunakan atribut peran="jenis peran" di mana peran yang diberikan adalah bagian dari spesifikasi ARIA.
Navigasi Keyboard dan Manajemen Fokus
Banyak pengguna komputer tidak menggunakan mouse, trackpad, atau perangkat penunjuk lainnya saat berinteraksi dengan halaman web, baik karena preferensi atau gangguan. Beberapa alasannya mungkin buta, gangguan penglihatan (mereka tidak benar-benar dapat mengikuti pointer mouse), gangguan motorik, dan lain-lain ^8.
Aksesibilitas keyboard adalah aspek mendasar dari aksesibilitas web. Ini memastikan bahwa individu yang mengandalkan keyboard atau perangkat input alternatif dapat menavigasi dan berinteraksi dengan website secara efektif, terutama dengan pengisian formulir.
Menyediakan navigasi keyboard berarti semua elemen interaktif, seperti tautan, tombol, dan kontrol formulir, dapat diakses dan diaktifkan menggunakan tombol "Tab". Selain itu, manajemen fokus yang tepat memastikan pengguna dapat mengidentifikasi dengan jelas elemen mana yang memiliki fokus keyboard, meningkatkan kemampuan mereka untuk menavigasi melalui sebuah website.
Memastikan aksesibilitas keyboard dan manajemen fokus yang tepat sangat penting bagi individu dengan disabilitas motorik atau mereka yang tidak dapat menggunakan mouse atau perangkat penunjuk lainnya.
Desain Responsif dan Aksesibilitas Seluler
Dengan peningkatan penggunaan perangkat seluler untuk menjelajahi web, sangat penting untuk mempertimbangkan aksesibilitas web dalam konteks desain responsif.
Desain responsif memastikan bahwa situs web beradaptasi dengan berbagai ukuran layar dan orientasi, menyediakan pengalaman pengguna yang konsisten dan aksesibel di berbagai perangkat. Hal ini mencakup pertimbangan seperti ukuran target sentuhan, teks yang dapat discale, dan tata letak fluid.
Aksesibilitas seluler juga melibatkan optimasi konten dan interaksi untuk pengguna seluler, dengan mempertimbangkan faktor-faktor seperti ruang layar yang terbatas, gerakan sentuh, dan teknologi bantu aksesibilitas seluler. Dengan memprioritaskan desain responsif dan aksesibilitas seluler, situs web dapat mengakomodasi pengguna dengan kemampuan yang beragam saat mengakses web melalui perangkat seluler.
Audit Aksesibilitas Web
Aspek aksesibilitas web sebelumnya masih hanya sedikit dari luasnya bidang aksesibilitas web. Saya hanya menunjukkan hal-hal yang bisa menjadi awal yang baik untuk menerapkan aksesibilitas web.
Sekarang, sebelum melompat ke perbaikan dan memperbaiki hal-hal, kita harus tahu bagian mana dari web kita yang perlu ditingkatkan agar lebih inklusif dan dapat diakses oleh khalayak yang lebih luas. Untuk tujuan ini, kita dapat memanfaatkan alat audit aksesibilitas web.
Perkenalkan WAVE, auditor aksesibilitas web gratis yang memeriksa standar dari WEBAIM. Komunitas aksesibilitas web online dari Institute for Disability Research, Policy, and Practice, Utah.
Gambar di atas adalah halaman muka WAVE. Untuk memeriksa aksesibilitas situs web kita, kita cukup memasukkan URL web ke kolom alamat halaman web, lalu WAVE akan membukanya dan melakukan audit secara online. Selanjutnya Anda akan mendapatkan laporan audit.
Mari kita coba. Saya akan menguji blog saya sendiri https://emots.blog. Dan berikut hasilnya:
Halaman hasil dibagi menjadi 3 bagian:
- Laporan keseluruhan. Di dalam kotak biru, halaman paling kiri, adalah laporan keseluruhan. Ini menampilkan total kesalahan aksesibilitas, peringatan, apa yang terlihat baik dan rincian lainnya.
- Hasil rinci. Di dalam kotak kuning yang membungkus area hitam. Ini menampilkan hasil pada setiap elemen halaman seperti heading, daftar, tautan, dll.
- Hasil halaman global. Di dalam kotak merah, bagian atas halaman, adalah hasil halaman global. Ini menampilkan hasil keseluruhan halaman.
Laporan
Berikut adalah ringkasan laporan aksesibilitas untuk blog saya:
- 11 Kesalahan
- 7 tombol kosong. Sebuah tombol kosong atau tidak memiliki teks nilai.
- 4 tautan kosong. Sebuah tautan tidak berisi teks.
- 13 Peringatan
- 6 teks non-tautan bergaris bawah. Garis bawah seharusnya digunakan untuk tautan
- 3 Elemen Noscript. Terdapat elemen
<noscript>. - 1 heading tingkat 1 hilang
- 1 heading yang mungkin
- 2 teks alternatif berlebihan. Gambar dengan alt diawali seperti "gambar"
- 3 Fitur
- 2 ARIA
- 7 Elemen struktural
Anda dapat mengunjungi tautan ini untuk melihat laporan lengkapnya. Laporan juga memberikan alasan rinci tentang setiap kesalahan.
Tantangan Pengembangan Website yang Aksesibel
Mengembangkan website aksesibel memiliki beberapa tantangan dari segi teknik dan non-teknik, beberapa di antaranya:
- Kompleks untuk mengembangkan website aksesibel yang efektif. Insinyur harus hati-hati membuat struktur web yang baik, bekerja lebih keras memikirkan deskripsi media, menambahkan peran ARIA pada tempatnya, membuat desain aksesibel dengan kontras warna yang baik dan dapat diimplementasikan.
- Kurangnya persyaratan hukum atau penegakan. Di Indonesia, regulasi mengenai aksesibilitas web belum ada, tidak seperti di Eropa atau negara maju lainnya. Kondisi ini membuat perusahaan kurang fokus pada hal ini.
- Kesalahpahaman tentang basis pengguna. Beberapa orang mungkin meremehkan jumlah individu dengan disabilitas yang mengandalkan website aksesibel (seperti berpikir hanya sedikit orang buta yang menggunakannya). Pada kenyataannya, ada populasi signifikan orang dengan berbagai disabilitas, termasuk gangguan penglihatan, pendengaran, motorik, dan kognitif, yang membutuhkan konten web yang aksesibel. Orang tanpa disabilitas juga diuntungkan dengan website aksesibel yang dapat dinavigasi dengan keyboard jika mereka mengisi formulir tanpa perlu menyentuh mouse, cukup tekan "tab tab tab".
Untuk mengatasi tantangan ini, penting untuk menyadari arti penting aksesibilitas web, memberikan edukasi dan pelatihan tentang praktik desain dan pengembangan yang aksesibel, menyoroti manfaat aksesibilitas.
Reference
https://adasitecompliance.com/website-accessibility-features/