Desain aplikasi web yang aksesibel adalah komponen utama untuk memberikan pengalaman pengguna yang positif dan kepuasan pengguna aplikasi secara keseluruhan. Aplikasi web yang mudah diakses memastikan akses yang sama untuk orang-orang dengan beragam kemampuan dan untuk orang di berbagai lokasi geografis. Orang yang memiliki keterbatasan terkait kemampuan pendengaran, kognitif, ucapan, atau visual serta batasan sementara yang terkait dengan disabilitas jangka pendek, koneksi internet yang lambat, atau bahkan cahaya terik harus dapat mengakses aplikasi web Anda. Saat membangun frontend aplikasi web, gunakan solusi aksesibilitas sejak awal untuk mencegah masalah aksesibilitas dan kebutuhan untuk mengulangi pekerjaan apa pun nanti selama proses build. Pastikan konten aplikasi Anda dapat dijelajahi oleh web crawler dan pembaca layar sekaligus memberikan pengalaman pengguna yang positif bagi pengguna.
Aksesibilitas adalah kewajiban hukum di banyak negara dan industri; Anda harus memahami pedoman ini dan menyertakan solusi aksesibilitas ke dalam desain frontend. Berbagai kasus bisnis juga menyoroti pentingnya aksesibilitas untuk konten web.
Referensi seperti MDN dan WCAG memberikan panduan dan saran penting untuk meningkatkan aksesibilitas aplikasi web Anda. Anda juga dapat mengikuti kursus Mempelajari Aksesibilitas di web.dev.
Saling bergantung antara berbagai komponen adalah aspek penting dalam membuat aplikasi web dapat diakses oleh beragam pengguna.
Warna dan kontras
Penggunaan warna adalah faktor utama dalam menilai aksesibilitas aplikasi web. Pengguna frontend harus dapat melihat konten di halaman, serta warna dan kontrasnya secara signifikan memengaruhi persepsi pengguna tentang konten. Kondisi penampilan dan disabilitas terkait penglihatan dapat bersifat sementara, situasional, atau permanen, tetapi harus dipertimbangkan saat mem-build frontend aplikasi web Anda. Menciptakan kontras atau perbedaan kecerahan yang benar antar-warna yang digunakan pada antarmuka yang ditampilkan kepada pengguna dapat membuat aplikasi web Anda lebih mudah diakses oleh beragam pengguna. Rasio kontras memberikan perbedaan kecerahan antara latar belakang dan teks.
Untuk mengukur kontras, Anda dapat menggunakan formula rasio kontras untuk memastikan ada kontras minimum untuk teks atau ikon di latar belakang. Ada banyak bentuk disabilitas persepsi warna yang perlu dipertimbangkan, tetapi model warna baru dapat memastikan konten terlihat dengan benar meskipun dilihat dalam hitam putih.
Penggunaan tema gelap sering kali direkomendasikan untuk mendukung warna dan kontras aksesibilitas. Tema gelap sering kali lebih disukai untuk input visual karena cahaya putih dan kesulitan membaca. Aplikasi berbasis konten mencakup sejumlah besar teks dan gambar. Oleh karena itu, Anda harus menggunakan warna dan rasio kontras secara bijak untuk memenuhi beragam kebutuhan pengguna.
Pelajari warna dan kontras lebih lanjut di web.dev.
Tipografi
Tipografi mengacu pada pilihan dan pengaturan teks sehingga dapat dibaca dan dapat dibaca oleh beragam pengguna. Salah satu setelan aksesibilitas yang paling banyak diubah adalah ukuran font default di perangkat. Beberapa pengguna mungkin ingin memasukkan lebih banyak teks di layar dengan ukuran font yang lebih kecil atau membuat teks sebesar mungkin. Oleh karena itu, membuat ukuran tipografi yang fleksibel dan mudah dibaca sangatlah penting. Setiap karakter teks juga harus dapat dikenali pembaca, dan keseluruhan teks harus dapat dibaca untuk dibaca. Selama desain frontend aplikasi, pastikan untuk memilih jenis huruf yang memiliki keterbacaan dan keterbacaan.
Jenis Huruf
Jenis huruf, atau jenis font, yang Anda pilih untuk aplikasi web harus dapat diakses secara visual oleh berbagai pembaca. Jenis huruf adalah desain visual dari huruf-huruf yang digunakan dalam teks aplikasi Anda. Banyak penelitian menjelaskan pentingnya jenis huruf saat menilai aksesibilitas konten web. Menemukan keseimbangan antara merek, sasaran desain antarmuka pengguna dan kemudahan membaca membuat aplikasi Anda lebih menyenangkan bagi lebih banyak pengguna. Saat membangun frontend, pertimbangkan bagaimana opsi jenis huruf serta opsi font di dalamnya, berkontribusi pada aksesibilitas dan desain keseluruhan aplikasi.
Ukuran font
Pertimbangkan untuk mengizinkan zoom browser guna membantu pengguna yang memiliki gangguan penglihatan atau gangguan persepsi warna. Font teks di aplikasi web Anda
harus terlihat oleh beragam pembaca. Variasi ukuran font dapat dicapai dengan
beralih dari px ke rem. Unit rem memungkinkan ukuran font yang relatif
terhadap elemen root aplikasi wep. Ini adalah opsi serbaguna yang akan
meningkatkan aksesibilitas aplikasi web Anda secara keseluruhan.
Struktur dan tata letak
Berbagai properti struktural dan tata letak memengaruhi aksesibilitas antarmuka. Fitur tata letak yang perlu dipertimbangkan mencakup spasi dan perataan blok teks serta ruang antara baris teks, dan bahkan setiap huruf. Manfaatkan grid dan visualisasikan komponen yang ingin Anda sertakan dalam desain. Tata letak dan struktur konten harus menarik dan menyenangkan bagi pengguna untuk digunakan. Tata letak yang kompleks atau latar belakang yang sibuk dengan beberapa blok teks mungkin sulit digunakan oleh beberapa pengguna, seperti pengguna yang memiliki ADHD. Pastikan untuk memprioritaskan inklusivitas selama proses desain frontend.
ARIA dan HTML
Rich Internet Applications (ARIA) yang dapat diakses mencakup serangkaian pedoman dan atribut untuk membantu membuat aplikasi web lebih mudah diakses oleh pengguna. ARIA supplements HTML dan memungkinkan widget JavaScript yang dapat diakses, pembaruan konten live, dan pesan error, di antara lainnya. Penggunaan ARIA yang benar sangat penting untuk benar-benar membuat aplikasi web Anda lebih mudah diakses. Penggunaan ARIA yang salah dapat menyebabkan error dan justru membuat aplikasi Anda kurang dapat diakses oleh pengguna.
Gunakan label
ARIA
jika memungkinkan untuk memperkenalkan format alternatif yang kompatibel dengan braille
dan text-to-speech (TTS). Peran dan label ARIA memungkinkan Anda mengubah pohon
aksesibilitas jika berbeda dari pohon dom. Label ini juga penting saat
menggunakan tag non-standar seperti div yang digunakan sebagai tombol yang dapat diklik. ARIA
diperlukan bila elemen HTML tidak memiliki dukungan aksesibilitas. Saat
merancang aplikasi berbasis konten, pastikan pembaca layar dan
perangkat pendukung lainnya didukung dengan baik untuk membantu aplikasi Anda menjangkau
pengguna sebanyak mungkin.
Pelajari lebih lanjut ARIA dan HTML di web.dev.
Internasionalisasi
Internasionalisasi mengacu pada perancangan aplikasi web yang dapat diakses oleh pengguna dari latar belakang linguistik dan budaya yang berbeda. Aplikasi web Anda harus dapat beradaptasi dengan berbagai bahasa, wilayah geografis, dan preferensi budaya tanpa perubahan kode yang substansial. Komponen utama internasionalisasi meliputi dukungan multibahasa, pelokalan, pemisahan konten, pemformatan tanggal dan waktu, arah teks, serta negosiasi bahasa.
Dengan menginternasionalkan aplikasi web, Anda dapat menciptakan pengalaman yang inklusif dan ramah pengguna untuk audiens global yang luas. Internasionalisasi sangat penting untuk setiap aplikasi web dengan basis pengguna yang beragam atau tujuan ekspansi internasional.
Sifat logika
Saat membuat gaya di CSS, pastikan untuk menggunakan start / end, bukan
properti seperti top / down/ left/ right. Hal ini memastikan bahwa menu dan
tata letak situs bergeser sesuai untuk bahasa RTL.
Konten alternatif
Sertakan atribut
lang
pada tag HTML dengan link ke dokumen alternatif di header
guna memberikan markup kustom untuk konten Anda. Dengan begitu, browser dapat memilih halaman yang benar
jika bahasa yang ditentukan berbeda dengan bahasa default browser. Hal ini dapat
membantu browser web dan mesin telusur memahami bahasa halaman, yang
penting untuk merender konten dengan benar dan untuk SEO yang efektif.
Internasional
Objek
Intl
dalam JavaScript adalah alat yang penting untuk membuat aplikasi web multibahasa dan
yang sadar budaya. Layanan ini memberikan kemampuan internasionalisasi dan pelokalan dalam aplikasi web, serta memastikan antarmuka dan konten Anda dapat dipahami dan sesuai secara budaya bagi pengguna di seluruh dunia. Fitur yang disediakan oleh objek Intl mencakup pemformatan tanggal dan waktu,
pemformatan angka, dan kolasi string.
Pelajari internasionalisasi lebih lanjut di web.dev.
Formulir
Formulir HTML adalah bagian penting dari aplikasi web berbasis konten. Class ini memungkinkan interaksi pengguna dan menyediakan metode terstruktur untuk mengumpulkan informasi pengguna. Jika formulir HTML tidak dapat diakses oleh audiens yang luas, formulir tersebut dapat menyebabkan kekesalan dan ketidakpuasan pengguna.
Agar formulir HTML dapat diakses, gunakan elemen HTML semantik untuk semua kolom formulir. Hal ini membantu teknologi pendukung memahami tujuan setiap kolom dan memudahkan pengguna untuk menyelesaikannya. Selain itu, pastikan untuk memberi label yang jelas pada semua kolom formulir. Hal ini membantu pengguna memberikan informasi yang akurat dan berguna. Penting juga untuk menguji aksesibilitas formulir HTML; ini dapat dilakukan dengan menggunakan teknologi pendukung untuk menyimulasikan pengalaman pengguna yang membutuhkan teknologi tersebut untuk memakai konten aplikasi Anda.