Windows Dev Center

Implementazione dell'accessibilità da tastiera (XAML)

Stai cercando la versione di questo argomento relativa a HTML/JavaScript? Vedi Implementazione dell'accessibilità da tastiera (HTML).

Per molti utenti con problemi di vista o movimento, la tastiera rappresenta il solo mezzo utile per esplorare l'interfaccia utente delle app e accedere alle funzionalità disponibili. Se l'app non offre funzioni adeguate di accesso da tastiera, questi utenti potrebbero non riuscire a sfruttarne tutte le caratteristiche o non essere in grado di usarla affatto.

Osserva questa funzionalità in azione nella serie sulle funzionalità delle app:  Interazione dell'utente: input tocco... e oltre

Spostamento tra elementi dell'interfaccia utente con la tastiera

Per usare la tastiera con un controllo è necessario che il controllo sia attivato e affinché il controllo riceva lo stato attivo (senza usare un puntatore) è necessario che sia accessibile in un'interfaccia utente che supporta l'esplorazione con il tasto di tabulazione. Per impostazione predefinita, l'ordine di tabulazione dei controlli è identico all'ordine in cui i controlli vengono aggiunti a una superficie di progettazione, elencati in XAML o aggiunti a un contenitore a livello di programmazione.

Nella maggioranza dei casi l'ordine predefinito basato sul modo in cui sono stati definiti i controlli in XAML è il migliore, perché è l'ordine in cui i controlli vengono letti dalle utilità per la lettura dello schermo. Tuttavia l'ordine predefinito non corrisponde necessariamente all'ordine visivo. La posizione di visualizzazione effettiva dipende dal contenitore padre del layout e da alcune proprietà che puoi impostare per gli elementi figlio, in modo da influenzare il layout. Per assicurarti che l'ordine di tabulazione nell'app sia appropriato, puoi testarne il comportamento. Soprattutto nel caso in cui tu abbia una metafora griglia o una metafora tabella per il tuo layout, l'ordine in cui l'utente può leggere rispetto all'ordine della tabella potrebbe variare. In sé, questo non sempre rappresenta un problema. Ricordati però di testare la funzionalità della tua app sia come interfaccia utente touch che come interfaccia utente accessibile da tastiera, e che l'interfaccia utente sia comprensibile in entrambe le modalità.

Puoi fare in modo che l'ordine di tabulazione corrisponda all'ordine visivo correggendo il codice XAML. In alternativa, puoi sovrascrivere l'ordine di tabulazione predefinito impostando la proprietà TabIndex, come mostra l'esempio seguente di un layout Grid che usa un'esplorazione con il tasto di tabulazione che dà priorità alle colonne.


<!--Custom tab order.--> 
<Grid>
  <Grid.RowDefinitions>...</Grid.RowDefinitions>
  <Grid.ColumnDefinitions>...</Grid.ColumnDefinitions>

  <TextBlock Grid.Column="1" HorizontalAlignment="Center">Groom</TextBlock>
  <TextBlock Grid.Column="2" HorizontalAlignment="Center">Bride</TextBlock>

  <TextBlock Grid.Row="1">First name</TextBlock>
  <TextBox x:Name="GroomFirstName" Grid.Row="1" Grid.Column="1" TabIndex="1"/>
  <TextBox x:Name="BrideFirstName" Grid.Row="1" Grid.Column="2" TabIndex="3"/>

  <TextBlock Grid.Row="2">Last name</TextBlock>
  <TextBox x:Name="GroomLastName" Grid.Row="2" Grid.Column="1" TabIndex="2"/>
  <TextBox x:Name="BrideLastName" Grid.Row="2" Grid.Column="2" TabIndex="4"/>
</Grid>

Può anche essere utile escludere un controllo dall'ordine di tabulazione. Per ottenere questo risultato, in genere si procede rendendo il controllo non interattivo, ad esempio impostando la relativa proprietà IsEnabled su false. Un controllo disabilitato viene escluso automaticamente dall'ordine di tabulazione. In alcuni casi, però, è necessario escludere un controllo dall'ordine di tabulazione anche se non è disabilitato. In una situazione di questo tipo, puoi impostare la proprietà IsTabStop su false.

