Panduan Desainer untuk Dasar-dasar Desain Aksesibilitas Web

Web harus menjadi tempat di mana setiap orang dapat mengakses konten yang sama dari mana saja di dunia. Teknik responsif telah berjalan jauh desain perangkat-agnostik. Tapi bagaimana dengan itu? desain aksesibilitas-agnostik?

Aksesibilitas web telah ada selama bertahun-tahun, tetapi implementasinya membutuhkan kemajuan baru dalam teknologi dan pengembangan web. Banyak pengembang ingin membantu, tetapi sulit memahami bagaimana mendesain aksesibilitas, karena ada begitu banyak bagian yang bergerak. Ini termasuk teks kontras tinggi, halaman audio untuk orang buta, media yang dioptimalkan, dan fallback untuk browser non-JS / CSS.

Dalam posting ini, saya akan membahas dasar-dasar desain aksesibilitas, apa itu, apa yang ingin dipecahkan, dan langkah-langkah yang dapat Anda ambil untuk memulai. Perhatikan, ini adalah subjek yang sangat terperinci, dan butuh waktu berbulan-bulan atau bertahun-tahun untuk sepenuhnya dipahami. Tetapi manfaatnya sepadan dengan usaha, dan semua proyek web Anda akan meninggalkan setiap pengunjung dengan kesan abadi dari konten yang dapat diakses.

Intro Ke Aksesibilitas

Secara umum, aksesibilitas adalah ide untuk membangun konten itu bisa dikonsumsi oleh siapa saja. Ini mungkin termasuk orang tunanetra yang tidak dapat membaca, dan itu mungkin termasuk orang-orang dengan cacat fisik yang tidak dapat mengoperasikan mouse atau keyboard (atau salah satunya).

Tetapi bisa juga termasuk orang dengan sedikit kekurangan dalam visi. Itu mungkin termasuk orang dengan masalah disleksia atau pemahaman bacaan. Bahkan, gagasan “aksesibilitas web” termasuk setiap kemungkinan penurunan nilai yang dapat memengaruhi cara seseorang berinteraksi atau menggunakan situs web.

Mungkin yang lebih penting adalah apa yang dapat ditawarkan aksesibilitas web, seperti yang dijelaskan di sini dalam definisi Wikipedia:

Namun, Anne Gibson berpendapat dalam postingan List Apartnya bahwa definisi Wikipedia terlalu kabur, dan itu tidak hanya tentang penyandang cacat. Ini benar-benar tentang semua orang di web dari seluruh dunia itu mungkin tidak memiliki akses optimal ke Internet.

Banyak pengembang berpikir bahwa aksesibilitas hanya untuk orang buta yang tidak bisa membaca. Tetapi sebenarnya ada empat kategori utama aksesibilitas web:

Visual - low-vision atau poor / no sight
Pendengaran - tuna rungu atau tuli
Kognitif - kesulitan memahami atau mengonsumsi informasi
Motor - masalah aksesibilitas fisik yang mungkin memerlukan perangkat input khusus seperti keyboard atau program perintah suara

Kategori-kategori ini masing-masing memiliki teknik yang luas berubah secepat standar web. Tetapi ada perasaan stabilitas dengan standar-standar ini disahkan ke dalam WCAG (Pedoman Aksesibilitas Konten Web).

Beberapa situs web, seperti lembaga pemerintah diharuskan oleh hukum untuk mengikuti pedoman ini. Mereka berlaku secara internasional melalui W3C.

Mari kita lihat birokrasi di balik aksesibilitas web, dan kemudian selami beberapa tips desain yang berlaku.

W3C & Desain yang Dapat Diakses

Ada beberapa akronim yang terkait dengan aksesibilitas web. Ini bisa rumit jika Anda baru mengenal subjek, tetapi setelah disederhanakan saya berharap mereka akan lebih masuk akal.

