Ringkasan fokus layar dalam aksesibilitas
Dalam kursus ini, kita akan membahas tentang fokus dan cara mengelolanya di aplikasi. Fokus mengacu pada kontrol mana di layar (item input seperti {i>field<i}, kotak centang, tombol, atau tautan) yang saat ini menerima input dari {i>keyboard<i}, dan dari papan klip saat Anda menempelkan konten.
Inilah awal yang bagus untuk mulai belajar tentang aksesibilitas karena kita semua tahu cara menggunakan {i>keyboard<i}, mudah untuk dihubungkan dan diuji, dan bermanfaat hampir semua pengguna.
Pengguna dengan gangguan motorik, yang bisa berupa kelumpuhan permanen ke pergelangan tangan terkilir, mungkin bergantung pada {i>keyboard<i} atau perangkat {i>switch<i} untuk menavigasi sehingga strategi fokus yang baik sangat penting untuk memberikan pengalaman mereka.
Dan untuk pengguna mahir yang mengetahui setiap pintasan {i>keyboard<i} di komputer mereka, mampu menavigasi situs Anda dengan cepat hanya menggunakan {i>keyboard<i} pasti akan membuat produktivitas mereka.
Dengan demikian, strategi fokus yang diterapkan dengan baik memastikan bahwa setiap orang yang menggunakan aplikasi Anda memiliki pengalaman yang lebih baik. Dalam pelajaran berikutnya, kita akan melihat upaya yang Anda lakukan adalah dasar penting untuk mendukung alat bantu pengguna teknologi dan, bahkan, semua pengguna.
Apa itu fokus?
Fokus menentukan tempat kejadian keyboard pada halaman pada waktu tertentu. Sebagai jika Anda memfokuskan bidang {i>input <i}teks dan mulai mengetik, menerima kejadian {i>keyboard<i} dan menampilkan karakter yang Anda ketik. Meskipun memiliki maka akan menerima input yang ditempelkan dari {i>clipboard<i}.
Item yang saat ini difokuskan sering ditunjukkan dengan cincin fokus, gaya yang bergantung pada browser dan gaya apa pun yang dimiliki penulis halaman diterapkan. Chrome, misalnya, biasanya menyoroti elemen yang difokuskan dengan {i>border<i}, sedangkan Firefox menggunakan batas putus-putus.
Beberapa pengguna mengoperasikan komputer mereka hampir sepenuhnya dengan {i>keyboard<i} atau perangkat lainnya perangkat input. Bagi para pengguna tersebut, fokus sangatlah penting; itu adalah sarana utama mereka dalam menjangkau semua yang ada di layar. Karena itu, daftar periksa Web AIM menyatakan di bagian 2.1.1 bahwa semua fungsi halaman harus tersedia menggunakan keyboard, kecuali itu adalah sesuatu yang tidak dapat Anda lakukan dengan {i>keyboard<i}, seperti menggambar dengan tangan.
Sebagai pengguna, Anda dapat mengontrol elemen mana yang saat ini difokuskan menggunakan Tab,
Shift+Tab, atau tombol panah. Di Mac OSX, cara kerjanya sedikit berbeda:
meskipun Chrome selalu memungkinkan Anda menavigasi dengan Tab, Anda perlu menekan Option+Tab
untuk mengubah fokus di {i>browser<i} lain seperti Safari. (Anda dapat mengubah setelan ini di
bagian Keyboard pada System Preferences.)
Urutan fokus maju dan mundur melalui langkah
elemen melalui Tab, tentu saja, dipanggil urutan tab. Memastikan bahwa
Anda merancang halaman dengan urutan tab yang logis adalah langkah penting yang akan kami
kita bahas nanti.
Apa yang dapat difokuskan?
Elemen HTML interaktif bawaan seperti kolom teks, tombol, dan daftar pilihan dapat difokuskan secara implisit, artinya kolom tersebut otomatis disisipkan ke dalam tab dan memiliki penanganan peristiwa keyboard bawaan tanpa intervensi developer.
Tetapi tidak semua elemen dapat difokuskan; paragraf, div, dan berbagai laman lainnya elemen-elemen tidak difokuskan saat Anda melakukan {i>tab<i} melalui halaman, dan itu memang dirancang. Umumnya tidak perlu memfokuskan sesuatu jika pengguna tidak dapat berinteraksi dengannya.
Mengalami fokus
Mari kita coba beberapa teknik fokus yang baru saja kita diskusikan. Menggunakan Chrome, buka maket situs maskapai penerbangan ini halaman dan menelusuri tiket tertentu hanya menggunakan input keyboard. Halaman ini tidak menerima input mouse, sehingga Anda tidak dapat memalsukan latihan (bukannya kami tidak memercayai Anda ;-).
Parameter tiket yang harus Anda tentukan adalah:
- sekali jalan
- ke Melbourne
- berangkat tanggal 12 Oktober 2017 (10/12/2017)
- kembali pada 23 Oktober 2017 (23/10/2017)
- kursi dekat jendela
- tidak ingin menerima penawaran promosi
Saat Anda berhasil mengisi formulir tanpa error input dan aktifkan Tombol Cari, formulir akan dihapus dan direset. Lanjutkan dan selesaikan lalu kembali lagi.
Mari kita periksa bagaimana formulir menggunakan input keyboard Anda. Dimulai dengan
beberapa penekanan Tab, browser akan menyorot item navigasi untuk Penerbangan,
Hotel, dan Mobil Rental. Sambil terus menekan Tab, Anda melanjutkan ke
Grup tombol pilihan tempat Anda dapat memilih Round Trip, One Way, atau Multi City
menggunakan tombol panah.
Lanjutkan untuk mengisi kolom nama dan alamat, dengan mengisi kolom yang wajib diisi tidak akurat atau tidak sesuai. Saat Anda tiba di elemen pemilihan tujuan, Anda dapat menggunakan tombol panah untuk memilih kota, atau Anda dapat mulai mengetik untuk melengkapi bidang tersebut secara otomatis. Demikian pula, di kolom tanggal, Anda dapat menggunakan tombol panah atau cukup mengetik tanggal.
Memilih jenis kursi juga akan bergantung pada tombol panah, atau Anda dapat mengetik "w", "a",
atau "n" untuk melompat ke opsi tempat duduk. Kemudian, Anda dapat menonaktifkan penawaran promosi
secara {i>default<i} dengan menekan tombol spasi saat kotak centang difokuskan. Terakhir, fokus
tombol Telusuri, lalu tekan Enter untuk mengirimkan formulir.
Sangat praktis untuk berinteraksi dengan formulir hanya dengan menggunakan {i>keyboard<i} dan tidak untuk beralih ke {i>mouse<i} dan kembali untuk menyelesaikan tugas. Karena semua elemen digunakan dalam formulir adalah tag HTML native dengan fokus implisit, formulir berfungsi dengan baik dengan {i>keyboard<i}, dan Anda tidak perlu menulis kode apa pun untuk menambahkan atau mengelola fokus perilaku model.