Organizzare i controlli nelle app canvas accessibili

I controlli in un'app devono essere organizzati per aiutare gli utenti dell'utilità per la lettura dello schermo a navigare in sequenza. Un ordine logico riduce anche la confusione per gli utenti che utilizzano la tastiera aiutandoli a essere più produttivi.

Nome visualizzato significativo

Quando viene caricato uno schermo, le utilità per la lettura dello schermo ne annunciano il nome. Scegli un nome significativo per orientare gli utenti.

Puoi modificare il nome della schermata nella struttura ad albero dei controlli o nel pannello delle proprietà in Power Apps Studio. Seleziona la schermata, quindi Seleziona l'icona della penna per modificare il nome. per rinominare la schermata.

I nomi delle schermate possono essere modificati dall'albero dei controlli o dal pannello delle proprietà, come evidenziato nell'immagine.

Il primo elemento su uno schermo è il suo nome. È visivamente nascosto e accessibile solo agli utenti dell'utilità per la lettura dello schermo.

Quando viene caricata una nuova schermata, Power Apps attiva il nome della schermata. Se usi SetFocus immediatamente quando lo schermo viene caricato, il nome dello schermo non verrà letto. Valuta la possibilità di creare un titolo visibile e di impostarlo come area dinamica per annunciare il cambiamento di contesto.

Ordine logico dei controlli

Gli utenti dell'utilità per la lettura dello schermo possono navigare nei contenuti in sequenza. L'ordine è determinato dalla posizione dei controlli, partendo dall'alto verso il basso, quindi da sinistra a destra. La dimensione del controllo non ha importanza, solo le sue proprietà X e Y contano.

In questo esempio, A appare per primo nella sequenza poiché è il più vicino all'inizio. B e C hanno la stessa posizione verticale, ma poiché B è più vicino a sinistra, appare prima di C. D appare per ultimo poiché è il più lontano dall'alto.

In che modo il posizionamento influisce sull'ordine dei 4 controlli.

Nota

  • Nella modalità Anteprima durante la modifica di un'app, l'ordine dei controlli non viene aggiornato per motivi di prestazioni. L'ordine sarà corretto quando l'app verrà pubblicata ed eseguita.
  • L'ordine dei controlli non è uguale a quello mostrato nella visualizzazione ad albero dei controlli di Power Apps Studio. La visualizzazione ad albero ordina i controlli in base a quando sono stati aggiunti all'app. Non influisce sull'ordine dei controlli quando viene eseguita l'app.
  • Quando un valore di un controllo X o Y è impostato su un'espressione, l'ordine del controllo non viene aggiornato quando cambia il risultato dell'espressione. L'ordine viene calcolato e corretto quando l'app viene salvata, utilizzando lo stato iniziale dell'app per valutare le espressioni.
    • Se stai modificando la sua posizione perché altri controlli vengono nascosti o mostrati, puoi utilizzare contenitori con layout automatico affinché gestiscano X e Y.
    • Puoi anche posizionare tutti i controlli in modo logico indipendentemente dai valori dell'espressione. Ad esempio, se il controllo A deve essere sempre sotto il controllo B e B può essere nascosto a volte, imposta Y di A come If(B.Visible, B.Y + B.Height, B.Y + 1). L'aggiunta di 1 garantisce che A sia sempre sotto B, anche se B è nascosto.

Controlli raggruppati

L'ordine predefinito è adatto per il contenuto isolato ma non per il contenuto raggruppato. Considera due riquadri affiancati, disegnati con i controlli Rettangolo. Ogni riquadro ha un'intestazione. Sotto l'intestazione ci sono due pulsanti impilati verticalmente: A e B per il primo riquadro e C e D per l'altro.

Esempio di procedura non corretta: controlli organizzati in una struttura piatta.

L'ordine predefinito è dall'alto al basso e da sinistra a destra. Quindi, l'ordine dei controlli è:

  1. Rettangolo a sinistra
  2. Rettangolo a destra
  3. Intestazione a sinistra
  4. Intestazione a destra
  5. A
  6. C
  7. B
  8. D

Questa struttura non illustra che A e B sono insieme, e allo stesso modo, che C e D sono insieme.

Usa Contenitori per raggruppare i contenuti correlati. Tutti i controlli in un Contenitore appariranno insieme in sequenza. All'interno di un contenitore, i controlli sono ordinati con la stessa regola: dall'alto in basso, quindi da sinistra a destra.

Sostituendo i Rettangoli dell'esempio precedente con Contenitori, l'ordine dei controlli è ora logico per gli utenti dell'utilità per la lettura dello schermo:

  1. Contenitore a sinistra
  2. Intestazione a sinistra
  3. A
  4. B
  5. Contenitore a destra
  6. Intestazione a destra
  7. C
  8. D

Esempio di procedura consigliata: controlli organizzati in una struttura gerarchica utilizzando Contenitori.

Tutti i controlli in un modulo scheda e una raccolta vengono raggruppati automaticamente, quindi non è necessario utilizzare un Contenitore. Tuttavia, se ci sono sottogruppi, dovresti comunque usare i Contenitori per loro.

In questo esempio, una riga Raccolta ha un'anteprima e due parti di testo a sinistra. Sulla destra ci sono due pulsanti. Visivamente e logicamente, i due set di controlli dovrebbero essere raggruppati. Ciò garantisce che gli utenti dell'utilità per la lettura dello schermo incontrino il gruppo di sinistra prima di quello di destra.

Esempio di procedura consigliata: i controlli correlati in una raccolta sono raggruppati all'interno di contenitori.

Ordine logico di navigazione della tastiera

