Meningkatkan aksesibilitas untuk laman web
Kumpulan dokumen ini adalah versi berbasis teks dari sebagian konten yang tercakup dalam kursus mdpi tentang Aksesibilitas. Pelatihan ini tidak dimaksudkan sebagai transkripsi langsung dari kursus video. Format ini dimaksudkan sebagai perlakuan yang lebih ringkas terhadap prinsip dan praktik aksesibilitas, yang menggunakan konten asli kursus tersebut sebagai dasar.
Ringkasan
- Mempelajari arti aksesibilitas dan cara menerapkannya pada pengembangan web.
- Pelajari cara membuat {i>website<i} yang dapat diakses dan digunakan oleh semua orang.
- Pelajari cara menyertakan aksesibilitas dasar dengan dampak minimal pada pengembangan.
- Pelajari fitur HTML apa saja yang tersedia dan cara menggunakannya untuk meningkatkan aksesibilitas.
- Mempelajari teknik aksesibilitas lanjutan untuk membuat pengalaman aksesibilitas yang luar biasa.
Dengan memahami aksesibilitas, cakupannya, dan dampaknya, Anda dapat menjadi developer web yang lebih baik. Panduan ini dimaksudkan untuk membantu memahami cara membuat situs dapat diakses dan digunakan oleh semua orang.
"Aksesibilitas" bisa jadi sulit dieja, tetapi tidak harus sulit dicapai. Dalam panduan ini, Anda akan melihat beberapa cara mudah untuk membantu meningkatkan aksesibilitas dengan upaya minimal, cara menggunakan apa yang sudah ada di HTML untuk membuat antarmuka yang lebih mudah diakses dan andal, dan cara memanfaatkan beberapa teknik lanjutan untuk membuat pengalaman yang mudah diakses dan dipoles.
Anda juga akan menemukan banyak teknik yang akan membantu Anda membuat antarmuka yang lebih menyenangkan dan mudah digunakan oleh semua pengguna, bukan hanya bagi penyandang disabilitas.
Tentu saja, banyak developer hanya memiliki pemahaman yang kurang jelas tentang arti aksesibilitas - ada hubungannya dengan kontrak pemerintah, checklist, dan pembaca layar, bukan? - dan banyak kesalahpahaman yang beredar. Misalnya, banyak developer merasa bahwa menangani aksesibilitas akan memaksa mereka untuk memilih antara membuat pengalaman yang menyenangkan dan menarik, dan pengalaman yang kikuk serta jelek tetapi dapat diakses.
Tentu saja, sama sekali tidak demikian, jadi mari kita perjelas sebelum kita membahas hal lain. Apa yang kami maksud dengan aksesibilitas, dan apa yang harus kita pelajari?
Apa yang dimaksud dengan aksesibilitas?
Umumnya, ketika kami mengatakan bahwa suatu situs dapat diakses, maksud kami adalah konten situs tersedia, dan fungsinya dapat dioperasikan, oleh siapa saja. Sebagai developer, mudah untuk mengasumsikan bahwa semua pengguna dapat melihat dan menggunakan keyboard, mouse, atau layar sentuh, dan dapat berinteraksi dengan konten halaman dengan cara yang sama seperti Anda. Hal ini dapat menghasilkan pengalaman yang berfungsi dengan baik bagi sebagian orang, tetapi menimbulkan masalah yang berkisar dari gangguan sederhana hingga acara-penghalang bagi orang lain.
Aksesibilitas mengacu pada pengalaman pengguna yang mungkin berada di luar rentang sempit pengguna "standar", yang mungkin mengakses atau berinteraksi dengan berbagai hal secara berbeda dari yang Anda harapkan. Secara khusus, hal ini menyangkut pengguna yang mengalami beberapa jenis gangguan atau disabilitas - dan perlu diingat bahwa pengalaman tersebut mungkin bersifat non-fisik atau sementara.
Misalnya, meskipun kita cenderung memusatkan diskusi aksesibilitas pada pengguna yang memiliki gangguan fisik, kita semua dapat memahami pengalaman menggunakan antarmuka yang tidak dapat diakses oleh kita karena alasan lain. Pernahkah Anda mengalami masalah saat menggunakan situs desktop di ponsel, atau melihat pesan "Konten ini tidak tersedia di area Anda", atau tidak dapat menemukan menu yang biasa Anda gunakan di tablet? Semua itu adalah masalah aksesibilitas.
Setelah mempelajari lebih lanjut, Anda akan menemukan bahwa mengatasi masalah aksesibilitas dalam pemahaman yang lebih luas dan lebih umum ini hampir selalu meningkatkan pengalaman pengguna untuk semua orang. Perhatikan contohnya:
Formulir ini memiliki beberapa masalah aksesibilitas.
- Kontrasnya rendah, sehingga sulit dibaca oleh pengguna yang memiliki gangguan penglihatan.
- Memiliki label di sebelah kiri dan kolom di sebelah kanan menyulitkan banyak orang untuk mengaitkannya, dan hampir mustahil bagi seseorang yang perlu memperbesar untuk menggunakan halaman; bayangkan melihat ini di ponsel dan harus menggeser untuk mencari tahu apa yang terjadi.
- Label "Ingat detail?" tidak dikaitkan dengan kotak centang, jadi Anda hanya perlu mengetuk atau mengklik kotak kecil, bukan hanya mengklik label; juga, seseorang yang menggunakan pembaca layar akan kesulitan mengetahui pengaitannya.
Sekarang, mari kita rayakan tongkat aksesibilitas dan lihat formulir yang telah diperbaiki masalah tersebut. Kita akan membuat teks lebih gelap, mengubah desain sehingga label dekat dengan hal-hal yang diberi label, dan memperbaiki label agar dikaitkan dengan kotak centang sehingga Anda juga dapat mengalihkannya dengan mengklik label.
Mana yang lebih suka Anda gunakan? Jika Anda mengucapkan "versi yang dapat diakses", berarti Anda sudah memahami premis utama panduan ini. Sering kali, sesuatu yang menjadi hambatan penuh bagi segelintir pengguna juga menjadi masalah bagi banyak pengguna lainnya, jadi dengan memperbaiki masalah aksesibilitas, Anda akan meningkatkan pengalaman bagi semua orang.
Pedoman Aksesibilitas Konten Web
Dalam panduan ini, kita akan merujuk ke Panduan Aksesibilitas Konten Web (WCAG) 2.0, serangkaian panduan dan praktik terbaik yang dikumpulkan oleh para pakar aksesibilitas untuk membahas arti "aksesibilitas" secara metodis.
WCAG disusun berdasarkan empat prinsip yang sering disebut dengan akronim POUR:
Dapat dilihat: Dapatkah pengguna melihat konten? Hal ini membantu kami mengingat bahwa hanya karena sesuatu dapat dipersepsikan dengan satu indera, seperti penglihatan, bukan berarti semua pengguna dapat melihatnya.
Dapat dioperasikan: Dapatkah pengguna menggunakan komponen UI dan menavigasi konten? Misalnya, sesuatu yang memerlukan interaksi pengarahan kursor tidak dapat dioperasikan oleh seseorang yang tidak dapat menggunakan mouse atau layar sentuh.
Dapat dipahami: Dapatkah pengguna memahami kontennya? Dapatkah pengguna memahami antarmuka dan apakah cukup konsisten untuk menghindari kebingungan?
Kuat: Dapatkah konten digunakan oleh berbagai agen pengguna (browser)? Apakah AI dapat digunakan dengan teknologi pendukung?
Meskipun WCAG memberikan ringkasan komprehensif tentang apa artinya konten dapat diakses, tetapi juga bisa sedikit membingungkan. Untuk membantu mengurangi hal ini, grup WebAIM(Web Accessibility in Mind) telah menyaring panduan WCAG ke dalam checklist yang mudah diikuti, yang ditargetkan secara khusus untuk konten web.
Checklist WebAIM dapat memberi Anda ringkasan tingkat tinggi tentang hal yang perlu diterapkan, sekaligus menautkan ke spesifikasi WCAG yang mendasarinya jika Anda memerlukan definisi yang diperluas.
Dengan alat ini, Anda dapat memetakan arah pekerjaan aksesibilitas dan merasa yakin bahwa, selama project Anda memenuhi kriteria yang diuraikan, pengguna akan memiliki pengalaman positif saat mengakses konten Anda.
Memahami keberagaman pengguna
Saat mempelajari tentang aksesibilitas, akan ada gunanya pemahaman tentang keberagaman pengguna di dunia dan jenis topik aksesibilitas yang memengaruhi mereka. Untuk menjelaskan lebih lanjut, berikut adalah sesi tanya jawab informatif dengan Victor Tsaran, Manajer Program Teknis di Google, yang buta total.
Apa yang Anda kerjakan di Google?
Di Google, tugas saya adalah membantu memastikan bahwa produk kami berfungsi untuk beragam pengguna, terlepas dari keterbatasan atau kemampuan.
Kelemahan jenis apa yang dimiliki pengguna?
Ketika kita memikirkan tentang jenis kelemahan yang akan menyulitkan seseorang untuk mengakses konten kita, banyak orang akan langsung membayangkan seorang pengguna tunanetra seperti saya. Dan memang benar, gangguan ini bisa sangat membuat frustrasi atau bahkan mustahil untuk menggunakan banyak situs web.
Banyak teknik web modern memiliki efek samping tidak menguntungkan pada pembuatan situs yang tidak berfungsi dengan baik dengan alat yang digunakan oleh pengguna tunanetra untuk mengakses web. Namun, sebenarnya aksesibilitas lebih dari itu. Menurut kami, ada gunanya melihat kelemahan ke dalam empat kelompok besar: visual, motorik, pendengaran, dan kognitif.
Mari kita bahas satu per satu. Dapatkah Anda memberikan beberapa contoh gangguan penglihatan?
Gangguan penglihatan dapat dibagi menjadi beberapa kategori: Pengguna tanpa penglihatan, seperti saya, dapat menggunakan pembaca layar, braille, atau kombinasi keduanya.
Sekarang, tidak benar-benar tidak biasa tanpa kemampuan melihat sama sekali, tapi tetap saja, tetap saja ada kemungkinan Anda mengenal atau bertemu dengan setidaknya satu orang yang tidak bisa melihat sama sekali. Namun, ada banyak juga yang kami sebut pengguna dengan gangguan penglihatan.
Kasus ini bisa terjadi secara luas, mulai dari orang seperti istri saya, yang tidak memiliki kornea - jadi meskipun pada dasarnya dia dapat melihat sesuatu, dia kesulitan membaca tulisannya dan dianggap buta secara hukum - hingga seseorang yang mungkin hanya memiliki penglihatan yang buruk dan perlu memakai kacamata resep yang sangat kuat.
Ada banyak sekali akomodasi yang digunakan oleh orang-orang dalam kategori ini: beberapa menggunakan pembaca layar atau penampil braille (saya pernah mendengar ada seorang perempuan yang membaca braille yang ditampilkan di layar karena lebih mudah dilihat daripada teks cetak), atau mereka mungkin menggunakan teknologi text-to-speech tanpa fungsi pembaca layar penuh. Atau, dia mungkin menggunakan layar pembesar atau zoom yang lebih besar untuk memperbesar. Mereka juga mungkin menggunakan opsi kontras tinggi seperti mode kontras tinggi di sistem operasi, ekstensi browser kontras tinggi, atau tema kontras tinggi untuk situs web.
Banyak pengguna bahkan menggunakan kombinasi ini, seperti teman saya Laura yang menggunakan kombinasi mode kontras tinggi, zoom browser, dan text-to-speech.
Penglihatan rendah adalah sesuatu yang bisa dikaitkan dengan banyak orang. Pada awalnya, kita semua mengalami penurunan penglihatan seiring pertambahan usia, jadi meskipun kamu belum mengalaminya mungkin kamu pernah mendengar orang tuamu mengeluhkannya. Tetapi banyak orang merasa frustrasi saat membawa laptop mereka keluar dari jendela yang cerah dan tiba-tiba mereka tidak dapat membaca apa pun! Atau siapa pun yang telah menjalani operasi laser atau mungkin hanya harus membaca sesuatu dari seluruh ruangan mungkin telah menggunakan salah satu akomodasi yang saya sebutkan. Jadi saya pikir cukup mudah bagi pengembang untuk memiliki empati bagi pengguna yang memiliki gangguan penglihatan.
Oh, jangan lupa untuk menyebutkan orang-orang dengan penglihatan warna yang buruk - sekitar 9% pria memiliki beberapa bentuk kekurangan penglihatan warna! Ditambah sekitar 1% perempuan. Mereka mungkin kesulitan membedakan merah dan hijau, atau kuning dan biru. Pikirkan tentang hal itu saat Anda mendesain validasi formulir.
Bagaimana dengan gangguan motorik?
Ya, gangguan motorik, atau gangguan ketangkasan. Kelompok ini bervariasi mulai dari mereka yang lebih memilih untuk tidak menggunakan mouse, karena mungkin mereka pernah mengalami RSI atau semacamnya dan merasa menyakitkan, hingga seseorang yang mungkin lumpuh secara fisik dan memiliki rentang gerakan yang terbatas untuk bagian tubuh tertentu.
Pengguna yang mengalami gangguan motorik dapat menggunakan keyboard, perangkat tombol akses, kontrol suara, atau bahkan perangkat pelacak mata untuk berinteraksi dengan komputer mereka.
Mirip dengan gangguan penglihatan, mobilitas juga dapat menjadi masalah sementara atau situasional: Mungkin Anda mengalami patah pergelangan tangan pada tangan mouse. Mungkin {i>trackpad<i} rusak di laptop Anda, atau Anda sedang naik kereta yang goyang. Ada banyak situasi yang dapat menghambat mobilitas pengguna. Dengan memastikan bahwa kami melayani mereka, kami akan meningkatkan pengalaman secara keseluruhan, baik untuk siapa saja dengan gangguan permanen maupun bagi siapa saja yang untuk sementara tidak dapat menggunakan UI berbasis pointer.
Baik, mari kita bicara tentang gangguan pendengaran.
Kelompok ini bisa mencakup orang yang sangat tuli hingga yang sulit mendengar. Dan mirip dengan penglihatan, pendengaran kita cenderung menurun seiring bertambahnya usia. Banyak dari kita menggunakan kemampuan umum seperti alat bantu dengar untuk membantu kita.
Bagi pengguna yang memiliki gangguan pendengaran, kita perlu memastikan bahwa kita tidak mengandalkan suara. Jadi, pastikan untuk menggunakan hal-hal seperti teks dan transkrip video, serta menyediakan beberapa alternatif, jika suara merupakan bagian dari antarmukanya.
Seperti yang kita lihat pada gangguan penglihatan dan motorik, sangat mudah untuk membayangkan situasi di mana seseorang yang telinganya bekerja dengan baik juga akan mendapat manfaat dari akomodasi ini. Banyak teman-teman saya bilang mereka suka kalau video dilengkapi teks dan transkrip, karena jika mereka berada di kantor yang tidak berdesain terbuka dan tidak membawa headphone, mereka masih bisa menonton video!
Baiklah, bisa ceritakan sedikit tentang gangguan kognitif?
Ada berbagai kondisi kognitif seperti ADD, Disleksia, dan Autisme, yang berarti orang ingin atau perlu mengakses sesuatu dengan cara yang berbeda. Akomodasi untuk grup ini secara alami sangat beragam, tetapi kami pasti menemukan beberapa tumpang tindih dengan area lain, seperti menggunakan fungsi zoom untuk mempermudah pembacaan atau konsentrasi. Selain itu, pengguna ini mungkin merasa bahwa desain yang sangat minimalis berfungsi paling baik karena meminimalkan distraksi dan beban kognitif.
Semua orang bisa memahami stres akibat kelebihan beban kognitif, jadi jelas jika kita membuat sesuatu yang bekerja dengan baik untuk orang yang memiliki gangguan kognitif, kita akan menciptakan sesuatu yang akan menjadi pengalaman yang menyenangkan bagi semua orang.
Jadi, bagaimana Anda merangkum pendapat Anda tentang aksesibilitas?
Saat melihat berbagai kemampuan dan disabilitas yang mungkin dimiliki orang, Anda dapat melihat bahwa mendesain dan membuat produk hanya untuk orang yang memiliki penglihatan, pendengaran, ketangkasan, dan kognitif yang sempurna tampak sangat sempit. Hal ini hampir merugikan diri sendiri, karena kami membuat pengalaman yang lebih menegangkan dan kurang dapat digunakan untuk semua orang, dan bagi beberapa pengguna yang menciptakan pengalaman yang benar-benar mengecualikan mereka.
Dalam wawancara ini, Victor mengidentifikasi berbagai gangguan, dan memasukkannya ke dalam empat kategori besar: visual, motor, pendengaran, dan kognitif. Ia juga menunjukkan bahwa setiap jenis disabilitas mungkin bersifat situasional, sementara, atau permanen.
Mari kita lihat beberapa contoh di dunia nyata dari gangguan akses dan melihat di mana mereka termasuk dalam kategori dan jenis tersebut. Perhatikan bahwa beberapa kelemahan mungkin masuk ke dalam lebih dari satu kategori atau jenis.
| Situasional | Sementara | Permanen | |
|---|---|---|---|
| Visual | gejolak | kebutaan | |
| Motor | menggendong bayi | patah lengan, RSI* | RSI* |
| Pendengaran | kantor berisik | ||
| Kognitif | gejolak |
Cedera Tegang Berulang: misalnya, sindrom terowongan karpal, siku tenis, jari pemicu
Langkah berikutnya
Kita telah membahas cukup banyak hal! Anda telah membaca tentang
- apa yang dimaksud dengan aksesibilitas dan mengapa hal itu penting bagi semua orang
- daftar periksa aksesibilitas WCAG dan WebAIM
- berbagai jenis kelemahan yang harus Anda pertimbangkan
Untuk panduan lainnya, kita akan mendalami aspek praktis dalam membuat situs web yang dapat diakses. Kita akan mengatur upaya ini dalam tiga bidang subjek utama:
Focus: Kita akan melihat cara membangun berbagai hal yang dapat dioperasikan dengan keyboard, bukan mouse. Hal ini tentunya penting bagi pengguna yang menderita gangguan motorik, tetapi juga memastikan bahwa UI Anda cocok untuk semua pengguna.
Semantik: Kami akan memastikan bahwa kami mengekspresikan antarmuka pengguna dengan cara andal yang berfungsi dengan berbagai teknologi pendukung.
Gaya visual: Kita akan mempertimbangkan desain visual dan melihat beberapa teknik untuk membuat elemen visual antarmuka sefleksibel dan seberguna mungkin.
Masing-masing topik itu bisa mengisi keseluruhan pelatihan, jadi kita tidak akan membahas setiap aspek pembuatan situs web yang aksesibel. Namun, kami akan memberi Anda informasi yang cukup untuk memulai, dan mengarahkan Anda ke beberapa tempat bagus untuk mempelajari setiap topik lebih lanjut.