Apa langkah minimum yang harus saya ikuti untuk memastikan bahwa situs web saya dapat diakses?

35

Saya mencoba mengikuti standar yang sangat penting yang harus saya akui bahwa saya telah mengabaikannya hingga saat ini. Saya ingin memastikan bahwa halaman saya dapat diakses oleh sebagian besar orang yang cacat. Saya fokus terutama pada tutorial yang intensif teks dan gambar, tetapi tidak ada video / flash atau jenis animasi.

Apa daftar periksa yang dapat saya ikuti untuk memastikan bahwa banyak penyandang cacat dapat memiliki pengalaman yang baik saat menggunakan situs web saya, dan cacat apa yang paling saya sadari?

Saya tahu bahwa saya tidak mungkin menyenangkan semua orang. Saya telah melalui pedoman W3C , namun saya tidak sepenuhnya yakin standar apa yang berlaku untuk saya. Saya tidak membangun aplikasi web, saya membangun sebagian besar wiki seperti pertukaran informasi, blog dan forum sesekali.

Pos Tim
sumber
uxexchange.com?
Bobby Jack 4-10

Jawaban:

18
  • Pastikan setiap gambar memiliki teks alternatif.
  • Pastikan skema warna Anda cocok untuk mereka yang buta warna.
  • Menawarkan tata letak kontras tinggi atau tata letak teks besar untuk tunanetra.
  • Pastikan tautan Anda masuk akal ketika dibaca di luar konteks (yaitu jangan hanya menulis "klik di sini").
  • Pastikan situs Anda masih menawarkan fungsionalitas dasar penuh jika pengguna tidak memiliki dukungan JavaScript.

W3 menawarkan beberapa tips dasar tentang aksesibilitas melalui situs webnya . Joe Clark memiliki versi online bukunya "Membangun Situs Web yang Dapat Diakses" yang tersedia untuk dilihat secara gratis yang berisi banyak informasi berguna.

Wolfwyrd
sumber
1
Ada beberapa peringatan untuk aturan 'teks alternatif'. Sayangnya, saya telah bekerja dengan orang-orang yang memperlakukannya sebagai aturan yang sulit dan cepat - yaitu SETIAP gambar HARUS memiliki atribut alt. Kemudian mereka menambahkan hal-hal seperti "logo perusahaan kami" ke gambar logo, dan "biru besar 't'" ke gambar yang ditautkan ke akun twitter.
Bobby Jack
Dengan tag alt, saya percaya SETIAP gambar harus memilikinya. Saat bekerja dengan pembaca layar, Anda harus memberi tahu apa yang harus dilakukan. Jika gambar Anda hanya ada untuk daya tarik visual, dan tidak memiliki nilai lain, maka gunakan alt = "" sehingga pembaca layar tahu untuk mengabaikannya. Jika gambar Anda adalah grafik, atau mungkin tajuk, pastikan untuk memasukkan informasi dalam tag alt sehingga pembaca layar, serta orang-orang yang menonaktifkan gambar, tidak akan ketinggalan.
ph33nyx
8

Membuat semantik mark-up Anda adalah langkah besar menuju aksesibilitas, jika situs Anda dapat dinavigasi tanpa CSS yang diterapkan dan kontennya masuk akal maka yang lainnya hanyalah saus visual!

Toby
sumber
1
Dan lebih menyenangkan di hari CSS telanjang :)
Tim Post
2
Haha, tentu saja! Serius meskipun, banyak orang menganggap aksesibilitas adalah semua berkaitan dengan desain, itu adalah kebalikannya, jika Anda dapat membuat konten Anda sehingga berfungsi tanpa desain maka mesin (dan karenanya manusia) akan selalu dapat mengakses saya t.
Toby
7

Pertama-tama "orang cacat" tidak berarti apa-apa!

Jadi mari kita lihat beberapa kelompok orang yang perlu Anda periksa apakah Anda situs web Anda.

Orang miskin yang hanya memiliki buku catatan dengan layar kecil

Anda hanya perlu memeriksa situs web Anda dapat digunakan ketika jendela browser kecil tanpa terlalu sakit.

Orang buta warna

Adakah yang bisa menggunakan situs web Anda tanpa melihat warna ikon, dll., Mencitrakan Anda mengaksesnya di monitor B&W.

Seseorang dengan situs yang buruk.

Ketika Anda mengubah ukuran jenis di browser, apakah semua teks menjadi lebih besar di situs Anda, dan tata letaknya masih OK. Apakah situs masih dapat digunakan pada monitor kecil?

Apakah situs Anda menggunakan tata letak kontras tinggi, jika tidak mudah bagi pengguna untuk beralih ke tata letak kontras tinggi?

Seseorang yang tidak bisa menggunakan mouse

Dapatkah seseorang yang belum pernah menggunakan situs web Anda sebelumnya, mengakses semua fungsi / informasi hanya menggunakan keyboard. (Apakah tombol tab berfungsi dengan cara yang bermanfaat?)

Seseorang dengan kemampuan membaca yang buruk

Anda menggunakan bahasa Inggris sederhana sebanyak mungkin?

Seseorang yang tidak pandai mempelajari hal-hal baru.

Apakah desain situs Anda berdasarkan situs lain yang sudah diketahui pengguna Anda?

Orang buta.