TabIndex specifica come i controlli possono essere raggiunti dagli utenti della tastiera. TabIndex deve essere 0 o -1. Con un ordine dei controlli logico come descritto sopra, ci sono poche ragioni per avere TabIndex maggiore di 0.

L'ordine di navigazione della tastiera deve seguire il flusso visivo dei controlli. Se l'ordine di navigazione è imprevisto, devi prima controllare se la struttura dell'app è logica.

Nota

L'ordine di navigazione della tastiera non è uguale all'ordine dei controlli. TabIndex influisce solo sulla navigazione con i tasti Tab. Non cambia il modo in cui gli utenti dell'utilità per la lettura dello schermo navigano in un'app in modo lineare. Alcuni utenti dell'utilità per la lettura dello schermo non usano nemmeno le tastiere.

Evita gli indici delle schede personalizzati

Gli indici delle schede personalizzati sono quelli maggiori di zero. Sono quasi sempre un segno di una progettazione eseguita male. Esistono alternative migliori come la creazione di una struttura di app appropriata o l'utilizzo di SetFocus per modificare lo stato attivo.

Evita di utilizzare indici di schede personalizzate per i seguenti motivi.

Accessibilità

La presenza di indici di schede personalizzati genera un serio problema di accessibilità. Gli utenti dell'utilità per la lettura dello schermo si spostano all'interno di un'app tramite la sua struttura logica. Gli indici delle schede personalizzati ignorano tale struttura. Poiché gli utenti dell'utilità per la lettura dello schermo possono spostarsi anche con il tasto TAB, saranno confusi quando ottengono un ordine diverso da altri metodi di spostamento.

Usabilità

Gli utenti possono essere confusi quando alcuni elementi sembrano essere ignorati. Possono essere disorientati quando lo stato attivo si sposta in un ordine imprevedibile. Questo è ancora più problematico per gli utenti con disabilità cognitive.

Manutenzione

Gli autori di devono aggiornare manualmente il TabIndex di più controlli ogni volta che ne viene inserito uno nuovo. È facile perdere un aggiornamento o sbagliare l'ordine.

Prestazioni

Per supportare gli indici delle schede personalizzati, il sistema Power Apps deve esaminare tutti i controlli sulla pagina e calcolare l'ordine appropriato. Questo calcolo è un processo intensivo. Controlli Contenitore come Raccolta hanno regole complicate su come TabIndex funziona per i controlli figlio. Il sistema mappa il TabIndex desiderato dell'autore dell'app a un valore diverso per rispettare queste regole. Questo è il motivo per cui anche se TabIndex è impostato su zero per tutti i controlli, l'HTML tabindex effettivo sarà un numero positivo.

Integrazione con altri componenti

Gli indici delle schede personalizzati funzionano solo con i controlli integrati. i controlli che non sono integrati nel sistema di indice delle schede Power Apps avrà un ordine di spostamento imprevisto. Questo può essere un problema per i componenti di codice. Gli sviluppatori di questi componenti devono tener traccia degli elementi interattivi e impostare l'indice delle schede su di essi. Potrebbero utilizzare librerie di terze parti, che potrebbero non fornire neanche un modo per personalizzare gli indici delle schede. D'altra parte, quando tutti gli indici delle schede sono 0 o -1, non è necessario coinvolgere il sistema di indice delle schede di Power Apps. Qualsiasi componente di terze parti incorporato nell'app riceverà automaticamente la sequenza di schede corretta.

Nell'altra direzione, quando le app canvas sono incorporate in un'altra pagina Web, gli indici delle schede personalizzati non funzionano. Ad esempio, nelle pagine personalizzate. Power Apps non può controllare gli elementi esterni all'app canvas, quindi l'ordine di spostamento generale delle schede sarà illogico.

Indice delle schede semplificato (anteprima)

Per fare in modo che gli indici delle schede siano 0 o -1, abilita la funzionalità dell'app Indice delle schede semplificato da Impostazioni > Funzionalità in arrivo.

Abilitazione della funzionalità dell'app Indice scheda semplificato.

Importante

  • Questa è una funzionalità di anteprima.
  • Le funzionalità di anteprima non sono destinate ad essere utilizzate per la produzione e sono soggette a restrizioni. Queste funzionalità sono disponibili prima di una versione ufficiale in modo che i clienti possano ottenere l'accesso iniziale e fornire dei commenti.

Quando questa funzione è abilitata, tutti i valori TabIndex maggiori di zero verranno trattati come zero. Questo disabilita anche il sistema di indice delle schede Power Apps in modo che possa integrarsi meglio con altri componenti, come descritto sopra.

Soluzione alternativa per la sequenza di schede personalizzate

Per rari scenari in cui l'ordine di spostamento della tastiera deve essere diverso dall'ordine degli oggetti visivi, puoi posizionare i controlli Contenitore in modo accurato per ottenere lo stesso effetto.

Nell'esempio seguente, il pulsante A si trova sopra il pulsante B. L'ordine naturale di spostamento delle schede è A, quindi B.

Due pulsanti con lo stesso TabIndex, impilati verticalmente.

Per invertire l'ordine di spostamento delle schede, inserisci B in un controllo Contenitore. Imposta il valore Y di Container su un valore superiore ad A. La struttura dell'app ora ha il contenitore (e B) prima di A. Quindi, l'ordine di spostamento delle schede è B, quindi A.

B viene messo in un contenitore che compare prima di A.

Con questa tecnica, gli utenti dell'utilità per la lettura dello schermo incontreranno anche B prima di A durante lo spostamento senza il tasto TAB.

Passaggi successivi

Colori accessibili in Power Apps

Vedi anche