Pengujian Teknologi Pendukung

Modul ini berfokus pada penggunaan teknologi pendukung (AT) untuk pengujian aksesibilitas. Orang dengan disabilitas dapat menggunakan AT untuk membantu meningkatkan, mempertahankan, atau meningkatkan kemampuan dalam melakukan tugas.

Di ruang digital, AT dapat berupa:

• Tidak ada atau teknologi rendah: tongkat kepala dan mulut, kaca pembesar genggam, perangkat dengan tombol besar
• Teknologi tinggi: perangkat yang diaktifkan dengan suara, perangkat pelacakan mata, keyboard dan mouse adaptif
• Hardware: tombol tombol, keyboard ergonomis, perangkat Braille yang diperbarui secara otomatis
• Software: program text-to-speech, teks otomatis, pembaca layar

Sebaiknya gunakan beberapa jenis AT dalam alur kerja pengujian secara keseluruhan.

Dasar-dasar pengujian pembaca layar

Dalam modul ini, kita akan berfokus pada salah satu AT digital yang paling populer, yaitu pembaca layar. Pembaca layar adalah software yang membaca kode dasar situs atau aplikasi. Kemudian, software ini mengonversi informasi tersebut menjadi output ucapan atau Braille untuk pengguna.

Pembaca layar sangat penting bagi orang yang buta dan tunarungu, tetapi pembaca layar juga dapat bermanfaat bagi orang dengan gangguan penglihatan, gangguan membaca, dan disabilitas kognitif.

Kompatibilitas browser

Ada beberapa opsi pembaca layar yang tersedia. Pembaca layar yang paling populer adalah JAWS, NVDA, dan VoiceOver untuk komputer desktop, serta VoiceOver dan Talkback untuk perangkat seluler.

Bergantung pada sistem operasi (OS), browser favorit, dan perangkat yang Anda gunakan, satu pembaca layar dapat tampil sebagai opsi terbaik. Sebagian besar pembaca layar dibuat dengan mempertimbangkan hardware dan browser web tertentu. Saat menggunakan pembaca layar dengan browser yang tidak dikalibrasi, Anda mungkin mengalami lebih banyak "bug" atau perilaku yang tidak terduga. Pembaca layar berfungsi optimal jika digunakan dalam kombinasi berikut.

Perintah pembaca layar

Setelah menyiapkan software pembaca layar yang tepat untuk desktop atau perangkat seluler, Anda harus melihat dokumentasi pembaca layar (ditautkan dalam tabel sebelumnya) dan menjalankan beberapa perintah pembaca layar penting untuk membiasakan diri dengan teknologi ini. Jika Anda pernah menggunakan pembaca layar sebelumnya, pertimbangkan untuk mencoba pembaca layar baru.

Saat menggunakan pembaca layar untuk pengujian aksesibilitas, tujuan Anda adalah mendeteksi masalah dalam kode yang mengganggu penggunaan situs atau aplikasi, bukan untuk mengemulasikan pengalaman pengguna pembaca layar. Dengan demikian, ada banyak hal yang dapat Anda lakukan dengan beberapa pengetahuan dasar, beberapa perintah pembaca layar, dan sedikit (atau banyak) latihan.

Jika perlu lebih memahami pengalaman pengguna pengguna pembaca layar dan AT lainnya, Anda dapat berinteraksi dengan banyak organisasi dan individu untuk mendapatkan insight berharga ini. Ingat bahwa menggunakan AT untuk menguji kode terhadap serangkaian aturan dan bertanya kepada pengguna tentang pengalaman mereka sering kali menghasilkan hasil yang berbeda. Keduanya adalah aspek penting untuk membuat produk yang sepenuhnya inklusif.

Perintah tombol untuk pembaca layar desktop

Perintah tombol untuk pembaca layar seluler

Demo pengujian pembaca layar

Untuk menguji demo, kami menggunakan Safari di laptop yang menjalankan macOS dan merekam suara. Anda dapat mengikuti langkah-langkah ini menggunakan pembaca layar apa pun, tetapi cara Anda menemukan beberapa error mungkin berbeda dengan yang dijelaskan dalam modul ini.

Langkah 1

Buka CodePen yang telah diperbarui, yang telah menerapkan semua update aksesibilitas otomatis dan manual.

