Aksesibilitas Web: Mengapa Standar W3C Sering Diabaikan

Diterbitkan: 2022-03-11

Istilah du jour adalah aksesibilitas web —menurut saya, salah satu aspek desain web yang paling sering disalahpahami dan diterapkan dengan buruk. Kesalahpahaman yang umum adalah bahwa aksesibilitas dirancang hanya untuk penyandang disabilitas. Faktanya, semua orang mendapat manfaat dari konten yang dapat diakses , dan audiens Anda akan meningkat dengan mendapatkan akses ke konten yang dapat diakses pada platform yang berbeda atau dengan cara yang berbeda, karena mereka dapat menggunakan konten Anda dengan lebih sedikit batasan.

Sayangnya, banyak pengembang web tidak membuat konten mereka dapat diakses dan tidak mengikuti pedoman aksesibilitas web; dengan demikian, banyak orang mengalami kesulitan yang tidak perlu menggunakan desain mereka dan menikmati konten. Dalam kasus ekstrim, kelompok pengguna tertentu tidak dapat menggunakan situs web seperti itu secara efektif sama sekali.

Membangun konten yang dapat diakses harus menjadi kebiasaan bagi setiap pengembang, perancang, atau pembuat konten, seperti halnya pertimbangan landai, tangga, dan lift bagi seorang arsitek yang merancang bangunan baru.

Mari kita lihat lebih dekat apa yang ada di balik layar dan mengapa begitu banyak pengembang tampaknya mengabaikan standar aksesibilitas web tanpa alasan yang jelas.

1. Apa Arti “Desain yang Dapat Diakses”?

Konten yang dapat diakses adalah konten yang dapat digunakan semua orang . Kami tidak mengetahui semua aspek tentang bagaimana pengguna mengakses konten kami, jadi kami perlu merancang dengan mempertimbangkan aksesibilitas sebelumnya.

Seperti yang saya soroti sebelumnya, ini tidak menyangkut penyandang disabilitas, terhitung sekitar 15% dari populasi dunia. Dalam kehidupan nyata, pengguna sering kali tidak mengonsumsi konten dan berinteraksi dengan perangkat dengan cara yang sama persis seperti yang dibayangkan selama pengembangan. Konten yang dapat diakses juga diperlukan karena alasan hukum di banyak yurisdiksi. Baca “Faktor Hukum dan Kebijakan dalam Mengembangkan Kasus Bisnis Aksesibilitas Web untuk Organisasi Anda” untuk informasi tambahan tentang kepatuhan aksesibilitas.

Pertimbangkan skenario berikut sambil memikirkan konten yang dapat diakses untuk pengguna yang mungkin:

Tidak dapat mendengar dengan baik. 360 juta orang di seluruh dunia memiliki gangguan pendengaran. Konten audio harus memiliki transkripsi dan video harus memiliki teks.
Tidak dapat melihat dengan baik. 285 juta orang diperkirakan mengalami gangguan penglihatan di seluruh dunia: 39 juta orang buta dan 246 orang mengalami gangguan penglihatan. Pengguna tunanetra mereka menggunakan pembaca layar (yang membaca konten menggunakan ucapan yang disintesis), tampilan braille yang dapat disegarkan (konten layar muncul di tampilan braille, dan pengguna dapat menavigasi dan berinteraksi dengan perangkat mereka menggunakan tombol di layar) atau tinggi -modus kontras.
Terkena disleksia. Orang dengan disleksia mengalami kesulitan dalam membaca dan memahami konten, terutama, misalnya, teks yang dibenarkan atau huruf besar semua.
Menderita keterbatasan fisik. Tidak semua orang bisa menggunakan semua perangkat. Misalnya, navigasi melalui konten harus tersedia tidak hanya untuk pengguna mouse, tetapi juga untuk pengguna yang tidak dapat menggunakan mouse.
Menggunakan perangkat seluler. Sesuaikan konten Anda untuk layar kecil. Izinkan pengguna untuk memperbesar atau memperbesar ukuran font.

2. Bagaimana Memastikan Aksesibilitas Web yang Baik