Gli elementi che hanno lo stato attivo di solito sono nell'ordine di tabulazione per impostazione predefinita. L'eccezione è rappresentata dal fatto che alcuni tipi di visualizzazione di testo come RichTextBlock possono avere lo stato attivo in modo da essere accessibili dagli Appunti per la selezione di testo, ma non si trovano nell'ordine di tabulazione perché questo non è previsto per gli elementi di testo statico. Essi non sono interattivi per convenzione (non possono essere invocati e non richiedono input testuale, ma supportano il pattern di controllo testuale per trovare e regolare i punti di selezione nel testo). Non si dovrebbe poter dedurre che l'impostazione dello stato attivo sul testo presente potrebbe abilitare una qualche azione possibile. Gli elementi di testo verranno comunque rilevati dagli strumenti di assistive technology e letti dalle utilità per la lettura dello schermo, ma con tecniche diverse dall'individuazione di questi elementi nell'ordine di tabulazione pratico.

Sia che modifichi i valori di TabIndex, sia che utilizzi l'ordine predefinito, valgono le seguenti regole:

  • Gli elementi dell'interfaccia utente con TabIndex pari a 0 vengono aggiunti all'ordine di tabulazione in base all'ordine negli insiemi XAML o figlio.
  • Gli elementi dell'interfaccia utente con TabIndex maggiore di 0 vengono aggiunti all'ordine di tabulazione in base al valore di TabIndex.
  • Gli elementi dell'interfaccia utente con TabIndex minore di 0 vengono aggiunti all'ordine di tabulazione e compaiono prima di qualsiasi valore zero. Ciò è potenzialmente diverso dalla gestione HTML del suo attributo tabindex (e il tabindex negativo non era supportato nelle specifiche HTML precedenti).

Spostamento all'interno di un elemento dell'interfaccia utente con la tastiera

Per gli elementi compositi è importante assicurare funzionalità di spostamento corrette tra gli elementi interni. Un elemento composito può gestire l'elemento figlio attualmente attivo in modo da ridurre l'overhead derivante dal fatto che tutti gli elementi figlio possono avere lo stato attivo. Un elemento composito di questo tipo è incluso nell'ordine di tabulazione e gestisce autonomamente gli eventi di spostamento da tastiera. Molti controlli compositi usati per un'app di Windows Runtime scritta in C++, C# o Visual Basic includono già logica di spostamento interna incorporata nella gestione degli eventi del controllo. Ad esempio, l'attraversamento di elementi con i tasti di direzione è abilitato per impostazione predefinita per gli elementi di un controllo ItemsControl.

Alternative da tastiera per azioni ed eventi del puntatore per specifici elementi di controllo

Accertati che gli elementi dell'interfaccia utente su cui si può fare clic possano anche essere richiamati con la tastiera. Per poter usare la tastiera con un elemento dell'interfaccia utente, è necessario che tale elemento abbia lo stato attivo. Solo le classi che derivano da Control supportano lo stato attivo e l'esplorazione con il tasto di tabulazione.

Per gli elementi dell'interfaccia utente richiamabili, implementa gestori di eventi da tastiera per i tasti BARRA SPAZIATRICE e INVIO. Ciò rende completo il supporto dell'accessibilità standard da tastiera e consente agli utenti di eseguire scenari di base delle app usando solo la tastiera. In altre parole, gli utenti possono accedere a tutti gli elementi interattivi dell'interfaccia utente e attivarne la funzionalità predefinita.

Se un elemento che vuoi usare nell'interfaccia utente non può avere lo stato attivo, puoi creare un controllo personalizzato. Devi impostare la proprietà IsTabStop su true per abilitare lo stato attivo e devi fornire un'indicazione visiva dello stato di attivazione, creando uno stato visivo che aggiunga un indicatore di stato attivo all'interfaccia utente. Spesso è più facile ricorrere alla composizione del controllo, in modo che il supporto per le posizioni di tabulazione, lo stato attivo, nonché i criteri e i peer di Automazione interfaccia utente Microsoft vengano gestiti dal controllo che sceglierai per comporre il contenuto.

Ad esempio, invece di gestire un evento puntatore premuto su una Image, potresti impacchettare l'elemento in un Button e ottenere così automaticamente il supporto per puntatore, tastiera e stato attivo.


<!--Don't do this.-->
<Image Source="sample.jpg" PointerPressed="Image_PointerPressed"/>

<!--Do this instead.-->
<Button Click="Button_Click"><Image Source="sample.jpg"/></Button>

Tasti di scelta rapida

