Optimalisasi UX Untuk Pengguna Keyboard-Saja dan Teknologi Asistif

(Ini adalah artikel bersponsor.) Salah satu hal keren tentang aksesibilitas adalah ia memaksa Anda untuk melihat dan memikirkan aplikasi Anda di luar pengalaman pengguna berbasis mouse yang biasa terlihat. Pengguna yang menavigasi hanya melalui keyboard (KO) dan/atau teknologi bantu (AT) sangat bergantung tidak hanya pada arsitektur informasi aplikasi Anda yang bijaksana, tetapi juga kemampuan aplikasi Anda untuk menjaga pengalaman semudah mungkin bagi semua jenis pengguna.

Dalam artikel ini, kita akan membahas beberapa dari keterjangkauan yang dapat membuat pengalaman pengguna KO/AT Anda lebih baik tanpa benar-benar mengubah pengalaman untuk orang lain.

Tambahan Untuk UX Aplikasi Anda

Ini adalah fitur yang dapat Anda tambahkan ke aplikasi Anda untuk meningkatkan UX bagi pengguna KO/AT.

Lewati Tautan

Tautan lewati adalah fitur navigasi yang tidak terlihat berada di bagian atas situs web atau aplikasi. Saat ada, itu dibangkitkan dan menjadi terlihat di perhentian tab pertama aplikasi Anda.

Tautan lewati memungkinkan pengguna Anda untuk "melompati" ke berbagai bagian yang diminati dalam aplikasi tanpa harus melakukan tab-siklus ke sana. Tautan lewati dapat memiliki banyak tautan ke sana jika aplikasi Anda memiliki banyak bidang minat yang menurut Anda pengguna harus memiliki akses cepat ke titik masuk aplikasi Anda.

Untuk pengguna KO/AT, ini adalah alat yang berguna untuk memungkinkan mereka melintasi aplikasi Anda dengan cepat dan dapat membantu mengarahkan mereka ke arsitektur informasi aplikasi Anda. Untuk semua pengguna lain, mereka mungkin tidak akan pernah tahu fitur ini ada.

Berikut ini contoh cara kami menangani tautan lewati. Setelah Anda mengklik tautan, tekan Tab dan lihat di sudut kiri atas. Tautan lewati memiliki dua tautan: Konten Utama dan Contoh Kode . Anda dapat menggunakan Tab untuk berpindah di antara keduanya, tekan Enter untuk menavigasi ke tautan.

Menu Pintasan/Hotkey

Ini adalah fitur yang menurut saya sudah familiar bagi semua orang: pintasan dan tombol pintas. Anda mungkin pernah menggunakannya dari waktu ke waktu, mereka sangat populer di kalangan pengguna aplikasi yang kuat, dan datang dalam berbagai inkarnasi.

Untuk pengguna KO/AT, pintasan/hotkey sangat berharga. Mereka memungkinkan mereka untuk menggunakan aplikasi, sebagaimana dimaksud, tanpa harus secara visual menargetkan apa pun atau tab melalui aplikasi untuk mendapatkan elemen atau konten. Meskipun tindakan dan konten yang sering dilakukan selalu dihargai saat direpresentasikan dalam menu pintasan/tombol pintas, Anda mungkin juga ingin mempertimbangkan beberapa tindakan yang sedikit lebih jarang yang mungkin terkubur di UI Anda (untuk alasan yang baik) tetapi masih merupakan sesuatu yang diinginkan pengguna dapat mengakses.

Membuat pintasan untuk fungsi tersebut akan sangat membantu pengguna KO/AT. Anda dapat membuat perintah sedikit lebih terlibat, seperti menggunakan (3) penekanan tombol untuk membangkitkannya, untuk menyiratkan bahwa itu adalah bagian dari fungsionalitas yang jarang digunakan. Jika Anda memiliki menu pintasan/hotkey pastikan untuk menemukan cara untuk mempromosikannya di aplikasi Anda sehingga pengguna Anda, terutama pengguna KO/AT Anda, dapat menemukannya dan menggunakannya secara efektif.