Lihat dalam mode debug untuk melanjutkan pengujian berikutnya. Hal ini penting, karena menghapus <iframe> yang mengelilingi halaman web demo, yang dapat mengganggu beberapa alat pengujian. Pelajari lebih lanjut mode debug CodePen.

Langkah 2

Aktifkan pembaca layar pilihan Anda dan buka halaman demo. Anda dapat mempertimbangkan untuk menjelajahi seluruh halaman dari atas ke bawah sebelum berfokus pada masalah tertentu.

Kami telah merekam pembaca layar untuk setiap masalah, sebelum dan setelah perbaikan diterapkan ke demo. Sebaiknya jalankan demo dengan pembaca layar Anda sendiri.

Masalah 1: Struktur konten

Judul dan penanda adalah salah satu cara utama orang bernavigasi menggunakan pembaca layar. Jika tidak ada, pengguna pembaca layar harus membaca seluruh halaman untuk memahami konteksnya. Hal ini dapat memakan banyak waktu dan menyebabkan rasa frustrasi.

Jika mencoba menavigasi berdasarkan salah satu elemen dalam demo, Anda akan segera menemukan bahwa elemen tersebut tidak ada.

• Contoh penanda: <div class="main">...</div>
• Contoh judul: <p class="h1">Join the Club</p>

Jika Anda telah memperbarui semuanya dengan benar, tidak akan ada perubahan visual, tetapi pengalaman pembaca layar Anda akan meningkat secara drastis.

Mari kita perbaiki.

Beberapa elemen yang tidak dapat diakses tidak dapat diamati hanya dengan melihat situs. Anda mungkin ingat pentingnya tingkat judul dan HTML semantik dari modul Struktur konten. Bagian konten mungkin terlihat seperti judul, tetapi konten tersebut sebenarnya digabungkan dalam <div> bergaya.

Untuk memperbaiki masalah pada judul dan penanda, Anda harus mengidentifikasi setiap elemen yang harus diberi markup terlebih dahulu dan memperbarui HTML terkait. Pastikan untuk memperbarui CSS terkait juga.

• Contoh penanda: <main>...</main>
• Contoh judul: <h1>Join the Club</h1>

Jika Anda telah memperbarui semuanya dengan benar, tidak akan ada perubahan visual, tetapi pengalaman pembaca layar Anda akan meningkat secara dramatis.

Masalah 2: Konteks link

Penting untuk memberikan konten kepada pengguna pembaca layar tentang tujuan link dan apakah link tersebut mengalihkan mereka ke lokasi baru di luar situs atau aplikasi.

Dalam demo, kami memperbaiki sebagian besar link saat memperbarui teks alternatif gambar aktif, tetapi ada beberapa link tambahan tentang berbagai penyakit langka yang dapat memanfaatkan konteks tambahan—terutama karena link tersebut mengarahkan ke lokasi baru.

<a href="https://rarediseases.org/rare-diseases/maple-syrup-urine-disease">
  Maple syrup urine disease (MSUD)
</a>

Mari kita perbaiki.

Untuk memperbaiki masalah ini bagi pengguna pembaca layar, kami memperbarui kode untuk menambahkan informasi lainnya, tanpa memengaruhi elemen visual. Atau, untuk membantu lebih banyak orang seperti mereka yang memiliki gangguan membaca dan kognitif, kami dapat memilih untuk menambahkan teks visual tambahan.

Ada banyak pola berbeda yang dapat kami pertimbangkan untuk menambahkan informasi link tambahan. Berdasarkan lingkungan kami yang hanya mendukung satu bahasa, label ARIA adalah opsi yang mudah dalam situasi ini. Anda mungkin melihat bahwa label ARIA mengganti teks link asli, jadi pastikan untuk menyertakan informasi tersebut dalam pembaruan Anda.

<a href="https://rarediseases.org/rare-diseases/maple-syrup-urine-disease"
  aria-label="Learn more about Maple syrup urine disease on the Rare Diseases website.">
  Maple syrup urine disease (MSUD)
</a>

Masalah 3: Gambar dekoratif

Dalam modul pengujian otomatis kami, Lighthouse tidak dapat mengambil SVG inline yang berfungsi sebagai gambar pembuka utama di halaman demo kami. Namun, pembaca layar menemukannya dan mengumumkannya sebagai "gambar" tanpa informasi tambahan. Hal ini berlaku, bahkan tanpa menambahkan atribut role="img" secara eksplisit ke SVG.