Oltre a implementare capacità di spostamento e attivazione da tastiera per l'app, è consigliabile implementare tasti di scelta rapida per le sue funzionalità. L'esplorazione con il tasto di tabulazione assicura un buon livello elementare di supporto per la tastiera, tuttavia con i moduli complessi potrebbe essere utile aggiungere anche il supporto per i tasti di scelta rapida. In questo modo potrai rendere più efficiente l'uso della tua applicazione, anche da parte di persone che usano sia la tastiera che i dispositivi di puntamento.

I tasti di scelta rapida sono combinazioni di tasti che consentono di migliorare la produttività offrendo agli utenti un modo efficiente per accedere alle funzionalità dell'app. Esistono due tipi di tasti di scelta rapida:

  • I tasti di accesso sono tasti di scelta rapida per accedere a un elemento dell'interfaccia utente dell'app. I tasti di accesso sono costituiti dal tasto ALT e dal tasto di una lettera.
  • Esistono anche tasti di scelta rapida per i comandi dell'app. La tua app può includere o meno un elemento dell'interfaccia utente che corrisponde esattamente al comando. Questo tipo di tasti di scelta rapida è costituito dal tasto CTRL e dal tasto di una lettera.

È assolutamente necessario offrire agli utenti che si avvalgono di utilità per la lettura dello schermo e di altri tipi di Assistive Technology un modo semplice per trovare i tasti di scelta rapida dell'app. Rendi noti tasti di scelta rapida mediante descrizioni comandi, nomi e descrizioni accessibili o altre forme di comunicazione su schermo. I tasti di scelta rapida dovrebbero quanto meno essere ben documentati nel contenuto della Guida dell'app.

Puoi documentare i tasti di scelta rapida mediante le utilità per la lettura dello schermo, impostando la proprietà associata AutomationProperties.AccessKey su una stringa che descrive il tasto di scelta rapida. Un'altra proprietà associata, AutomationProperties.AcceleratorKey, consente di documentare i tasti di scelta rapida non mnemonici, ma le utilità per la lettura dello schermo trattano in genere queste due proprietà allo stesso modo. Prova a documentare i tasti di scelta rapida in modi diversi, usando descrizioni dei comandi, proprietà di automazione e documentazione scritta della Guida.

L'esempio seguente mostra come documentare i tasti di scelta rapida per i pulsanti di riproduzione, pausa e arresto degli elementi multimediali.


<Grid KeyDown="Grid_KeyDown">

  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
  </Grid.RowDefinitions>

  <MediaElement x:Name="DemoMovie" Source="xbox.wmv" 
    Width="500" Height="500" Margin="20" HorizontalAlignment="Center" />

  <StackPanel Grid.Row="1" Margin="10"
    Orientation="Horizontal" HorizontalAlignment="Center">

    <Button x:Name="PlayButton" Click="MediaButton_Click"
      ToolTipService.ToolTip="Shortcut key: Ctrl+P"
      AutomationProperties.AcceleratorKey="Control P">
      <TextBlock>Play</TextBlock>
    </Button>

    <Button x:Name="PauseButton" Click="MediaButton_Click"
      ToolTipService.ToolTip="Shortcut key: Ctrl+A" 
      AutomationProperties.AcceleratorKey="Control A">
      <TextBlock>Pause</TextBlock>
    </Button>

    <Button x:Name="StopButton" Click="MediaButton_Click"
      ToolTipService.ToolTip="Shortcut key: Ctrl+S" 
      AutomationProperties.AcceleratorKey="Control S">
      <TextBlock>Stop</TextBlock>
    </Button>

  </StackPanel>

</Grid>


Importante  L'impostazione di AutomationProperties.AcceleratorKey o AutomationProperties.AccessKey non abilita le funzionalità della tastiera, ma si limita a segnalare al framework di automazione dell'interfaccia utente i tasti da usare, affinché tale informazione possa essere passata agli utenti tramite Assistive Technology. L'implementazione della gestione dei tasti deve essere eseguita comunque nel codice, non in XAML. Per poter effettivamente implementare il comportamento dei tasti di scelta rapida nell'app, devi comunque collegare i gestori per gli eventi KeyDown o KeyUp nei controlli appropriati. Anche la sottolineatura dei tasti di accesso rapido non viene fornita automaticamente. Se vuoi visualizzare il testo sottolineato nell'interfaccia utente, devi sottolineare esplicitamente il testo corrispondente al tasto specifico nello mnemonico come formattazione Underline in linea.

