Condividi tramite


Chiavi di accesso

I tasti di scelta sono tasti di scelta rapida che migliorano l'usabilità e l'accessibilità delle applicazioni Windows offrendo agli utenti un modo intuitivo per spostarsi e interagire rapidamente con l'interfaccia utente visibile di un'app tramite una tastiera anziché un dispositivo di puntamento (ad esempio tocco o mouse).

L'app Windows offre supporto integrato per i controlli della piattaforma sia per i tasti di scelta basati su tastiera sia per il feedback dell'interfaccia utente associato tramite segnali visivi denominati suggerimenti tasti di scelta.

Nota

Una tastiera è indispensabile per gli utenti con alcune disabilità (vedere Accessibilità da tastiera) ed è anche uno strumento importante per gli utenti che la considerano un modo più efficiente per interagire con un'app.

Vedere l'argomento Tasti di scelta rapida per dettagli su come richiamare azioni comuni in un un'applicazione Windows con tasti di scelta rapida.

Per creare tasti di scelta rapida personalizzati, vedere l'argomento Eventi da tastiera.

Panoramica

Un tasto di scelta è una combinazione del tasto ALT con uno o più tasti alfanumerici , in genere premuti in sequenza e non simultaneamente.

I suggerimenti tasti di scelta sono badge visualizzati accanto ai controlli che supportano i tasti di scelta quando l'utente preme ALT. Ogni suggerimento tasto di scelta contiene i tasti alfanumerici che attivano il controllo associato.

Nota

I tasti di scelta rapida sono supportati automaticamente per i tasti di scelta con un singolo carattere alfanumerico. Ad esempio, premendo contemporaneamente ALT+F in Word si apre il menu File senza visualizzare i suggerimenti tasti di scelta.

Premendo ALT si inizializza la funzionalità tasto di scelta e si visualizzano tutte le combinazioni di tasti attualmente disponibili nei suggerimenti tasti di scelta. Le sequenze di tasti successive vengono gestite dal framework dei tasti di scelta, che rifiuta i tasti non validi finché non viene premuto un tasto di scelta valido o finché non vengono premuti i tasti INVIO, ESC, TAB o di direzione per disattivare i tasti di scelta e restituire la gestione delle sequenze di tasti all'app.

Le app Microsoft Office forniscono un ampio supporto per i tasti di scelta. L'immagine seguente mostra la scheda Home di Word con i tasti di scelta attivati (si noti il supporto per i numeri e più pressioni di tasti).

Badge di descrizione chiave per le chiavi di accesso in Microsoft Word

Badge dei suggerimenti tasti di scelta in Microsoft Word

Per aggiungere un tasto di scelta a un controllo, usare la proprietà AccessKey. Il valore di questa proprietà specifica la sequenza dei tasti di scelta, il collegamento (se un singolo alfanumerico) e il suggerimento tasto di scelta.

<Button Content="Accept" AccessKey="A" Click="AcceptButtonClick" />

Quando usare i tasti di scelta

È consigliabile specificare tasti di scelta ovunque sia appropriato nell'interfaccia utente e supportarli in tutti i controlli personalizzati.

  1. I tasti di scelta rendono l'app più accessibile agli utenti con disabilità motorie, inclusi gli utenti che possono premere un solo tasto alla volta o che hanno difficoltà a usare un mouse.

    Un'interfaccia utente della tastiera ben progettata è un aspetto importante dell'accessibilità software. Consente agli utenti ipovedenti o con determinate disabilità motorie di navigare in un'app e di interagire con le sue funzionalità. Questi utenti potrebbero non essere in grado di usare un mouse, pertanto usano varie tecnologie assistive come gli strumenti di miglioramento della tastiera, le tastiere su schermo, gli ingrandimenti dello schermo, i lettori su schermo e le utilità di input vocale. Per questi utenti, la copertura completa dei comandi è fondamentale.

  2. I tasti di scelta facilitano l'uso dell'app agli utenti esperti che preferiscono interagire tramite tastiera.

    Gli utenti esperti spesso preferiscono usare la tastiera perché i comandi basati su tastiera possono essere immessi più rapidamente e non richiedono loro di rimuovere le mani dalla tastiera. Per questi utenti, l'efficienza e la coerenza sono fondamentali; la completezza è importante solo per i comandi usati più di frequente.