Pendidikan Pengguna

Pendidikan pengguna mengacu pada fungsionalitas yang mengarahkan pengguna tentang apa yang harus dilakukan, ke mana harus pergi, atau apa yang diharapkan. Tooltips, point outs, info gelembung, dll semua contoh pendidikan pengguna.

Satu hal yang harus Anda tanyakan pada diri sendiri saat merancang, menempatkan, dan/atau menulis salinan untuk pendidikan pengguna Anda adalah:

“Jika saya tidak dapat melihat ini, apakah masih berharga untuk memahami ______?”

Sering kali itu hanya reorientasi pendidikan pengguna melalui lensa yang dapat menghasilkan pengalaman yang jauh lebih baik untuk semua orang. Misalnya, daripada mengatakan "Berikutnya, klik tombol di bawah", Anda mungkin ingin menulis, "Untuk memulai, klik tombol MULAI." Metode kedua menghilangkan orientasi visual dan sebagai gantinya fokus pada informasi umum yang dimiliki oleh pengguna yang dapat melihat dan pengguna KO/AT.

Catatan : Saya harus menyebutkan bahwa tidak apa-apa untuk menggunakan fitur pendidikan pengguna, seperti point out, untuk menunjukkan hal-hal secara visual pada aplikasi, pastikan teks pendamping memungkinkan pengguna KO/AT Anda memahami hal-hal yang sama yang dirujuk secara visual.

Augmentasi Untuk UX Aplikasi Anda

Ada perubahan atau penyesuaian yang dapat Anda lakukan pada komponen/fitur umum untuk meningkatkan UX bagi pengguna KO/AT.

Fokus Modal

Sekarang kita masuk ke seluk beluknya. Salah satu hal hebat tentang aksesibilitas adalah bagaimana ia membuka pintu ke cara-cara baru untuk memecahkan masalah yang mungkin belum pernah Anda pertimbangkan sebelumnya. Anda dapat membuat sesuatu yang sepenuhnya dapat diakses WCAG 2.0 AA dan menyelesaikan masalah dengan pendekatan yang sangat berbeda. Untuk modal, kami di Deque datang dengan pendekatan menarik yang sama sekali tidak terlihat oleh sebagian besar pengguna yang dapat melihat tetapi akan segera diperhatikan oleh pengguna KO/AT.

Agar modal dapat diakses, ia perlu mengumumkan dirinya sendiri saat dibangkitkan. Dua cara umum untuk melakukannya adalah: fokuskan badan modal setelah modal terbuka atau fokuskan header modal (jika ada) setelah modal terbuka. Anda melakukan ini agar AT pengguna dapat membaca maksud modal seperti "Edit profil" atau "Buat langganan baru".

Setelah Anda memfokuskan badan atau header, menekan Tab akan mengirim fokus ke elemen yang dapat difokuskan berikutnya di modal — biasanya bidang atau, jika ada di header, terkadang tombol tutup (X). Melanjutkan ke tab akan memindahkan Anda melalui semua elemen yang dapat difokuskan di modal, biasanya diakhiri dengan tombol terminal seperti SIMPAN dan/atau BATAL.

