Skodev
Belajar coding dalam bahasa Indonesia
Diskon kelas baru hingga 25%! Masukkan kupon "lebihcepat" di kelas ini
XSkodev
Belajar coding dalam bahasa Indonesia
Berkenalan dengan Accessibility, cara agar website bisa diakses oleh semua kalangan.
Front-end Developer biasanya hanya fokus pada sisi estetika saja ketika membangun tampilan antarmuka. Padahal ada sisi lain yang tidak kalah penting yaitu “aksesibilitas”. Aksesibilitas berguna agar website kita lebih mudah diakses oleh lebih banyak orang.
Aksesibilitas adalah teknik yang memungkinkan website kita bisa diakses oleh lebih banyak orang, termasuk mereka yang memiliki keterbatasan tertentu. Aksesibilitas adalah terjemahan dari Accessibility, – yang sering disingkat dengan A11Y.
Tujuannya, agar orang dengan gangguan pendengaran, gangguan penglihatan, atau mereka yang memiliki mobilitas terbatas bisa mengakses informasi dan teknologi yang tersedia di internet.
Ini merupakan salah satu misi penting yang sering luput dari pandangan Front-end Developer. Untuk melaksanakan tujuan yang mulia ini kita perlu menerapkan prinsip-prinsip Accessibility pada proyek website yang sedang dibuat. Darimana kita bisa memulainya?
Semantic HTML adalah cara implementasi dalam membuat sebuah layout dengan menggunakan tag HTML yang memiliki makna spesifik. Alih-alih menggunakan tag div untuk membuat elemen, kita bisa menggunakan kode semantik HTML seperti tag header, nav, main, aside, section, article, p, dan footer.
Tag tersebut memiliki makna spesifik sehingga kode HTML lebih mudah dibaca oleh screen reader. Kode HTML menjadi lebih terstruktur dan mudah dibaca oleh developer lain.
Ketika pertama kali belajar HTML dan CSS, saya sendiri tidak terlalu peduli dengan atribut alt pada tag img. Menurut saya, tampilan antarmuka di layar kaca jauh lebih penting daripada sekedar menambahkan atribut.
Namun ternyata, penggunaan atribut alt penting. Selain bisa menampilkan text ketika gambar gagal dirender, atribut juga berguna bagi screen reader. Orang yang memiliki gangguan pandangan tetap bisa tahu gambar apa yang tampil karena atribut alt akan terbaca oleh screen reader sesuai dengan nama gambar.
Di sisi lain, penggunaan alt juga baik untuk menunjang SEO. Gambar yang terindeks oleh mesin pencari akan tampil sesuai dengan keyword yang disematkan pada atribut alt.
Penggunaan tag h1, h2, h3, h4, h5, dan p dalam sebuah website, terutama ketika membuat web-blog akan membantu screen reader dalam membaca informasi yang tersedia. Begitu pula penggunaan tag ul dan ol, serta tag li.
Screen reader bisa membaca dengan lebih terstruktur karena informasi yang tertera pada website dibungkus dengan tag yang tepat sehingga memiliki hirarki yang jelas. Dan tentu saja, penggunaan tag Heading, Paragraph, dan List akan memperkuat SEO Onpage pada web-blog kita.
Desain memang bukan hal sederhana karena perlu melibatkan desainer yang biasanya sudah memiliki pakem dalam menentukan jenis dan ukuran font, layouting, dan juga warna.
Oleh karena itu, Front-end Developer juga dituntut lebih aktif untuk bertukar pikiran dengan desainer dalam menerapkan prinsip Aksesibilitas. Terutama yang berkaitan dengan warna, ukuran teks dan touch target.
Color contrast menjadi aspek yang sering terlewat ketika memilih komposisi warna untuk tampilan website. Memang ini bukan 100% ranah Front-end Developer karena warna biasanya sudah ditentukan oleh UI/UX Designer.
Tapi coba buka situs Color Contrast Checker. Jika score yang tertera kurang dari 4.5 (Good), ada baiknya untuk bekerjasama dengan desainer agar bisa memilih kombinasi warna yang lebih baik. Dengan begitu, kita bisa memastikan pengguna dengan gangguan penglihatan tetap bisa melihat dengan jelas warna pallete pada website.
Selain warna, ukuran dan jenis font juga berpengaruh bagi pengguna dengan keterbatasan tertentu. Font pada tampilan mobile dan desktop biasanya memiliki ukuran yang berbeda dan menyesuaikan dengan ukuran lebar layar. Oleh karena itu, pastikan bahwa ukuran font terlihat jelas ketika diakses pada ukuran layar kecil.
Pada kasus tertentu, perubahan font saat pertama kali tampil (render) juga bisa mengecoh pengguna yang berdampak pada User Experience. Jika menggunakan Next.js, kita bisa memanfaatkan custom next/font sehingga semua font disajikan secara statis. Untuk lebih jelasnya, silakan pelajari pada dokumentasi Next.js Optimizing Fonts Images.
Touch Target biasanya akan menjadi masalah ketika kita membuat ukuran tombol yang terlalu kecil pada tampilan mobile. Berdasarkan saran dari Pagespeed, semua Touch Target setidaknya memiliki ukuran 24px atau memiliki jarak yang cukup antara satu tombol dengan yang lain pada ukuran mobile.
Selanjutnya, kita juga harus memastikan bahwa website yang kita kembangkan tetap bisa diakses ketika menggunakan keyboard. Ada beberapa keterbatasan yang membuat seseorang tidak bisa menggerakkan mouse dan hanya bergantung pada keyboard untuk melakukan navigasi.
Kita bisa mengatur Focus Order, yang biasanya memiliki struktur dari atas ke bawah, lalu dari kiri ke kanan. Beberapa elemen HTML seperti Checkbox, Inputs, link, sudah memiliki Focus Order bawaan. Bagaimana dengan elemen HTML lain? Tentu saja, kita bisa mengatur urutan Focus Order secara manual dengan menggunakan atribut tabindex.
Atribut tabindex="" memiliki nilai yang bisa kita atur tergantung angka diantara tanda petik. Kita bisa menggunakan angka 1, 2, 3, dst sebagai nilai urutan Focus Order sehingga tag HTML bisa kita akses menggunakan tombol Tab pada keyboard sesuai urutan yang kita buat.
Global Code merupakan kode umum yang mempengaruhi seluruh website kita. Contohnya atribut lang yang berada pada tag html itu sendiri. Nilai dari lang="" adalah kode bahasa sesuai dengan target market website yang kita buat. Kita bisa menggunakan lang=“id” jika membangun website untuk pengguna dari Indonesia. Beberapa nilai yang sering digunakan antara lain en untuk English, es untuk Espanyol dan in untuk India.
Selain itu, kode umum yang tidak kalah penting adalah page title. Pada tag head, title akan ditampilkan di tab browser untuk halaman utama saja. Jika website kita memiliki beberapa halaman, disarankan untuk menggunakan title yang berbeda di setiap halaman agar pengguna screen reader tahu isi/konteks halaman yang sedang dibuka.
Penggunaan page title juga memiliki pengaruh yang tinggi pada SEO. Page title akan membantu mesin pencari menyuguhkan hasil pencarian yang lebih tepat.
Accessible Rich Internet Applications (ARIA) digunakan untuk menentukan roles dan attribute pada tag HTML yang tidak memiliki makna atau non-Semantic. Jika kita kembali pada point pertama tentang Semantic HTML, kita bisa menggunakan tag HTML bawaan yang sudah memiliki makna seperti tag main, header, nav, dan lainnya.
Tapi kita juga bisa membuat tag HTML seperti ini:
<div role="heading" aria-level="1">Judul Sebuah Artikel</div>Itu adalah cara lain menuliskan tag h1 dengan menggunakan tag div biasa. Kita tahu bahwa tag div tidak memiliki makna spesifik. Namun dengan menambahkan atribut role=“heading” dan aria-level=“1”, maka kita bisa memberi tahu screen reader bahwa tag div dengan role=“heading” dan atribut aria-level=“1” akan dikenali sebagai heading.
Hai, saya Anang Yoga. Front-end Developer.