Impostare l'ambito dei tasti di scelta

Quando sono presenti molti elementi sullo schermo che supportano i tasti di scelta, è consigliabile definire l'ambito dei tasti di scelta per ridurre il carico cognitivo. In questo modo, si riduce al minimo il numero di tasti di scelta sullo schermo, rendendoli più facili da trovare e migliorando l'efficienza e la produttività.

Ad esempio, Microsoft Word fornisce due ambiti dei tasti di scelta: un ambito primario per le schede della barra multifunzione e un ambito secondario per i comandi nella scheda selezionata.

Le immagini seguenti illustrano i due ambiti dei tasti di scelta in Word. La prima mostra i tasti di scelta primari che consentono a un utente di selezionare una scheda e altri comandi di primo livello e la seconda mostra i tasti di scelta secondari per la scheda Home.

Tasti di scelta primari in Microsoft WordTasti di scelta primari in Microsoft Word

Tasti di scelta secondari in Microsoft WordTasti di scelta secondari in Microsoft Word

I tasti di scelta possono essere duplicati per elementi in ambiti diversi. Nell'esempio precedente "2" è il tasto di scelta per Annulla nell'ambito primario e "Corsivo" nell'ambito secondario.

Di seguito viene illustrato come definire l'ambito di un tasto di scelta.

<CommandBar x:Name="MainCommandBar" AccessKey="M" >
    <AppBarButton AccessKey="G" Icon="Globe" Label="Go"/>
    <AppBarButton AccessKey="S" Icon="Stop" Label="Stop"/>
    <AppBarSeparator/>
    <AppBarButton AccessKey="R" Icon="Refresh" Label="Refresh" IsAccessKeyScope="True">
        <AppBarButton.Flyout>
            <MenuFlyout>
                <MenuFlyoutItem AccessKey="A" Icon="Globe" Text="Refresh A" />
                <MenuFlyoutItem AccessKey="B" Icon="Globe" Text="Refresh B" />
                <MenuFlyoutItem AccessKey="C" Icon="Globe" Text="Refresh C" />
                <MenuFlyoutItem AccessKey="D" Icon="Globe" Text="Refresh D" />
            </MenuFlyout>
        </AppBarButton.Flyout>
    </AppBarButton>
    <AppBarButton AccessKey="B" Icon="Back" Label="Back"/>
    <AppBarButton AccessKey="F" Icon="Forward" Label="Forward"/>
    <AppBarSeparator/>
    <AppBarToggleButton AccessKey="T" Icon="Favorite" Label="Favorite"/>
    <CommandBar.SecondaryCommands>
        <AppBarToggleButton Icon="Like" AccessKey="L" Label="Like"/>
        <AppBarButton Icon="Setting" AccessKey="S" Label="Settings" />
    </CommandBar.SecondaryCommands>
</CommandBar>

Chiavi di accesso primarie per CommandBar

Ambito primario di CommandBar e tasti di scelta supportati

Chiavi di accesso secondarie per CommandBar

Ambito secondario CommandBar e tasti di scelta supportati

Windows 10 Creators Update e versioni precedenti

Prima di Windows 10 Fall Creators Update, alcuni controlli, ad esempio CommandBar, non supportavano gli ambiti di tasti di scelta predefiniti.

Nell'esempio seguente viene illustrato come supportare CommandBar SecondaryCommands con tasti di scelta, disponibile quando viene richiamato un comando padre (simile alla barra multifunzione in Word).

