10 Tip Teratas untuk Membuat Situs Web Anda Dapat Diakses

Membuat Situs Web Anda Dapat Diakses

Jika situs Anda berisi tayangan slide, pastikan bahwa setiap foto memiliki teks alternatif dan dapat dinavigasi melalui keyboard. Jika Anda menggunakan widget unik (seperti pemilih kalender atau tarik-dan-lepas), pastikan untuk menguji aksesibilitas.

1. Pilih sistem manajemen konten yang mendukung aksesibilitas.

Ada banyak sistem manajemen konten yang tersedia untuk membantu Anda membangun situs web Anda. Contoh umum termasuk Drupal dan WordPress, tetapi ada banyak pilihan lain yang tersedia.

Setelah Anda memilih CMS yang sesuai dengan kebutuhan Anda, pastikan untuk memilih tema/templat yang dapat diakses. Lihat dokumentasi tema untuk catatan tentang aksesibilitas dan tip untuk membuat konten dan tata letak yang dapat diakses untuk tema tersebut. Pastikan untuk mengikuti panduan yang sama saat memilih modul, plugin, atau widget.

Untuk elemen seperti bilah alat pengeditan dan pemutar video, pastikan keduanya mendukung pembuatan konten yang dapat diakses. Misalnya, bilah alat pengeditan harus menyertakan opsi untuk judul dan tabel yang dapat diakses, dan pemutar video harus menyertakan teks tertutup. Opsi administrasi CMS (seperti membuat posting blog atau memposting komentar) juga harus dapat diakses.

2. Gunakan heading dengan benar untuk mengatur struktur konten Anda.

Pengguna pembaca layar dapat menggunakan struktur heading untuk menavigasi konten. Dengan menggunakan heading (<h1>, <h2>, dll) secara benar dan strategis, konten website Anda akan tertata dengan baik dan mudah diinterpretasikan oleh pembaca layar.

Pastikan untuk mematuhi urutan judul yang benar, dan pisahkan presentasi dari struktur dengan menggunakan CSS (Cascading Style Sheets). Jangan memilih header hanya karena terlihat bagus secara visual (yang dapat membingungkan pengguna pembaca layar); sebagai gantinya, buat kelas CSS baru untuk menata teks Anda.

Contoh penggunaan heading yang benar:

Gunakan <h1> untuk judul utama halaman. Hindari menggunakan <h1> untuk apa pun selain judul situs web dan judul halaman individual.
Gunakan heading untuk menunjukkan dan mengatur struktur konten Anda.
Jangan lewati tingkat judul (misalnya, beralih dari <h1> ke <h3>), karena pengguna pembaca layar akan bertanya-tanya apakah ada konten yang hilang.

3. Sertakan teks alternatif yang tepat untuk gambar.

Teks alternatif harus disediakan untuk gambar, sehingga pengguna pembaca layar dapat memahami pesan yang disampaikan oleh penggunaan gambar pada halaman. Ini sangat penting untuk gambar yang informatif (seperti infografis). Saat membuat teks alt, teks harus berisi pesan yang ingin Anda sampaikan melalui gambar tersebut, dan jika gambar menyertakan teks, teks tersebut juga harus disertakan dalam alt.

Pengecualian untuk aturan ini adalah ketika gambar digunakan murni untuk dekorasi; dalam hal ini, teks alt dapat dibiarkan kosong(tautan bersifat eksternal)sehingga pengguna pembaca layar tidak terganggu dari konten yang lebih penting di halaman.

Jika gambar adalah satu-satunya konten tautan, pembaca layar akan membaca nama file jika teks alternatif tidak disediakan. Selalu sediakan teks alternatif untuk gambar yang digunakan sebagai tautan.

4. Berikan link Anda nama yang unik dan deskriptif.

Saat menyertakan tautan dalam konten Anda, gunakan teks yang menjelaskan dengan tepat ke mana tautan akan diarahkan. Menggunakan “klik di sini” tidak dianggap deskriptif, dan tidak efektif untuk pengguna pembaca layar.

Sama seperti pengguna yang dapat melihat memindai halaman untuk teks tertaut, pengguna tunanetra dapat menggunakan pembaca layar mereka untuk memindai tautan. Akibatnya, pengguna pembaca layar sering kali tidak membaca tautan dalam konteks halaman lainnya. Menggunakan teks deskriptif dengan benar menjelaskan konteks tautan ke pengguna pembaca layar.

Konten tautan yang paling unik harus disajikan terlebih dahulu, karena pengguna pembaca layar akan sering menavigasi daftar tautan dengan mencari melalui huruf pertama.

Misalnya, jika Anda mengarahkan pengunjung ke halaman yang disebut “Tentang Kami”:

Cobalah untuk tidak mengatakan: ” Klik di sini untuk membaca tentang perusahaan kami.”
Sebaliknya, katakan: “Untuk mempelajari lebih lanjut tentang perusahaan kami, baca Tentang Kami .”

