Chaves de acesso

As teclas de acesso são atalhos de teclado que melhoram a usabilidade e a acessibilidade de seus aplicativos do Windows, fornecendo uma maneira intuitiva para os usuários navegarem e interagirem rapidamente com a interface do usuário visível de um aplicativo por meio de um teclado em vez de um dispositivo ponteiro (como toque ou mouse).

O aplicativo do Windows fornece suporte interno em controles de plataforma para teclas de acesso baseadas em teclado e comentários associados à interface do usuário por meio de dicas visuais chamadas dicas de teclas.

Observação

Um teclado é indispensável para usuários com certas deficiências (consulte Acessibilidade do teclado), e também é uma ferramenta importante para usuários que o preferem como uma maneira mais eficiente de interagir com um aplicativo.

Consulte o tópico Teclas do acelerador para obter detalhes sobre como invocar ações comuns em um aplicativo do Windows com atalhos de teclado.

Para criar seus próprios atalhos de teclado personalizados, consulte o tópico Eventos de teclado.

Visão geral

Uma tecla de acesso é uma combinação da tecla Alt e uma ou mais teclas alfanuméricas — às vezes chamadas de mnemônicas — normalmente pressionadas sequencialmente, em vez de simultaneamente.

As dicas de teclas são selos exibidos ao lado de controles que oferecem suporte a teclas de acesso quando o usuário pressiona a tecla Alt. Cada tecla contém as chaves alfanuméricas que ativam o controle associado.

Observação

Os atalhos de teclado são suportados automaticamente para teclas de acesso com um único caractere alfanumérico. Por exemplo, pressionar simultaneamente Alt+F no Word abre o menu Arquivo sem exibir dicas de teclas.

Pressionar a tecla Alt inicializa a funcionalidade da tecla de acesso e exibe todas as combinações de teclas disponíveis atualmente nas dicas de teclas. Os pressionamentos de tecla subsequentes são manipulados pela estrutura da chave de acesso, que rejeita teclas inválidas até que uma tecla de acesso válida seja pressionada ou as teclas Enter, Esc, Tab ou Seta sejam pressionadas para desativar as teclas de acesso e retornar a manipulação de pressionamento de teclas para o aplicativo.

Os aplicativos do Microsoft Office fornecem amplo suporte para chaves de acesso. A imagem a seguir mostra a guia Página Inicial do Word com as teclas de acesso ativadas (observe o suporte para números e vários pressionamentos de teclas).

Keytip badges for access keys in Microsoft Word

Selos de Dica de Tecla para chaves de acesso no Microsoft Word

Para adicionar uma chave de acesso a um controle, use a propriedade AccessKey. O valor dessa propriedade especifica a sequência de teclas de acesso, o atalho (se for um único alfanumérico) e a dica de tecla.

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

Quando usar as chaves de acesso

Recomendamos que você especifique chaves de acesso sempre que apropriado em sua interface do usuário e ofereça suporte a chaves de acesso em todos os controles personalizados.

  1. As teclas de acesso tornam seu aplicativo mais acessível para usuários com deficiências motoras, incluindo aqueles usuários que podem pressionar apenas uma tecla de cada vez ou têm dificuldade em usar um mouse.

    Uma interface do usuário de teclado bem projetada é um aspecto importante da acessibilidade do software. Ele permite que usuários com deficiência visual ou que tenham certas deficiências motoras naveguem em um aplicativo e interajam com seus recursos. Esses usuários podem não ser capazes de operar um mouse e, em vez disso, dependem de várias tecnologias assistivas, como ferramentas de aprimoramento do teclado, teclados na tela, ampliadores de tela, leitores de tela e utilitários de entrada de voz. Para esses usuários, a cobertura abrangente de comandos é crucial.

  2. As teclas de acesso tornam seu aplicativo mais utilizável para usuários avançados que preferem interagir por meio do teclado.

    Usuários experientes geralmente têm uma forte preferência pelo uso do teclado porque os comandos baseados no teclado podem ser inseridos mais rapidamente e não exigem que eles removam as mãos do teclado. Para esses usuários, eficiência e consistência são cruciais; A abrangência é importante apenas para os comandos mais utilizados.

