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.
| Pembaca layar | OS | Kompatibilitas browser |
|---|---|---|
| Job Access With Speech (JAWS) | Windows | Chrome, Firefox, Edge |
| Non-Visual Desktop Access (NVDA) | Windows | Chrome dan Firefox |
| Narator | Windows | Edge |
| VoiceOver | macOS | Safari |
| Orca | Linux | Firefox |
| TalkBack | Android | Chrome dan Firefox |
| VoiceOver (untuk perangkat seluler) | iOS | Safari |
| ChromeVox | ChromeOS | Chrome |
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
| Elemen | NVDA (Windows) | VoiceOver (macOS) |
|---|---|---|
| Tombol perintah umum | Sisipkan | Control+Option |
| Hentikan audio | Kontrol | Kontrol |
| Baca berikutnya/sebelumnya | ↓ atau ↑ | Control+Option+→ atau ← |
| Mulai membaca | Sisipkan↓ | Control+Option+A |
| Daftar Elemen/Rotor | NVDA + F7 | Control+Option+U |
| Tempat terkenal | D | Control+Option+U |
| Judul | J | Control+Option+Command+H |
| Link | K | Control+Option+Command+L |
| Kontrol formulir | F | Control+Option+Command+J |
| Tabel | T | Control+OptionCommand+T |
| Dalam Tabel | SisipkanAlt + ↓ ↑ ← → | Control+Option+↓ ↑ ← → |
Perintah tombol untuk pembaca layar seluler
| Elemen | TalkBack (Android) | VoiceOver (iOS) |
|---|---|---|
| Jelajahi | Tarik satu jari pada layar | Tarik satu jari di sekitar layar |
| Memilih atau mengaktifkan | Ketuk dua kali | Ketuk dua kali |
| Pindahkan ke atas atau ke bawah | Geser ke atas atau bawah dengan dua jari | Geser ke atas atau bawah dengan tiga jari |
| Ubah halaman | Geser ke kiri atau kanan dengan dua jari | Geser ke kiri atau kanan dengan tiga jari |
| Berikutnya/sebelumnya | Geser ke kiri atau kanan dengan satu jari | Geser ke kiri atau kanan dengan satu jari |
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>
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>
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>
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>
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
Pembaca layar apa yang terbaik yang digunakan untuk menguji aksesibilitas?
Apa tujuan pengujian dengan teknologi pendukung?