5. Gunakan warna dengan hati-hati.

Bentuk paling umum dari kekurangan warna, kekurangan warna merah-hijau, mempengaruhi sekitar 8% dari populasi. Menggunakan HANYA warna seperti ini (terutama untuk menunjukkan bidang yang diperlukan dalam formulir) akan mencegah orang-orang ini memahami pesan Anda.

Kelompok penyandang disabilitas lainnya, khususnya pengguna dengan ketidakmampuan belajar, mendapat manfaat besar dari warna ketika digunakan untuk membedakan dan mengatur konten Anda.

Untuk memuaskan kedua kelompok, gunakan warna, tetapi juga pastikan untuk menggunakan indikator visual lainnya, seperti tanda bintang atau tanda tanya. Pastikan juga untuk membedakan blok konten satu sama lain menggunakan pemisahan visual (seperti spasi atau batas).

Ada beberapa alat yang dapat Anda gunakan untuk mengevaluasi kontras warna , yang akan membantu Anda membuat halaman Anda dapat digunakan secara visual semaksimal mungkin untuk individu dengan penglihatan rendah atau berbagai tingkat buta warna.

6. Rancang formulir Anda untuk aksesibilitas.

Saat bidang formulir tidak diberi label dengan tepat, pengguna pembaca layar tidak memiliki isyarat yang sama yang tersedia sebagai pengguna yang dapat melihat. Mungkin tidak mungkin untuk mengetahui jenis konten apa yang harus dimasukkan ke dalam bidang formulir.

