Ini adalah postingan ke-3 dalam seri kecil yang kami lakukan tentang aksesibilitas formulir. Jika Anda melewatkan posting ke-2, periksa Mengelola Fokus Pengguna dengan :fokus-terlihat. Dalam postingan ini kita akan melihat penggunaan pembaca layar saat menavigasi formulir, dan juga beberapa praktik terbaik.
Apa itu Pembaca Layar?
Anda mungkin pernah mendengar istilah “pembaca layar” saat menjelajahi web. Anda bahkan mungkin menggunakan pembaca layar saat ini untuk menjalankan tes aksesibilitas manual pada pengalaman yang Anda bangun. Pembaca layar adalah jenis AT atau teknologi bantu.
Pembaca layar mengubah teks digital menjadi ucapan sintesis atau keluaran Braille, yang biasa terlihat dengan pembaca Braille.
Dalam contoh ini, saya akan menggunakan Mac VO. Mac VO (VoiceOver) sudah terpasang di semua perangkat Mac; sistem iOS, iPadOS, dan macOS. Tergantung pada jenis perangkat tempat Anda menjalankan macOS, membuka VO mungkin berbeda. Macbook Pro yang menjalankan VO tempat saya menulis ini tidak memiliki panel sentuh, jadi saya akan menggunakan tombol pintasan sesuai dengan perangkat kerasnya.
Memutar VO di macOS
Jika Anda menggunakan Macbook Pro yang diperbarui, keyboard di mesin Anda akan terlihat seperti gambar di bawah.
Anda akan mulai dengan menahan cmd lalu tekan Touch ID tiga kali dengan cepat.
Jika Anda menggunakan MBP (MacBook Pro) dengan TouchBar, Anda akan menggunakan pintasan cmd+fn+f5 untuk menghidupkan VO. Jika Anda menggunakan keyboard tradisional pada desktop atau laptop, tombolnya harus sama atau Anda harus mengaktifkan VO di pengaturan Aksesibilitas.. Setelah VO diaktifkan, Anda akan disambut dengan dialog ini bersama dengan suara bersuara pengenalan VO.
Jika Anda mengklik tombol “Gunakan VoiceOver” Anda sudah siap menggunakan VO untuk menguji situs web dan aplikasi Anda. Satu hal yang perlu diingat adalah VO dioptimalkan untuk digunakan dengan Safari. Karena itu, pastikan saat Anda menjalankan tes pembaca layar bahwa Safari adalah browser yang Anda gunakan. Itu juga berlaku untuk iPhone dan iPad.
Ada dua cara utama untuk menggunakan VO sejak awal. Cara saya pribadi menggunakannya adalah dengan menavigasi ke situs web dan menggunakan kombinasi keduanya tab, control, option, shift dan tombol panah, saya dapat menavigasi pengalaman secara efisien hanya dengan tombol ini.
Cara umum lainnya untuk menavigasi pengalaman adalah dengan menggunakan Rotor Sulih Suara. Rotor adalah fitur yang dirancang untuk menavigasi langsung ke tempat yang Anda inginkan dalam pengalaman tersebut. Dengan menggunakan Rotor, Anda menghilangkan keharusan melintasi seluruh situs, anggap saja sebagai “Pilih Petualangan Anda Sendiri”.
Modifier Keys
Tombol pengubah adalah cara Anda menggunakan berbagai fitur di VO. Kunci pengubah default atau VO is control + option tetapi Anda dapat mengubahnya menjadi caps lock atau memilih kedua opsi untuk digunakan secara bergantian.
Menggunakan Rotornya
Untuk menggunakan Rotor Anda harus menggunakan kombinasi tombol pengubah dan huruf “U”. Bagi saya, kunci pengubah saya adalah caps lock. aku menekan caps lock + U dan Rotor berputar ke arahku. Setelah Rotor muncul, saya dapat menavigasi ke bagian mana pun dari pengalaman yang saya inginkan menggunakan panah kiri dan kanan.
Menavigasi Berdasarkan Tingkat Judul
Cara lain yang menarik untuk menavigasi pengalaman adalah dengan menuju level. Jika Anda menggunakan kombinasi tombol pengubah + cmd + H Anda dapat melintasi struktur dokumen berdasarkan tingkat judul. Anda juga dapat memindahkan kembali dokumen ke atas dengan menekan shift dalam urutan seperti itu, tombol pengubah + shift + cmd + H.
Sejarah & Praktik Terbaik
Formulir adalah salah satu elemen asli paling kuat yang kami miliki dalam HTML. Apakah Anda mencari sesuatu di halaman, mengirimkan formulir untuk membeli sesuatu, atau mengirimkan survei. Formulir adalah landasan web, dan merupakan katalis yang memperkenalkan interaktivitas pada pengalaman kami.
Sejarah formulir web dimulai pada bulan September 1995 ketika diperkenalkan di Spesifikasi HTML 2.0. Beberapa orang mengatakan masa lalu web yang baik, setidaknya saya mengatakan itu. Stephanie Stimac menulis artikel yang luar biasa tentang Smashing Magazine berjudul, "Standarisasi Select And Beyond: Kontrol Formulir HTML Asli Masa Lalu, Sekarang, dan Masa Depan".
Berikut ini adalah 5 praktik terbaik yang harus diikuti saat membuat formulir yang dapat diakses untuk web.
- Pastikan Anda menggunakan elemen formulir. Formulir dapat diakses secara default dan harus digunakan melalui div setiap saat.
<form>
<!-- Form controls are nested here. -->
</form>
- Pastikan untuk menggunakan
fordanidatribut aktiflabeldaninputsehingga mereka terhubung. Dengan cara ini, jika Anda mengeklik/mengetuk label, fokus akan beralih ke masukan dan Anda dapat mulai mengetik.
<label for="name">Name:</label>
<input type="text" id="name" name="name" required aria-required/>- Jika suatu bidang diperlukan agar formulir dapat diisi, gunakan atribut yang diperlukan dan atribut yang diperlukan aria. Ini akan membatasi pengiriman formulir. Atribut aria-required secara eksplisit memberitahukan teknologi pendukung bahwa bidang tersebut diperlukan.
<input type="text" id="name" name="name" required aria-required/>- Menggunakan,
:focus,:focus-withindan:focus-visibleKelas semu CSS untuk mengelola dan menyesuaikan cara pengguna menerima fokus.
form:focus-within {
background-color: #cfffcf;
}
input:focus-within {
border: 10px solid #000000;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid crimson;
border-radius: 3px;
}- A
buttondigunakan untuk menjalankan suatu tindakan, seperti mengirimkan formulir. Gunakan! Jangan membuat tombol menggunakandiv'S. Adivmenurut definisinya adalah pembagi. Ia tidak memiliki properti aksesibilitas yang melekat.
Demo
Jika Anda ingin memeriksa kodenya, navigasikan ke Repo GitHub Demo VoiceOver. Jika Anda ingin mencoba demo di atas dengan pembaca layar pilihan Anda, lihatlah Menavigasi Formulir Web dengan VoiceOver.
Perangkat Lunak Pembaca Layar
Di bawah ini adalah daftar berbagai jenis perangkat lunak pembaca layar yang dapat Anda gunakan pada sistem operasi tertentu. Jika Mac bukan mesin pilihan Anda, ada opsi untuk Windows dan Linux, serta untuk perangkat Android.
NVDA
NVDA adalah pembaca layar dari NV Access. Saat ini hanya didukung pada PC 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”
- Anonim
Jika Anda memahami referensi di atas, Anda berada di pihak yang baik. Menurut situs JAWS, berikut adalah ringkasannya:
“JAWS, Job Access With Speech, adalah pembaca layar paling populer di dunia, dikembangkan untuk pengguna komputer yang kehilangan penglihatannya sehingga tidak dapat melihat konten layar atau bernavigasi dengan mouse. JAWS menyediakan keluaran ucapan dan Braille untuk aplikasi komputer terpopuler di PC Anda. Anda akan dapat menavigasi Internet, menulis dokumen, membaca email, dan membuat presentasi dari kantor Anda, desktop jarak jauh, atau dari rumah.”
Lihat sendiri JAWS dan jika solusi tersebut sesuai dengan kebutuhan Anda, cobalah!
Rawi
Narator adalah solusi pembaca layar bawaan yang dikirimkan bersama WIndows 11. Jika Anda memilih untuk menggunakan ini sebagai pembaca layar pilihan Anda, tautan di bawah ini untuk dokumentasi dukungan mengenai penggunaannya.
Orca
Orca adalah pembaca layar yang dapat digunakan pada berbagai distribusi Linux yang menjalankan GNOME.
“Orca adalah pembaca layar gratis, sumber terbuka, fleksibel, dan dapat diperluas yang menyediakan akses ke desktop grafis melalui ucapan dan braille yang dapat diperbarui.
Orca bekerja dengan aplikasi dan toolkit yang mendukung Assistive Technology Service Provider Interface (AT-SPI), yang merupakan infrastruktur teknologi bantu utama untuk Linux dan Solaris. Aplikasi dan perangkat yang mendukung AT-SPI mencakup perangkat GNOME Gtk+, perangkat Swing platform Java, LibreOffice, Gecko, dan WebKitGtk. Dukungan AT-SPI untuk toolkit KDE Qt sedang diupayakan.”
TalkBack
Google TalkBack adalah pembaca layar yang digunakan pada perangkat Android. Untuk informasi lebih lanjut tentang menyalakan dan menggunakannya, lihat artikel ini di Situs Dukungan Aksesibilitas Android.
Dukungan Browser
Jika Anda mencari dukungan browser aktual untuk elemen HTML dan atribut ARIA (Aplikasi Internet Kaya yang Dapat Diakses), saya sarankan caniuse.com untuk HTML dan Dukungan Aksesibilitas untuk ARIA untuk mendapatkan 4-1-1 terbaru tentang dukungan browser. Ingat, jika browser tidak mendukung teknologi ini, kemungkinan besar pembaca layar juga tidak akan mendukungnya.
DigitalA11Y dapat membantu meringkas info browser dan pembaca layar dengan artikelnya, Pembaca Layar dan Peramban! Manakah Kombinasi Terbaik untuk Pengujian Aksesibilitas?
Link
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=en
https://support.google.com/accessibility/android/answer/6283677?hl=en
- Konten Bertenaga SEO & Distribusi PR. Dapatkan Amplifikasi Hari Ini.
- PlatoData.Jaringan Vertikal Generatif Ai. Berdayakan Diri Anda. Akses Di Sini.
- PlatoAiStream. Intelijen Web3. Pengetahuan Diperkuat. Akses Di Sini.
- PlatoESG. Karbon, teknologi bersih, energi, Lingkungan Hidup, Tenaga surya, Penanganan limbah. Akses Di Sini.
- PlatoHealth. Kecerdasan Uji Coba Biotek dan Klinis. Akses Di Sini.
- Sumber: https://css-tricks.com/demystifying-screen-readers-accessible-forms-best-practices/
