Banyak orang menggunakan pengembangan berbasis komponen menggunakan panduan gaya pola, library komponen, atau sistem desain lengkap dalam proses alur kerja pengembangan mereka. Meskipun Anda belum pernah menggunakan alat ini secara formal, kemungkinan Anda menggunakan proses serupa untuk memecah desain besar untuk situs, aplikasi, atau produk digital lainnya menjadi bagian-bagian yang mudah dikelola.
Seperti membangun struktur fisik, penting untuk membangun satu bagian dalam satu waktu. Pertama, fondasi, struktur, dinding, jendela, atap, dan semua yang ada di antaranya. Alat pengembangan berbasis komponen memungkinkan kita melakukan hal ini untuk situs, aplikasi, dan produk digital lainnya.
Beberapa manfaat pengembangan berbasis komponen mencakup memecah sesuatu menjadi bagian-bagian yang mudah dikelola, sehingga waktu pengembangan dengan komponen yang dapat digunakan kembali ini menjadi lebih singkat. Dengan begitu, desainer, pengembang frontend dan backend, serta QA dapat bekerja secara bersamaan. Klien, desainer, PM, dan lainnya menyukainya karena mereka dapat melihat pratinjau proses pembuatan dan menggunakan panduan gaya aktif sebagai referensi setelah situs diluncurkan.
Namun, saat kita melihat pola, komponen, dan sistem desain dengan mempertimbangkan aksesibilitas, beberapa pertanyaan muncul. Bagaimana Anda tahu pola mana yang terbaik dalam hal aksesibilitas? Haruskah Anda menggunakan pola atau library yang sudah ada, atau membuat yang baru? Bagaimana Anda tahu apakah pola ini benar-benar akan membantu pengguna Anda?
Dengan banyaknya pilihan yang tersedia, Anda mungkin bingung tentang pola, komponen, dan sistem desain. Modul ini bertujuan untuk memberi Anda informasi umum tentang cara mengevaluasi pola, komponen, dan sistem desain untuk aksesibilitas serta memberi Anda titik awal untuk membantu Anda membuat pilihan yang lebih mudah diakses.
Berpikir secara kritis
Memilih pola, komponen, atau sistem desain yang mudah diakses bukanlah hal yang sulit, tetapi memerlukan waktu dan pemikiran kritis. Faktanya, tidak ada yang namanya "satu pola sempurna", tetapi mungkin ada banyak opsi yang dapat berfungsi. Ini tentang belajar memilih opsi terbaik untuk situasi unik Anda.
Dalam modul pengujian berikutnya, Anda akan membaca lebih lanjut teknik dan metode tentang cara mengevaluasi pola, komponen, dan sistem desain untuk aksesibilitas. Sebelum sampai ke sana, Anda perlu mengajukan beberapa pertanyaan mendasar kepada diri sendiri, seperti:
- Apakah pola, komponen, atau sistem desain yang dapat diakses sudah ada?
- Browser dan teknologi pendukung (AT) apa yang saya dukung?
- Apakah ada batasan kode atau framework? Apakah ada integrasi, faktor, atau kebutuhan pengguna lain yang harus saya pertimbangkan?
Bergantung pada lingkungan pengembangan dan kebutuhan pengguna, Anda mungkin memiliki pertanyaan tambahan atau berbeda dari pertanyaan ini. Pertimbangkan pertanyaan berikut sebagai titik awal dalam evaluasi aksesibilitas Anda.
Resource yang sudah ada
Sebelum membuat sesuatu yang benar-benar baru, lakukan riset dan tinjau apa yang sudah ada dalam hal pola, komponen, dan sistem desain yang dapat diakses. Dengan sedikit riset, Anda mungkin terkejut menemukan satu atau beberapa solusi yang sesuai dengan kebutuhan Anda.
Beberapa referensi bagus untuk pola, komponen, dan sistem desain yang dapat diakses meliputi:
- Komponen yang Dapat Diakses
- Library ARIA Deque University
- Sistem Desain Gov.UK
- Komponen Inklusif
- MagentaA11y
- Sistem Desain Web Amerika Serikat (USWDS), dibuat untuk pemerintah federal Amerika Serikat
- Daftar pola yang dapat diakses dari Smashing Magazine
Untuk framework JavaScript, resource berikut cukup mudah diakses secara default atau dapat disesuaikan untuk aksesibilitas:
- Jika CSS Tidak Cukup: Persyaratan JavaScript untuk Komponen yang Dapat Diakses
- React
- Angular: Library material
- Vue: Vuetensils
Namun—dan hal ini tidak dapat ditekankan lebih lanjut—Anda tidak boleh hanya menyalin/menempelkan kode dan menganggapnya akan sesuai dengan lingkungan Anda dan otomatis memenuhi kebutuhan pengguna Anda. Hal ini berlaku untuk semua pola, komponen, dan sistem desain, meskipun diberi label sepenuhnya dapat diakses.
Semua resource harus dilihat sebagai titik awal. Pastikan untuk menguji semuanya.
Dukungan browser dan teknologi pendukung (AT)
Setelah meneliti beberapa pola dasar, komponen, atau sistem desain lengkap yang mungkin cocok untuk lingkungan pengembangan Anda, Anda dapat melanjutkan ke dukungan teknologi pendukung. Salah satu jenis AT utama yang harus Anda fokuskan saat mengevaluasi pola, komponen, dan sistem desain adalah pembaca layar.
Pembaca layar dibuat dengan mempertimbangkan browser tertentu dan berfungsi paling baik jika dipasangkan dengan browser tersebut. Kita akan membahas topik ini secara lebih mendetail dalam modul tentang pengujian AT, tetapi untuk tujuan evaluasi pola, sebaiknya pahami bahwa kombinasi ini ada, sehingga Anda tahu dukungan yang Anda butuhkan.
| Pembaca layar | OS | Kompatibilitas browser | Biaya |
|---|---|---|---|
| Job Access with Speech (JAWS) | Windows | Chrome, Firefox, Edge | Memerlukan lisensi (tersedia versi gratis 40 menit) |
| Non-Visual Desktop Access (NVDA) | Windows | Chrome dan Firefox | Gratis (perlu didownload) |
| Narator | Windows | Edge | Gratis (sudah ada di mesin Windows) |
| VoiceOver | macOS | Safari | Gratis (terintegrasi ke dalam mesin macOS) |
| Orca | Linux | Firefox | Gratis (dibuat ke dalam distribusi berbasis Gnome) |
| TalkBack | Android | Chrome dan Firefox | Gratis (dibuat ke dalam versi Android OS tertentu) |
| VoiceOver | iOS | Safari | Gratis (sudah ada di perangkat iOS) |
Dukungan browser umumnya rumit, dan akan menjadi lebih rumit lagi saat Anda menambahkan perangkat AT dan spesifikasi ARIA.
Namun, tidak semua berita buruk. Untungnya, ada referensi bagus seperti Aksesibilitas HTML5, Dukungan Aksesibilitas, dan Daftar Periksa Pengembangan Aksesibel Kontrol Kustom WCAG yang membantu kita lebih memahami dukungan browser dan perangkat AT saat ini, dan bahkan kapan harus menggunakan ARIA.
Referensi ini menguraikan sub-elemen pola HTML dan ARIA yang tersedia, termasuk pengujian komunitas open source. Anda juga dapat meninjau beberapa contoh pola untuk desktop, browser seluler, dan perangkat AT. Dengan demikian, referensi ini dapat membantu Anda membuat keputusan yang lebih mudah diakses terkait pola, komponen, dan sistem desain yang mungkin ingin Anda gunakan.
Pertimbangan lainnya
Setelah memilih beberapa pola atau komponen dasar yang mudah diakses, dan mempertimbangkan dukungan browser dan perangkat AT, Anda dapat melanjutkan ke pertanyaan kontekstual yang lebih spesifik tentang pola, komponen, sistem desain, dan lingkungan pengembangan.
Misalnya, jika Anda bekerja di sistem pengelolaan (CMS) atau memiliki kode lama, mungkin ada beberapa batasan pola yang dapat Anda gunakan. Setelah ditinjau, beberapa pilihan pola dapat dengan cepat dikurangi menjadi satu atau dua opsi.
Banyak framework JavaScript memungkinkan developer menggunakan hampir semua pola yang mereka pilih. Dalam kasus seperti ini, Anda mungkin memiliki lebih sedikit batasan dan dapat memilih opsi pola yang paling mudah diakses.
Ada pertimbangan tambahan yang perlu dipertimbangkan saat memilih pola, komponen, atau sistem desain, seperti:
- Performa
- Keamanan
- Pengoptimalan mesin telusur
- Dukungan terjemahan bahasa
- Integrasi pihak ketiga
Faktor-faktor ini pasti akan memengaruhi pilihan pola Anda, tetapi Anda juga harus mempertimbangkan orang yang membuat konten dan kode itu sendiri. Pola yang Anda pilih harus cukup kuat untuk menangani potensi batasan seputar konten buatan editor atau buatan pengguna, serta dibuat dengan cara yang dapat digunakan oleh developer dengan semua pengetahuan aksesibilitas.