Panduan Designer untuk Asas Reka Bentuk Kebolehaksesan Web

Web harus menjadi tempat dimana semua orang dapat mengakses kandungan yang sama dari mana saja di dunia. Teknik responsif telah jauh reka bentuk peranti-agnostik. Tetapi bagaimana pula Reka bentuk aksesibiliti-agnostik?

Akses web telah wujud selama bertahun-tahun, namun pelaksanaannya memerlukan kemajuan baru dalam teknologi dan pembangunan web. Ramai pemaju mahu membantu, tetapi pemahaman yang sukar bagaimana untuk mereka bentuk untuk kemudahan, kerana terdapat banyak bahagian yang bergerak. Ini termasuk teks kontras tinggi, halaman audio untuk media yang buta, yang dioptimumkan dan pemotongan untuk pelayar bukan JS / CSS.

Dalam jawatan ini, saya akan merangkumi asas-asas reka bentuk kebolehaksesan, apakah itu, apa yang bertujuan untuk menyelesaikannya, dan langkah-langkah yang anda boleh ambil untuk memulakan. Perhatikan, ini adalah subjek yang sangat terperinci, dan ia akan mengambil masa beberapa bulan atau amalan untuk difahami sepenuhnya. Tetapi manfaatnya bernilai usaha, dan semua projek web anda akan meninggalkan setiap pengunjung dengan kesan abadi terhadap kandungan yang dapat diakses.

Pengenalan Kepada Kebolehcapaian

Secara umumnya, kebolehaksesan adalah idea untuk membina kandungan supaya ia boleh dimakan oleh sesiapa sahaja. Ini mungkin termasuk orang buta yang tidak dapat membaca, dan ia mungkin termasuk orang kurang upaya fizikal yang tidak dapat mengendalikan tetikus atau papan kekunci (atau sama ada).

Tetapi ia juga boleh termasuk orang dengan kekurangan sedikit dalam penglihatan. Ia mungkin termasuk orang masalah disleksia atau bacaan pemahaman. Sebenarnya idea itu “akses web” termasuk setiap kemerosotan mungkin yang mungkin menjejaskan bagaimana seseorang berinteraksi dengan atau menggunakan laman web.

Mungkin yang lebih penting adalah apa yang boleh diakses oleh web, seperti diterangkan di sini dalam definisi Wikipedia:

Namun, Anne Gibson berhujah dalam senarai Senarai Selain bahawa definisi Wikipedia terlalu kabur, dan itu tidak hanya mengenai orang kurang upaya. Ia benar-benar mengenai semua orang di web dari seluruh dunia itu mungkin tidak mempunyai akses optimum ke Internet.

Banyak devs berfikir bahawa kebolehaksesan hanya untuk orang buta yang tidak dapat membaca. Tetapi sebenarnya terdapat empat kategori utama akses web:

1. Visual - penglihatan rendah atau miskin / penglihatan tidak
2. Auditori - cacat pendengaran atau pekak
3. Kognitif - masalah memahami atau mengambil maklumat
4. Motor - masalah kebolehcapaian fizikal yang mungkin memerlukan peranti input khas seperti papan kekunci atau program arahan suara

Kategori masing-masing mempunyai teknik yang luas berubah sejajar dengan piawaian web. Tetapi ada kestabilan dengan piawaian-piawaian ini yang disahkan ke dalam WCAG (Garis Panduan Kebolehaksesan Kandungan Web).

Sesetengah laman web, seperti institusi kerajaan dikehendaki oleh undang-undang untuk mematuhi garis panduan ini. Mereka memohon secara antarabangsa melalui W3C.

Mari kita lihat birokrasi di belakang akses web, dan kemudian menyelami beberapa tip reka bentuk yang berkaitan.

Reka bentuk W3C & Boleh diakses

Terdapat beberapa akronim yang berkaitan dengan kebolehaksesan web. Ini boleh menjadi rumit jika anda baru dalam subjek, tetapi apabila disederhanakan saya harap mereka akan lebih masuk akal.

