Aksesibilitas digital mengacu pada praktik untuk membuat konten dan aplikasi digital yang cocok untuk digunakan oleh berbagai orang, termasuk mereka yang menderita gangguan penglihatan, motorik, pendengaran, bicara, atau kognitif.
Ada kepercayaan keliru bahwa Anda dapat membuat situs hanya dapat diakses dengan menginvestasikan banyak usaha dan uang, tetapi ini tidak perlu. Jika Anda merancang proyek sejak awal, dengan mempertimbangkan persyaratan yang relevan, Anda tidak perlu menambahkan fungsi dan konten khusus, yang berarti tidak akan ada biaya tambahan.
Jika ini adalah pertanyaan untuk memperbaiki kesalahan pada situs yang ada, maka beberapa upaya harus dilakukan di sini. Ketika saya bekerja di Carbon Health, kami pernah menguji situs untuk aksesibilitas menggunakan
ekstensi khusus di Chrome . Sudah di halaman utama, 28 pelanggaran ditemukan yang perlu dihilangkan. Pada pandangan pertama, tampaknya itu akan menjadi proses yang sangat melelahkan, tetapi segera menjadi jelas bahwa membuat perubahan tidak akan terlalu sulit - Anda hanya perlu menginvestasikan waktu dan memahami dasar-dasarnya. Kami berhasil mengurangi jumlah pelanggaran menjadi nol hanya dalam beberapa hari.
Saya ingin berbagi beberapa langkah sederhana yang telah kami ambil dan yang dapat membantu Anda. Prinsip-prinsip ini dirancang terutama untuk aplikasi seluler dan web. Tapi sebelum kita mulai, mari cari tahu mengapa ini perlu.
Mengapa mengupayakan aksesibilitas?
Kami, sebagai desainer, mampu dan berkewajiban untuk melakukan segala daya kami sehingga semua produk yang dibuat oleh kami dapat digunakan oleh semua orang, terlepas dari kemampuan, konteks atau situasi. Hal yang baik adalah keinginan untuk aksesibilitas - pada akhirnya memberikan pengalaman yang lebih positif bagi semua orang.
Jumlah penyandang cacat mencapai 56 juta di Amerika Serikat (yaitu, sedikit kurang dari seperlima populasi) dan sekitar satu miliar di seluruh dunia. Pada 2017,
814 tuntutan hukum diajukan untuk aksesibilitas situs web. Dua fakta ini dengan meyakinkan menunjukkan kepada kita pentingnya masalah ini.
Selain itu, aksesibilitas ternyata bermanfaat
dari sudut pandang bisnis : studi menunjukkan bahwa situs yang dapat diakses menempati posisi yang lebih tinggi dalam hasil pencarian, memiliki indikator SEO yang baik, memuat lebih cepat, merangsang praktik penulisan kode yang lebih baik dan selalu dibedakan dengan kegunaan yang sangat baik.
Tujuh aturan ini relatif mudah diikuti dan akan memungkinkan Anda untuk membawa produk ke level AA melalui sistem
Web Content Accessibility Guidelines (WCAG 2.0), membuatnya kompatibel dengan perangkat bantu dasar, termasuk pembaca layar, kaca pembesar layar, dan alat pengenalan suara.
1. Buat kontras warna cukup
Kontras warna adalah salah satu masalah aksesibilitas situs yang sering dilupakan. Orang tunanetra cenderung mengalami kesulitan membaca teks jika tidak cukup kontras dengan latar belakang. Menurut perkiraan oleh Organisasi Kesehatan Dunia (WHO)
dalam dokumennya tentang gangguan penglihatan dan kebutaan , rasio kecerahan teks dengan latar belakang harus setidaknya 4,5: 1 (agar sesuai dengan level AA). Untuk font yang lebih besar dan tebal, tunjangan diperbolehkan - mereka lebih mudah dibedakan walaupun dengan kontras rendah. Jika ukuran teks Anda 14-18pt atau lebih, ambang dikurangi menjadi 3: 1.
Ada alat yang membantu Anda memeriksa kontras dengan cepat. Mereka yang bekerja pada Mac, saya sarankan Anda untuk mendapatkan
Kontras aplikasi - ini memungkinkan Anda untuk langsung menghitung rasio menggunakan pipet. Jika Anda ingin mendapatkan penilaian yang lebih rinci, saya sarankan Anda memasukkan nilai yang diperlukan ke
alat untuk memeriksa kontras dari WebAIM. Ini akan menghitung rasio untuk ukuran font yang berbeda dan membuat korespondensi ke
level yang berbeda (A, AA, AAA). Dengan mengubah nilai, Anda bisa mendapatkan hasilnya secara real time.
Sumber:
Kontras Visual WCAG2. Jangan hanya mengandalkan warna untuk menyampaikan informasi penting
Saat Anda mencoba memberi tahu pengguna sesuatu yang penting - untuk menunjukkan contoh tindakan atau memancing reaksi, jangan jadikan warna sebagai satu-satunya penanda visual. Orang dengan ketajaman visual atau kebutaan warna akan mengalami kesulitan untuk memahami konten Anda.
Cobalah untuk melengkapi warna dengan beberapa indikator lain - misalnya, tanda tangan atau tekstur. Saat menampilkan pesan kesalahan di layar, jangan berhenti hanya menyorot teks berwarna - tambahkan ikon atau judul ke jendela. Juga pertimbangkan untuk menggunakan font yang tebal atau bergaris bawah sehingga tautan dalam teks langsung mencolok.
Elemen dengan struktur informasi yang lebih kompleks - katakanlah, grafik - sangat sulit dibaca ketika tipe data dipisahkan oleh warna saja. Gunakan aspek visual lainnya untuk menyampaikan informasi - bentuk, ukuran, dan teks penjelasan. Anda dapat menambahkan pola pada isian untuk membuat perbedaannya lebih jelas.
Versi Trello untuk buta warna adalah contoh yang bagus untuk menerapkan aturan ini. Jika Anda beralih ke mode ini, pintasan menjadi dapat dipahami secara universal dengan menambahkan tekstur.
Ada cara yang baik: cetak grafik pada printer hitam putih dan lihat apakah semuanya akan jelas bagi Anda. Selain itu, Anda dapat menggunakan aplikasi khusus seperti
Color Oracle , yang secara real time menunjukkan bagaimana konten akan mencari orang dengan gangguan persepsi warna yang paling umum. Semua ini akan membantu Anda memastikan bahwa informasi di situs Anda tidak terlalu terikat dengan warna.
Sumber:
Kontras Visual WCAG Tanpa Warna3. Sorot elemen aktif
Melihat bingkai biru yang terkadang muncul di sekitar tautan, bidang, dan tombol? Bingkai seperti itu disebut indikator fokus. Browser menggunakan pseudo-class CSS secara default untuk menampilkannya pada elemen ketika mereka diklik. Mungkin menurut Anda tidak terlalu cantik dan Anda lebih suka untuk menghapusnya saja. Namun, jika Anda memutuskan untuk menyingkirkan gaya default, pastikan untuk memberikan semacam pengganti.
Indikator fokus membantu orang memahami elemen mana yang dapat Anda berinteraksi dengan keyboard dan di mana mereka berada dalam struktur halaman. Mereka berguna untuk orang buta yang menggunakan pembaca layar, orang dengan cacat fisik atau sindrom terowongan karpal, dan pengguna tingkat lanjut yang lebih suka jenis navigasi ini. Yah, ditambah, banyak dari kita, pada prinsipnya, lebih suka terlibat dalam berselancar internet di keyboard!
Elemen yang keadaan aktifnya harus ditekankan secara visual meliputi: tautan, bidang formulir, widget, tombol, dan item menu. Semuanya membutuhkan indikator yang akan membedakan mereka dari elemen-elemen di sekitarnya.
Anda dapat mendesain indikator sehingga terlihat bagus sesuai gaya situs Anda dan dikombinasikan dengan citra merek. Buat penanda status aktif mudah terlihat, dengan kontras tinggi, sehingga terlihat jelas di antara konten lainnya.
Sumber:
W3C Fokus Terlihat4. Tambahkan keterangan dan instruksi ke kolom input
Salah satu kesalahan terburuk ketika membuat formulir adalah meninggalkan tanda tangan jelas di bidang itu sendiri sehingga hilang ketika memasukkan data. Ketika ada sedikit ruang di layar atau Anda ingin memberikan desain tampilan minimalis dan modern, godaannya hebat - tetapi jangan lakukan itu. Teks dalam bidang formulir biasanya abu-abu dan tidak cukup kontras, sulit dibaca. Dan orang-orang seperti saya, lebih dari itu, setengah lupa bahwa mereka mengetik sama sekali, jadi tanda tangan yang hilang membuat kita semua memiliki peluang untuk mengetahuinya.
Orang yang menggunakan pembaca layar biasanya bergerak bugar menggunakan tombol Tab, bergerak dari satu pengontrol ke pengontrol lainnya. Elemen label dihitung untuk masing-masing elemen. Sisa teks yang tidak berlaku untuk mereka (label penjelasan yang sama di dalam bidang) biasanya dilewati.
Selalu pastikan bahwa orang mengerti apa yang harus dilakukan dengan formulir dan apa yang harus ditulis di dalamnya. Cara terbaik adalah jika tanda tangan tetap terlihat bahkan selama proses input - seseorang harus memiliki konteks di depan matanya ketika mengisi bidang. Dengan menyembunyikan tanda tangan dan instruksi untuk formulir, desainer, dalam mengejar kesederhanaan
, mengorbankan kegunaan .
Ini tidak berarti bahwa Anda perlu mengacaukan layar dengan informasi yang tidak berguna - hanya pastikan bahwa sebagian besar tips utama tersedia. Kelebihan data bisa membawa masalah tidak kurang dari kekurangan mereka. Tujuan Anda adalah untuk memberikan informasi dalam volume sehingga pengguna dapat melakukan operasi tanpa hambatan.
Sumber:
WebAIM Membuat Formulir yang Dapat Diakses5. Tulis deskripsi alternatif yang informatif untuk gambar dan elemen non-tekstual lainnya
Orang tunanetra sering menggunakan pembaca layar untuk "mendengarkan" Internet. Mereka mengubah teks menjadi ucapan yang terdengar, memungkinkan untuk mendengarkan segala sesuatu yang tertulis di situs.
Deskripsi alternatif dapat direpresentasikan dalam dua cara:
- Dalam atribut alt dari elemen gambar
- Dalam konteks langsung atau dalam teks yang menyertai gambar
Cobalah untuk menggambarkan apa yang terjadi pada gambar dan bagaimana hubungannya dengan makna umum, dan tidak hanya berhenti dengan komentar seperti "gambar". Konteks sangat penting.
Jika gambar ditambahkan semata-mata untuk kecantikan atau apa yang diungkapkannya digandakan dalam teks, Anda dapat menambahkan atribut dan membiarkannya kosong - dalam hal ini, pembaca layar akan melewatkannya. Ketika teks alternatif tidak ditulis sama sekali, beberapa pembaca layar akan membaca nama file. Anda tidak dapat membayangkan hal yang lebih buruk untuk pengalaman pengguna.
Google saat ini bekerja pada
solusi berbasis kecerdasan buatan yang menghasilkan takarir gambar dengan akurasi 94%. Kode ini berada dalam domain publik dan sedang dalam proses penyelesaian. Saya berharap bahwa segera kita akan melihat bagaimana solusi ini akan diterapkan di berbagai produk. Sampai saat itu, Anda harus secara manual mendaftarkan makna dan tujuan gambar dalam konteks konten lainnya.
Sumber:
W3C Menggunakan Alt Attributes6. Gunakan markup dengan benar
Judul menandai awal blok konten - ini adalah semacam tag yang menentukan gaya dan tujuan teks. Selain itu, tajuk menentukan hierarki konten pada halaman.
Font besar di pos memungkinkan pengguna untuk lebih memahami struktur informasi. Pembaca layar juga mengandalkan header saat membaca konten. Dengan demikian, orang-orang dengan penglihatan rendah mendapatkan gagasan tentang penampilan umum halaman dengan mendengarkan judul dalam urutan hierarkis.
Saat mengembangkan situs, Anda harus menggunakan elemen struktural yang benar. Elemen HTML mengirimkan informasi ke browser tentang jenis konten apa yang mereka bawa dan tindakan apa yang harus dilakukan dengannya. Ini adalah komponen dan struktur halaman yang membentuk pohon aksesibilitas browser yang digunakan pembaca layar untuk pekerjaan yang memiliki gangguan penglihatan.
Markup yang salah berdampak buruk pada aksesibilitas. Jangan membatasi penggunaan tag HTML untuk efek gaya. Pembaca layar dipandu oleh halaman yang didasarkan pada struktur hierarki judul - judul nyata, dan bukan hanya teks yang dibuat lebih besar dan lebih gemuk. Dengan bantuan mereka, pengguna dapat mendengarkan daftar lengkap judul, melewati blok konten, dipandu oleh jenis pos, atau pergi ke navigasi melalui pos tingkat pertama (h1).
Sumber:
Struktur Semantik WebAIM7. Mendukung kontrol kunci
Kemampuan untuk melakukan operasi menggunakan keyboard adalah salah satu komponen utama aksesibilitas dalam desain web. Orang-orang dengan gangguan koordinasi gerakan dan nada otot, buta, mereka yang menggunakan pembaca layar, dan bahkan beberapa pengguna tingkat lanjut bergantung pada keyboard saat menavigasi situs.
Mungkin Anda, seperti saya, menggunakan tombol Tab untuk menavigasi ke elemen halaman interaktif yang diinginkan: tautan, tombol, bidang input. Indikator status aktif, yang telah kami bicarakan di atas, memungkinkan Anda untuk menekankan elemen yang saat ini dipilih secara visual.
Saat bergerak di sekitar halaman, urutan di mana pengguna berinteraksi dengan elemen-elemen sangat penting, sehingga navigasi harus logis dan intuitif. Urutan transisi harus sesuai dengan arah pergerakan tatapan: dari kiri ke kanan, dari atas ke bawah, pertama navigasi utama, lalu tombol-tombol yang menyembunyikan konten, dan bentuk-bentuk dan, akhirnya, catatan kaki.
Merupakan praktik yang baik untuk menguji situs hanya menggunakan keyboard. Pergi dari tautan ke tautan dan dari bidang ke bidang menggunakan tombol Tab. Periksa apakah nyaman untuk memilih elemen dengan menekan Enter. Pastikan semua komponen sejajar dalam urutan yang benar dan penampilannya dapat diprediksi. Jika Anda dapat melewati semua halaman tanpa menyentuh mouse, maka Anda melakukannya dengan baik!
Dan satu hal lagi. Perhatikan volume dalam sistem navigasi - ini mengacu pada jumlah tautan, dan ukuran teks. Iterasi semua item dalam daftar panjang dapat membuat orang lelah dengan kemampuan motorik terbatas, dan orang yang menggunakan pembaca layar akan cepat bosan mendengarkan teks tautan panjang. Cobalah untuk lebih ringkas. Menambahkan
penanda ARIA atau elemen struktural HTML 5 (seperti main atau nav) juga akan mempermudah navigasi halaman.
Sumber:
W3C KeyboardApa lagi yang bisa dilakukan
Aturan-aturan ini adalah titik awal yang baik, tetapi jika Anda ingin melakukan sesuatu yang lain untuk meningkatkan aksesibilitas, saya akan merekomendasikan:
- Lakukan audit ketersediaan. Gunakan layanan khusus untuk mencari tahu apakah produk Anda bertentangan dengan perangkat tambahan dan apakah memenuhi persyaratan level AA. Buat perubahan yang diperlukan berdasarkan hasil dan ulangi tes.
- Tunjuk seorang auditor. Anda dapat menginstruksikan salah satu karyawan untuk melakukan audit tersebut secara rutin - misalnya, kepada seseorang dari tim pengujian. Jika tidak ada orang dengan pengalaman yang diperlukan, Anda dapat menghubungi spesialis pihak ketiga.
- Pertimbangkan faktor aksesibilitas saat mengumpulkan informasi. Saat melakukan penelitian, periksa untuk melihat apakah asumsi Anda tentang aksesibilitas dikonfirmasi, dan cari peluang untuk memperbaiki sesuatu. Melibatkan penyandang cacat sedikit lebih sulit. Jangan ragu untuk menghubungi asosiasi dan komunitas - biasanya ada yang senang membantu.
Kesimpulan
Yah, itu saja. Ini adalah tujuh aturan yang akan membantu Anda membawa situs Anda ke perkiraan tingkat AA
sesuai dengan Pedoman Aksesibilitas Konten Web .
Saya masih terus bekerja untuk membuat desain lebih mudah diakses, dan saya mencoba untuk mengamati prinsip-prinsip yang saya khotbahkan kepada orang lain. Sebelumnya, menurut saya ini terlalu rumit dan masih tidak terlalu penting. Tapi saya salah. Saya sarankan Anda memulai proses menggunakan aturan ini dan melanjutkan percakapan tentang mengapa aksesibilitas penting.
Mempromosikan praktik aksesibilitas adalah tanggung jawab desainer. Dengan bantuan mereka, kami membuka jalan ke teknologi untuk semua orang, terlepas dari kemampuan mereka, standar hidup, usia, pendidikan, dan tempat tinggal. Bertanggung jawab saat mendesain. Terima kasih
Referensi
WebAIM - Artikel, Sumber Daya, dan
Studi Kasus tentang Aksesibilitas dalam Desain Web
“
7 hal yang perlu diketahui seorang desainer tentang aksesibilitas ” adalah artikel hebat dari Salesforce dengan pengamatan akurat
Program Cacat dan Komputasi UCLA - situs ini, tentu saja, bukan yang paling indah dan modern, tetapi sangat kaya akan sumber daya
UX Myths - Daftar kesalahpahaman yang luas dalam desain UX dengan bantahan; beberapa dari mereka menyentuh masalah aksesibilitas
Alur Kerja Aksesibilitas Warna - di sini
Geri Coady menunjukkan cara mencapai titik dengan pemilihan warna
W3C - Alkitab aksesibilitas dalam desain web, Anda bahkan bisa bingung dengan banyaknya bahan. Tetapi ketika Anda memahami strukturnya, Anda akan menemukan contoh, tip, dan sumber yang bagus.
Alat yang berguna
WebAIM Color Contrast Checker - alat yang cerdas untuk memeriksa kontras, menghasilkan hasil segera setelah input dan untuk ukuran teks yang berbeda
Komponen Inklusif - pustaka tekstur yang dirancang sebagai blog. Perhatian khusus diberikan pada masalah desain yang terjangkau. Setiap pos menganalisis beberapa komponen antarmuka umum dan menawarkan versi desain yang lebih andal dan terjangkau.
Warna Oracle adalah simulator buta warna gratis yang diadaptasi untuk Windows, Mac, dan Linux. Secara real time, ini menunjukkan bagaimana orang dengan gangguan persepsi warna yang tersebar luas melihat.
Pedoman Aksesibilitas Produk Vox - Daftar Lengkap Persyaratan untuk Desainer, Pengembang, dan Manajer Proyek
AX Google Chrome Extension - periksa situs apa saja untuk pelanggaran aksesibilitas dengan Inspektur untuk Chrome
Contrast adalah aplikasi Mac yang menyediakan akses instan ke rasio kecerahan WGAG.