Bagaimana melakukan audit aksesibilitas dasar

Diterbitkan: 2017-08-09

Jadi Anda telah belajar banyak tentang aksesibilitas akhir-akhir ini, tetapi sekarang Anda ingin memeriksa situs Anda sendiri dan melihat di mana Anda perlu meningkatkannya. Bagaimana Anda melakukannya? Saatnya untuk audit aksesibilitas! Dalam tutorial ini, saya akan menunjukkan kepada Anda tentang audit aksesibilitas dasar yang akan membawa Anda ke jalan untuk memiliki situs yang lebih mudah diakses.

Seperti yang akan Anda ingat dari seri ikhtisar saya, situs web yang dapat diakses dapat dipahami, dapat dioperasikan, dapat dipahami, dan kuat. Pengujian untuk memastikan situs Anda mencapai keempat pilar aksesibilitas tidak melibatkan pengkodean, jadi jangan khawatir. Kami mungkin memasang satu atau dua ekstensi Chrome, tetapi Anda akan berterima kasih kepada saya nanti. Mari kita mulai!

CATATAN: Tutorial ini mengasumsikan Anda tahu cara menggunakan Chrome Inspector, atau alat pengembang dasar browser mana pun yang disediakan.

Dapat dipahami

tata letak oleh wanita audit aksesibilitas roda gila berkacamata hitam dengan tablet

Mulailah dengan yang dapat dipahami karena jika situs Anda tidak dapat dilihat oleh pengguna, mereka tidak tahu bahwa situs itu ada. Di sini kita akan fokus pada tiga hal: alternatif teks, keterangan, dan warna.

Untuk setiap gambar di situs Anda yang lebih dari sekadar dekoratif (artinya itu adalah bagian penting dari informasi, bukan hanya peningkatan), gambar harus memiliki atribut alt . Anda dapat memeriksanya dengan memeriksa kode sumber gambar dan mencari atributnya. Jika ada, bagus! Sekarang kita perlu memastikan nilai atribut berguna. Atribut alt harus menjelaskan gambar dengan cara yang menginformasikan pengguna tunanetra. Ini BUKAN kesempatan untuk memasukkan kata kunci SEO ke situs Anda. Buat deskripsi Anda singkat, to the point, dan bermanfaat. Deskripsi yang lebih panjang harus disimpan untuk konten situs itu sendiri.

Mengikuti gambar adalah konten video dan audio. Dalam kedua kasus tersebut, Anda harus memberikan semacam teks atau transkripsi konten. Video Anda harus sudah mengaktifkan teks tertutup, atau sudah diberi teks sebelumnya. Pengujian untuk ini semudah memulai video di situs Anda dan memeriksa teks.

Terakhir, kita perlu menguji warna kita. Untuk melakukannya, kami akan memasang ekstensi Chrome yang mengaktifkan mode skala abu-abu. Setelah terinstal, muat kembali situs Anda dan aktifkan ekstensi. Perhatikan area yang sulit dibaca. Di sinilah masalah Anda dari perspektif kontras. Dari sana, nonaktifkan skala abu-abu dan gunakan pemeriksa kontras warna Snook untuk memeriksa skor Anda. Anda harus menggunakan inspektur untuk mengambil nilai hex Anda jika Anda tidak memilikinya. Ingat, apa pun yang kurang dari 4,5 (atau 3,0 untuk teks besar) adalah masalah.

Dapat dioperasikan

Langkah selanjutnya adalah memastikan situs dapat dioperasikan. Ini berarti kami akan menguji fungsionalitas keyboard. Untuk melakukan ini, buka situs Anda. Setelah halaman dimuat, tekan tombol tab. Apa yang terjadi? Mudah-mudahan, tautan lewati muncul. Jika tidak, Anda setidaknya harus memiliki garis besar di sekitar tautan pertama pada halaman. Idealnya Anda akan memiliki status :focus bergaya khusus, tetapi minimal harus sesuai dengan yang disediakan browser. Dari sana, terus tekan tombol tab untuk memastikan Anda berpindah dari tautan ke tautan dalam urutan kemunculannya di halaman. Jika fokus Anda terus melompat-lompat, Anda memiliki masalah indeks tab yang perlu diselesaikan. Plugin formulir sering menjadi penyebab di sini.

tata letak oleh petugas audit aksesibilitas roda gila dalam kain flanel di ponsel dalam sebuah kasing