<div class="section-right">
  <svg>...</svg>
</div>

Mari perbaiki.

Untuk memperbaiki masalah ini, pertama-tama kita harus memutuskan apakah gambar tersebut informatif atau dekoratif. Berdasarkan keputusan tersebut, kita perlu menambahkan teks alternatif gambar yang sesuai (gambar informatif) atau menyembunyikan gambar dari pengguna pembaca layar (dekoratif).

Kami mempertimbangkan kelebihan dan kekurangan cara terbaik untuk mengategorikan gambar dan memutuskan itu adalah dekoratif, yang berarti kami ingin menambahkan atau mengubah kode untuk menyembunyikan gambar. Metode cepatnya adalah menambahkan role="presentation" ke gambar SVG secara langsung. Tindakan ini akan mengirimkan sinyal ke pembaca layar untuk melewati gambar ini dan tidak mencantumkannya dalam grup gambar.

<div class="section-right">
  <svg role="presentation">...</svg>
</div>

Masalah 4: Dekorasi buletin

Anda mungkin telah melihat bahwa pembaca layar membaca gambar butir CSS di bawah bagian penyakit langka. Meskipun bukan jenis gambar tradisional yang kita bahas dalam modul Gambar, gambar tetap harus dimodifikasi karena mengganggu alur konten dan dapat mengalihkan perhatian atau membingungkan pengguna pembaca layar.

<p class="bullet">...</p>

Mari perbaiki.

Sama seperti contoh gambar dekoratif yang telah dibahas sebelumnya, Anda dapat menambahkan role="presentation" ke HTML dengan class peluru untuk menyembunyikannya dari pembaca layar. Demikian pula, role="none" akan berfungsi. Pastikan untuk tidak menggunakan aria-hidden: true atau Anda akan menyembunyikan semua informasi paragraf dari pengguna pembaca layar.

<p class="bullet" role="none">...</p>

Masalah 5: Kolom formulir

Dalam modul Formulir, kita telah mempelajari bahwa semua kolom formulir juga harus memiliki label visual dan terprogram. Label ini harus tetap terlihat setiap saat.

Dalam demo, kita tidak memiliki label visual dan terprogram di kolom email pendaftaran newsletter. Ada elemen placeholder teks, tetapi elemen ini tidak menggantikan label karena tidak persisten secara visual dan tidak sepenuhnya kompatibel dengan semua pembaca layar.

<form>
  <div class="form-group">
    <input type="email" placeholder="Enter your e-mail address" required>
    <button type="submit">Subscribe</button>
  </div>
</form>

Mari kita perbaiki.

Untuk memperbaiki masalah ini, ganti placeholder teks dengan elemen label yang mirip. Elemen label tersebut terhubung secara terprogram ke kolom formulir dan gerakan ditambahkan dengan JavaScript agar label tetap terlihat meskipun konten ditambahkan ke kolom.

<form>
  <div class="form-group">
    <input type="email" required id="youremail" name="youremail" type="text">
    <label for="youremail">Enter your e-mail address</label>
    <button type="submit" aria-label="Subscribe to our newsletter">Subscribe</button>
  </div>
</form>

Rangkuman

Selamat! Anda telah menyelesaikan semua pengujian untuk demo ini. Anda dapat melihat semua perubahan ini di Codepen terbaru untuk demo ini.

Sekarang, Anda dapat menggunakan hal yang telah dipelajari untuk meninjau aksesibilitas situs dan aplikasi Anda sendiri.

Tujuan dari semua pengujian aksesibilitas ini adalah untuk mengatasi sebanyak mungkin masalah yang mungkin dihadapi pengguna. Namun, hal ini tidak berarti bahwa situs atau aplikasi Anda dapat diakses dengan sempurna setelah Anda selesai. Anda akan menemukan kesuksesan terbesar dengan mendesain situs atau aplikasi dengan aksesibilitas sepanjang proses, dan menggabungkan pengujian ini dengan pengujian pra-peluncuran lainnya.

Memeriksa pemahaman Anda

Uji pengetahuan Anda tentang pengujian aksesibilitas otomatis