• W3C (World Wide Web Consortium) - Kumpulan antarabangsa yang menentukan standard web untuk protokol, bahasa, dan peraturan. Semua garis panduan akses rasmi boleh didapati di bawah organisasi ini.
• WAI (Inisiatif Kebolehaksesan Web) - Program rasmi yang merangkumi segala-galanya mengenai kebolehaksesan. Tempoh payung ini mengandungi semua peraturan, garis panduan dan teknik untuk kebolehaksesan moden.
• WCAG (Garis Panduan Kebolehaksesan Kandungan Web) - Sekumpulan piawaian dan peraturan untuk membantu pereka gred laman web mereka berdasarkan tahap kebolehaksesan.
• ARIA (Aplikasi Internet Boleh Kaya) - Piawai tertentu yang menentukan bagaimana untuk membina aplikasi kaya yang boleh diakses dengan menggunakan JavaScript / Ajax dan teknologi yang serupa. Baca lebih lanjut mengenai ini dalam siaran ini oleh Anna Monus.

Garis panduan lain ada di bawah payung WAI, termasuk UAAG untuk ejen pengguna dan ATAG untuk alat pengarang web. Buat masa ini, anda harus paling berminat dengan cadangan yang dibuat oleh WAI dan garis panduan yang ditetapkan oleh peraturan WAI di bawah nama WCAG.

Sumber yang hebat untuk belajar lebih banyak ialah jawatan ini dari W3C mengenai ketidakupayaan, berkongsi cerita tentang bagaimana orang kurang upaya mengakses Internet. Ia sukar untuk memahami semua masalah rumit, apalagi memahami bagaimana menyelesaikannya. Tetapi sumber terbaik adalah dari orang yang menghadapi masalah ini setiap hari.

Satu lagi perkara penting yang perlu anda fahami ialah kesesuaian WCAG. Ini berkaitan dengan tahap kebolehaksesan laman web yang meliputi pelbagai faktor. Peringkat adalah berdasarkan kepada pematuhan dengan sistem penarafan A, AA, dan AAA. Anda boleh menyemak ini dengan alat pemeriksa kebolehaksesan web. Skor terbaik ialah AAA.

Untuk mengetahui lebih lanjut tentang garis panduan ini, lihat pengenalan W3C untuk Memahami artikel WCAG 2.0. Juga lihat pautan berkaitan ini untuk maklumat lanjut:

• WCAG 2.0 Sederhana
• Seksyen 508 Prestasi WCAG

Langkah-langkah Untuk Rekabentuk Boleh Diakses

Saya amat mengesyorkan untuk melawat laman web A11Y untuk mendapatkan tips kebolehaksesan praktikal. A11Y (yang juga bernombor) adalah projek sumber terbuka percuma yang dihoskan pada GitHub, menawarkan teknik untuk reka bentuk web yang boleh diakses.

Anda boleh menyemak senarai semak barangan aksesibiliti mereka, atau sekumpulan corak reka bentuk untuk elemen seperti dropdowns, tabs, accordions, buttons, dan modal modal (antara item lain).

Sukar untuk belajar semua perkara ini dan melaksanakannya pada masa yang sama. Ambil langkah demi langkah, dan bersedia untuk penyelidikan lebih jika anda menjadi keliru.

Semak petua cara A11Y dan cepat untuk bermula. Anda akan bertemu dengan cadangan khusus seperti pautan lompat ke kandungan dan skema warna kontras tinggi. Teknik-teknik ini masing-masing mempunyai tahap terperinci mereka sendiri, oleh sebab itu pelaksanaan kebanyakannya mengenai pengujian untuk melihat apa yang berfungsi.

Pertimbangkan pengguna buta yang mungkin menggunakan pembaca kandungan automatik. Mereka juga mungkin mempunyai penterjemah audio, atau juga papan kekunci khas untuk menavigasi web dengan kunci dan bukannya tetikus. Inilah sebabnya HTML semantik yang betul (lihat artikel ini) amat penting dengan sifat seperti tabindex dan kunci akses.

Sekiranya anda ingin menyelam kemudian pertimbangkan untuk memilih tema siap diakses. Anda boleh mempelajari seni bina dan menyesuaikan reka bentuk agar sesuai dengan projek anda.

Alat Pengujian Kebolehaksesan

Sekiranya anda ingin memulakan, pilihlah kawasan kebolehaksesan, dan cuba. Kemudian anda boleh menggunakan alat ujian untuk mengukur tahap kejayaan anda.