Per semplicità, nell'esempio precedente viene evitato l'uso di risorse per stringhe come "CTRL+A". È comunque necessario tenere conto dei tasti di scelta rapida durante la localizzazione. La localizzazione dei tasti di scelta rapida è rilevante perché la scelta del tasto da utilizzare dipende generalmente dall'etichetta di testo visibile per l'elemento. Per altre informazioni, vedi Globalizzazione dell'app.

Per altre indicazioni sull'implementazione dei tasti di scelta rapida, vedi la sezione relativa ai tasti di scelta rapida nelle linee guida per l'interazione con l'esperienza utente di Windows.

Implementazione di un gestore di eventi della tastiera

Gli eventi di input come gli eventi della tastiera usano un concetto denominato eventi indirizzati. Un evento indirizzato può eseguire il bubbling tra gli elementi figlio di un controllo composito, in modo che un padre di controllo comune possa gestire gli eventi per più elementi figlio. Questo modello di evento consente di definire le azioni dei tasti di scelta rapida per un controllo che contiene più parti composite che, da progettazione, non possono avere lo stato attivo o far parte dell'ordine di tabulazione.

Per un esempio di codice in cui viene mostrato come scrivere un gestore di eventi della tastiera che include la verifica dei tasti di modifica, come CTRL, vedi Risposta all'input tramite tastiera.

Per altre informazioni di carattere generale sul concetto di eventi indirizzati, vedi Panoramica degli eventi e degli eventi indirizzati.

Esplorazione tramite tastiera per i controlli personalizzati

Ti consigliamo di usare i tasti di direzione per lo spostamento tra gli elementi figlio nei casi in cui gli elementi figlio hanno una relazione particolare tra loro. Se i nodi della visualizzazione ad albero presentano sottoelementi separati per la gestione di eventi di espansione–compressione e di attivazione del nodo, è consigliabile usare i tasti di direzione sinistro e destro per offrire funzionalità di espansione–compressione da tastiera. Se hai un controllo orientato che supporta l'attraversamento direzionale all'interno del contenuto del controllo, usa i tasti direzionali appropriati.

In genere, la gestione dei tasti personalizzati per i controlli personalizzati viene implementata includendo un override dei metodi OnKeyDown e OnKeyUp nella logica di classe.

Esempio di stato visivo per un indicatore di stato attivo

In precedenza abbiamo visto come tutti i controllo personalizzati che possono ricevere lo stato attivo dall'utente debbano disporre di un indicatore visivo di stato attivo. In genere tale indicatore di stato attivo è costituito da un semplice rettangolo disegnato immediatamente attorno al normale rettangolo di delimitazione del controllo. L'elemento Rectangle per l'indicatore visivo di stato attivo è un elemento peer, rispetto al resto della composizione del controllo in un modello di controllo, ma la sua proprietà Visibility è inizialmente impostata su Collapsed, perché il controllo non ha ancora lo stato attivo. Quando in seguito il controllo riceve lo stato attivo, viene richiamato uno stato visivo che imposta esplicitamente la proprietà Visibility dell'indicatore visivo di stato attivo su Visible. Quando lo stato attivo si sposta su un altro controllo, viene chiamato un altro stato visivo e la proprietà Visibility assume il valore Collapsed.

Tutti i controlli XAML predefiniti per Windows Runtime visualizzano un indicatore di stato attivo appropriato quando sono attivi (se ciò è possibile). In base al tema selezionato dall'utente, vi sono anche altri aspetti potenzialmente diversi (soprattutto se l'utente usa una modalità a contrasto elevato). Se usi i controlli XAML nella tua interfaccia utente e non sostituisci i modelli dei controlli, per ottenere indicatori di stato attivo sui controlli che funzionino in maniera corretta non devi eseguire alcuna operazione aggiuntiva. Ma se vuoi modificare il modello di un controllo o vuoi scoprire in che modo i controlli XAML forniscono gli indicatori di stato attivo, leggi il resto della sezione per vedere come ciò accade in XAML e nella logica dei controlli.

Questo è un esempio di codice XAML tratto dal modello XAML predefinito di Windows Runtime per un Button.