<local:CommandBarHack x:Name="MainCommandBar" AccessKey="M" >
    <AppBarButton AccessKey="G" Icon="Globe" Label="Go"/>
    <AppBarButton AccessKey="S" Icon="Stop" Label="Stop"/>
    <AppBarSeparator/>
    <AppBarButton AccessKey="R" Icon="Refresh" Label="Refresh" IsAccessKeyScope="True">
        <AppBarButton.Flyout>
            <MenuFlyout>
                <MenuFlyoutItem AccessKey="A" Icon="Globe" Text="Refresh A" />
                <MenuFlyoutItem AccessKey="B" Icon="Globe" Text="Refresh B" />
                <MenuFlyoutItem AccessKey="C" Icon="Globe" Text="Refresh C" />
                <MenuFlyoutItem AccessKey="D" Icon="Globe" Text="Refresh D" />
            </MenuFlyout>
        </AppBarButton.Flyout>
    </AppBarButton>
    <AppBarButton AccessKey="B" Icon="Back" Label="Back"/>
    <AppBarButton AccessKey="F" Icon="Forward" Label="Forward"/>
    <AppBarSeparator/>
    <AppBarToggleButton AccessKey="T" Icon="Favorite" Label="Favorite"/>
    <CommandBar.SecondaryCommands>
        <AppBarToggleButton Icon="Like" AccessKey="L" Label="Like"/>
        <AppBarButton Icon="Setting" AccessKey="S" Label="Settings" />
    </CommandBar.SecondaryCommands>
</local:CommandBarHack>
public class CommandBarHack : CommandBar
{
    CommandBarOverflowPresenter secondaryItemsControl;
    Popup overflowPopup;

    public CommandBarHack()
    {
        this.ExitDisplayModeOnAccessKeyInvoked = false;
        AccessKeyInvoked += OnAccessKeyInvoked;
    }

    protected override void OnApplyTemplate()
    {
        base.OnApplyTemplate();

        Button moreButton = GetTemplateChild("MoreButton") as Button;
        moreButton.SetValue(Control.IsTemplateKeyTipTargetProperty, true);
        moreButton.IsAccessKeyScope = true;

        // SecondaryItemsControl changes
        secondaryItemsControl = GetTemplateChild("SecondaryItemsControl") as CommandBarOverflowPresenter;
        secondaryItemsControl.AccessKeyScopeOwner = moreButton;

        overflowPopup = GetTemplateChild("OverflowPopup") as Popup;
    }

    private void OnAccessKeyInvoked(UIElement sender, AccessKeyInvokedEventArgs args)
    {
        if (overflowPopup != null)
        {
            overflowPopup.Opened += SecondaryMenuOpened;
        }
    }

    private void SecondaryMenuOpened(object sender, object e)
    {
        //This is not necessary given we are automatically pushing the scope.
        var item = secondaryItemsControl.Items.First();
        if (item != null && item is Control)
        {
            (item as Control).Focus(FocusState.Keyboard);
        }
        overflowPopup.Opened -= SecondaryMenuOpened;
    }
}

Evitare conflitti di tasti di scelta

Si verificano conflitti di tasti di scelta quando due o più elementi nello stesso ambito hanno tasti di scelta duplicati o iniziano con gli stessi caratteri alfanumerici.

Il sistema risolve i tasti di scelta duplicati elaborando il tasto di scelta del primo elemento aggiunto alla struttura ad albero visuale, ignorando tutti gli altri.

Quando più tasti di scelta iniziano con lo stesso carattere (ad esempio, "A", "A1" e "AB"), il sistema elabora il tasto di scelta a singolo carattere e ignora tutti gli altri.

Evitare conflitti usando tasti di scelta univoci o tramite comandi di ambito.

Scegliere i tasti di scelta