Setiap bidang dalam formulir Anda harus memiliki label deskriptif yang diposisikan dengan baik. Misalnya, jika bidang tersebut untuk nama seseorang, bidang tersebut harus diberi label dengan tepat sebagai “Nama Lengkap” atau memiliki dua bidang terpisah yang diberi label sebagai “Nama Depan” dan “Nama Belakang”. Gunakan tag <label> atau properti ARIA (lihat tip #9) untuk mengaitkan teks label dengan bidang formulir.

Saat Anda melewati bidang formulir, seseorang harus dapat membuka tab melalui formulir dan mengisi semua bidang sebelum sampai ke tombol “Kirim”, atau mereka bahkan mungkin tidak menyadari bahwa ada bidang tambahan. Pada dasarnya, urutan tab harus mengikuti urutan visual.

Jika Anda memiliki bidang yang terkait atau serupa, pertimbangkan untuk mengelompokkannya menggunakan kumpulan bidang. Misalnya, bidang seperti “Nama Lengkap” dan “Tanggal Lahir” dapat dikelompokkan bersama sebagai “Informasi Pribadi”. Tipe organisasi formulir ini bisa membantu pengguna pembaca layar melacak kemajuan, dan bisa memberikan konteks yang mungkin hilang saat mengisi formulir.

Jika bidang formulir tertentu diperlukan, bidang tersebut harus diberi label yang sesuai, dan dikonfigurasi untuk memperingatkan pengguna pembaca layar. Biasanya, bidang yang wajib diisi ditandai dengan tanda bintang, yang tidak akan diucapkan oleh beberapa pembaca layar. Tanda bintang (atau indikasi visual serupa) harus tetap digunakan untuk pengguna yang dapat melihat, orang dengan ketidakmampuan belajar, atau orang yang berbicara bahasa Inggris sebagai bahasa kedua. Menunjukkan bahwa suatu bidang diperlukan untuk pembaca layar dapat dilakukan dengan menambahkan ARIA diperlukan=”benar” dan ARIA diperlukan=”salah” untuk bidang opsional. Setelah mengirimkan formulir, pengguna harus diberitahu tentang konfirmasi pengiriman dan kesalahan pengiriman apa pun. Kami merekomendasikan untuk memasukkan jumlah kesalahan dalam judul halaman (setelah pengguna mengirimkan), sehingga pengguna akan segera diberitahu bahwa ada kesalahan pada halaman.

Terakhir, penggunaan CAPTCHA tidak dapat diakses dan tidak boleh digunakan untuk memvalidasi pengiriman. WebAIM memiliki ringkasan yang bermanfaat tentang alternatif yang dapat diakses(tautan bersifat eksternal)ke CAPTCHA untuk menjaga formulir bebas dari pengiriman spam.

7. Gunakan tabel untuk data tabular, bukan untuk tata letak.

Menggunakan tabel untuk tata letak halaman menambahkan verbositas tambahan untuk pengguna pembaca layar. Setiap kali pembaca layar menemukan tabel, pengguna diberi tahu bahwa ada tabel dengan jumlah kolom dan baris “x”, yang mengalihkan perhatian dari konten. Juga, konten dapat dibaca dalam urutan yang tidak sesuai dengan urutan visual halaman. Jangan membuat tata letak situs web menggunakan tabel; sebagai gantinya, gunakan CSS untuk presentasi.

Ketika tabel data diperlukan (yaitu Anda memiliki kumpulan data yang paling baik ditafsirkan dalam format tabel, seperti laporan mutasi bank), gunakan header untuk baris dan kolom, yang membantu menjelaskan hubungan sel. Tabel kompleks mungkin memiliki beberapa sel di dalam tabel yang memiliki hubungan unik satu sama lain, dan ini harus diidentifikasi dengan menggunakan atribut “lingkup” dalam HTML. Judul tabel (HTML5) dapat digunakan untuk memberikan informasi tambahan kepada pengguna tentang cara terbaik untuk membaca dan memahami hubungan tabel.

8. Pastikan bahwa semua konten dapat diakses dengan keyboard saja dengan cara yang logis.

Pengguna dengan disabilitas mobilitas, termasuk cedera stres berulang, mungkin tidak dapat menggunakan mouse atau trackpad. Orang-orang ini dapat mengakses konten melalui penggunaan keyboard dengan menekan tombol “tab” atau “panah”, atau melalui penggunaan perangkat input alternatif seperti input sakelar tunggal atau stik mulut. Akibatnya, urutan tab harus sesuai dengan urutan visual, sehingga pengguna hanya keyboard dapat menavigasi secara logis melalui konten situs.

Halaman panjang dengan banyak konten harus dipecah dengan tautan jangkar (daftar lompat), yang memungkinkan pengguna keyboard saja untuk melompat ke bagian halaman yang relevan tanpa harus bernegosiasi melalui konten lain. “Lewati ke konten utama” harus disediakan di bagian atas setiap halaman, sehingga pengguna yang hanya menggunakan keyboard tidak perlu membuka tab navigasi halaman untuk mendapatkan konten utama.

Untuk halaman dengan menu lokal dan beberapa level dan sub-item, menu harus dikonfigurasi sehingga semua item menu dapat diakses dengan keyboard. Jangan gunakan elemen yang hanya aktif saat pengguna mengarahkan kursor ke item dengan mouse, karena pengguna hanya keyboard atau pembaca layar tidak akan dapat mengaktifkannya.

9. Gunakan peran dan tengara ARIA (tetapi hanya jika diperlukan).

ARIA (Aplikasi Internet Kaya yang Dapat Diakses) adalah spesifikasi teknis yang kompleks dan kuat untuk menambahkan informasi aksesibilitas ke elemen yang tidak dapat diakses secara asli. Anda harus selalu menggunakan elemen HTML asli jika tersedia. Ingat, aturan pertama ARIA adalah “Jangan gunakan ARIA.” Banyak fungsi yang dulu membutuhkan atribut ARIA sekarang diimplementasikan dalam HTML5.

Sebagai contoh:

Gunakan tag tombol HTML asli alih-alih peran tombol ARIA.
Gunakan tag label HTML alih-alih aria-label atau arial-labeledby.
Gunakan tag nav HTML 5 alih-alih peran navigasi ARIA.

Atribut ARIA dapat ditambahkan ke HTML Anda, dengan cara yang sama seperti Anda menambahkan kelas ke HTML untuk memuat atribut dari CSS.

Harap dicatat bahwa hanya menambahkan atribut ARIA tidak cukup untuk membuat widget yang paling kompleks dapat diakses. ARIA tidak melakukan apa pun untuk pengguna keyboard saja (lihat tip #8); itu hanya mempengaruhi orang yang menggunakan teknologi bantu. Anda masih perlu mengatur interaksi dan perilaku Anda menggunakan Javascript.

Contoh penggunaan ARIA yang tepat meliputi:

Menambahkan peringatan untuk memberi tahu pengguna pembaca layar tentang perubahan halaman dinamis, seperti ticker saham dan filter pencarian.
Membuat widget interaktif yang kompleks seperti pemilih tanggal dapat diakses oleh pengguna pembaca layar.

10. Membuat konten dinamis dapat diakses.

Saat konten diperbarui secara dinamis (yaitu tanpa penyegaran halaman), pembaca layar mungkin tidak menyadarinya. Ini termasuk overlay layar, lightbox, pembaruan dalam halaman, popup, dan dialog modal. Pengguna hanya keyboard mungkin terjebak dalam hamparan halaman. Pengguna perangkat lunak pembesaran mungkin memperbesar bagian halaman yang salah.

Fungsi-fungsi ini dapat dengan mudah diakses. Opsi mencakup peran dan peringatan ARIA, serta kerangka kerja pengembangan front-end yang secara khusus mendukung aksesibilitas.

Pastikan pemutar video tidak memutar otomatis (suara non-konsensual), dan pemutar dapat digunakan dengan keyboard. Selain itu, semua video harus memiliki opsi untuk teks tertutup dan transkrip untuk tuna rungu.

Jika situs Anda berisi tayangan slide, pastikan bahwa setiap foto memiliki teks alternatif dan dapat dinavigasi melalui keyboard. Jika Anda menggunakan widget unik (seperti pemilih kalender atau tarik-dan-lepas), pastikan untuk menguji aksesibilitas.