Biasanya, Front-end Developer lebih condong ke arah keindahan saat merancang tampilan antarmuka. Tapi, jangan lupakan yang tak kalah pentingnya, yaitu “aksesibilitas.” Aksesibilitas bikin website jadi lebih ramah diakses oleh berbagai kalangan.

Apa itu Aksesibilitas?

Aksesibilitas itu keren! Ini adalah trik atau teknik yang bikin website kita bisa dijangkau sama banyak orang, termasuk yang punya keterbatasan tertentu. Jadi, Aksesibilitas itu terjemahan literal dari Accessibility, yang sering disingkat jadi A11Y.

Nah, tujuannya sederhana, biar semua orang, termasuk yang punya masalah pendengaran, penglihatan, atau keterbatasan gerak, bisa nyaman mengakses info dan teknologi di internet. Gak ketinggalan, semua orang bisa ikutan eksis di dunia maya! ?

Menerapkan Aksesibilitas di dalam Situs Web

Nah, sebagai Front-end Developer, kita kadang-kadang lupa satu misi penting, yaitu membuat website yang bisa diakses oleh semua orang. Untuk mewujudkan tujuan baik itu, kita perlu nge-apply prinsip-prinsip Accessibility di proyek website yang lagi kita bikin. Pertanyaannya sekarang, mulai dari mana ya?

1. HTML Semantik

HTML Semantik adalah cara fancy untuk membuat susunan halaman web dengan menggunakan tag HTML yang punya makna khusus. Jadi, daripada asal-asalan pakai tag div buat bikin elemen, kita bisa manfaatin kode HTML yang maknanya udah jelas, kayak tag header, nav, main, aside, section, article, p, dan footer.

Ini bikin kode HTML kita jadi lebih friendly buat yang pakai screen reader. Selain itu, jadi lebih rapi dan gampang dimengerti buat developer lain yang lihat.

2. Alternatif Gambar (Alt Image)

Waktu pertama belajar HTML dan CSS, saya tidak begitu ngeh tentang atribut alt di tag img. Untuk saya, yang penting tampilannya di layar kaca, nggak terlalu mikirin atribut ini.

Ternyata, alt itu penting lho. Selain bisa nunjukin teks kalo gambarnya gagal tampil, alt juga berguna buat yang pake screen reader. Jadi, orang yang punya masalah sama penglihatan tetap bisa tau isinya gambar karena alt bakal dibaca sesuai dengan nama gambarnya oleh screen reader.

Contohnya jika gambar tidak dapat di load, maka alt text yang akan muncul:

contoh alt tag

Nah, kalau kita ngomongin alt text, itu juga bagus buat bantu SEO, lho. Jadi, gambar yang diindeks oleh mesin pencari bakal muncul sesuai dengan kata kunci yang kita kasih di atribut alt.

3. Judul, Paragraf, dan Daftar

Ketika kita bikin web atau blog, seringkali kita pakai tag seperti h1, h2, h3, h4, h5, dan p. Ini nggak cuma buat gaya penulisan aja, tapi juga bantu screen reader buat baca info dengan lebih baik. Selain itu, jangan lupakan tag ul, ol, sama li buat bikin daftar.

Dengan menggunakan tag-tag yang pas, seperti Heading, Paragraph, dan List, informasi di web kita bisa dibaca dengan lebih terstruktur. Jadi, screen reader bisa mengenali hirarkinya dengan mudah. Yang pasti, selain bikin konten lebih ramah pengguna, penggunaan tag ini juga bisa bikin SEO Onpage web atau blog kita makin oke.

4. Desain

Pembahasan mengenai desain memang nggak bisa dianggap sepele. Kita butuh kolaborasi dengan desainer yang udah punya pengalaman dalam memilih jenis dan ukuran font, tata letak, dan warna.

Makanya, Front-end Developer harus lebih proaktif berkomunikasi sama desainer. Ini penting, terutama dalam menerapkan prinsip Aksesibilitas, terutama yang berkaitan dengan warna, ukuran teks, dan area sentuhan (touch target).

1. kontras warna

Kontras warna sering kali terlupakan saat kita memilih warna untuk tampilan website. Meskipun biasanya ditentukan oleh Desainer UI/UX, ini juga penting untuk diperhatikan oleh Front-end Developer.

Coba deh buka situs Color Contrast Checker. Jika skornya kurang dari 4.5 (Good), sebaiknya kita bekerjasama dengan desainer untuk memilih kombinasi warna yang lebih baik. Dengan begitu, kita bisa memastikan bahwa pengguna dengan gangguan penglihatan tetap dapat melihat dengan jelas warna palet pada website.

Contoh kontras warna:

Chrome dev tools color contrast
Chrome dev tools color contrast

2. Jenis Huruf (Font)

Selain warna, ukuran dan jenis huruf juga memiliki dampak penting bagi pengguna dengan keterbatasan tertentu. Huruf pada tampilan ponsel dan komputer biasanya memiliki ukuran yang berbeda, disesuaikan dengan lebar layar. Jadi, pastikan bahwa ukuran huruf terbaca dengan jelas ketika diakses melalui layar berukuran kecil.

