Front-end Developer biasanya hanya Pusat perhatian pada sisi estetika saja ketika membangun tampilan antarmuka. Padahal Terdapat sisi lain yang Enggak kalah Krusial Yakni “aksesibilitas”. Aksesibilitas Berfaedah agar website kita lebih mudah diakses oleh lebih banyak orang.
Apa itu Aksesibilitas?
Aksesibilitas adalah teknik yang memungkinkan website kita Dapat diakses oleh lebih banyak orang, termasuk mereka yang Mempunyai keterbatasan tertentu. Aksesibilitas adalah terjemahan dari Accessibility, – yang sering disingkat dengan A11Y.
Tujuannya, agar orang dengan gangguan pendengaran, gangguan penglihatan, atau mereka yang Mempunyai mobilitas terbatas Dapat mengakses informasi dan teknologi yang tersedia di internet.
Implementasi Accessibility pada Website
Ini merupakan salah satu misi Krusial yang sering luput dari pandangan Front-end Developer. Kepada melaksanakan tujuan yang mulia ini kita perlu menerapkan prinsip-prinsip Accessibility pada proyek website yang sedang dibuat. Darimana kita Dapat memulainya?
1. Semantic HTML
Semantic HTML adalah Langkah implementasi dalam Membangun sebuah layout dengan menggunakan tag HTML yang Mempunyai Arti spesifik. Alih-alih menggunakan tag div Kepada Membangun elemen, kita Dapat menggunakan kode semantik HTML seperti tag header, nav, main, aside, section, article, p, dan footer.
Tag tersebut Mempunyai Arti spesifik sehingga kode HTML lebih mudah dibaca oleh screen reader. Kode HTML menjadi lebih terstruktur dan mudah dibaca oleh developer lain.
2. Alt Image
Ketika pertama kali belajar HTML dan CSS, saya sendiri Enggak terlalu Acuh dengan atribut alt pada tag img. Menurut saya, tampilan antarmuka di layar kaca jauh lebih Krusial daripada sekedar menambahkan atribut.
Tetapi Rupanya, penggunaan atribut alt Krusial. Selain Dapat menampilkan text ketika gambar gagal dirender, atribut juga Berfaedah bagi screen reader. Orang yang Mempunyai gangguan pandangan tetap Dapat Paham gambar apa yang tampil karena atribut alt akan terbaca oleh screen reader sesuai dengan nama gambar.
Di sisi lain, penggunaan alt juga Berkualitas Kepada menunjang SEO. Gambar yang terindeks oleh mesin pencari akan tampil sesuai dengan keyword yang disematkan pada atribut alt.
3. Heading, Paragraph, dan List
Penggunaan tag h1, h2, h3, h4, h5, dan p dalam sebuah website, terutama ketika Membangun web-blog akan membantu screen reader dalam membaca informasi yang tersedia. Begitu pula penggunaan tag ul dan ol, serta tag li.
Screen reader Dapat membaca dengan lebih terstruktur karena informasi yang tertera pada website dibungkus dengan tag yang Pas sehingga Mempunyai hirarki yang Jernih. Dan tentu saja, penggunaan tag Heading, Paragraph, dan List akan memperkuat SEO Onpage pada web-blog kita.
4. Desain
Desain memang bukan hal sederhana karena perlu melibatkan desainer yang biasanya sudah Mempunyai pakem dalam menentukan jenis dan ukuran font, layouting, dan juga Rona.
Oleh karena itu, Front-end Developer juga dituntut lebih aktif Kepada bertukar pikiran dengan desainer dalam menerapkan prinsip Aksesibilitas. Terutama yang berkaitan dengan Rona, ukuran teks dan touch Sasaran.
Color contrast menjadi aspek yang sering terlewat ketika memilih komposisi Rona Kepada tampilan website. Memang ini bukan 100% ranah Front-end Developer karena Rona biasanya sudah ditentukan oleh UI/UX Designer.
Tapi coba buka situs Color Contrast Checker. Kalau score yang tertera kurang dari 4.5 (Good), Terdapat baiknya Kepada bekerjasama dengan desainer agar Dapat memilih kombinasi Rona yang lebih Berkualitas. Dengan begitu, kita Dapat memastikan pengguna dengan gangguan penglihatan tetap Dapat Menonton dengan Jernih Rona pallete pada website.
Selain Rona, ukuran dan jenis font juga berpengaruh bagi pengguna dengan keterbatasan tertentu. Font pada tampilan mobile dan desktop biasanya Mempunyai ukuran yang berbeda dan menyesuaikan dengan ukuran lebar layar. Oleh karena itu, pastikan bahwa ukuran font terlihat Jernih ketika diakses pada ukuran layar kecil.
Pada kasus tertentu, perubahan font Ketika pertama kali tampil (render) juga Dapat Mengelabui pengguna yang berdampak pada User Experience. Kalau menggunakan Next.js, kita Dapat memanfaatkan custom next/font sehingga Sekalian font disajikan secara Tetap. Kepada lebih jelasnya, silakan pelajari pada dokumentasi Next.js Optimizing Fonts Images.
Touch Sasaran biasanya akan menjadi masalah ketika kita Membangun ukuran tombol yang terlalu kecil pada tampilan mobile. Berdasarkan saran dari Pagespeed, Sekalian Touch Sasaran setidaknya Mempunyai ukuran 24px atau Mempunyai jarak yang cukup antara satu tombol dengan yang lain pada ukuran mobile.
5. Keyboard Focus
Selanjutnya, kita juga harus memastikan bahwa website yang kita kembangkan tetap Dapat diakses ketika menggunakan keyboard. Terdapat beberapa keterbatasan yang Membangun seseorang Enggak Dapat menggerakkan mouse dan hanya bergantung pada keyboard Kepada melakukan navigasi.
Kita Dapat mengatur Focus Order, yang biasanya Mempunyai struktur dari atas ke Dasar, Lewat dari kiri ke kanan. Beberapa elemen HTML seperti Checkbox, Inputs, link, sudah Mempunyai Focus Order bawaan. Bagaimana dengan elemen HTML lain? Tentu saja, kita Dapat mengatur urutan Focus Order secara manual dengan menggunakan atribut tabindex.
Atribut tabindex="" Mempunyai nilai yang Dapat kita atur tergantung Bilangan diantara tanda petik. Kita Dapat menggunakan Bilangan 1, 2, 3, dst sebagai nilai urutan Focus Order sehingga tag HTML Dapat kita akses menggunakan tombol Tab pada keyboard sesuai urutan yang kita buat.
6. Mendunia Code
Mendunia Code merupakan kode Lumrah yang mempengaruhi seluruh website kita. Contohnya atribut lang yang berada pada tag html itu sendiri. Nilai dari lang="" adalah kode bahasa sesuai dengan Sasaran market website yang kita buat. Kita Dapat menggunakan lang=“id” Kalau membangun website Kepada pengguna dari Indonesia. Beberapa nilai yang sering digunakan antara lain en Kepada English, es Kepada Espanyol dan in Kepada India.
Selain itu, kode Lumrah yang Enggak kalah Krusial adalah page title. Pada tag head, title akan ditampilkan di tab browser Kepada halaman Istimewa saja. Kalau website kita Mempunyai beberapa halaman, disarankan Kepada menggunakan title yang berbeda di setiap halaman agar pengguna screen reader Paham isi/konteks halaman yang sedang dibuka.
Penggunaan page title juga Mempunyai pengaruh yang tinggi pada SEO. Page title akan membantu mesin pencari menyuguhkan hasil pencarian yang lebih Pas.
7. ARIA
Accessible Rich Internet Applications (ARIA) digunakan Kepada menentukan roles dan attribute pada tag HTML yang Enggak Mempunyai Arti atau non-Semantic. Kalau kita kembali pada point pertama tentang Semantic HTML, kita Dapat menggunakan tag HTML bawaan yang sudah Mempunyai Arti seperti tag main, header, nav, dan lainnya.
Tapi kita juga Dapat Membangun tag HTML seperti ini:
div role="heading" aria-level="1">Judul Sebuah Artikeldiv>Itu adalah Langkah lain menuliskan tag h1 dengan menggunakan tag div Lumrah. Kita Paham bahwa tag div Enggak Mempunyai Arti spesifik. Tetapi dengan menambahkan atribut role=“heading” dan aria-level=“1”, maka kita Dapat memberi Paham screen reader bahwa tag div dengan role=“heading” dan atribut aria-level=“1” akan dikenali sebagai heading.