Get best of the week

VoiceOver di iOS: Memecahkan Masalah Umum

Ketika Anda mencoba untuk menyesuaikan aplikasi untuk orang buta, seringkali ada yang tidak beres: salah satu pesanan akan hilang, maka fokus tidak akan sampai ke sana. Di sisi lain, ada UX, yang mudah untuk dilewatkan karena Anda tidak tahu tentang masalah yang mungkin terjadi. Pada artikel ini kita akan membahas masalah khas dan solusinya.



Adaptasi aplikasi iOS adalah topik besar, semuanya tidak masuk dalam satu artikel, jadi saya merilisnya secara seri.

  1. Kontrol Suara dan VoiceOver: cara menyesuaikan aplikasi untuk orang buta atau diam .
  2. VoiceOver di iOS: Setiap kontrol berperilaku berbeda.
  3. VoiceOver di iOS: Memecahkan Masalah Umum.
  4. Perbedaan antara implementasi VoiceOver, Kontrol Suara dan tes UI. (Sedang berlangsung)

Pada bagian pertama, kami berurusan dengan adaptasi aplikasi untuk tunanetra menggunakan VoiceOver: kontrol yang ditandatangani, dikelompokkan, navigasi tetap. Pada bagian kedua, kami melangkah lebih jauh dan memeriksa "fitur" yang dapat diberikan kepada kontrol untuk meningkatkan pekerjaan mereka untuk orang buta dan umumnya meningkatkan kegunaan aplikasi.

Hari ini kami akan terus bekerja mengadaptasi layar pizza: kami akan mengubah urutan perayapan, meringkas informasi pembelian, memperbaiki jendela modal dan meningkatkan indikator memuat.

Kontrol menyusun ulang


Jika Anda tidak menetapkan urutan kontrol lewat yang benar untuk VoiceOver, kemungkinan besar itu akan mem-bypass dan membaca elemen-elemen dalam urutan yang salah seperti yang Anda inginkan. Misalnya, ini terjadi dengan tombol "tutup" dan "ke keranjang".

Layar akan bergulir dan tombol di atas UIScrollView. Ternyata VoiceOver pertama kali mencoba untuk memotong semua elemen di dalam UIScrollViewdan baru kemudian menemukan tombol atas. Bagi pengguna, perilaku VoiceOver ini akan salah: tombol-tombolnya ada di atas, jadi iterasi dan penilaian harus dimulai dengan mereka.

Untuk memulai, pertama mari kita cari tahu bagaimana VoiceOver menentukan urutan kontrol. Dia melakukannya dengan cara ini: mengambil elemen dari properti accessibilityElements. Secara default, semuanya viewada di sana isAccessibilityElement = true.

Sekarang kita dapat meletakkan tombol di awal dengan mengesampingkan accessibilityElements:

override var accessibilityElements: [Any]? {
    get {
        var elements = [Any]()
            
        elements.append(contentsOf: [closeButton, cartButton])
        elements.append(contentsOf: contentScrollView.accessibilityElements)
            
        return elements
    }
    set { }
}

Kelompokkan melalui shouldGroupAccessibilityChildren


Biasanya, VoiceOver mencoba membaca elemen dalam urutan alami - dari kiri ke kanan, dari atas ke bawah:



Jika Anda telah mengelompokkan kontrol, maka Anda perlu VoiceOver untuk melompat ke elemen terdekat dalam pengelompokan, dan tidak dalam urutan membaca. Atur .shouldGroupAccessibilityChildren = true, dan pesanan akan mulai memperhitungkan kedekatan elemen. Properti harus ditetapkan sebagai induk viewuntuk semua elemen.



Arahkan item pertama ke fokus


Masalah urutan membaca lainnya adalah ketika VoiceOver pertama kali membuka layar, ia memilih elemen kiri atas. Paling sering, ini adalah tombol kembali. Di satu sisi, ini memungkinkan Anda untuk dengan cepat kembali ke layar sebelumnya jika Anda membuat kesalahan. Di sisi lain, ini adalah bagaimana kita kehilangan pemahaman tentang layar apa yang sedang kita jalani. Anda dapat memperbaiki situasi jika Anda mengatur fokus secara manual ke kontrol yang diinginkan.

Apa yang dilakukan Apple?
Sungguh aneh bahwa UINavigationControllermenempatkan fokus pada tombol "Kembali", saya bisa meletakkannya pada judul layar yang terbuka. Dari sisi kenyamanan, menurut saya hak untuk fokus pada judul atau kontrol pertama, jadi kami memberikan lebih banyak informasi tentang layar baru. Anda dapat kembali dengan gerakan menggosok .

Anda dapat mengatur ulang fokus menggunakan fungsi peringatan UIAccessibility.post(notification: …). Dibutuhkan dua parameter:

  • Salah satu spesiesnya UIAccessibility.Notification.
  • Objek dimana peringatan harus diterapkan. Paling sering, ini adalah baris dengan teks atau objek yang harus dipilih setelah pemberitahuan.

Anda dapat menempatkan fokus pada header di viewDidLoad:

override func viewDidLoad() {
    super.viewDidLoad()
        
    UIAccessibility.post(notification: .screenChanged,
                         argument: titleLabel);
}

Anda dapat mentransfer objek tempat Anda ingin meletakkan fokus atau teks yang akan diucapkan.

Jenis peringatan untuk objek


  • .screenChanged — , . - .
  • .layoutChanged — . , , «» .
  • .announcement — . . , . , .

    DispatchQueue.main.asyncAfter(deadline: .now() + .milliseconds(100)) {
		UIAccessibility.post(notification: .announcement,
                         argument: text)
}
  • .pageScrolled — .UIScrollView « 3 5», . , , .
  • .pauseAssistiveTechnology .resumeAssistiveTechnology —  VoiceOver.

