Teclas de acesso

As teclas de acesso são atalhos de teclado que melhoram a usabilidade e acessibilidade das suas aplicações Windows, proporcionando uma forma intuitiva para os utilizadores navegarem e interagirem rapidamente com a interface visível de uma aplicação através de um teclado em vez de um dispositivo ponteiro (como o toque ou o rato).

A aplicação para Windows oferece suporte integrado em vários controlos de plataforma, tanto para teclas de acesso baseadas no teclado como para feedback da interface associada através de pistas visuais chamadas keytips.

Consulte o tópico Teclas do Acelerador para detalhes sobre como invocar ações comuns numa aplicação Windows com atalhos de teclado.

Para criar os 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 — por vezes chamadas mnemónicas — normalmente pressionadas sequencialmente, em vez de simultaneamente.

Keytips são emblemas exibidos ao lado dos controlos que suportam teclas de acesso quando o utilizador pressiona a tecla Alt. Cada dica de tecla contém as teclas alfanuméricas que ativam o controlo associado.

Ao pressionar a tecla Alt, inicializa a funcionalidade da tecla de acesso e mostra todas as combinações de teclas atualmente disponíveis nas dicas de teclas. As teclas subsequentes são tratadas pela estrutura de teclas de acesso, que rejeita teclas inválidas até que uma tecla de acesso válida seja pressionada, ou até que as teclas Enter, Esc, Tab ou as teclas de seta sejam pressionadas para desativar as teclas de acesso e devolver o tratamento das teclas para a aplicação.

As aplicações do Microsoft Office oferecem um suporte extenso para chaves de acesso. A imagem seguinte mostra o separador Home do Word com as teclas de acesso ativadas (note o suporte tanto para números como para múltiplos pressionamentos de teclas).

Badges KeyTip para chaves de acesso no Microsoft Word

Para adicionar uma chave de acesso a um controlo, use a propriedade AccessKey. O valor desta 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 chaves de acesso

Recomendamos que especifique chaves de acesso sempre que apropriado na sua interface, e suporte chaves de acesso em todos os controlos personalizados.

1. As teclas de acesso tornam a sua aplicação mais acessível para utilizadores com deficiências motoras, incluindo aqueles que só conseguem pressionar uma tecla de cada vez ou têm dificuldade em usar o rato.

   Uma interface de teclado bem desenhada é um aspeto importante da acessibilidade ao software. Permite que utilizadores com deficiências visuais ou com certas deficiências motoras naveguem numa aplicação e interajam com as suas funcionalidades. Esses utilizadores podem não conseguir operar um rato e, em vez disso, depender de várias tecnologias assistivas, como ferramentas de melhoria de teclado, teclados no ecrã, ampliadores de ecrã, leitores de ecrã e utilidades de entrada por voz. Para estes utilizadores, uma cobertura abrangente de comandos é crucial.

2. As teclas de acesso tornam a sua aplicação mais utilizável para utilizadores avançados que preferem interagir através do teclado.

   Utilizadores experientes têm frequentemente uma forte preferência pelo teclado porque os comandos baseados no teclado podem ser introduzidos mais rapidamente e não exigem que retirem as mãos do teclado. Para estes utilizadores, a eficiência e a consistência são cruciais; A abrangência é importante apenas para os comandos mais usados.

Definir o âmbito da chave de acesso

Quando há muitos elementos no ecrã que suportam chaves de acesso, recomendamos que as chaves de acesso sejam definidas para reduzir a carga cognitiva. Isto minimiza o número de chaves de acesso no ecrã, o que as torna mais fáceis de localizar e melhora a eficiência e a produtividade.

Por exemplo, o Microsoft Word fornece dois escopos de chave de acesso: um escopo principal para os separadores Ribbon e um escopo secundário para comandos no separador selecionado.

As imagens seguintes demonstram os dois escopos de chave de acesso no Word. O primeiro mostra as chaves de acesso primárias que permitem ao utilizador selecionar um separador e outros comandos de topo, e o segundo mostra as chaves de acesso secundárias para o separador Home.

Chaves de acesso primárias no Microsoft Word

Chaves de acesso secundárias no Microsoft Word

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

Aqui, mostramos como definir um âmbito 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>

Âmbito principal do CommandBar e chaves de acesso suportadas

Âmbito secundário CommandBar e chaves de acesso suportadas

Windows 10 Creators Update e versões anteriores

Antes do Windows 10 Fall Creators Update, alguns controlos, como o Command Bar, não suportavam escopos de chave de acesso incorporados.

O exemplo seguinte mostra como suportar os CommandBar SecondaryCommands com chaves de acesso, que estão disponíveis assim que um comando pai é invocado (semelhante ao Ribbon 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;
    }
}

Evitar colisões com chaves de acesso

Colisões de chaves de acesso ocorrem quando dois ou mais elementos no mesmo âmbito 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 carácter (por exemplo, "A", "A1" e "AB"), o sistema processa a chave de acesso de um único carácter e ignora todas as outras.