<ControlTemplate TargetType="Button">
... 
    <Rectangle 
      x:Name="FocusVisualWhite" 
      IsHitTestVisible="False" 
      Stroke="{ThemeResource FocusVisualWhiteStrokeThemeBrush}" 
      StrokeEndLineCap="Square" 
      StrokeDashArray="1,1" 
      Opacity="0" 
      StrokeDashOffset="1.5"/>
    <Rectangle 
      x:Name="FocusVisualBlack" 
      IsHitTestVisible="False" 
      Stroke="{ThemeResource FocusVisualBlackStrokeThemeBrush}" 
      StrokeEndLineCap="Square" 
      StrokeDashArray="1,1" 
      Opacity="0" 
      StrokeDashOffset="0.5"/>
...
</ControlTemplate>


Finora è stata eseguita solo la composizione. Per controllare la visibilità dell'indicatore di stato attivo, devi definire gli stati visivi che alternano il valore della proprietà Visibility. A tale scopo devi utilizzare la proprietà associata VisualStateManager.VisualStateGroups, applicata all'elemento radice che definisce la composizione.


<ControlTemplate TargetType="Button">
  <Grid>
    <VisualStateManager.VisualStateGroups> 
       <!--other visual state groups here-->
       <VisualStateGroup x:Name="FocusStates"> 
         <VisualState x:Name="Focused"> 
           <Storyboard> 
             <DoubleAnimation 
               Storyboard.TargetName="FocusVisualWhite" 
               Storyboard.TargetProperty="Opacity" 
               To="1" Duration="0"/>
             <DoubleAnimation 
               Storyboard.TargetName="FocusVisualBlack" 
               Storyboard.TargetProperty="Opacity" 
               To="1" Duration="0"/>
         </VisualState> 
         <VisualState x:Name="Unfocused" /> 
         <VisualState x:Name="PointerFocused" /> 
       </VisualStateGroup>
     <VisualStateManager.VisualStateGroups>
<!--composition is here-->
   </Grid>
</ControlTemplate>

Come puoi notare, solo uno degli stati indicati modifica direttamente Visibility, mentre gli altri sembrano vuoti. Appena il controllo utilizza un altro stato dello stesso insieme VisualStateGroup, qualsiasi animazione applicata allo stato precedente viene immediatamente annullata. Poiché il valore predefinito di Visibility per la composizione è Collapsed, il rettangolo non viene visualizzato. La logica di controllo gestisce questo aspetto rimanendo in ascolto degli eventi focus come GotFocus e modificando gli stati con GoToState. Questo comportamento viene spesso gestito automaticamente se si utilizza un controllo predefinito o si esegue una personalizzazione basata su un controllo che implementa già il comportamento. Per ulteriori informazioni sull'uso degli stati di visualizzazione, vedi Animazioni con storyboard per stati di visualizzazione.

Accessibilità da tastiera e Windows Phone

Un dispositivo Windows Phone di solito non ha una tastiera hardware dedicata. Un pannello SIP (Soft Input Panel), tuttavia, può supportare vari scenari di accessibilità da tastiera. Le utilità per la lettura dello schermo possono leggere l'input di testo dal pannello SIP Testo, inclusi gli annunci di eliminazioni. Gli utenti possono scoprire dove si trovano le loro dita, perché l'utilità per la lettura dello schermo è in grado di rilevare che l'utente sta digitalizzando i tasti e legge quindi il nome del tasto digitalizzato. Alcuni dei concetti di accessibilità orientati alla tastiera, inoltre, possono essere mappati ai comportamenti di Assistive Technology correlati che non usano affatto una tastiera. Ad esempio, anche se un pannello SIP non includerà il tasto TAB, Assistente vocale supporta un gesto tocco equivalente alla pressione di TAB, quindi la presenza di un ordine di tabulazione utile per i controlli di un'interfaccia utente è comunque un principio di accessibilità importante. Anche i tasti di direzione usati per gli spostamenti tra le varie parti di controlli complessi sono supportati tramite gesti tocco di Assistente vocale. Quando lo stato attivo raggiunge un controllo non pensato per l'input di testo, Assistente vocale supporta un gesto che richiama l'azione del controllo.

I tasti di scelta rapida in genere non sono rilevanti per le app di Windows Phone perché un pannello SIP non include tasti CTRL o ALT.

Argomenti correlati

Risposta all'input da tastiera
Input: Esempio di tastiera virtuale
Esempio di risposta alla visualizzazione della tastiera su schermo
Esempio di accessibilità XAML
Animazioni nello storyboard per stati di visualizzazione

 

 

Mostra:
© 2015 Microsoft