Sekarang kita sampai pada bagian yang menarik. Setelah Anda memfokuskan elemen terakhir di modal, menekan Tab lagi akan "menggilir" Anda kembali ke perhentian tab pertama, yang dalam kasus modal akan menjadi badan atau header karena di situlah kita mulai. Namun, dalam modals kami, kami "melewati" perhentian tab awal itu dan membawa Anda ke perhentian kedua (yang dalam modals kami adalah tutup (X) di sudut atas. Kami melakukan ini karena modal tidak perlu terus mengumumkan dirinya sendiri berulang- ulang setiap siklus. Itu hanya perlu dilakukan pada kebangkitan awal bukan pada perjalanan berikutnya, jadi kami memiliki pemberhentian terprogram khusus yang melompati dirinya sendiri setelah pertama kali.

Ini adalah peningkatan kegunaan kecil (tetapi dihargai) yang kami buat secara eksklusif untuk pengguna KO/AT yang sama sekali tidak diketahui oleh orang lain.

Menu Navigasi Melintasi Dan Fokus/Manajemen Terpilih

Menu navigasi rumit. Mereka dapat disusun dalam banyak cara, berjenjang, bersarang, dan memiliki mekanisme pembangkitan, pengungkapan, dan lintasan yang tak terhitung jumlahnya. Ini membuatnya penting untuk mempertimbangkan bagaimana mereka berinteraksi dan diwakili untuk pengguna KO/AT selama fase desain. Menu yang baik harus "masuk" dan "keluar", yang berarti Anda tab ke menu untuk menggunakannya dan tab keluar untuk keluar (jika Anda tidak menggunakannya).

Ide ini paling baik diilustrasikan dengan contoh literal, jadi mari kita lihat navigasi vertikal 2 tingkat kami dari Cauldron.

1. Buka https://pattern-library.dequelabs.com/;
2. Tekan Tab tiga kali. Perhentian tab pertama adalah tautan lewati (yang telah kita bahas sebelumnya), yang kedua adalah logo yang berfungsi sebagai tautan "kembali ke beranda", dan tab ketiga masuk ke menu;
3. Sekarang Anda berada di menu, gunakan tombol panah ( → dan ) untuk memindahkan dan membuka bagian menu;
4. Menekan Tab kapan saja akan membuat Anda keluar dari menu dan mengirim Anda ke konten halaman.

Menu navigasi juga dapat bekerja bersama dengan beberapa topik sebelumnya seperti menu pintasan/tombol pintas untuk membuat penggunaan menu menjadi lebih efisien.

Retensi Fokus Logis (IE Menghapus Baris, Kembali Kembali Ke Halaman)

Retensi fokus sangat penting. Kebanyakan orang akrab, setidaknya dalam konsep, dengan elemen pemfokusan dalam urutan yang dimaksudkan secara logis pada halaman; namun, itu bisa menjadi keruh saat elemen atau konten berubah/muncul/menghilang.

• Ke mana fokus pergi ketika bidang tempat Anda berada dihapus?
• Bagaimana ketika Anda dikirim ke tab lain di mana aplikasi memiliki konteks baru?
• Bagaimana setelah modal ditutup karena tindakan terminal seperti SIMPAN?

Untuk pengguna yang dapat melihat ada isyarat visual yang dapat memberi tahu mereka tentang apa yang terjadi.

Berikut ini contohnya: Anda memiliki modal Edit Resep yang memungkinkan pengguna Anda menambah dan menghapus bahan apa pun. Ada satu bidang bahan dengan tombol "Tambah bahan lain" di bawahnya. (Ya, itu ditata sebagai tautan tapi itu topik untuk hari lain.) Fokus Anda adalah pada tombol. Anda mengklik tombol dan bidang baru muncul di antara tombol dan bidang pertama. Ke mana harus fokus? Kemungkinan besar pengguna Anda menambahkan bahan lain untuk terlibat dengannya sehingga fokus harus beralih dari tombol ke bidang yang baru ditambahkan.

Kesimpulan besar dari semua ini bukanlah contoh spesifik tetapi mentalitas yang mendukungnya — pertimbangkan UX untuk aplikasi Anda melalui lensa pengguna KO/AT serta pengguna yang hanya melihat mouse. Beberapa ide terbaik dan paling cerdas datang dari tantangan yang paling menarik dan penting.

Jika Anda memerlukan bantuan untuk memastikan bahwa fitur Anda dapat diakses, semua contoh di atas ditambah lebih banyak lagi dapat diuji menggunakan aplikasi pengujian aksesibilitas web gratis Deque: ax pro. Ini gratis dan Anda dapat mendaftar di sini.