Definir escopo de chave de acesso

Quando houver muitos elementos na tela que ofereçam suporte a chaves de acesso, recomendamos definir o escopo das teclas de acesso para reduzir a carga cognitiva. Isso minimiza o número de teclas de acesso na tela, o que as torna mais fáceis de localizar, além de melhorar a eficiência e a produtividade.

Por exemplo, o Microsoft Word fornece dois escopos de chave de acesso: um escopo primário para as guias da Faixa de Opções e um escopo secundário para comandos na guia selecionada.

As imagens a seguir demonstram os dois escopos de chave de acesso no Word. O primeiro mostra as chaves de acesso primárias que permitem que um usuário selecione uma guia e outros comandos de nível superior, e o segundo mostra as chaves de acesso secundárias para a guia Página Inicial.

Primary access keys in Microsoft WordChaves de acesso primárias no Microsoft Word

Secondary access keys in Microsoft WordChaves de acesso secundárias no Microsoft Word

As chaves de acesso podem ser duplicadas para elementos em escopos diferentes. No exemplo anterior, "2" é a chave de acesso para Desfazer no escopo primário e também "Itálico" no escopo secundário.

Aqui, mostramos como definir um escopo de chave de acesso.

<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>

Primary access keys for CommandBar

Escopo primário do CommandBar e chaves de acesso com suporte

Secondary access keys for CommandBar

Escopo secundário do CommandBar e chaves de acesso com suporte

Windows 10 Creators Update e versões anteriores

Antes do Windows 10 Fall Creators Update, alguns controles, como o CommandBar, não ofereciam suporte a escopos de chave de acesso internos.

O exemplo a seguir mostra como dar suporte a CommandBar SecondaryCommands com chaves de acesso, que estão disponíveis quando um comando pai é chamado (semelhante à Faixa de Opções no 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;
    }
}

Evite colisões de chaves de acesso

As colisões de chave de acesso ocorrem quando dois ou mais elementos no mesmo escopo têm chaves de acesso duplicadas ou começam com os mesmos caracteres alfanuméricos.

O sistema resolve chaves de acesso duplicadas processando a chave de acesso do primeiro elemento adicionado à árvore visual, ignorando todos os outros.

Quando várias chaves de acesso começam com o mesmo caractere (por exemplo, "A", "A1" e "AB"), o sistema processa a chave de acesso de caractere único e ignora todas as outras.

Evite colisões usando chaves de acesso exclusivas ou comandos de escopo.

Escolher chaves de acesso

Considere o seguinte ao escolher chaves de acesso:

  • Usar um único caractere para minimizar pressionamentos de tecla e dar suporte a teclas de aceleração por padrão (Alt+AccessKey)
  • Evite usar mais de dois caracteres
  • Evite colisões de chaves de acesso
  • Evite caracteres difíceis de diferenciar de outros caracteres, como a letra "I" e o número "1" ou a letra "O" e o número "0"
  • Use precedentes bem conhecidos de outros aplicativos populares, como o Word ("F" para "Arquivo", "H" para "Home" e assim por diante)
  • Use o primeiro caractere do nome do comando ou um caractere com uma associação próxima ao comando que ajuda na recuperação
    • Se a primeira letra já estiver atribuída, use uma letra o mais próxima possível da primeira letra do nome do comando ("N" para Inserir)
    • Use uma consoante distinta do nome do comando ("W" para View)
    • Use uma vogal do nome do comando.

Localizar chaves de acesso

Se seu aplicativo for localizado em vários idiomas, você também deve considerar a localização das chaves de acesso. Por exemplo, para "H" para "Home" em en-US e "I" para "Incio" em es-ES.

Use a extensão x:Uid na marcação para aplicar recursos localizados, conforme mostrado aqui:

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

Os recursos para cada idioma são adicionados às pastas String correspondentes no projeto:

English and Spanish resource string folders

Pastas de cadeia de caracteres de recursos em inglês e espanhol

As chaves de acesso localizadas são especificadas no arquivo resources.resw do projeto:

Specify the AccessKey property specified in the resources.resw file

Especifique a propriedade AccessKey especificada no arquivo resources.resw

Para obter mais informações, consulte Traduzindo recursos da interface do usuário