Tampilkan modal windows secara asli


Saat bekerja dengan VoiceOver dapat (dan akan) menembak semua tiang tembok yang diizinkan dalam pengembangan. Misalnya, kami membuat umpan pesan dan agar pesan dimulai dari bawah, kami memutuskan untuk membalik UITableViewlalu membalik semua sel. Secara visual, semuanya baik-baik saja, tetapi daftar akan bergulir terbalik dengan tiga jari di VoiceOver.

Kami juga menghadapi masalah bahwa kami tidak dapat mengganti bahan-bahan dengan cara apa pun, karena tidak mungkin untuk memfokuskan pada jendela. Itu terjadi karena kami menunjukkan pemandangan, dan tidak UIViewControllerdengan UIPresentationController.VoiceOver khusus yang dituju .firstResponder, dan pandangan kami viewtidak.



Jika tidak ada waktu untuk menulis ulang, maka Anda dapat viewmengatur propertinya accessibilityViewIsModal. Kemudian VoiceOver hanya akan fokus pada hal itu view.

override var accessibilityViewIsModal: Bool {
    get { return true }
    set {}
}

Sejujurnya, itu tidak pernah berhasil untuk saya, dan kami UIPresentationController.

Sejajarkan Frame Tak Terlihat


Urutan membaca dihitung dengan bingkai, kadang-kadang memberikan hasil yang tidak terduga. Misalnya, kami memperbesar bingkai tombol "i" untuk membuatnya lebih mudah untuk mengklik. Tapi ternyata lebih tinggi dari bingkai nama pizza, jadi elemen fokus pertama adalah tombol "i". Meskipun kecil, itu di sebelah kanan dan umumnya tidak begitu penting.



Anda dapat mengubah urutan bacaan accessibilityElements, tetapi saya akan menunjukkan cara yang berbeda. VoiceOver menggunakan properti accessibilityFrame, hanya secara default cocok dengan bingkai yang biasa. Ada beberapa solusi:

  1. Override control subclass dan kembalikan nilai yang dikurangi.
  2. Atur bingkai yang benar di luar.
  3. Cukup sesuaikan bingkai sehingga rata dengan prasasti.

Tetapi penting bahwa bingkai ini berada dalam koordinat layar. Untuk konversi sederhana ada fungsi UIAccessibility.convertToScreenCoordinates.

Itu juga dapat digunakan untuk menggabungkan kontrol. Misalnya, Anda perlu menggabungkan switcher dan tanda tangannya, sehingga elemen akan menjadi lebih besar, akan lebih mudah untuk mengkliknya, duplikasi yang tidak perlu akan hilang.

override func layoutSubviews() {
        super.layoutSubviews()
        repeatSwitch.accessibilityLabel = repeatLabel.text
        repeatSwitch.accessibilityFrame = UIAccessibility.convertToScreenCoordinates(
                repeatSwitch.frame.union(repeatLabel.frame).insetBy(dx: -12, dy: -12),
                in: repeatSwitch.superview!)
}

Saya juga membuat fokus lebih besar menggunakan .inset, lebih nyaman untuk menekan.



Menggunakan bingkai dan AccessibilityContainerAnda dapat membuat grafik dan tabel tersedia.

Ringkas tindakan utama


Ini lebih lanjut tentang UX, tetapi saya tetap akan memberitahu Anda. Seseorang dengan penglihatan normal dengan mudah membaca semua pengaturan dari layar, tetapi untuk orang buta ini, Anda perlu menyortir semua kontrol secara manual. Anda dapat memfasilitasi proses dan merangkum semua perubahan di tombol Beli.

Misalnya, untuk mendapatkan "tombol Beli. Tambahkan bacon, hapus jalapeños. Harga 434₽ », Anda tidak perlu menulis apa pun yang tidak biasa dalam kode, cukup kumpulkan baris dengan menambahkan / menghapus:

accessibilityTraits = .button
accessibilityLabel = ""
accessibilityValue = " ,  .  434₽"

Dan jangan lupa untuk menandatangani indikator unduhan


Jika setelah menambahkan produk ke keranjang Anda secara singkat memblokir antarmuka dan mengunduh sesuatu, jangan lupa untuk membuat indikator unduhan tersedia:

  1. Gunakan lansiran untuk fokus pada indikator.
  2. Beri nama fokus. Misalnya memuat.
  3. Taruh itu accessibilityViewIsModal.
  4. Beri tahu saya saat unduhan selesai.

Jika setelah memuat Anda menampilkan layar baru, maka VoiceOver sendiri akan beralih fokus, sehingga akan menjadi jelas bahwa unduhan telah berakhir. Dalam kasus yang lebih rumit, Anda dapat secara eksplisit mengatakan ini atau bahkan menambahkan getaran .

Apa yang dilakukan Apple?
Menariknya, Safari bekerja dengan ini di iOS 13: selama memuat halaman, itu membuat klik setiap detik, dan ketika halaman memuat itu * woop-dumb *. Sayangnya, dari sisi api ini belum tersedia, kami sedang menunggu iOS 14.


Untuk mengadaptasi layar, kami menggunakan pendekatan yang berbeda: kami mengubah urutan tombol, menunjukkan elemen pertama untuk fokus, memperbaiki jendela modal, meringkas pengaturan pada tombol utama dan bekerja pada kenyamanan aplikasi. Pengetahuan ini cukup untuk mengadaptasi hampir semua aplikasi. Lanjutkan.

Lain kali saya akan berbicara tentang perbedaan antara penerapan VoiceOver, Kontrol Suara dan tes UI.
Agar tidak ketinggalan artikel berikutnya, berlangganan saluran Dodo Pizza Mobile saya .

More articles:


All Articles