10 Cara Mendesain Situs Anda untuk Aksesibilitas

Diterbitkan: 2022-02-16
10 Cara Mendesain Situs Anda untuk Aksesibilitas

Saya frustrasi dengan desain web modern. Dan saya tentu frustrasi dengan sebagian besar desainer tema dan template yang menjual karya mereka tanpa memeriksa aksesibilitas global.

Banyak desainer benar-benar mengambil CMS yang baik dan dapat diakses dan kemudian membuat desain dengan masalah aksesibilitas yang besar.

Saya seorang pengacara, perancang situs web dan konsultan aksesibilitas / keragaman di Australia. Setelah menyarankan sektor perusahaan, pemerintah dan pendidikan, saya menemukan banyak situs tidak dapat diakses dan menawarkan banyak pengguna pengalaman buruk.

Mengapa aksesibilitas penting?

Pada tahun 2010, 10% orang di negara maju memiliki cacat cetak. Angka itu 15% di negara-negara non-maju.

Di Australia, aksesibilitas dianggap cukup penting sehingga saya dapat membawa Anda ke Pengadilan jika situs Anda tidak dapat diakses. Terkejut?

Tidak, saya tidak akan merekomendasikan klien untuk fokus pada "situs untuk orang buta", tetapi situs yang dapat diakses oleh semua orang. Itu termasuk orang-orang dengan cacat cetak, cacat fisik, cacat pendengaran - bahkan generasi yang lebih tua. Singkatnya, sebagian besar audiens Anda tidak dapat mengakses situs Anda seperti yang Anda lakukan.

Mahal? Tidak, sebenarnya itu kembali ke standar desain, karena ini adalah hal yang sangat mendasar.

Berikut adalah sepuluh langkah yang dapat Anda lakukan untuk memastikan situs Anda dapat diakses.

#1. Jadikan situs Anda mudah digunakan

Saya tidak perlu memberi tahu kalian cara mendesain. Tetapi tiga prinsip utama ini akan membantu pengguna penyandang disabilitas:

  1. Jadikan situs mudah dibaca dan dipahami
  2. Jadikan situs mudah dinavigasi
  3. Jadikan situs mudah digunakan di perangkat seluler

Ini akan membuat Anda dekat dengan aksesibilitas, dan mereka juga akan membantu mesin pencari menyukai situs Anda juga!

Pembaca layar tempat saya menguji situs saya sama seperti robot Google (kecuali teknologi buta ada terlebih dahulu).

#2. Uji dengan perangkat lunak aksesibilitas

Tahukah Anda bahwa PC memiliki perangkat lunak aksesibilitas untuk membantu menavigasi dan membaca layar? Anda mungkin melakukannya, tetapi apakah Anda juga tahu bahwa perangkat seluler memiliki perangkat lunak aksesibilitas yang terpasang di intinya? Perangkat lunak ini dapat membaca untuk orang-orang, termasuk mereka yang memiliki gangguan penglihatan:

  • Apple (iOS) menggunakan VoiceOver;
  • Android menggunakan Komentar Balik;
  • Windows menggunakan Narator.

Hampir semua desainer situs web menyertakan menu dalam template, tetapi 95% tidak dapat dibaca dengan salah satu teknologi di atas! Sebagian besar layanan aksesibilitas ini tidak dapat mengenali menu yang ada, karena kodenya salah. Paling sering, masalahnya adalah bahwa menu diberi kode yang buruk atau tidak ditandai dengan jelas.

Ada baiknya memuat beberapa situs ke ponsel Anda dan mengaktifkan fitur aksesibilitas. Lihat apakah menu situs Anda berfungsi atau tidak.

panel braille di Apple VoiceOver

#3. Jangan menulis semua dalam huruf besar

Ini mungkin perubahan paling mendasar yang dapat dilakukan siapa pun pada situs mereka: jangan menulis dalam huruf besar semua.

Ini sudah teruji dan terbukti secara ilmiah KARENA SEMUA CAPS SULIT UNTUK DIBACA OLEH SIAPAPUN!

Kapitalisasi yang paling sering digunakan ditemukan di item menu dan tombol. Anda membantu menyampaikan pesan Anda jika Anda menulis secara normal dengan huruf besar biasa, kecuali jika Anda memiliki tujuan desain tertentu - seperti merek atau logo.

#4. Jelaskan tautan Anda dengan jelas

Tombol "Baca selengkapnya" atau "Klik di sini" tidak memberi tahu Google (atau mereka yang menggunakan pembaca layar) apa yang ada di balik tautan. Cukup keluarkan tautan Anda dari konteks untuk melihat apakah itu masuk akal. Apakah 'Baca selengkapnya' di tengah halaman masuk akal bagi Anda? Baca lebih lanjut apa?

#5. Gunakan gaya kontras yang bagus

Itu tidak berarti mematikan konten Anda - itu berarti memudahkan orang yang mengalami gangguan penglihatan. Berikut tipnya ... ubah layar ponsel Anda menjadi setengah daya dan coba baca sebuah situs. Bagaimana tampilannya dalam terang dan gelap?

#6. Gunakan tautan 'lewati ke konten'