Dalam situasi tertentu, perubahan jenis huruf saat pertama kali muncul (render) juga dapat membuat pengguna bingung, yang pada akhirnya memengaruhi pengalaman pengguna.

3. Touch Target (Ukuran Tombol Sentuh)

Ukuran Tombol Sentuh seringkali jadi masalah saat kita membuat tombol terlalu kecil di tampilan ponsel. Menurut saran dari Pagespeed, sebaiknya semua Ukuran Tombol Sentuh minimal 24px atau diberi jarak yang cukup antar tombol saat digunakan di perangkat mobile.

5. Fokus pada Keyboard

Selanjutnya, kita juga perlu memastikan bahwa situs web yang kita buat tetap mudah diakses ketika menggunakan keyboard. Ada situasi di mana seseorang mungkin tidak dapat menggunakan mouse dan harus mengandalkan keyboard untuk berinteraksi.

Kita dapat mengatur Urutan Fokus, yang umumnya mengikuti struktur dari atas ke bawah dan dari kiri ke kanan. Beberapa elemen HTML seperti Checkbox, Input, dan tautan sudah memiliki Urutan Fokus bawaan. Bagaimana dengan elemen HTML lainnya? Tentu saja, kita dapat mengatur Urutan Fokus secara manual dengan menggunakan atribut tabindex.

Atribut tabindex=”” memiliki nilai yang dapat kita tentukan dengan angka di antara tanda petik. Kita dapat menggunakan angka 1, 2, 3, dan seterusnya sebagai nilai Urutan Fokus sehingga tag HTML dapat diakses menggunakan tombol Tab pada keyboard sesuai dengan urutan yang kita atur.

6. Kode Global

Global Code adalah sekumpulan kode yang memengaruhi seluruh bagian situs web kita. Misalnya, atribut “lang” yang terletak pada tag HTML itu sendiri. Nilai dari “lang”=”” menentukan kode bahasa sesuai dengan target pasar situs web yang sedang kita bangun.

Jika kita membuat situs web untuk pengguna di Indonesia, kita dapat menggunakan “lang=“id””. Beberapa nilai umumnya mencakup “en” untuk Bahasa Inggris, “es” untuk Bahasa Spanyol, dan “in” untuk India.

Selain itu, kode umum yang tak kalah pentingnya adalah “page title”. Pada tag “head”, “title” akan muncul di tab browser untuk halaman utama saja. Jika situs web kita memiliki beberapa halaman, disarankan untuk menggunakan judul yang berbeda di setiap halaman agar pengguna screen reader dapat mengetahui isi atau konteks halaman yang sedang dibuka.

Penggunaan “page title” juga sangat berpengaruh pada SEO. “Page title” akan membantu mesin pencari menyajikan hasil pencarian yang lebih akurat.

7. ARIA

ARIA (Accessible Rich Internet Applications) digunakan untuk memberikan peran (roles) dan atribut pada tag HTML yang tidak memiliki makna atau bersifat non-Semantik. Jadi, meskipun kita sebaiknya menggunakan tag HTML bawaan yang sudah memiliki makna seperti main, header, nav, dan lainnya, terkadang kita perlu membuat tag HTML sendiri.

Contohnya, kita bisa menggunakan tag seperti ini:

<div role="heading" aria-level="1">Judul Sebuah Artikel</div>

Pada dasarnya, itu adalah cara lain untuk menuliskan tag h1 dengan menggunakan tag div biasa. Meskipun tag div tidak punya makna spesifik, dengan menambahkan atribut role=”heading” dan aria-level=”1″, kita memberitahu screen reader bahwa tag div tersebut sebenarnya adalah heading (judul) dengan tingkat heading 1.

Penutup

Mengakhiri pembahasan tentang Aksesibilitas, semoga kita kini lebih memahami betapa pentingnya membuat situs web yang dapat diakses oleh semua orang.

Dengan memperhatikan keberagaman kebutuhan pengguna, kita dapat menciptakan pengalaman online yang inklusif dan ramah bagi semua kalangan. Jangan lupa, langkah-langkah sederhana seperti menggunakan Semantic HTML dan memanfaatkan teknologi seperti ARIA bisa menjadi kunci untuk memastikan bahwa informasi dan layanan di website kita dapat diakses dengan mudah oleh semua orang, tanpa terkecuali.

Mari bersama-sama menciptakan dunia maya yang lebih terbuka dan ramah untuk semua!

Apa itu Aksesibilitas?

Aksesibilitas itu keren! Ini adalah trik atau teknik yang bikin website kita bisa dijangkau sama banyak orang, termasuk yang punya keterbatasan tertentu. Jadi, Aksesibilitas itu terjemahan literal dari Accessibility, yang sering disingkat jadi A11Y.

About the Author

Dzul Qurnain

Suka nonton Anime, ngoding dan bagi-bagi tips kalau tahu.. Oh iya, suka baca ( tapi yang menarik menurutku aja)...

View All Articles