Posicionamento da tecla

As dicas de tecla são exibidas como emblemas flutuantes em relação ao elemento de interface do usuário correspondente, levando em conta a presença de outros elementos da interface do usuário, outras dicas de tecla e a borda da tela.

Normalmente, o local da dica de tecla padrão é suficiente e fornece suporte interno para a interface do usuário adaptável.

Example of automatic keytip placement

Exemplo de posicionamento automático da tecla

No entanto, se você precisar de mais controle sobre o posicionamento da dica de tecla, recomendamos o seguinte:

  1. Princípio de associação óbvio: O usuário pode associar o controle com a tecla facilmente.

    a. A dica de tecla deve estar próxima ao elemento que tem a chave de acesso (o proprietário).
    b. A dica de tecla deve evitar cobrir elementos habilitados que tenham chaves de acesso.
    c. Se uma dica de tecla não puder ser colocada perto de seu proprietário, ela deverá se sobrepor ao proprietário. 

  2. Descoberta: O usuário pode descobrir o controle com a dica de tecla rapidamente.

    a. A dica de tecla nunca se sobrepõe a outras dicas de teclas.  

  3. Fácil digitalização: O usuário pode passar as teclas facilmente.

    a. as dicas de teclas devem estar alinhadas entre si e com o elemento da interface do usuário. b. As dicas de teclas devem ser agrupadas o máximo possível. 

Posição relativa

Use a propriedade KeyTipPlacementMode para personalizar o posicionamento da dica de tecla por elemento ou por grupo.

Os modos de posicionamento são: Superior, Inferior, Direita, Esquerda, Oculto, Centro e Automático.

Screenshot showing the relative positions of the keytip placement modes

Modos de posicionamento de dicas de tecla

A linha central do controle é usada para calcular o alinhamento vertical e horizontal da ponta da tecla.

O exemplo a seguir mostra como definir o posicionamento da dica de tecla de um grupo de controles usando a propriedade KeyTipPlacementMode de um contêiner StackPanel.

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

Deslocamentos

Use as propriedades KeyTipHorizontalOffset e KeyTipVerticalOffset de um elemento para um controle ainda mais granular do local da dica de chave.

Observação

Os deslocamentos não podem ser definidos quando KeyTipPlacementMode está definido como Auto.

A propriedade KeyTipHorizontalOffset indica até onde mover a dica de tecla para a esquerda ou para a direita.

Screenshot of vertical and horizontal keytip offsets for a button

Definir deslocamentos de tecla verticais e horizontais para um botão

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

Alinhamento da borda da tela {#screen-edge-alignment . ListParagraph}

A localização de uma dica de tecla é ajustada automaticamente com base na borda da tela para garantir que a dica de tecla esteja totalmente visível. Quando isso ocorre, a distância entre o controle e o ponto de alinhamento da tecla pode ser diferente dos valores especificados para os deslocamentos horizontal e vertical.

Screenshot of keytip screen edge alignment

As dicas de teclas são posicionadas automaticamente com base na borda da tela

Estilo da tecla

Recomendamos usar o suporte de tecla integrado para temas de plataforma, incluindo alto contraste.

Se você precisar especificar seus próprios estilos de dica de chave, use recursos do aplicativo, como KeyTipFontSize (tamanho da fonte), KeyTipFontFamily (família de fontes), KeyTipBackground (plano de fundo), KeyTipForeground (primeiro plano), KeyTipPadding (preenchimento), KeyTipBorderBrush (cor da borda) e KeyTipBorderThemeThickness (espessura da borda).

Screenshot of keytip customization options, including font, order, and color

Opções de personalização da dica de tecla

Este exemplo demonstra como alterar esses recursos de aplicativo:

<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>

Teclas de acesso e Narrador

A estrutura XAML expõe Propriedades de Automação que permitem que os clientes de Automação da Interface do Usuário descubram informações sobre elementos na interface do usuário.

Se você especificar a propriedade AccessKey em um controle UIElement ou TextElement, poderá usar a propriedade AutomationProperties.AccessKey para obter esse valor. Os clientes de acessibilidade, como o Narrador, leem o valor dessa propriedade sempre que um elemento recebe foco.

Amostras