Menyusun kontrol dalam aplikasi kanvas yang dapat diakses

2025-05-21

Kontrol dalam aplikasi harus diatur untuk membantu pengguna Pembaca layar menelusuri secara berurutan. Urutan logika juga mengurangi kebingungan bagi pengguna keyboard dan membantu mereka menjadi lebih produktif.

Nama layar yang memiliki arti

Bila layar dimuat, pembaca layar akan mengucapkan namanya. Pilih nama yang memiliki arti untuk meng-orientasi pengguna.

Anda dapat mengubah nama layar pada panel hierarki kontrol atau properti di Power Apps Studio. Pilih layar, lalu pilih untuk mengganti nama layar.

Nama layar dapat diubah dari pohon kontrol atau panel properti, seperti yang disorot dalam gambar.

Elemen pertama pada layar adalah namanya. Ini tersembunyi secara visual dan dapat diakses hanya untuk pengguna Pembaca layar.

Bila layar baru dimuat, Power Apps fokus pada nama layar. Jika Anda menggunakan SetFocus segera setelah layar dimuat, nama layar tidak akan terbaca. Pertimbangkan untuk membuat judul yang terlihat dan menjadikannya wilayah aktif untuk mengumumkan perubahan dalam konteks.

Urutan kontrol logis

Pengguna pembaca layar dapat menavigasi konten secara berurutan. Urutan ditentukan berdasarkan posisi kontrol, mulai dari atas ke bawah, kemudian kiri ke kanan. Ukuran kontrol tidak menjadi masalah, yang penting hanya properti X dan Y -nya.

Dalam contoh ini, A akan muncul pertama dalam urutan karena paling dekat ke atas. B dan C memiliki posisi vertikal yang sama, namun karena B lebih dekat ke kiri, dan oleh karena itu, muncul sebelum C. D muncul terakhir karena terjauh dari atas.

Pengaruh posisi terhadap urutan 4 kontrol.

Catatan

Dalam mode Pratinjau saat mengedit aplikasi, urutan kontrol tidak diperbarui karena alasan kinerja. Urutan akan benar saat aplikasi dipublikasikan dan dijalankan.
Urutan kontrol tidak sama dengan yang ditampilkan dalam tampilan pohon kontrol di Power Apps Studio. Tampilan hierarki akan mengurutkan kontrol berdasarkan waktu ditambahkan ke aplikasi. Ini tidak akan mempengaruhi urutan kontrol saat aplikasi berjalan.
Bila nilai X atau Y kontrol ditetapkan ke suatu ekspresi, susunan kontrol tidak diperbarui bila hasil ekspresi berubah. Urutan dihitung dan diperbaiki saat aplikasi disimpan, menggunakan status awal aplikasi untuk mengevaluasi ekspresi.
- Jika Anda mengubah posisinya karena kontrol lain disembunyikan atau ditampilkan, Anda dapat menggunakan wadah tata letak otomatis untuk mengelola X dan Y untuk Anda.
- Anda juga dapat memposisikan semua kontrol dengan cara yang logis, apa pun nilai ekspresinya. Misalnya, jika kontrol A harus selalu berada di bawah kontrol B dan B terkadang disembunyikan, tetapkan A Y menjadi If(B.Visible, B.Y + B.Height, B.Y + 1). Penambahan 1 memastikan bahwa A selalu di bawah B, bahkan jika B tersembunyi.

Kontrol dikelompokkan

Urutan default sesuai untuk konten terpisah tetapi tidak untuk konten yang dikelompokkan. Bayangkan dua petak yang bersebelahan, digambar dengan kontrol Persegi Panjang . Setiap ubin memiliki heading. Di bawah heading terdapat dua tombol yang ditumpuk secara vertikal: A dan B untuk ubin pertama dan C dan D untuk yang lain.

Contoh praktik yang salah: kontrol yang diatur dalam struktur rata.

Urutan default adalah dari atas ke bawah, lalu kiri ke kanan. Oleh karena itu, urutan kontrol adalah:

Kiri Persegi Panjang
Persegi Panjang Kanan
Heading kiri
Heading kanan
A
C
B
D

Struktur ini tidak menjelaskan bahwa A dan B bersama-sama, dan demikian pula, C dan D bersama-sama.

Gunakan Wadah untuk mengelompokkan konten terkait. Semua kontrol dalam Container akan muncul bersamaan secara berurutan. Dalam wadah, kontrol diurutkan dengan aturan yang sama: atas ke bawah, kemudian kiri ke kanan.

Mengganti Persegi Panjang pada contoh sebelumnya dengan Wadah, urutan kontrol sekarang logis bagi pengguna pembaca layar:

Kiri Kontainer
Heading kiri
A
B
Kanan Kontainer
Heading kanan
C
D

Contoh praktik yang disarankan: kontrol yang dikelola dalam struktur hierarki menggunakan Wadah.

Semua kontrol dalam Kartu Formulir dan Galeri secara otomatis dikelompokkan, jadi Anda tidak perlu menggunakan Wadah. Namun, jika ada subgrup, Anda tetap harus menggunakan Kontainer untuk subgrup tersebut.

Dalam contoh ini, baris Galeri memiliki gambar mini dan dua potong teks di sebelah kiri. Di sisi kanan terdapat dua tombol. Secara visual dan logis, kedua rangkaian kontrol harus dikelompokkan. Langkah ini akan memastikan pengguna Pembaca layar akan menemui grup kiri lebih dulu sebelum kanan.

Contoh praktik yang disarankan: kontrol terkait di galeri dikelompokkan di dalam Wadah.