Ini yang sulit dan sebagian besar yang Anda baca tidak cocok digunakan !!
Persingkat semua masalah akses kami yang lain terlebih dahulu, karena ada lebih banyak orang dengan penglihatan yang buruk, atau yang tidak dapat menggunakan mouse daripada ada orang yang terikat.

Selanjutnya pahami tujuan Anda , mis. Jika situs Anda adalah situs pemesanan hotel, mungkin lebih baik untuk memberikan nomor telepon biaya untuk melakukan pemesanan dan kemudian hanya membuat informasi hotel dapat diakses.

Kebanyakan orang tunanetra merasa sangat sulit untuk menggunakan situs web interaktif apa pun yang belum pernah mereka gunakan sebelumnya, betapapun baiknya situs web ini dirancang.

Jadi, haruskah Anda memberikan opsi web yang tidak ada? (Telepon? Seseorang yang mengunjungi mereka untuk membantu mengisi formulir, dll?)

Pertama-tama, bisakah situs Anda digunakan tanpa gambar? (Teks alternatif adalah salah satu cara untuk melakukan ini)

Mengingat perangkat lunak wicara membaca situs dari atas ke bawah, dapatkah situs Anda dipahami dengan cara itu?

Sangat sulit untuk membuat situs dengan navigasi yang kompleks mudah digunakan oleh orang yang terikat, juga orang yang terikat tidak tahu bahwa bagian halaman telah diperbarui oleh JavaScript dan perlu dibaca lagi.

Mengubah warna item untuk perubahan status juga bukan pilihan yang baik.

Satu-satunya cara untuk mempelajari cara membuat situs web berfungsi dengan baik untuk orang yang terikat adalah dengan melihat bagaimana orang yang terikat menggunakan pembaca layar di beberapa situs web. Tidak ada standar yang cukup baik, mereka hanya memberi tahu Anda apa yang tidak boleh Anda lakukan, tetapi mempertahankannya tidak cukup (kecuali Anda hanya diberi teks statis seperti situs surat kabar).

Ian Ringrose
sumber
1
Saya suka kalimat pertama dalam jawaban ini! (dan tentu saja kalimat lainnya juga)
Tim Post
5

Anda dapat menggunakan situs ini untuk mendapatkan tinjauan singkat kepatuhan: http://wave.webaim.org/

Ini melakukan pekerjaan yang mirip dengan sistem "Bobby" lama yang ditutup beberapa tahun yang lalu.

Mark Hatton
sumber
3

Pemerintah Belanda menggunakan situs ini untuk menguji situsnya tentang aksesibilitas. lihat ... Anda juga dapat memasukkan situs Anda untuk menguji statusnya saat ini tentang aksesibilitas ...

http://www.webrichtlijnen.nl/english/

Rickjaah
sumber
2

Saya menemukan buku Mark Pilgrim yang dapat diunduh secara bebas, Dive to Accesibility, menjadi titik referensi yang berguna untuk tema ini. Ini dari tahun 2002 tetapi masih sangat relevan. Saran seperti "gunakan degradasi anggun" tidak menjadi tua.

Ian Mackinnon
sumber
1

Saya pikir Anda harus menggunakan situs ini http://www.totalvalidator.com atau plugin firefox yang tersedia. Ini memiliki beberapa validasi cacat dan akan menandai apa pun yang hilang.

pengguna1270
sumber
1

Jawaban # 1 sederhana: tulis valid, HTML / CSS semantik benar !!! Semua saran di atas bagus. Berikut adalah daftar periksa yang saya tulis beberapa tahun yang lalu yang menunjukkan kepada Anda beberapa hal yang harus Anda periksa di semua situs: https://forge.iowa.gov/wiki/index.php/Web_Checklist . Diasumsikan Anda memiliki bilah alat Pengembang Web di FF, tetapi itu gratis dan mudah diperoleh.

Beberapa hal sederhana yang saya rasa dapat membuat perbedaan nyata:

Untuk formulir, pastikan untuk menggunakan tag LABEL. Itu membuat area yang bisa diklik lebih besar untuk hal-hal seperti tombol radio dan juga mengikat hal-hal bersama untuk pembaca layar.

Hal lain yang menurut saya sering disalahgunakan adalah tag h1, h2, h3 ... Jika digunakan dengan benar, itu dapat membantu seseorang menavigasi halaman Anda dengan mudah. Jika kita hanya mendesainnya dan menggunakannya secara tak sengaja, itu sangat menyesatkan bagi pembaca layar dan perangkat I / O tanpa mouse lainnya.

Ini juga baik untuk memungkinkan seseorang yang menavigasi halaman Anda tanpa semua CSS dan gambar Anda yang indah untuk melewati kode berulang berulang ke konten. Ini umumnya dicapai menggunakan tautan SKIP yang disembunyikan di dalam CSS. Misalnya, <a href="#skipnav" class="noshow">Skip past navigation to content.</a>untuk memungkinkan melewati navigasi yang panjang.

Seperti yang dinyatakan oleh Tony, salah satu tes terbaik adalah melepas semua lonceng dan peluit halaman Anda dan melihat apakah itu masih masuk akal.

ph33nyx
sumber
Pada subjek tag ALT ... setiap gambar harus tag ALT. Jika gambar adalah konten, ia harus memiliki sesuatu yang deskriptif dalam tag ALT, jika itu hanya dekorasi, gunakan tanda kutip kosong alt=""untuk menunjukkan bahwa pembaca layar seperti JAWS dapat melewatinya.
ph33nyx