Pengantar Fokus

Ringkasan fokus layar dalam aksesibilitas

Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

Dalam kursus ini, kita akan membahas fokus dan cara mengelolanya di aplikasi Anda. Fokus mengacu pada kontrol mana pada layar (item input seperti kolom, kotak centang, tombol, atau link) yang saat ini menerima input dari keyboard, dan dari papan klip saat Anda menempelkan konten.

Ini adalah tempat yang tepat untuk mulai mempelajari aksesibilitas karena kita semua tahu cara menggunakan keyboard, mudah untuk memahami dan menguji, serta bermanfaat bagi hampir semua pengguna.

Pengguna dengan gangguan motorik, yang dapat berupa kelumpuhan permanen hingga pergelangan tangan terkilir, dapat mengandalkan keyboard atau tombol perangkat untuk membuka halaman Anda, sehingga strategi fokus yang baik sangat penting untuk memberikan pengalaman yang baik bagi mereka.

Dan bagi pengguna mahir yang mengetahui setiap pintasan keyboard di komputer mereka, kemampuan untuk menavigasi situs Anda dengan cepat hanya menggunakan keyboard tentu akan membuat mereka lebih produktif.

Dengan demikian, strategi fokus yang diterapkan dengan baik akan memastikan setiap orang yang menggunakan aplikasi Anda memiliki pengalaman yang lebih baik. Dalam pelajaran berikutnya, kita akan melihat bahwa upaya yang Anda lakukan akan menjadi dasar penting untuk mendukung pengguna teknologi asistif, dan memang, semua pengguna.

Apa itu fokus?

Fokus menentukan ke mana peristiwa keyboard ditempatkan di halaman pada waktu tertentu. Misalnya, jika Anda memfokuskan kolom input teks dan mulai mengetik, kolom input akan menerima peristiwa keyboard dan menampilkan karakter yang Anda ketik. Selain memiliki fokus, model ini juga akan menerima input yang ditempelkan dari papan klip.

Fokus keyboard di kolom teks.

Item yang saat ini difokuskan sering kali ditunjukkan dengan cincin fokus, yang gayanya bergantung pada browser dan gaya yang diterapkan oleh penulis halaman. Chrome, misalnya, biasanya menyorot elemen yang difokuskan dengan batas biru, sedangkan Firefox menggunakan batas putus-putus.

Tombol daftar.

Beberapa pengguna mengoperasikan komputer mereka hampir sepenuhnya dengan keyboard atau perangkat input lainnya. Bagi para pengguna tersebut, fokus sangatlah penting; inilah cara utama mereka untuk menjangkau semua hal di layar. Oleh karena itu, checklist WebAlam menyatakan di bagian 2.1.1 bahwa semua fungsi halaman harus tersedia menggunakan keyboard, kecuali jika ada hal yang tidak dapat dilakukan dengan keyboard, misalnya 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 bernavigasi dengan Tab, Anda perlu menekan Option+Tab untuk mengubah fokus di browser lain seperti Safari. (Anda dapat mengubah setelan ini di bagian Keyboard pada System Preferences.)

Dialog preferensi keyboard.

Urutan saat fokus bergerak maju dan mundur melalui elemen interaktif melalui Tab disebut, urutan tab. Memastikan bahwa Anda mendesain halaman dengan urutan tab yang logis adalah langkah penting yang akan kita bahas nanti.

Apa yang dapat difokuskan?

Elemen HTML interaktif bawaan seperti kolom teks, tombol, dan daftar tertentu secara implisit dapat difokuskan, artinya elemen tersebut akan otomatis disisipkan ke dalam urutan tab dan memiliki penanganan peristiwa keyboard bawaan tanpa intervensi developer.

Kolom yang dapat difokuskan secara implisit.

Namun, tidak semua elemen dapat difokuskan; paragraf, div, dan berbagai elemen halaman lainnya tidak akan difokuskan saat Anda melakukan tab pada halaman, dan memang itu memang desain. Umumnya tidak perlu memfokuskan sesuatu jika pengguna tidak dapat berinteraksi dengannya.

Tidak semua elemen dapat difokuskan,

Sedang fokus

Mari kita coba beberapa teknik fokus yang baru saja kita diskusikan. Dengan Chrome, buka halaman mockup situs maskapai penerbangan dan telusuri tiket tertentu hanya menggunakan input keyboard. Halaman ini tidak menerima input mouse, jadi Anda tidak dapat memalsukan latihan (bukannya kami tidak memercayai Anda ;-).

Maket situs maskapai penerbangan.

Parameter tiket yang harus Anda tentukan adalah:

  • sekali jalan
  • ke Melbourne
  • berangkat tanggal 12 Oktober 2017 (12/10/2017)
  • kembali pada 23 Oktober 2017 (23/10/2017)
  • kursi dekat jendela
  • tidak ingin menerima penawaran promosi

Jika Anda berhasil mengisi formulir tanpa error input dan mengaktifkan tombol Telusuri, formulir akan dihapus dan direset. Silakan lengkapi formulirnya, lalu kembali lagi.

Mari kita lihat bagaimana formulir menggunakan input keyboard Anda. Dimulai dengan beberapa penekanan Tab pertama, browser menandai item navigasi untuk Penerbangan, Hotel, dan Mobil Rental. Saat terus menekan Tab, Anda akan melanjutkan ke grup tombol radio tempat Anda dapat memilih Round Trip, Sekali Jalan, atau Multi-Kota menggunakan tombol panah.

Lanjutkan mengisi kolom nama dan alamat, dengan mengisi informasi yang diperlukan. Saat tiba di elemen pilih tujuan, Anda dapat menggunakan tombol panah untuk memilih kota, atau mulai mengetik untuk melengkapi kolom secara otomatis. Demikian pula, di kolom tanggal, Anda dapat menggunakan tombol panah atau cukup mengetik tanggal.

Memilih jenis kursi juga akan mengandalkan tombol panah, atau Anda dapat mengetik "w", "a", atau "n" untuk lompat ke opsi kursi. Kemudian, Anda dapat menonaktifkan default penawaran promosi dengan menekan spasi saat kotak centang difokuskan. Terakhir, fokuskan tombol Telusuri dan tekan Enter untuk mengirimkan formulir.

Sangat praktis untuk berinteraksi dengan formulir hanya dengan menggunakan keyboard dan tidak perlu beralih ke mouse dan kembali untuk menyelesaikan tugas. Karena semua elemen yang digunakan dalam formulir adalah tag HTML native dengan fokus implisit, formulir tersebut berfungsi dengan baik dengan keyboard, dan Anda tidak perlu menulis kode apa pun untuk menambahkan atau mengelola perilaku fokus.