Dapat dimengerti

Selanjutnya, kami akan memeriksa situs Anda untuk memastikannya dapat dibaca. Lagi pula, jika pengguna tidak dapat membaca konten Anda, apa gunanya memilikinya? Persyaratan di sini cukup sederhana: dapatkah bahasa situs Anda ditentukan dengan kode? Untuk memeriksa, buka inspektur Anda dan lihat tag <html> utama. Apakah itu memiliki atribut lang ? Jika demikian, Anda jelas. Anda juga ingin memastikan setiap segmen yang menggunakan bahasa berbeda memiliki atribut lang yang diterapkan.

Ada pemeriksaan tingkat AAA lainnya pada keterbacaan, tetapi itu berada di luar cakupan audit dasar. Namun secara umum, Anda ingin konten Anda tetap pada tingkat membaca kelas 6 kecuali audiens target Anda memiliki tingkat pendidikan yang lebih tinggi.

Aspek penting lainnya dari ketidakstabilan situs Anda berkisar pada pesan kesalahan dan perubahan konteks. Lebih khusus lagi, kekurangannya. Ketika pengguna memberikan fokus atau mengaktifkan input, perubahan signifikan seharusnya tidak terjadi. Halaman tidak boleh melompat kecuali pengguna diperingatkan dengan cara tertentu (ikon panah, teks pembantu, dll.). Ini adalah hal-hal yang akan Anda perhatikan saat menguji dengan keyboard.

Saat menguji formulir Anda, hal yang sama dapat dikatakan tentang pesan kesalahan. Kesalahan harus ditampilkan kepada pengguna dengan jelas dan tetap di layar sehingga mereka dapat memperbaiki kesalahan. Ini adalah sesuatu yang bahkan situs web besar selalu salah. Mereka lupa untuk membawa fokus ke bagian halaman yang memiliki kesalahan, atau setidaknya menandainya entah bagaimana. Uji kesalahan formulir Anda dan pastikan pesannya jelas. Menggunakan plugin bentuk padat akan banyak membantu dalam hal ini, tetapi jangan mengandalkan plugin untuk melakukan semua pekerjaan Anda. Anda juga ingin memastikan bahwa Anda tidak hanya menggunakan warna (biasanya merah) untuk menandakan kesalahan. Teks “Error” yang sebenarnya sangat penting, terutama bagi penderita buta warna merah/hijau.

Selain kesalahan, formulir dan input Anda harus memiliki instruksi yang jelas. Periksa setiap masukan di situs Anda dan pastikan sangat jelas apa yang harus dilakukan pengguna. Misalnya, formulir pencarian harus memiliki sesuatu selain kaca pembesar. Label "pencarian" sederhana sudah cukup. Pastikan pengguna Anda tahu apa yang harus dilakukan dengan elemen interaktif. Jangan pernah berasumsi.

Kokoh

tata letak oleh destop audit aksesibilitas roda gila dengan grafik dan buku catatan di depan keyboard

Terakhir, situs Anda harus kuat. Artinya, situs dapat digunakan dengan teknologi bantu seperti pembaca layar. Jika situs Anda dibentuk dengan baik dengan HTML, Anda seharusnya baik-baik saja. Ingatlah bahwa beberapa browser modern, termasuk Chrome, akan memperbaiki kesalahan HTML dasar, atau setidaknya mencoba memperbaikinya. Cara tercepat untuk menguji ketahanan situs Anda adalah dengan memuat situs di Safari dan mengaktifkan VoiceOver, pembaca layar bawaan. Jika situs Anda tidak berfungsi, Anda harus mengatasi masalah tersebut.

Membungkus

Tutorial audit ini cepat, tapi itulah intinya. Tidak perlu waktu lama untuk memastikan situs Anda dapat diakses, dan alat yang dibutuhkan minimal. Hal penting untuk diingat adalah Anda ingin menempatkan diri Anda pada posisi seseorang yang tidak memiliki kemampuan yang Anda anggap remeh sebagai pengguna biasa. Pertahankan pola pikir itu, dan audit Anda akan memastikan bahwa situs Anda lebih mudah diakses.

Jika Anda melewatkannya, lihat seri tentang aksesibilitas ini:

  • Pengantar aksesibilitas: bagian 1
  • Pengantar aksesibilitas: bagian 2
  • Pengantar aksesibilitas: bagian 3