Bayangkan menganggukkan kepala Anda 30 kali sebelum Anda membaca konten utama! Orang dengan cacat cetak harus melakukan ini jika Anda tidak mengizinkan mereka untuk melewati menu. Sebenarnya, itu sama untuk menggunakan tag heading, H1 hingga H4 membantu mesin pencari dan orang-orang dengan cacat cetak menavigasi situs Anda.

Oh, dan jangan sembunyikan tautan di luar layar! Orang dengan gangguan penglihatan sering menggunakan kaca pembesar dan mencari tautan tersebut secara manual (bukan melalui keyboard).

#7. Berhenti menggunakan popup

Setidaknya, berhenti menggunakan yang kita tidak bisa tekan 'esc' untuk menyingkirkannya. Tahukah Anda bahwa perangkat lunak kami pada dasarnya tidak dapat masuk ke kotak sembulan itu? Dan biasanya kami akhirnya membaca apa yang ada di balik kotak - itu terlihat abu-abu bagi Anda, tetapi tidak bagi kami.

Jika Anda akan menggunakan pop-up:

  • Buat mereka agar dapat diberhentikan dengan tombol 'esc'.
  • Buat agar perangkat lunak kami dapat membaca kotaknya, bukan teks di belakangnya.
  • Berikan detail cara alternatif untuk menemukan konten atau isi formulir - 'atau kunjungi halaman xxxx kami untuk detail selengkapnya'.

#8. Pengubah teks mungkin berguna dalam beberapa situasi

Secara pribadi, pengubah teks jauh lebih penting daripada melompat ke tautan konten. Ini karena orang dengan cacat cetak (termasuk generasi yang lebih tua) akan menggunakan kaca pembesar atau beberapa produk khusus - seperti teks zoom, mata ajaib, atau perangkat lunak gratis lainnya. Dalam teks pengalaman saya, pengubah ukuran umumnya menghancurkan konten seluler - dan bahkan kurang responsif daripada mencubit atau menggunakan fitur aksesibilitas seluler inti.

Juga, dengan teknologi adaptif mengubah ukuran teks, pengguna dapat mematikan dan menghidupkannya sehingga mereka dapat menemukan diri mereka di layar (beberapa zoom sehingga mereka hanya dapat melihat 1/8 layar dalam satu waktu). Yang mengatakan, pengubah teks mungkin masih relevan dan layak dipasang untuk situs pemerintah - hanya saja bukan prioritas 10 teratas bagi saya.

#9. Gunakan ikon font daripada ikon gambar

Mereka yang menggunakan perbesaran hanya dapat melihat sekitar 1/8 situs dalam satu waktu, dan mereka yang menggunakan ponsel biasanya akan memuat gambar versi gratis - dengan menekan tombol 'pembaca'. Saya dapat menulis posting tentang fakta bahwa sebagian besar 'ikon gambar' berpiksel hingga ekstrem pada zoom maksimal, tetapi ikon font tidak (well, toh tidak sebanyak itu).

# 10. Tambahkan transkrip video

Tidak ada gunanya menempatkan video YouTube di situs web jika benar-benar sunyi, juga tidak ada gunanya menempatkan video yang tidak memiliki transkrip atau cara bagi tunarungu untuk mengikutinya. Itu seperti memiliki audiens global atau basis klien, tetapi hanya memberikan informasi dalam bahasa Jepang.

Hanya untuk iseng, dapatkan video YouTube teknis tanpa ucapan lalu tutup mata Anda. Catatan - menutup mata Anda tidak meniru kebutaan karena Anda bisa membukanya lagi, tetapi ini adalah latihan yang menyenangkan.

Pemutar YouTube dengan teks tertutup

Sumber Daya Aksesibilitas

Situs-situs ini memberikan panduan dan alat untuk memeriksa situs Anda:

  • Pemeriksa aksesibilitas Tujuan Web
  • Pedoman Aksesibilitas Konten Web Pemerintah Australia
  • validator W3C. Perhatikan bahwa validator W3C mengembalikan banyak kesalahan yang tidak perlu. Anda perlu membuat penilaian tentang apakah setiap kesalahan sepadan dengan masalahnya atau tidak.

Situs-situs ini menyediakan pembaca layar yang dapat Anda gunakan untuk menguji situs desktop Anda dengan:

  • Akses Pekerjaan Dengan Ucapan (JAWS)
  • Ai squared menawarkan versi uji coba gratis
  • Window Eyes - Pembaca layar
  • NV Access menawarkan pembaca layar Non Visual Desktop Aid (NVDA) yang benar-benar gratis

Catatan: Saya tidak merekomendasikan Sitecues: itu bukan apa yang saya sebut mudah dipasang atau efektif bagi mereka yang memiliki cacat cetak.

Kesimpulan

Seperti apa pun, ada keseimbangan antara kepatuhan fungsional dan ketat terhadap aturan. Tidak ada situs klien saya yang tidak 100% dapat diakses/sesuai dengan W3C. Mereka dapat diakses - dan ramah mesin pencari. Mereka logis dan sangat kontras, tetapi juga memiliki gaya dan fitur untuk berdampak.

Berapa juta orang yang memiliki cacat cetak di dunia? Berapa banyak klien potensial?

Apakah Anda membangun situs di Joomla, Drupal, WordPress, HTML murni atau platform lainnya, saya harap saya telah meyakinkan Anda bahwa masalah ini dan layak untuk ditanggapi dengan serius, untuk bisnis Anda dan pelanggan Anda.