Evite colisões usando chaves de acesso únicas ou restrição de comandos.

Escolher chaves de acesso

Considere o seguinte ao escolher as chaves de acesso:

• Use um único caractere para reduzir as teclas pressionadas e suportar, por padrão, as teclas de atalho (Alt+TeclaAcesso)
• Evite usar mais de dois caracteres
• Evitar colisões com chaves de acesso
• Evite caracteres difíceis de diferenciar de outros, como a letra "I" e o número "1" ou a letra "O" e o número "0"
• Use precedentes conhecidos de outras aplicações populares como o Word ("F" de "File", "H" de "Home", e assim por diante)
• Use o primeiro carácter do nome do comando, ou um carácter com uma associação próxima ao comando que ajude na recordaçã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 Insert)
  • Use uma consoante distintiva do nome do comando ("W" de View)
  • Use uma vogal do nome do comando.

Localizar chaves de acesso

Se a tua aplicação vai ser localizada em várias línguas, deves também considerar localizar as 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 em marcação para aplicar recursos localizados, como mostrado aqui:

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

Os recursos para cada língua são adicionados às pastas String correspondentes no projeto:

Pastas de strings de recursos em inglês e espanhol

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

Especifique a propriedade AccessKey especificada no ficheiro resources.resw

Para mais informações, consulte Recursos de tradução de UI

Posicionamento da dica de tecla

As dicas de tecla são exibidas como ícones flutuantes em relação ao elemento da interface correspondente, tendo em conta a presença de outros elementos da interface, outras dicas de tecla e o limite do ecrã.

Normalmente, a localização padrão da tecla de atalho é suficiente e oferece suporte nativo para interface adaptativa.

Exemplo de colocação automática de dicas de tecla

No entanto, caso precise de mais controlo sobre o posicionamento das keytips, recomendamos o seguinte:

1. Princípio óbvio de associação: O utilizador pode associar facilmente o controlo à dica de tecla.

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

2. Descoberta: O utilizador pode descobrir rapidamente o controlo com a dica da tecla.

   a. A ponta de tecla nunca sobrepõem-se a outras pontas de tecla.  

3. Digitalização fácil: O utilizador pode percorrer facilmente as dicas das teclas.

   a. as teclas devem estar alinhadas entre si e com o Elemento UI. b) As dicas devem ser agrupadas tanto quanto possível. 

Posição relativa

Utilize a propriedade KeyTipPlacementMode para personalizar a localização da dica de tecla por elemento ou por grupo.

Os modos de posicionamento são: Cima, Baixo, Direita, Esquerda, Oculto, Centro e Auto.

Modos de posição das dicas de tecla

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

O exemplo seguinte mostra como definir o posicionamento das keytips de um grupo de controles usando a propriedade KeyTipPlacementMode de um contentor StackPanel.

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

Compensações

Utilize as propriedades KeyTipHorizontalOffset e KeyTipVerticalOffset de um elemento para um controlo ainda mais granular da localização da dica de tecla.

A propriedade KeyTipHorizontalOffset indica até onde mover o Keytip para a esquerda ou direita.

Defina os deslocamentos verticais e horizontais das teclas para um botão

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

Alinhamento das bordas do ecrã {#alinhamento-das-bordas-do-ecra .ListParagraph}

A localização de uma ponta é ajustada automaticamente com base na borda do ecrã para garantir que a ponta é totalmente visível. Quando isto ocorre, a distância entre o ponto de alinhamento do controlo e da keytip pode diferir dos valores especificados para os deslocamentos horizontais e verticais .

As pontas das teclas são posicionadas automaticamente com base na borda do ecrã

Estilo de dica de tecla

Recomendamos o uso do suporte de keytip incorporado para temas de plataforma, incluindo alto contraste.

Se precisar de especificar os seus próprios estilos de keytips, utilize recursos de aplicação como KeyTipFontSize (tamanho da fonte), KeyTipFontFamily (família de fontes), KeyTipBackground (fundo), KeyTipForeground (primeiro plano), KeyTipPadding (preenchimento), KeyTipBorderBrush (cor da borda) e KeyTipBorderThemeThickness (espessura da borda).

Opções de personalização do atalho de teclado

Este exemplo demonstra como alterar estes recursos de aplicação:

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

Chaves de acesso e Narrador

O framework XAML expõe Propriedades de Automação que permitem aos clientes de Automação UI descobrir informações sobre elementos na interface de utilizador.

Se especificar a propriedade AccessKey num controlo UIElement ou TextElement, pode usar a propriedade AutomationProperties.AccessKey para obter esse valor. Clientes de acessibilidade, como o Narrador, leem o valor desta propriedade sempre que um elemento recebe foco.

Artigos relacionados

• Interações com o teclado
• Aceleradores de teclado

Amostras

• Galeria WinUI