Perlu dinyatakan bahawa proses ini boleh mengecewakan. Terdapat banyak perkara yang harus dipertimbangkan, dan garis panduan WCAG sangat sukar difahami bahawa anda mungkin berakhir dengan maklumat yang berlebihan.

Yang penting ialah terus bergerak. Pilih salah satu kawasan aksesibiliti, dan menjadikannya tumpuan anda. Kemudian gunakan alat ini untuk membantu anda menaikkan taraf dan memperbaiki kerja anda.

Sebagai contoh, anda boleh cuba bekerjasama dengan spesifikasi kontras WCAG untuk meningkatkan kebolehbacaan. Sebaik sahaja anda memilih warna anda, hanya gunakan pemeriksa nisbah kontras percuma ini untuk melihat sama ada ia berfungsi bersama.

Malangnya garis panduan WCAG 2.0 sangat mengelirukan bahawa anda mungkin mengalami kesulitan memahami keperluan. Tetapi semakin banyak lagi anda akan belajar dan semakin banyak yang anda fahami.

Untuk menguji laman web yang sudah dalam talian menyemak WAVE. Ianya adalah pemeriksa visual percuma yang memaparkan kesilapan, isyarat, isu kontras, dan lain-lain laman web tertentu. Anda akan mendapat pandangan visual dan senarai isu dalam bar sisi.

Terdapat satu lagi aplikasi percuma di laman web Cynthia Says yang boleh semak laman web untuk penarafan kejayaan WCAG A, AA, AAA, dan seksyen 508 untuk pematuhan kerajaan.

Dan jika anda menjadi sumber terbuka, lihatlah ini alat ujian kebolehaksesan percuma di GitHub.

• HTML CodeSniffer
• Alat Ujian Kebolehaksesan Automatik
• Pengesahan WCAG

Pelayar Penyemak Imbas

Tambahan penyemak imbas mungkin menyediakan kaedah yang paling cepat dan paling mudah untuk ujian kebolehaksesan. Anda boleh menjalankannya dari mana-mana komputer di mana-mana laman web untuk memperoleh hasil yang benar-benar berguna.

AInspector untuk Firefox dianggap sebagai mempunyai aksesibiliti. Ini memeriksa segala-galanya, dan itu jauh lebih menyeluruh daripada penguji WAVE.

Pengguna Mozilla mungkin juga suka Contrast Contrast WCAG yang juga add-on percuma.

Pengguna Chrome tidak mempunyai AInspector, tetapi mereka mempunyai Alat Pembangun Kebolehaksesan yang dibuat secara rasmi oleh Google. Ini menambah alat tambahan ke dalam tetingkap pemeriksa untuk menyemak garis panduan akses.

Pengguna Chrome juga mempunyai pengecas cahaya untuk kontras warna, dan beberapa sambungan percuma lain.

Sayangnya saya tidak dapat mencari banyak untuk pengguna Safari, tetapi saya mendapati satu sambungan untuk Opera yang menyemak terhadap pematuhan WCAG 2.0. Jika anda bersedia untuk mencari Google cukup keras, anda mungkin akan mencari alat yang lebih banyak di sana.

Bacaan lanjut

Jika anda serius mempelajari pembelajaran web maka bersiaplah untuk jalan panjang. Ia tidak mudah tetapi ia sangat memuaskan.

Sekarang anda harus memahami lebih lanjut mengenai definisi sebenar kebolehcapaian web, mengapa ia wujud, dan butir-butir kecil tentang apa yang diharapkan oleh pemaju untuk meningkatkan laman web mereka. Langkah seterusnya adalah penyelidikan dan amalan lanjut untuk mengatasi prinsip-prinsip ini ke dalam aliran kerja anda.

Lihat siaran berikut untuk mendapatkan maklumat lanjut, dan pastikan anda merujuk kepada garis panduan WCAG jika anda mahukan pengetahuan secara langsung dari sumbernya.

• Bagaimana Menambah Kebolehan Jadual HTML dengan Markup
• Reka Bentuk Boleh Diakses untuk Pengguna Kurang Upaya
• 6 Tips untuk Meningkatkan Kebolehaksesan Laman Web
• Memastikan Tapak Anda Boleh Dihubungi Terjejas Terjejas