W3C (Konsorsium World Wide Web) - Grup internasional yang mendefinisikan standar web untuk protokol, bahasa, dan peraturan. Semua pedoman aksesibilitas resmi berada di bawah organisasi ini.
WAI (Inisiatif Aksesibilitas Web) - Program resmi yang mencakup segala hal tentang aksesibilitas. Istilah payung ini berisi semua aturan, pedoman, dan teknik untuk aksesibilitas modern.
WCAG (Pedoman Aksesibilitas Konten Web) - Sekelompok standar dan aturan untuk membantu desainer menilai situs web mereka berdasarkan tingkat aksesibilitas.
ARIA (Aplikasi Internet Kaya yang Dapat Diakses) - Standar khusus yang mendefinisikan cara membuat aplikasi kaya yang dapat diakses yang mengandalkan JavaScript / Ajax dan teknologi serupa. Baca lebih lanjut tentang ini di pos ini oleh Anna Monus.

Panduan lain ada di bawah payung WAI, termasuk UAAG untuk agen pengguna dan ATAG untuk alat pembuat web. Untuk saat ini, Anda harus paling tertarik dengan saran yang dibuat oleh WAI dan pedoman yang diajukan oleh WAI's ruleset dengan nama WCAG.

Sumber yang bagus untuk belajar lebih banyak adalah posting ini dari W3C tentang disabilitas, berbagi cerita tentang bagaimana orang-orang cacat mengakses Internet. Mungkin sulit untuk memahami semua masalah rumit, apalagi memahami bagaimana menyelesaikannya. Tapi sumber terbaik adalah dari orang-orang yang menghadapi masalah ini setiap hari.

Subjek penting lain yang harus Anda pahami adalah kepatuhan WCAG. Ini berhubungan dengan tingkat aksesibilitas situs web meliputi berbagai faktor. Tingkat didasarkan pada kesesuaian dengan sistem peringkat A, AA, dan AAA. Anda dapat memeriksanya dengan alat pemeriksa aksesibilitas web. Skor terbaik adalah AAA.

Untuk mempelajari lebih lanjut tentang pedoman ini, lihat artikel Pengantar W3C untuk Memahami WCAG 2.0. Lihat juga tautan terkait ini untuk detail lebih lanjut:

WCAG 2.0 Disederhanakan
Bagian 508 Kinerja WCAG

Langkah-langkah Untuk Desain Yang Dapat Diakses

Saya sangat merekomendasikan mengunjungi situs web proyek A11Y untuk tips aksesibilitas praktis. A11Y (yang juga merupakan numeronim) adalah proyek open source gratis yang di-host di GitHub, menawarkan teknik untuk desain web yang dapat diakses.

Anda dapat menelusuri daftar periksa item aksesibilitas mereka, atau bahkan banyak pola desain untuk elemen seperti dropdown, tab, akordeon, tombol, dan jendela modal (di antara item lainnya).

Sulit untuk mempelajari semua hal ini dan mengimplementasikannya pada saat yang bersamaan. Ambillah langkah demi langkah, dan berkeinginan untuk meneliti lebih banyak jika Anda bingung.

Lihatlah petunjuk dan kiat cepat A11Y untuk memulai. Anda akan menemukan saran spesifik seperti tautan lompat ke konten dan skema warna kontras tinggi. Teknik-teknik ini masing-masing memiliki tingkat perincian sendiri, sehingga implementasi sebagian besar tentang pengujian untuk melihat apa yang berhasil.

Pertimbangkan pengguna tunanetra yang mungkin menggunakan pembaca konten otomatis. Mereka mungkin juga memiliki penerjemah audio, atau bahkan keyboard khusus untuk menavigasi web dengan tombol daripada mouse. Ini sebabnya HTML semantik yang tepat (lihat artikel ini) sangat penting dengan properti seperti tabindex dan kunci akses.

Jika Anda ingin menyelam maka pertimbangkan untuk mengambil tema yang siap aksesibilitas. Anda dapat mempelajari arsitektur dan menyesuaikan desain agar sesuai dengan proyek Anda.

Alat Uji Aksesibilitas

Jika Anda ingin memulai, cukup pilih area aksesibilitas, dan cobalah. Kemudian Anda dapat menggunakan alat pengujian untuk mengukur tingkat kesuksesan Anda.

