Ini adalah postingan ketiga dalam seri mini yang kami buat tentang aksesibilitas formulir. Jika Anda melewatkan postingan kedua, lihat “Mengelola Pusat Pengguna dengan :focus-visible“Dalam postingan ini, kita akan melihat cara menggunakan pembaca layar saat menavigasi formulir, serta beberapa praktik terbaik.
Catatan redaksi: Pengeditan telah dilakukan di seluruh teks mengenai beberapa praktik terbaik dan penambahan contoh kode. Jika Anda memiliki ide dan masukan yang dapat dimanfaatkan dari postingan ini, silakan beri tahu kami!
Apa itu pembaca layar?
Anda mungkin pernah mendengar istilah “pembaca layar” saat menjelajahi web. Anda mungkin menggunakan pembaca layar saat ini untuk melakukan tes aksesibilitas manual pada pengalaman yang Anda buat. Pembaca layar adalah jenis teknologi bantu.
-Advertisement-.
Pembaca layar mengubah teks digital menjadi ucapan sintesis atau keluaran Braille, yang biasanya kita lihat pada pembaca Braille.
Dalam contoh ini, saya akan menggunakan Mac VO. Mac VO (VoiceOver) terpasang di semua Mac; iOS, iPadOS, dan macOS. Tergantung pada jenis perangkat yang menjalankan macOS, pembukaan VO mungkin berbeda-beda. Macbook Pro bertenaga VO yang saya ketik tidak memiliki Touch Bar, jadi saya akan menggunakan tombol pintas tergantung pada perangkat kerasnya.
Jalankan VO di macOS
Jika Anda menggunakan Macbook Pro yang diperbarui, keyboard di perangkat Anda akan terlihat seperti gambar di bawah.
Anda akan mulai dengan menekan dan menahan cmd Tekan tombol lalu ketuk Touch ID tiga kali dengan cepat.
Jika Anda menggunakan MBP (MacBook Pro) dengan TouchBar, Anda akan menggunakan pintasan cmd+fn+f5 Untuk mengaktifkan VO. Jika Anda menggunakan keyboard tradisional dengan desktop atau laptop Anda, tombolnya harus sama jika tidak, Anda harus mengaktifkan VO di pengaturan Aksesibilitas. Setelah Anda mengaktifkan VO, Anda akan disambut oleh kotak dialog ini bersama dengan audio pengenalan VO.
Jika Anda mengklik tombol Gunakan VoiceOver, Anda berada di jalur yang benar dalam menggunakan VO untuk menguji situs web dan aplikasi Anda. Satu hal yang perlu diingat adalah VO dioptimalkan untuk digunakan dengan Safari. Namun, saat Anda menjalankan pengujian pembaca layar, pastikan Safari adalah browser yang Anda gunakan. Hal ini juga berlaku untuk iPhone dan iPad.
Ada dua cara utama untuk menggunakan VO sejak awal. Metode yang saya gunakan secara pribadi adalah dengan mengunjungi sebuah website dan menggunakan kombinasi dari tab, control, option, shift dan tombol panah, saya dapat menavigasi pengalaman secara efisien hanya dengan menggunakan tombol ini.
Cara populer lainnya untuk menavigasi pengalaman adalah dengan menggunakan VoiceOver Rotor. Rotor adalah fitur yang dirancang untuk menavigasi langsung ke tempat yang Anda inginkan dalam pengalaman tersebut. Dengan Rotor, Anda dapat menghilangkan kebutuhan untuk menavigasi seluruh situs, anggap saja sebagai “pilih petualangan Anda sendiri.”
Kunci modifikasi
Tombol pengubah adalah cara Anda menggunakan berbagai fitur di VO. Kunci pengubah default atau VO Dia adalah control + option Namun Anda dapat mengubahnya menjadi Caps Lock atau memilih kedua opsi untuk menggunakannya secara bergantian.
Gunakan rotornya
Untuk menggunakan rotor digunakan kombinasi tombol modifikator dan huruf “U”. Bagi saya, kunci pengubah saya adalah caps lock.Klik caps lock + U Dan pemintal itu berputar untukku. Setelah spinner muncul, saya dapat berpindah ke bagian pengalaman mana pun yang saya inginkan menggunakan panah kiri dan kanan.
Navigasi berdasarkan tingkat judul
Cara elegan lainnya untuk menavigasi pengalaman adalah dengan memilih tingkat judul. Jika Anda menggunakan kombinasi tombol pengubah + cmd + H Anda dapat menavigasi struktur dokumen berdasarkan tingkat judul. Anda juga dapat kembali ke bagian atas dokumen dengan menekan shift Dalam urutan seperti ini, tombol pengubah + shift + cmd + H.
Sejarah dan praktik terbaik
Formulir adalah salah satu elemen asli paling kuat yang kami miliki dalam HTML. Baik Anda menelusuri sesuatu di halaman, mengirimkan formulir untuk membeli sesuatu, atau mengirimkan survei, formulir merupakan landasan web dan merupakan katalis yang menghadirkan interaktivitas pada pengalaman kami.
Formulir web dimulai pada bulan September 1995 ketika diperkenalkan dalam spesifikasi HTML 2.0. Beberapa orang mengatakan itu adalah masa lalu web yang indah, setidaknya menurut saya begitu. Stephanie Stimac menulis artikel bagus di Smashing Magazine berjudul “Standardizing Select and Beyond: The Past, Present, and Future of Native HTML Form Controls.”
menurut pendapat saya, Berikut beberapa praktik terbaik yang harus diikuti saat membuat formulir yang dapat diakses untuk web.
- Pelabelan implisit 100% dapat diterima. Lihat artikel https://www.w3.org/WAI/tutorials/forms/labels/. Jika pembuat formulir tidak mengetahui pengidentifikasinya, tag bisa bersifat implisit. Secara pribadi, saya lebih suka metode yang lugas.
<!-- Implicit Label -->
<label>
First Name:
<input type="text" name="firstname">
</label><!-- Explicit Label -->
<label for="name">Name:</label>
<input type="text" id="name" name="name" required/>- Jika bidang tersebut wajib diisi untuk melengkapi formulir, gunakan atribut yang diperlukan. Pastikan ada indikasi visual bahwa kolom tersebut juga wajib diisi, karena pengguna yang tidak menggunakan pembaca layar perlu mengetahui bahwa kolom tersebut juga wajib diisi.
<input type="text" id="name" name="name" required />- A
buttonDigunakan untuk memanggil suatu tindakan, seperti mengirimkan formulir. Gunakan itu! Jangan membuat tombol menggunakandiv'S.AdivIni adalah wadah yang tidak membawa makna semantik apa pun.
Demo
Jika Anda ingin memeriksa kodenya, kunjungi Demo VoiceOver di repositori GitHubJika Anda ingin mencoba demo di atas menggunakan pembaca layar pilihan Anda, kunjungi Menavigasi formulir web menggunakan VoiceOver.
Perangkat lunak pembaca layar
Di bawah ini adalah daftar berbagai jenis pembaca layar yang dapat Anda gunakan pada sistem operasi yang Anda gunakan. Jika Mac bukan perangkat pilihan Anda, ada opsi yang tersedia untuk Windows dan Linux, serta untuk perangkat Android.
perangkat lunak NVDA
NVDA adalah pembaca layar dari NV Access. Saat ini hanya didukung pada komputer yang menjalankan Microsoft Windows 7 SP1 dan yang lebih baru. Untuk akses lebih lanjut, lihat halaman unduh NVDA versi 2024.1 di situs web NV Access!
Mulut
“Kami membutuhkan pembaca layar yang lebih baik”
<>– tidak dikenal
Jika Anda telah memahami referensi di atas, Anda berada di pihak yang baik. Menurut situs JAWS, ini adalah ringkasannya:
JAWS, Akses Pekerjaan Dengan Ucapan, adalah pembaca layar paling populer di dunia, dikembangkan untuk pengguna komputer dengan kehilangan penglihatan yang mencegah mereka melihat konten layar atau bernavigasi dengan mouse. JAWS menyediakan keluaran ucapan dan braille untuk aplikasi komputer paling populer di PC Anda Anda akan dapat menavigasi Internet, menulis dokumen, membaca email, dan membuat presentasi dari kantor Anda, desktop jarak jauh, atau dari rumah.
— Situs web JAWS
Cobalah JAWS sendiri dan jika solusi ini sesuai dengan kebutuhan Anda, cobalah!
Narator
Narator adalah solusi pembaca layar bawaan yang disertakan dengan Windows 11. Jika Anda memilih untuk menggunakan ini sebagai pembaca layar pilihan Anda, tautan di bawah ini untuk dokumentasi dukungan tentang penggunaannya.
Panduan Lengkap untuk Pendongeng
Paus pembunuh
Orca adalah pembaca layar yang dapat digunakan di berbagai distribusi Linux yang menjalankan GNOME.
Orca adalah pembaca layar gratis, sumber terbuka, fleksibel, dan dapat diperluas yang menyediakan akses desktop grafis melalui ucapan dan braille yang dapat diperbarui.
Orca bekerja dengan aplikasi dan toolkit yang mendukung Assistive Technology Service Provider Interface (AT-SPI), infrastruktur inti AT untuk Linux dan Solaris. Aplikasi dan toolkit yang mendukung AT-SPI mencakup GNOME Gtk+ Toolkit dan Swing Toolkit untuk platform Java, LibreOffice, Gecko, dan WebKitGtk. Dukungan untuk Assistive Technology Service Provider Interface (AT-SPI) untuk toolkit KDE Qt saat ini sedang diupayakan.
— Situs web Orca
Bicara lagi
Google TalkBack adalah pembaca layar yang digunakan pada perangkat Android. Untuk informasi selengkapnya tentang mengaktifkan dan menggunakannya, lihat artikel ini di situs Dukungan Aksesibilitas Android.
Dukungan peramban
Jika Anda mencari dukungan browser aktual untuk elemen HTML dan atribut ARIA (Aplikasi Internet Kaya yang Dapat Diakses), saya sarankan Anda menggunakan caniuse.com untuk Dukungan HTML dan Aksesibilitas ARIA untuk informasi terbaru tentang dukungan browser. Ingat, jika browser Anda tidak mendukung teknologi ini, pembaca layar Anda mungkin juga tidak mendukungnya.
DigitalA11Y dapat membantu merangkum informasi browser dan pembaca layar dengan artikelnya, Pembaca Layar dan Browser! Apa kombinasi terbaik untuk pengujian aksesibilitas?
Terima kasih!
Terima kasih kepada Adrian Roselli, Carl Groves, Todd Libby, Scott O'Hara, Kev Bonnett, dan lainnya atas klarifikasi dan masukannya!
Tautan
- https://support.apple.com/guide/voiceover/with-the-voiceover-rotor-mchlp2719/mac
- https://www.w3.org/TR/wai-aria/
- https://www.w3.org/WAI/standards-guidelines/aria/
- https://support.google.com/accessibility/android/answer/6283677?hl=ar
- https://support.google.com/accessibility/android/answer/6283677?hl=ar
- https://css-tricks.com/html-inputs-and-labels-a-love-story
- https://tink.uk/understanding-screen-reader-interaction-modes
- https://www.tpgi.com/required-attribute-requirements
Mengungkap misteri pembaca layar: templat yang tersedia dan praktik terbaik Artikel ini awalnya diterbitkan di CSS-Tricks, bagian dari keluarga DigitalOcean. Anda harus mendapatkan buletin.
-Advertisement-.