Orang-orang menggunakan cara yang sangat berbeda dalam menavigasi dan mengonsumsi konten. Ada pengguna yang perlu didukung oleh perangkat lunak tambahan yang membantu mereka mengakses konten dengan lebih mudah. Alat-alat ini, yang dikenal sebagai teknologi bantu, berkisar dari pembaca layar hingga layar sentuh dan penunjuk kepala.

Namun, aplikasi dan teknologi bantu Anda perlu berbicara satu sama lain. Tidak semua yang tertulis dalam HTML dapat dipahami sepenuhnya untuk teknologi bantu. Untuk membantu "menerjemahkan" konten dari "bahasa teknis" ke bahasa yang lebih mudah dibaca manusia, standar API aksesibilitas tambahan telah dibuat.

Diagram aksesibilitas web dasar ini akan memberi Anda gambaran yang lebih baik tentang cara kerja teknologi bantu.

Untuk mengilustrasikan cara kerjanya, mari kita lihat contoh kode sederhana:

 <a href="#” class=”button”>Delete</a>

Kode sederhana ini, untuk orang yang menggunakan pembaca layar, tidak berarti banyak. Itu bahkan menyesatkan dan hanya dibaca sebagai tautan dengan teks " Hapus ". Untuk membantu pengguna memahami metode apa yang digunakan untuk melakukan tindakan, kita dapat menggunakan atribut ARIA (Assistive Rich Internet Applications) (ditentukan di https://www.w3.org/TR/wai-aria/) untuk mengesampingkan peran aslinya. Kami mengubah arti tautan ke tombol dengan menambahkan atribut role="button" . Dengan cara itu, pembaca layar akan membacanya sebagai tombol, bukan tautan. Mana yang lebih tepat.

Singkatnya, atribut ARIA:

Memberikan atau meningkatkan semantik elemen non-semantik atau elemen semantik lainnya,
Memastikan bahwa konten dinamis (langsung) masih dapat diakses.
Memberikan peran untuk mendeskripsikan jenis widget yang ditentukan (menu, item pohon, penggeser, pengukur kemajuan, dll.).
Memberikan peran untuk menggambarkan struktur halaman web (judul, wilayah, dan tabel).
Memberikan status widget (dicentang, memiliki popup, dll.).
Menyediakan properti untuk drag-and-drop yang menjelaskan sumber drag dan target drop.

Apa itu Aksesibilitas dalam Desain Web?

Setiap kali Anda mendesain konten, pikirkan dua hal: bagaimana konten dapat dipahami dan bagaimana konten dapat dioperasikan . Mari kita periksa beberapa contoh untuk menggambarkan aksesibilitas dalam desain web.

Katakanlah Anda akan mendesain elemen dropdown pilih kustom. Berikut adalah hal-hal yang perlu dipertimbangkan saat merancang elemen:

Tandai status yang berbeda: diaktifkan, dinonaktifkan, hanya-baca.
Tandai elemen saat mendapatkan status fokus/arahkan kursor.
Tandai setiap elemen opsi saat mendapat status fokus/arahkan kursor.
Pastikan konten masih dapat dibaca ketika hanya teks yang diperbesar hingga level 200%.
Pastikan ada cukup kontras antara teks dan latar belakangnya. Ini membantu orang dengan penglihatan yang cukup rendah atau pada perangkat dalam kondisi pencahayaan yang ekstrim, misalnya, terkena sinar matahari langsung atau pada layar dengan kecerahan rendah, untuk membaca konten.

Contoh lain bisa memilih warna untuk menggambarkan keadaan. Berikut adalah hal-hal yang perlu dipertimbangkan saat merancang bagian di mana pengguna akan dapat mengambil warna:

Ada orang yang kesulitan membedakan warna tertentu. Jadi hijau tidak berarti hijau untuk semua pengunjung Anda. Untuk memperbaikinya, tambahkan deskripsi untuk setiap warna yang menjelaskan tujuannya.
Tandai setiap elemen saat mendapatkan status fokus/arahkan kursor.
Pastikan ada cukup ruang antar elemen sehingga setiap elemen dapat dengan mudah diaktifkan, misalnya, pada perangkat dengan area pandang yang lebih kecil.

3. Pengujian Aksesibilitas: Mulai Dari Mana?

Tidak ada satu cara untuk memeriksa dan memastikan bahwa konten web dapat diakses sepenuhnya. Beberapa teknik perlu digunakan untuk memverifikasi dan memperbaiki masalah aksesibilitas. Anda dapat mulai dengan mendefinisikan masalah , solusi , dan prioritas .

Mendefinisikan masalah

Saat mengerjakan masalah aksesibilitas, selalu coba buat satu tiket per masalah dengan judul yang jelas. Ini harus menyederhanakan pemahaman masalah dan membantu menentukan prioritas.

Contoh buruk: Pengguna tidak dapat menggunakan keyboard di halaman.

Contoh bagus: Tidak dapat menggunakan navigasi keyboard di menu utama.

Contoh buruk itu mengarah pada kasus yang akan cukup sulit untuk diselesaikan dalam waktu singkat. Diskusi tentang berbagai topik mungkin dimulai di bagian komentar juga, karena judul tiketnya terlalu umum.

Contoh yang baik menunjukkan dengan tepat masalah dan hanya berfokus pada satu hal: navigasi keyboard di menu utama.

Prioritaskan Masalah Aksesibilitas Web

Prioritas penting karena menentukan masalah mana yang harus diperbaiki terlebih dahulu. Misalnya, WCAG dibagi dengan tiga tingkat kesesuaian: A, AA, AAA, yang berarti Anda harus mulai dari tingkat minimum A, tetapi itu tidak secara otomatis berarti bahwa tingkat AA dan AAA hanya "bagus untuk dimiliki." Semua level itu penting, dan penting untuk tidak memprioritaskan dengan asumsi bahwa level A saja sudah cukup.

Namun, level WCAG (atau panduan lainnya) terkadang cukup sulit untuk dipahami dan untuk sedikit menyederhanakannya, Anda juga dapat mempertimbangkan definisi prioritas berikut:

Kritis – Masalah yang mencegah pengguna menggunakan aplikasi. Tidak ada solusi yang tersedia.
Utama – Masalah yang membuat penggunaan aplikasi menjadi sulit dan/atau membingungkan, tetapi tidak menghalangi kemampuan pengguna untuk menyelesaikan operasi.
Kecil – Masalah yang mengganggu tetapi tidak menghambat penggunaan, atau peningkatan yang dapat dilakukan pada aplikasi.
Info – Tidak mengikuti praktik terbaik. Rekomendasi umum untuk perbaikan.

Solusi

Tak satu pun dari pedoman—maksud saya WCAG, Bagian 508 atau ADA—akan memberi Anda solusi langsung dalam hal kode teknis tentang bagaimana masalah tertentu harus diperbaiki. Mereka hanya mendefinisikan perilaku yang diharapkan. Namun, WCAG juga telah menetapkan prosedur pengujian yang akan membantu untuk memahami cara mereproduksi masalah dan ada grup komunitas Pemantauan WCAG Otomatis, komunitas W3C dengan fokus pada pengembangan aturan yang andal untuk pengujian aksesibilitas web, baik otomatis maupun semi-otomatis.

Contoh untuk teknik WCAG G4 ("Mengizinkan konten dijeda dan dimulai ulang dari tempat dijeda"):

Prosedur pengetesan

Pada halaman dengan konten bergerak atau bergulir,

Gunakan mekanisme yang disediakan di halaman web atau oleh agen pengguna untuk menjeda konten yang bergerak atau bergulir.
Periksa apakah gerakan atau pengguliran telah berhenti dan tidak dimulai ulang dengan sendirinya.
Gunakan mekanisme yang disediakan untuk memulai ulang konten yang bergerak.
Periksa apakah gerakan atau pengguliran telah dilanjutkan dari titik di mana gerakan itu dihentikan.

Hasil yang diharapkan

No 2 dan No 4 benar.

Seperti yang kita lihat, tidak ada solusi teknis, tetapi perilaku yang diharapkan didefinisikan. Bagaimana pengembang web mengimplementasikannya terserah mereka.

Pedoman Aksesibilitas Web dan Standar W3C

Mengikuti standar web dasar harus menjadi titik awal Anda:

Yang paling umum adalah Pedoman Aksesibilitas Konten Web yang dikenal sebagai WCAG. WCAG 2.0 adalah “standar teknis yang stabil dan dapat direferensikan. Ini memiliki 12 pedoman yang disusun berdasarkan 4 prinsip: dapat dipahami, dapat dioperasikan, dapat dimengerti, dan kuat. Untuk setiap pedoman, ada kriteria keberhasilan yang dapat diuji, yang berada di tiga level: A, AA, dan AAA.”
Teknik untuk WCAG 2.0 adalah panduan komprehensif untuk penulis konten web.
Persyaratan Pengguna Aksesibilitas Media W3C — Dokumen ini menyajikan persyaratan aksesibilitas yang dimiliki pengguna penyandang disabilitas sehubungan dengan audio dan video di web.
Komunikasi Abad Kedua Puluh dan Undang-Undang Aksesibilitas Video — CVAA dibagi menjadi dua judul atau bagian yang luas. Judul I membahas akses komunikasi untuk membuat produk dan layanan menggunakan Broadband dapat diakses sepenuhnya oleh penyandang disabilitas. Judul II undang-undang aksesibilitas membuka jalan baru untuk memudahkan penyandang disabilitas melihat program video di televisi dan internet.
Bagian 508 — Persyaratan aksesibilitas untuk teknologi informasi dan komunikasi (TIK) yang berlaku untuk semua lembaga federal ketika mereka mengembangkan, mendapatkan, memelihara, atau menggunakan elektronik dan teknologi informasi.
Aksesibilitas Situs Web di bawah Judul II Undang-Undang Penyandang Disabilitas Amerika (ADA) — Di sana, Anda akan mempelajari bagaimana persyaratan nondiskriminasi Judul II ADA berlaku untuk situs web pemerintah negara bagian dan lokal.

Pengujian Aksesibilitas Web: Bagaimana cara mengetahui apakah konten saya dapat diakses atau tidak?

Berikut adalah pos pemeriksaan dasar dan mendasar yang akan membantu Anda membuat konten web Anda lebih mudah diakses dari langkah pertama:

Validasi HTML Anda. Pastikan bahwa struktur HTML tidak memiliki kesalahan, karena teknologi bantu dapat memiliki masalah dalam menafsirkan konten halaman.
Uji dengan keyboard saja. Pastikan bahwa semua elemen yang dapat ditindaklanjuti dapat diakses hanya dengan menggunakan keyboard. Selain itu, Anda juga harus dapat melakukan semua tindakan menggunakan keyboard, misalnya mengirimkan formulir.
Uji dengan alat pengujian aksesibilitas dan validator. Gunakan alat yang memindai dan memverifikasi potensi kesalahan aksesibilitas.
Konten dinamis. Beri tahu pengguna pembaca layar tentang perubahan dinamis, misalnya bila hasil penelusuran telah berubah.
Jangan mengandalkan warna untuk menggambarkan artinya. Gunakan warna beserta keterangannya, misalnya peringatan [kotak kuning].
Jangan hapus garis luar pada fokus. Ini adalah fitur yang biasanya dihapus menggunakan outline: 0; Jangan lakukan itu, karena pengguna keyboard akan kehilangan orientasi pada halaman. Anda dapat mempertimbangkan untuk menghapus kerangka fokus untuk pengguna non-keyboard, tetapi selalu berikan kerangka fokus untuk pengguna keyboard.
Pesan kesalahan. Selalu beri tahu pengguna cara memperbaiki kesalahan. Jangan hanya menyatakan bahwa data tidak valid.
Urutan tab. Pastikan navigasi berbasis tab mengikuti konvensi yang ditetapkan dalam antarmuka pengguna grafis. Minimal, harus mengikuti arah membaca bahasa default aplikasi. Dalam bahasa Inggris, misalnya, urutan membaca adalah dari atas ke bawah, dari kiri ke kanan; dalam bahasa Arab itu dari atas ke bawah, kanan ke kiri.
Perbesar. Pastikan konten halaman masih dapat dibaca saat memperbesar teks hingga 200%.
Matikan gambar. Apakah Anda masih dapat menggunakan halaman dengan nyaman? Apakah ada teks alternatif untuk semua gambar?
Pembaca layar. Uji untuk melihat apakah Anda dapat membaca dan menavigasi konten menggunakan setidaknya satu pembaca layar, misalnya, VoiceOver, Windows Narrator, atau NVDA.
Modus kontras tinggi. Periksa untuk melihat apakah konten masih dapat dibaca saat beralih ke mode kontras tinggi.
Ukuran huruf. Pastikan ukuran font pada halaman memiliki ukuran tidak kurang dari 10px.

4. Kesalahan Umum dalam Aksesibilitas Web

Kesalahan paling umum adalah gagal mengidentifikasi persyaratan aksesibilitas sebelum pengembangan . Sayangnya, aksesibilitas nanti akan menjadi bagian dari pembangunan, semakin sulit untuk mengimplementasikan solusi.

Berikut adalah daftar dengan beberapa kesalahan paling umum yang dilakukan pengembang saat menerapkan aksesibilitas:

Tidak ada kemampuan untuk menavigasi konten hanya dengan menggunakan keyboard .
Menyalahgunakan properti outline CSS. Dalam kebanyakan kasus, outline: 0; digunakan, yang berarti bahwa garis di sekitar setiap elemen yang dapat ditindaklanjuti tidak terlihat lagi. Jangan gunakan outline: 0; atau outline: 0 !important; . Pengguna akan kehilangan kemampuan untuk melihat elemen yang sedang difokuskan saat menavigasi konten, kecuali jika ada alternatif lain untuk itu, misalnya, menggunakan properti CSS border .
Kehilangan fokus dari elemen saat ini, misalnya, karena manipulasi DOM atau menggunakan metode blur() . Ini sering terjadi untuk aplikasi satu halaman.
Tidak ada pemberitahuan untuk pengguna pembaca layar bahwa ada sesuatu yang berubah, misalnya, konten telah diunduh menggunakan API XMLHttpRequest dan perubahan baru pada UI telah dirender, tetapi pengguna belum diberi tahu. Ini sering terjadi dengan aplikasi satu halaman.
Pemilih tanggal tidak dapat diakses. Dalam banyak kasus, pemilih tanggal yang tidak dapat diakses digunakan. Pengguna tidak dapat menavigasi melalui opsi kalender menggunakan keyboard.
Menggunakan ekstensi yang mengklaim dapat memperbaiki masalah aksesibilitas secara otomatis . Gunakan dengan hati-hati dan periksa hasilnya. Menyalahgunakannya dapat menciptakan lebih banyak masalah daripada solusi.
Menambah atribut tabindex elemen dengan nomor indeks lebih dari 0. Tujuan penggunaan tabindex dengan indeks lebih dari 0 sebagian besar untuk "memperbaiki" jalur navigasi. Namun, pertimbangkan untuk mengubah struktur HTML untuk mendapatkan jalur navigasi yang alami. Memanipulasinya menggunakan tabindex dapat menyebabkan masalah pemeliharaan dan jalur navigasi yang tidak dapat diprediksi.
Hirarki judul yang salah. Sayangnya, masih cukup sering terlihat, tetapi hierarki header tidak dibangun dengan benar, misalnya <h1> , <h5> , dan <h2> . Pengguna pembaca layar menggunakan tajuk untuk menavigasi bagian dan struktur yang tidak tepat membingungkan karena sulit untuk memahami konteksnya.
Tidak ada dukungan kontras tinggi. Ada orang yang menggunakan perangkat lunak mereka dalam mode kontras tinggi. Pastikan konten Anda masih dapat dipahami.
Menggunakan solusi CAPTCHA yang tidak dapat diakses. Sayangnya, semua CAPTCHA yang saya kenal tidak dapat diakses atau sangat sulit digunakan.
Terlalu banyak dan/atau animasi yang tidak dapat dijeda. Pemutaran otomatis video, iklan, atau carousel gambar sangat mengganggu.
Potongan besar teks. Teks yang diringkas dalam satu blok yang sangat besar, tanpa spasi, koma, atau titik. Sangat sulit untuk dibaca. Memisahkan menjadi bagian yang lebih kecil, lebih banyak paragraf, dan subjudul membantu mengatur konten teks dengan lebih baik.
Masalah zoom. Pastikan konten masih dapat dibaca dan dinavigasi saat diperbesar hingga 200%.
Mengandalkan warna. Sangat sering status suatu elemen hanya ditandai dengan warna, misalnya, status peringatan hanya ditandai dengan peluru kuning; warna ini tidak dirasakan dengan cara yang sama untuk orang buta warna.
Target kecil yang dapat diklik/ditekan. Area yang dapat diklik/dapat disentuh seringkali terlalu kecil. Membuatnya lebih besar memungkinkan pengguna untuk mengaktifkannya dengan lebih mudah.

Tapi Bagaimana Saya Meningkatkan Aksesibilitas Web?

Mendefinisikan masalah adalah satu hal. Memperbaikinya adalah hal lain dan seringkali tidak semudah kelihatannya. Itu karena implementasi API aksesibilitas tidak konsisten dan terkadang kita perlu mencari solusi atau bahkan menerima kenyataan bahwa sesuatu tidak akan berfungsi sama sekali ketika kita mencoba memperbaiki masalah.

Dalam hal alat, tidak ada alat tunggal yang dapat memeriksa semua kemungkinan kombinasi, tetapi sebagai awal yang baik, alat ini akan membantu:

Layanan Validasi Markup W3C — Hanya untuk memastikan bahwa konten HTML tidak memiliki kesalahan. Jika struktur HTML memiliki kesalahan, maka keluarannya tidak dapat diprediksi dan tidak dapat diproses dengan baik, terutama oleh teknologi bantu yang berbeda.
https://www.w3.org/WAI/ER/tools/ — Daftar program atau layanan online yang membantu Anda menentukan apakah konten web memenuhi pedoman aksesibilitas.
Dan alat saya, ASLint https://www.aslint.org/, membantu Anda menemukan masalah aksesibilitas.

Ingatlah selalu bahwa tidak ada alat aksesibilitas yang dapat menggantikan pengujian manual , karena tidak semua skenario dapat sepenuhnya atau sama sekali otomatis, misalnya, memeriksa rasio kontras luminansi pada elemen dengan position: fixed; .

Fokus pada masalah yang menghalangi penggunaan aplikasi Anda, misalnya, pengguna tidak dapat menavigasi menu menggunakan keyboard.

Mengapa Penting untuk Membuat Konten Dapat Diakses

Semua orang ingin menyebarkan konten mereka seluas mungkin. Aksesibilitas membantu di area itu, di banyak tingkatan, mulai dari menjangkau audiens yang lebih besar hingga meningkatkan pengalaman pengguna untuk semua pengguna. Selain itu, aksesibilitas bukan hanya untuk apa yang biasanya Anda anggap sebagai penyandang disabilitas. Baik itu individu yang menua dan mengalami perubahan fisik yang menyertainya, seseorang yang jogging di hari yang cerah yang membutuhkan penyesuaian kontras otomatis di ponsel mereka, atau orang tua dengan tangan penuh tas belanja yang ingin mengirim pesan teks melalui suara, dapat diakses teknologi adalah teknologi yang dapat digunakan semua pengguna dari waktu ke waktu.

Sebagai bonus tambahan, efek positifnya adalah konten yang dapat diakses yang sepenuhnya memenuhi standar WCAG 2.0 lebih mudah untuk dirayapi dan dipahami oleh mesin telusur, dan itu dapat memiliki pengaruh yang signifikan terhadap peringkat situs. Dengan demikian, desain yang dapat diakses dapat mengarahkan lalu lintas tambahan ke situs web.

Terakhir, berikut adalah beberapa statistik yang perlu Anda pertimbangkan:

Lebih dari satu miliar orang di seluruh dunia mengalami beberapa jenis kecacatan.
Penuaan populasi. Antara tahun 2015 dan 2030, jumlah orang tua — mereka yang berusia 60 tahun atau lebih — di dunia diproyeksikan tumbuh sebesar 56 persen, dari 901 juta menjadi lebih dari 1,4 miliar.
Desain universal adalah kuncinya. Desain universal mengacu pada spektrum ide dan praktik yang luas untuk menghasilkan layanan, produk, dan lingkungan yang secara inheren dapat diakses dan digunakan oleh orang-orang dari semua kemampuan.
Jenis disabilitas: Ada lima kategori disabilitas, termasuk visual, mobilitas, bicara, kognisi, dan pendengaran.

Kita semua membutuhkan layanan berkualitas tinggi. Mari kita antarkan mereka juga .