Cara mengaudit aksesibilitas web menggunakan ekstensi WAVE – Beragampengetahuan

WAVE adalah alat penilaian aksesibilitas gratis dan canggih yang menyoroti masalah aksesibilitas langsung di halaman web dengan melapisi ikon dan memberikan penjelasan sesuai konteks halaman.

Anda dapat menggunakan WAVE dalam tiga cara utama:

• On line: Masukkan URL halaman di wave.webaim.org.
• Ekstensi peramban: Untuk Chrome dan Firefox, berguna untuk menguji halaman lokal sebelum digabungkan ke dalam produksi.
• Antarmuka pemrograman aplikasi: Untuk mengintegrasikan pemeriksaan aksesibilitas ke dalam alur kerja otomatis.

Dalam artikel ini, kami akan memberikan petunjuk langkah demi langkah tentang cara menggunakan ekstensi Wave untuk audit aksesibilitas.

Langkah demi langkah: Jalankan audit aksesibilitas menggunakan ekstensi WAVE

Langkah 1: Instal GELOMBANG

• Buka Toko Web Chrome atau halaman Pengaya Firefox.
• Klik Tambahkan ke Chrome/Firefox.

Langkah 2: Buka halaman yang ingin Anda uji

• Navigasikan ke halaman yang ingin Anda tinjau.
  • Ini bisa berupa localhost atau halaman produksi.

Langkah 3: Mulai WAVE

• klik ikon gelombang di bilah alat peramban. Ini akan menjadi logo W.

• Muat ulang halaman bilah sisi Panel menampilkan hasilnya.

beragampengetahuan mengkategorikan hasil survei menjadi:

• Kesalahan (merah): pertanyaan yang jelas
  • Contoh: Teks alt tidak ada, judul kosong
• Peringatan (kuning): Masalah yang mungkin memerlukan peninjauan.
• Fitur (hijau): Elemen aksesibilitas yang terdeteksi (misalnya judul, landmark ARIA).
• Kesalahan kontras (biru): Teks kontras rendah.

Anda dapat mengklik Lihat Detail untuk membuka tab detail. Tab Detail memberikan informasi selengkapnya tentang kesalahan yang muncul di tab Ringkasan.

Melihat tab Detail, kita dapat melihat bahwa 36 kesalahan yang ditampilkan pada halaman Ringkasan dibagi menjadi 24 kesalahan “Judul Kosong” dan 12 referensi ARIA rusak.

Langkah 5: Jelajahi ikon halaman

Selain tab “Ringkasan” dan “Rincian”, halaman itu sendiri dilapisi dengan sejumlah ikon yang menyatakan:

• 🔴 ikon kesalahan merah ——Masalah utama.
• 🟡 peringatan kuning ——Potensi masalah.
• 🟢 Fitur hijau — Fungsi aksesibilitas ada.
• 🔵 kesalahan kontras biru — Kontras warna rendah.

Pilih ikon untuk membuka detail di beragampengetahuan.

Pada gambar di atas, kita dapat melihat contoh kesalahan “judul kosong” yang ditampilkan pada halaman ringkasan. Kita melihat posisi judul pada halaman. Mengklik ikon merah akan membuka jendela pop-up dengan informasi lebih lanjut tentang kesalahan tersebut.

Langkah 7: Gunakan Pemeriksa Kontras

• klik Tab kontras di bilah sisi.
• WAVE menampilkan teks yang tidak sesuai dengan kontras WCAG AA/AAA.
• Ekstensi ini akan mengambil warna latar depan dan latar belakang yang digunakan dan memberi tahu pengguna jika ada kesalahan kontras rendah pada halaman.
• Pada contoh di bawah, kontras antara teks dan warna latar belakang sangat rendah. Kontras warna tidak memenuhi persyaratan WCAG AA dan WCAG AAA.

Langkah 8: Verifikasi dengan pengujian manual

• WAVE mendeteksi masalah struktural tetapi tidak mendeteksi masalah struktural kualitas larutan.
  • Misalnya, ini dapat mengonfirmasi apakah teks alternatif ada, namun tidak dapat mengonfirmasi apakah teks tersebut masuk akal.
• Tambahan Navigasi papan ketik, Pemeriksaan pembaca layarDan Pengujian pengguna.

Langkah 10: Perbaiki dan uji ulang

• Selesaikan masalah yang ditandai dalam kode.
• Jalankan kembali WAVE untuk mengonfirmasi perbaikan.

Sorotan FAQ GELOMBANG

Beberapa hambatan aksesibilitas umum yang akan Anda lihat meliputi:

• Hilang atau tidak valid teks alternatif pada gambar.
• Kontras warna rendah antara teks dan latar belakang.
• Tautannya kosong atau rusak.
• hilang Label formulir.
• Salah Struktur judul.
• melecehkan peran ARIA

sebagai kesimpulan

Mengaudit dengan WAVE memberi Anda pemahaman langsung dan intuitif tentang aksesibilitas situs web Anda. Meskipun tidak akan menggantikan pengujian manual menyeluruh atau masukan pengguna, ini adalah alat yang ampuh untuk menangkap masalah umum, mempelajari praktik terbaik, dan menjadikan aksesibilitas sebagai bagian dari budaya pengembangan Anda.

Dengan mengintegrasikan moderasi WAVE ke dalam proses Anda, Anda mengambil langkah penting dalam membangun jaringan yang lebih inklusif dan dapat diakses oleh semua orang.