Per scegliere i tasti di scelta considerare quanto segue:

  • Usare un singolo carattere per ridurre al minimo le sequenze e supportare i tasti di scelta rapida per impostazione predefinita (ALT+Tasto di scelta)
  • Evitare di usare più di due caratteri
  • Evitare conflitti di tasti di scelta
  • Evitare caratteri difficili da distinguere, ad esempio la lettera "I" e il numero "1" o la lettera "O" e il numero "0"
  • Usare precedenti noti di altre app comuni, ad esempio Word ("F" per "File", "H" per "Home" e così via)
  • Usare il primo carattere del nome del comando o un carattere con un'associazione stretta al comando che favorisce il richiamo
    • Se la prima lettera è già assegnata, usare una lettera il più vicina possibile alla prima lettera del nome del comando ("N" per Inserisci)
    • Usare una consonante distintiva del nome del comando ("Z" per Visualizza)
    • Usare una vocale del nome del comando.

Localizzare i tasti di scelta

Se l'app verrà localizzata in più lingue, valutare la possibilità di localizzare anche i tasti di scelta. Ad esempio, "H" per "Home" in en-US e "I" per "Inicio" in es-ES.

Usare l'estensione x:Uid nel markup per applicare risorse localizzate, come illustrato di seguito:

<Button Content="Home" AccessKey="H" x:Uid="HomeButton" />

Le risorse per ogni lingua vengono aggiunte alle cartelle String corrispondenti nel progetto:

Cartelle string risorse in inglese e spagnolo

Cartelle string risorse in inglese e spagnolo

I tasti di scelta localizzati vengono specificati nel file resources.resw dei progetti:

Specificare la proprietà AccessKey specificata nel file resources.resw

Specificare la proprietà AccessKey specificata nel file resources.resw

Per altre informazioni, vedere Traduzione delle risorse dell'interfaccia utente

Posizionamento dei suggerimenti tasti di scelta

I suggerimenti tasti di scelta vengono visualizzati come badge mobili relativi all'elemento dell'interfaccia utente corrispondente, tenendo conto della presenza di altri elementi dell'interfaccia utente, di altri suggerimenti tasti di scelta e del bordo dello schermo.

In genere, la posizione predefinita del suggerimento tasto di scelta è sufficiente e fornisce supporto integrato per l'interfaccia utente adattiva.

Esempio di posizionamento automatico dei suggerimenti tasti di scelta

Esempio di posizionamento automatico dei suggerimenti tasti di scelta

Tuttavia, se fosse necessario un maggiore controllo sul posizionamento dei suggerimenti tasti di scelta, è consigliabile:

  1. Principio di associazione ovvio: l'utente può associare facilmente il controllo al suggerimento tasto di scelta.

    a. Il suggerimento tasto di scelta deve essere vicino all'elemento che ha il tasto di scelta (il proprietario).
    b. Il suggerimento tasto di scelta deve evitare di coprire gli elementi abilitati con tasti di scelta.
    c. Se non è possibile posizionare un suggerimento tasto di scelta vicino al proprietario, deve sovrapporsi. 

  2. Rilevabilità: l'utente può rilevare rapidamente il controllo con il suggerimento tasto di scelta.

    a. Il suggerimento tasto di scelta non si sovrappone mai ad altri suggerimenti tasti di scelta.  

  3. Analisi semplice: l'utente può scremare facilmente i suggerimenti tasti di scelta.

    a. I suggerimenti tasti di scelta devono essere allineati gli uni agli altri e all'elemento dell'interfaccia utente. b. I suggerimenti tasti di scelta devono essere raggruppati il più possibile. 

Posizione relativa

Usare la proprietà KeyTipPlacementMode per personalizzare la posizione del suggerimento tasto di scelta in base all'elemento o al gruppo.

Le modalità di posizionamento sono: superiore, inferiore, destro, sinistro, nascosto, centrale e auto.

Screenshot che mostra le posizioni relative delle modalità di posizionamento della descrizione chiave

modalità di posizionamento dei suggerimenti tasti di scelta

La linea centrale del controllo viene usata per calcolare l'allineamento verticale e orizzontale del suggerimento tasto di scelta.

L'esempio seguente mostra come impostare il posizionamento del suggerimento tasto di scelta di un gruppo di controlli usando la proprietà KeyTipPlacementMode di un contenitore StackPanel.

<StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" KeyTipPlacementMode="Top">
  <Button Content="File" AccessKey="F" />
  <Button Content="Home" AccessKey="H" />
  <Button Content="Insert" AccessKey="N" />
</StackPanel>

Offset

Usare le proprietà KeyTipHorizontalOffset e KeyTipVerticalOffset di un elemento per un controllo ancora più granulare della posizione del suggerimento tasto di scelta.

Nota

Non è possibile impostare offset quando la proprietà KeyTipPlacementMode è impostata su Auto.

La proprietà KeyTipHorizontalOffset indica di quanto spostare il suggerimento tasto di scelta a sinistra o a destra.

Screenshot degli offset di descrizione comando verticale e orizzontale per un pulsante

Impostare gli offset suggerimento tasto di scelta verticali e orizzontali per un pulsante

<Button
  Content="File"
  AccessKey="F"
  KeyTipPlacementMode="Bottom"
  KeyTipHorizontalOffset="20"
  KeyTipVerticalOffset="-8" />

Allineamento al bordo dello schermo {#screen-edge-alignment .ListParagraph}

La posizione di un suggerimento tasto di scelta viene regolata automaticamente in base al bordo dello schermo per garantire che il suggerimento tasto di scelta sia completamente visibile. In questo caso, la distanza tra il controllo e il punto di allineamento del suggerimento tasto di scelta può differire dai valori specificati per gli offset orizzontali e verticali.

Screenshot dell'allineamento dei bordi della schermata del suggerimento per i tasti

i suggerimenti tasti di scelta vengono posizionati automaticamente in base al bordo dello schermo

Stile suggerimento tasto di scelta

È consigliabile usare il supporto integrato per i suggerimenti tasti di scelta per i temi della piattaforma, incluso il contrasto elevato.

Se è necessario specificare stili di suggerimento tasto di scelta propri, usare risorse dell'applicazione come KeyTipFontSize (dimensioni carattere), KeyTipFontFamily (famiglia di caratteri), KeyTipBackground (background), KeyTipForeground (primo piano), KeyTipPadding (riempimento), KeyTipBorderBrush (colore bordo) e KeyTipBorderThemeThickness (spessore bordo).

Screenshot delle opzioni di personalizzazione della descrizione chiave, tra cui tipo di carattere, ordine e colore

opzioni di personalizzazione suggerimenti tasti di scelta

Questo esempio illustra come modificare queste risorse dell'applicazione:

<Application.Resources>
 <SolidColorBrush Color="DarkGray" x:Key="MyBackgroundColor" />
 <SolidColorBrush Color="White" x:Key="MyForegroundColor" />
 <SolidColorBrush Color="Black" x:Key="MyBorderColor" />
 <StaticResource x:Key="KeyTipBackground" ResourceKey="MyBackgroundColor" />
 <StaticResource x:Key="KeyTipForeground" ResourceKey="MyForegroundColor" />
 <StaticResource x:Key="KeyTipBorderBrush" ResourceKey="MyBorderColor"/>
 <FontFamily x:Key="KeyTipFontFamily">Consolas</FontFamily>
 <x:Double x:Key="KeyTipContentThemeFontSize">18</x:Double>
 <Thickness x:Key="KeyTipBorderThemeThickness">2</Thickness>
 <Thickness x:Key="KeyTipThemePadding">4,4,4,4</Thickness>
</Application.Resources>

Tasti di scelta e assistente vocale

Il framework XAML espone proprietà di automazione che consentono ai client di automazione interfaccia utente di rilevare informazioni sugli elementi nell'interfaccia utente.

Se si specifica la proprietà AccessKey in un controllo UIElement o TextElement, è possibile usare la proprietà AutomationProperties.AccessKey per ottenere questo valore. I client di accessibilità, ad esempio Assistente vocale, leggono il valore di questa proprietà ogni volta che un elemento ottiene lo stato attivo.

Esempi