Navigasi keyboard adlah sebuah aspek penting pada aplikasi mana pun. Bagi banyak orang, keyboard lebih efisien dibandingkan menggunakan sentuh atau mouse. Urutan navigasi harus:

Ikuti alur kontrol visual.
Mengikuti antara menyilang intuitif dan ke bawah urutan “Z” atau ke bawah dan lalu melalui urutan “N-mundur”.
Hanya berhenti sedikit pada kontrol yang interaktif.

AcceptsFocus menentukan apakah kontrol dapat dijangkau melalui papan ketik. Untuk kontrol klasik, properti ekuivalennya adalah TabIndex.

Urutan navigasi mengikuti urutan kontrol: dari kiri ke kanan, lalu atas ke bawah, dalam pola "Z". Anda dapat menyesuaikannya dengan cara yang sama seperti pada perintah kontrol. Misalnya, kontrol dalam Wadah, Kartu Formulir dan Galeri secara otomatis dikelompokkan. Tombol Tab akan menavigasi semua elemen di dalam wadah sebelum melanjutkan ke kontrol berikutnya di luar wadah.

Jika urutan navigasi tidak terduga, Anda harus memeriksa terlebih dahulu apakah struktur aplikasi logis.

Catatan

Bila kontrol dipindahkan secara dinamis di layar, misalnya dengan mengubah nilai X atau Y sesuai dengan Power Fx ekspresi, urutan navigasi tidak akan diperbarui.

Solusi untuk urutan tab kustom

Untuk skenario yang jarang terjadi dengan urutan navigasi keyboard harus berbeda dari urutan visual, Anda dapat memosisikan kontrol wadah dengan cermat untuk memiliki efek yang sama.

Pada contoh di bawah, tombol A berada di atas tombol B. Urutan navigasi tab alami adalah A, lalu B.

Dua tombol dengan TabIndex yang sama, ditumpuk secara vertikal.

Untuk membalik urutan navigasi tab, letakkan B dalam kontrol Wadah. Atur nilai Y Wadah ke atas A. Struktur aplikasi sekarang memiliki Wadah (dan B) sebelum A. Oleh karena itu, urutan navigasi tab adalah B, lalu A.

B ditaruh dalam wadah yang muncul sebelum A.

Dengan teknik ini, pengguna pembaca layar juga akan menemukan B sebelum A saat menavigasi tanpa tombol Tab .

Indeks tab khusus (fitur yang dihentikan)

Indeks tab kustom adalah indeks tab yang lebih besar dari nol. Mereka tidak lagi didukung. Semua TabIndex nilai yang lebih besar dari nol akan diperlakukan sebagai nol.

Indeks tab khusus hampir selalu merupakan tanda desain yang buruk. Ada alternatif yang lebih baik seperti membuat struktur aplikasi yang sesuai atau menggunakan SetFocus untuk mengubah fokus.

Beberapa masalah dengan indeks tab khusus:

Aksesibilitas

Ini adalah masalah aksesibilitas yang serius untuk memiliki indeks tab kustom. Layar Pembaca pengguna menavigasi aplikasi menggunakan struktur logikanya. Indeks tab kustom mengabaikan struktur tersebut. Karena pengguna pembaca layar juga dapat menavigasi menggunakan tombol Tab , mereka akan bingung jika mendapatkan perintah yang berbeda dari metode navigasi lainnya.

Kegunaan

Pengguna dapat dibuat bingung bila beberapa item tampak dilewatkan. Fokus dapat mengalami disorientasi bila fokus bergerak dalam urutan yang tidak terduga. Hal ini bahkan lebih problematis untuk pengguna dengan disabilitas kognitif.

Pemeliharaan

Pembuat aplikasi harus memperbarui TabIndex beberapa kontrol secara manual setiap kali kontrol baru dimasukkan. Mudah untuk melewatkan pembaruan atau salah mengurutkan.

Kinerja

Untuk mendukung indeks tab kustom, sistem Power Apps harus memeriksa semua kontrol pada halaman dan menghitung urutan yang sesuai. Penghitungan ini merupakan proses yang berlangsung secara intensif. Kontrol wadah seperti Galeri memiliki aturan rumit tentang cara kerja TabIndex untuk kontrol anak. Sistem memetakan TabIndex yang diinginkan pembuat aplikasi ke nilai yang berbeda untuk mematuhi aturan ini. Inilah sebabnya meskipun TabIndex ditetapkan ke nol untuk semua kontrol, HTML tabindex yang sebenarnya akan berupa angka positif.

Integrasi dengan komponen lainnya

Indeks tab kustom hanya berfungsi dengan kontrol built-in. Kontrol yang tidak terintegrasi ke sistem indeks tab Power Apps akan memiliki perintah navigasi tidak terduga. Ini dapat menjadi masalah untuk komponen kode. Pengembang komponen ini harus melacak elemen interaktif dan mengatur indeks tab. Pustaka pihak ketiga mungkin menggunakan, yang bahkan tidak memberikan cara untuk menyesuaikan indeks tab. Di sisi lain, bila semua indeks tab 0 atau -1, tidak perlu melibatkan sistem indeks tab Power Apps. Komponen pihak ketiga yang disematkan dalam aplikasi akan secara otomatis mendapatkan urutan tab yang benar.

Ke arah lain, bila aplikasi kanvas disematkan di halaman web lain, indeks tab kustom tidak berfungsi. Misalnya, di halaman khusus. Power Apps tidak dapat mengontrol elemen di luar aplikasi kanvas, sehingga urutan navigasi tab secara keseluruhan akan menjadi logis.

Langkah berikutnya

Warna yang dapat diakses di Power Apps