Perlu disebutkan bahwa proses ini bisa membuat frustasi. Ada begitu banyak untuk dipertimbangkan, dan pedoman WCAG sangat sulit untuk dipahami sehingga Anda mungkin berakhir dengan informasi yang berlebihan.

Yang penting adalah terus bergerak. Pilih satu area aksesibilitas, dan jadikan fokus Anda. Kemudian gunakan alat-alat ini untuk membantu Anda mengubah dan meningkatkan pekerjaan Anda.

Misalnya, Anda dapat mencoba bekerja dengan spesifikasi kontras WCAG meningkatkan keterbacaan. Setelah Anda memilih warna, gunakan saja pemeriksa rasio kontras gratis ini untuk melihat apakah mereka bekerja bersama.

Sayangnya pedoman WCAG 2.0 sangat membingungkan sehingga Anda mungkin mengalami kesulitan memahami persyaratan. Tetapi semakin Anda mencoba, semakin banyak Anda akan belajar dan semakin Anda akan mengerti.

Untuk menguji situs yang sudah online periksa WAVE. Itu adalah pemeriksa visual gratis yang menampilkan kesalahan, peringatan, masalah kontras, dan kekhasan lainnya dari situs web. Anda akan mendapatkan tampilan visual dan daftar masalah di sidebar.

Ada aplikasi gratis lain di situs web Cynthia Says yang bisa periksa situs web untuk peringkat keberhasilan WCAG dari A, AA, AAA, dan bagian 508 untuk kepatuhan pemerintah.

Dan jika Anda tertarik dengan open source, lihat ini alat pengujian aksesibilitas gratis di GitHub.

HTML CodeSniffer
Alat Pengujian Aksesibilitas Otomatis
Validator WCAG

Add-on Browser

Pengaya peramban kemungkinan memberikan metode tercepat dan termudah untuk pengujian aksesibilitas. Anda dapat menjalankan ini dari komputer mana saja di situs web mana pun untuk mendapatkan hasil yang benar-benar bermanfaat.

AInspector untuk Firefox dianggap sebagai yang harus dimiliki untuk aksesibilitas. Ini memeriksa semuanya, dan itu jauh lebih menyeluruh daripada tester WAVE.

Pengguna Mozilla mungkin juga menyukai WCAG Contrast Checker yang juga merupakan add-on gratis.

Pengguna Chrome tidak memiliki AInspector, tetapi mereka memiliki Alat Pengembang Aksesibilitas yang dibuat secara resmi oleh Google. Ini menambahkan alat tambahan ke jendela inspektur untuk memeriksa pedoman aksesibilitas.

Pengguna Chrome juga memiliki checker luminositas untuk kontras warna, dan beberapa ekstensi gratis lainnya.

Sayangnya saya tidak dapat menemukan banyak untuk pengguna Safari, tetapi saya menemukan satu ekstensi untuk Opera yang memeriksa kepatuhan WCAG 2.0. Jika Anda mau mencari Google cukup keras Anda mungkin menemukan lebih banyak alat di luar sana.

Bacaan lebih lanjut

Jika Anda serius mempelajari aksesibilitas web maka bersiaplah untuk jalan panjang. Itu tidak mudah tetapi sangat memuaskan.

Sekarang Anda harus memahami lebih lanjut tentang definisi aktual dari aksesibilitas web, mengapa itu ada, dan detail kecil dari apa yang diharapkan pengembang lakukan untuk meningkatkan situs web mereka. Langkah selanjutnya adalah penelitian dan praktik lebih lanjut untuk memasukkan prinsip-prinsip ini ke dalam alur kerja Anda.

Lihat posting berikut untuk info lebih lanjut, dan pastikan untuk berkonsultasi dengan pedoman WCAG jika Anda ingin pengetahuan langsung dari sumbernya.

Cara Meningkatkan Aksesibilitas Tabel HTML dengan Markup
Desain yang Dapat Diakses untuk Pengguna Penyandang Cacat
6 Tips untuk Meningkatkan Aksesibilitas Situs Web
Pastikan Situs Anda Dapat Diakses oleh Tunanetra