Interações por teclado

Saiba como projetar e otimizar seus aplicativos Windows para que eles forneçam a melhor experiência possível para usuários de energia do teclado e pessoas com deficiências e outros requisitos de acessibilidade.

Entre dispositivos, a entrada de teclado é uma parte importante da experiência geral de interação do aplicativo Windows. Uma experiência de teclado bem projetada permite que os usuários naveguem de forma eficiente pela interface de usuário do seu aplicativo e acessem todas as suas funcionalidades sem precisar tirar as mãos do teclado.

Padrões de interação comuns são compartilhados entre teclado e gamepad

Neste tópico, nos concentramos especificamente em Windows design de aplicativo para entrada de teclado em computadores. No entanto, uma experiência de teclado bem projetada é importante para dar suporte a ferramentas de acessibilidade, como Windows Narrador, usando teclados de software, como o teclado virtual e o OSK (teclado virtual), e para lidar com outros tipos de dispositivo de entrada, como o gamepad xbox e o controle remoto.

Muitas das diretrizes e recomendações discutidas aqui, incluindo os elementos visuais de foco, as teclas de acesso, e a navegação da interface de usuário, também se aplicam a outros cenários.

NOTA Embora teclados de hardware e software sejam usados para entrada de texto, o foco deste tópico é navegação e interação.

Suporte interno

Ao lado do mouse, o teclado é o periférico mais usado em computadores e, como tal, é parte fundamental da experiência de uso de um computador. Os usuários de computadores esperam uma experiência abrangente e consistente, tanto do sistema como dos aplicativos individuais, da resposta às entradas por teclado.

Todos os controles UWP incluem suporte interno para experiências de teclado avançadas e interações de usuário, enquanto a plataforma em si oferece uma base extensa para a criação de experiências de teclado que você considere mais apropriadas tanto para os controles personalizados como para o aplicativo.

A UWP suporta teclado para qualquer dispositivo

Experiências básicas

Como foi mencionado anteriormente, dispositivos de entrada como o gamepad do Xbox e o controle remoto, e ferramentas de acessibilidade como o Narrador, compartilham boa parte da experiência de entrada por teclado para a navegação e comandos. Essa experiência mútua entre tipos e ferramentas de entrada minimizam o seu trabalho extra e contribuem para o objetivo "crie uma vez, execute em qualquer lugar" da Plataforma Universal do Windows.

Quando necessário, identificaremos as principais diferenças que você deve estar ciente e descreveremos quaisquer mitigações que você deve considerar.

Aqui estão os dispositivos e ferramentas discutidos neste tópico:

Dispositivo/ferramenta	Descrição
Teclado (hardware e software)	Além do teclado de hardware padrão, Windows aplicativos dão suporte a dois teclados de software: o teclado virtual (ou software) e o teclado virtual.
Gamepad e controle remoto	O gamepad do Xbox e o controle remoto são dispositivos de entrada fundamentais para a experiência de 3 metros. Para obter detalhes específicos sobre Windows suporte para gamepad e controle remoto, consulte as interações gamepad e controle remoto.
Leitores de tela (Narrador)	O Narrador é um leitor de tela interno para Windows que oferece experiências de interação e funcionalidade exclusivas, mas que ainda depende da navegação e da entrada básica por teclado. Para obter detalhes sobre o Narrador, consulte Introdução ao Narrador.

Experiências personalizadas e uso eficiente do teclado

Conforme mencionado, o suporte ao teclado é essencial para garantir que os aplicativos funcionem bem para usuários com habilidades e expectativas diferentes. Recomendamos que você priorize o seguinte.

• Ofereça suporte à interação e à navegação por teclado
  • Certifique-se de que itens acionáveis sejam identificados como paradas de tabulação (e de que itens não acionáveis não o sejam) e a ordem de navegação seja lógica e previsível (consulte Paradas de tabulação)
  • Defina o elemento mais lógico como o foco inicial (consulte Foco inicial)
  • Forneça navegação por setas para "navegações internas" (consulte Navegação)
• Ofereça suporte a atalhos de teclado
  • Forneça teclas de aceleração para ações rápidas (consulte Aceleradores)
  • Fornecer chaves de acesso para navegar pela interface do usuário do aplicativo (consulte chaves do Access)

Elementos visuais de foco

A UWP oferece suporte a um design visual de foco único que funciona bem para todos os tipos e experiências de entrada.

Um visual de foco:

• É mostrado quando elemento da interface usuário recebe o foco a partir de um teclado e/ou gamepad/controle remoto
• É renderizado como uma borda realçada em torno do elemento da interface de usuário para indicar que uma ação pode ser executada
• Ajuda o usuário a navegar pela interface de usuário do aplicativo sem se perder
• Pode ser personalizado para seu aplicativo (ver visuais de foco de alta visibilidade)

OBSERVAÇÃO O foco visual UWP não é o mesmo que o foco retangular do Narrador.

Paradas de tabulação

Para usar um controle (incluindo os elementos de navegação) com o teclado, o controle precisa ter foco. Uma maneira de um controle receber o foco do teclado é torná-lo acessível por meio da navegação por guia, identificando-o como uma parada de tabulação na ordem de tabulação do aplicativo.

Para que um controle seja incluído na ordem de tabulação, a propriedade IsEnabled deve ser definida como true e a propriedade IsTabStop deve ser definida como true.

Para excluir especificamente um controle da ordem de tabulação, defina a propriedade IsTabStop comofalse.

Por padrão, a ordem de tabulação reflete a ordem na qual elementos da interface de usuário são criados. Por exemplo, se um StackPanel contém um Button, uma Checkbox, e uma TextBox, a ordem de tabulação é Button, Checkbox, e TextBox.

Você pode substituir a ordem de tabulação padrão definindo a propriedade TabIndex.

A Ordem de tabulação deve ser previsível e lógica

Um modelo de navegação por teclado bem projetado, usando uma ordem de tabulação previsível e lógica, torna seu aplicativo mais intuitivo e ajuda os usuários a explorar, descobrir e acessar as funcionalidades de forma mais eficiente e efetiva.

Todos os controles interativos devem ter paradas de tabulação (a menos que estejam em um grupo), enquanto controles não interativos, como rótulos, não devem.

Evite uma ordem de tabulação personalizada que faz com que o foco fique saltando em seu aplicativo. Por exemplo, uma lista de controles em um formulário deve ter uma ordem de tabulação que flui de cima para baixo e da esquerda para a direita (dependendo da localidade).

Consulte a acessibilidade do teclado para obter mais detalhes sobre como personalizar paradas de tabulação.

Tente coordenar a ordem de tabulação e a ordem visual

A coordenação da ordem de tabulação e da ordem visual (também conhecida como ordem de leitura ou ordem de exibição) ajuda a reduzir a confusão para os usuários à medida que eles navegam pela interface do usuário do aplicativo.

Experimente classificar e apresentar os comandos, controles e conteúdos mais importantes primeiro na ordem de tabulação e na ordem visual. No entanto, a posição de exibição real pode depender do recipiente do layout pai e de certas propriedades dos elementos filho que influenciam o layout. Especificamente, layouts que usam uma metáfora de grade ou uma metáfora de tabela podem ter uma ordem visual bem diferente da ordem de tabulação.

OBSERVAÇÃO A ordem visual também depende do local e do idioma.

Foco inicial

O foco inicial especifica o elemento da interface de usuário que recebe o foco quando um aplicativo ou uma página é iniciada ou ativada pela primeira vez. Ao usar um teclado, é a partir desse elemento que um usuário começa a interagir com a interface do usuário do aplicativo.

Para aplicativos UWP, o foco inicial é definido para o elemento com o maior TabIndex que pode receber foco. Elementos filho de controles do recipiente são ignorados. No case de empate, o primeiro elemento na árvore visual recebe o foco.

Definir o foco inicial para o elemento mais lógico

Defina o foco inicial para o elemento da interface de usuário com a primeira ação, ou ação primária, que os usuários provavelmente executarão ao iniciar o aplicativo ou navegar pela página. Alguns exemplos incluem:

• Um aplicativo de fotos, onde o foco é definido como o primeiro item em uma galeria
• Um aplicativo de música, onde o foco é definido como o botão Reproduzir

Não defina o foco inicial em um elemento que expõe um resultado potencialmente negativo ou mesmo desastroso

Esse nível de funcionalidade deve ser a escolha do usuário. Definir o foco inicial para um elemento com um resultado significativo pode resultar em perda não intencional de dados ou acesso ao sistema. Por exemplo, não defina o foco para o botão excluir ao navegar até um email.

Consulte a navegação do Foco para obter mais detalhes sobre a ordem de substituição da guia.

Navegação

A navegação por teclado é geralmente suportada através da tecla Tab e das teclas de seta.

Por padrão, os controles UWP seguem esses comportamentos de teclado básicos:

• Tecla Tab navegar entre controles acionáveis/ativos na ordem de tabulação.
• Shift + Tab navegar entre controles em ordem de tabulação reversa. Se o usuário navegou dentro do controle usando a tecla de seta, o foco é definido para o último valor conhecido dentro do controle.
• Teclas de seta expor a "navegação interna" com controles específicos quando o usuário inicia a "navegação interna", teclas de seta não permitem a navegação fora de um controle. Alguns exemplos incluem:
  • A tecla de seta para cima/seta para baixo move o foco para dentro ListView e MenuFlyout
  • Modificar valores selecionados no momento para Slider e RatingsControl
  • Mover o cursor para dentro TextBox
  • Expandir/recolher itens dentro TreeView

Use esses comportamentos padrão para otimizar a navegação do teclado do aplicativo.

Usar a "navegação interna" com conjuntos de controles relacionados

Fornecer navegação de tecla de direção em um conjunto de controles relacionados reforça sua relação dentro da organização geral da interface do usuário do aplicativo.

Por exemplo, o controle ContentDialog mostrado aqui fornece navegação interna por padrão para uma linha horizontal de botões (para controles personalizados, consulte a seção Grupo de Controles).

A interação com um conjunto de botões relacionados se torna mais fácil com a navegação pelas teclas de seta

Se os itens são exibidos em uma única coluna, as setas Para cima/Para baixo navegam pelos itens. Se os itens são exibidos em uma única linha, as setas Direita/Esquerda navegam pelos itens. Se os itens são várias colunas, todas as 4 teclas de seta fazem a navegação.

Definir uma única parada de tabulação para uma coleção de controles relacionados

Ao definir uma única parada de tabulação para uma coleção de controles relacionados ou complementares, você pode minimizar o número de paradas gerais de tabulação em seu aplicativo.

Por exemplo, as imagens a seguir mostram dois controles ListView empilhados. A imagem à esquerda mostra a navegação por teclas de seta, usada com uma parada de tabulação para navegar entre controles ListView, enquanto a imagem da direita mostra como a navegação entre elementos filho pode ser mais fácil e mais eficiente através da eliminação da necessidade de percorrer os controles pai com a tecla tab.

A interação com dois controles ListView empilhados pode ser mais fácil e eficiente através da eliminação da parada de tabulação, navegando apenas através das teclas de seta.

Visite a seção Grupo de Controles para aprender como aplicar os exemplos de otimização na interface de usuário do seu aplicativo.

Interação e comandos

Uma vez que um controle tem o foco, um usuário pode interagir com ele e invocar qualquer funcionalidade associada utilizando entradas por teclado específicas.

Entrada de texto

Para os controles especificamente projetados para entrada de texto, como o TextBox e o RichEditBox, toda entrada por teclado é usada para inserir texto ou navegar por ele, garantindo prioridade sobre outros comandos do teclado. Por exemplo, o menu suspenso para um controle AutoSuggestBox não reconhece a tecla Espaço como um comando de seleção.

Tecla de espaço

Quando não estiver em modo de entrada de texto, a tecla Espaço invoca a ação ou comando associado ao controle em foco (da mesma forma que um toque no touch ou um clique com um mouse).

Tecla Enter

A tecla Enter pode executar uma variedade de interações comuns do usuário, dependendo do controle com foco:

• Ativa controles de comando, como um Button ou um Hyperlink. Para evitar a confusão do usuário final, a tecla Enter também ativa controles que se parecem com controles de comando, como o ToggleButton ou o AppBarToggleButton.
• Exibe a interface de seleção para controles como o ComboBox e o DatePicker. A tecla Enter também confirma e fecha a interface de seleção.
• Ativa controles de lista como o ListView, o GridView e o ComboBox.
  • A tecla Enter executa a ação de seleção da mesma forma que a tecla Espaço para itens de lista e grade, a menos que exista uma ação adicional associada a esses itens (abrir uma nova janela).
  • Se uma ação adicional está associada ao controle, a tecla Enter executa a ação adicional e a tecla Espaço realiza a ação de seleção.

OBSERVAÇÃO As teclas Enter e Espaço nem sempre executam a mesma ação, mas geralmente sim.

Tecla Esc

A tecla Esc permite ao usuário cancelar a interface de usuário temporária (juntamente com todas as ações em andamento nessa interface).

Exemplos dessa experiência incluem:

• O usuário abre um ComboBox com um valor selecionado e usa as teclas de seta para mover a seleção de foco para um novo valor. Pressionar o tecla Esc fecha o ComboBox e redefine o valor selecionado de volta para o valor original.
• O usuário invoca uma ação de exclusão permanente para um e-mail e recebe o aviso para confirmar a ação através de um ContentDialog. O usuário decide que essa não é a ação desejada e pressiona a tecla Esc para fechar a caixa de diálogo. Como a tecla Esc está associada ao botão Cancelar, a caixa de diálogo é fechada e a ação é cancelada. A tecla Esc afeta somente a interface de usuário temporária, ela não fecha, ou retorna a navegação, na interface do aplicativo.

Teclas Home e End

As teclas Home e End permitem que um usuário vá rapidamente até o início ou final de uma região da interface de usuário.

Exemplos dessa experiência incluem:

• Para os controles ListView e GridView, a tecla Home move o foco para o primeiro elemento e o coloca em exibição, enquanto a tecla End move o foco para o último elemento, também colocando-o em exibição.
• Para um controle ScrollView, a tecla Home rola até a parte superior da região, enquanto a tecla End rola até a parte inferior (o foco não é alterado).

Teclas Page up e Page down

As teclas Page permitem ao usuário rolar pela região da interface de usuário através de incrementos discretos.

Por exemplo, para os controles ListView e GridView, a tecla Page up sobe a visualização da região em uma "página" (normalmente a altura do visor) e move o foco para a parte superior da região. Alternativamente, a tecla Page down abaixa a visualização da região em uma página e move o foco para a parte inferior da região.

Atalhos do teclado

Os atalhos de teclado podem facilitar o uso do aplicativo fornecendo suporte aprimorado para acessibilidade e eficiência aprimorada para usuários de teclado.

Além de dar suporte à navegação e ativação do teclado em seu aplicativo, também é uma boa prática fornecer atalhos para a funcionalidade do aplicativo. A navegação de tabulação fornece um bom nível básico de suporte ao teclado, mas com uma interface do usuário mais complexa, talvez você também queira adicionar suporte para teclas de atalho.

Um atalho é uma combinação de teclas que aumenta a produtividade, oferecendo uma maneira eficiente para o usuário acessar as funcionalidades do aplicativo. Existem dois tipos de atalho:

• Aceleradores são atalhos que invocam um comando de aplicativo. Seu aplicativo pode ou não fornecer uma interface do usuário específica que corresponda ao comando. Os aceleradores normalmente consistem na tecla Ctrl mais uma chave de letra.
• As chaves de acesso são atalhos que definem o foco para a interface do usuário específica em seu aplicativo. As chaves de acesso normalmente consistem na chave Alt mais uma chave de letra.

Fornecer atalhos de teclado consistentes que dão suporte a tarefas semelhantes entre aplicativos torna-os muito mais úteis e poderosos e ajuda os usuários a se lembrarem deles.

Aceleradores

Os aceleradores ajudam os usuários a executar ações comuns em um aplicativo de forma muito mais rápida e eficiente.

Exemplos de aceleradoras:

• Pressionar Ctrl + N key em qualquer lugar no aplicativo Email inicia um novo item de email.
• Pressionar a tecla Ctrl + E em qualquer lugar do Microsoft Edge (e muitos aplicativos Microsoft Store) inicia a pesquisa.

As aceleradoras possuem as seguintes características:

• Eles usam principalmente as sequências de teclas Ctrl e Function (Windows teclas de atalho do sistema também usam teclas Alt + não alfanuméricas e a tecla de logotipo Windows).
• Elas são atribuídas apenas a comandos usados mais comumente.
• Elas devem ser memorizadas e estão documentadas apenas em menus, dicas de ferramentas e na Ajuda.
• Eles têm efeito em todo o aplicativo, quando há suporte.
• Eles devem ser atribuídos de forma consistente à medida que são memorizados e não documentados diretamente.

Chaves de acesso

Consulte a página Teclas de acesso para obter informações mais detalhadas sobre o suporte às teclas de acesso na UWP.

As teclas de acesso ajudam os usuários com deficiências motoras e aqueles capazes de pressionar apenas uma tecla por vez para agir sobre um item específico da interface de usuário. Além disso, as teclas de acesso podem ser usadas para comunicar teclas de atalho adicionais, ajudando usuários avançados a executar ações mais rapidamente.

As teclas de acesso possuem as seguintes características:

• Elas usam a tecla Alt, mais uma tecla alfanumérica.
• Elas são principalmente para acessibilidade.
• Eles são documentados diretamente na interface do usuário, adjacentes ao controle, por meio de Dicas de chave.
• Elas afetam apenas a janela atual, navegando ao menu de itens ou controle correspondente.
• As chaves de acesso devem ser atribuídas de forma consistente a comandos comumente usados (especialmente botões de confirmação), sempre que possível.
• Elas são localizadas.

Atalhos de teclado comuns

A tabela a seguir é uma pequena amostra de atalhos de teclado usados com frequência.

Ação	Comando de teclas
Selecionar tudo	Ctrl+A
Selecionar continuamente	Shift+Tecla de seta
Salvar	Ctrl+S
Localizar	Ctrl+F
Imprimir	Ctrl+P
Copiar	Ctrl+C
Recortar	Ctrl+X
Colar	Ctrl+V
Desfazer	Ctrl+Z
Próxima guia	Ctrl+Tab
Fechar guia	Ctrl+F4 ou Ctrl+W
Zoom Semântico	Ctrl++ ou Ctrl+-

Para obter uma lista abrangente de atalhos do sistema Windows, consulte atalhos de teclado para Windows. Para atalhos comuns de aplicativo, consulte atalhos de teclado para aplicativos da Microsoft.

Experiências avançadas

Nesta seção, vamos discutir algumas das experiências de interação por teclado mais complexas compatíveis com aplicativos UWP, junto com alguns comportamentos que você deve conhecer para quando o aplicativo é usado em dispositivos diferentes e com ferramentas diferentes.

Grupo de controle

Você pode agrupar um conjunto de controles relacionados, ou complementares, em um "grupo de controles" (ou área direcional), o que permite a "navegação interna" usando as teclas de seta. O grupo de controles pode ser uma única parada de tabulação, ou você pode especificar várias paradas de tabulação dentro do grupo de controles.

Navegação por teclas de seta

Os usuários esperam suporte para navegação com teclas de seta quando existe um grupo de controles semelhantes, relacionados, em uma região da interface de usuário:

• AppBarButtons em um CommandBar
• ListItemsou dentro ListView ou GridItemsGridView
• Buttons Dentro ContentDialog

Os controles UWP suportem a navegação pelas setas por padrão. Para layouts personalizados e grupos de controles, use XYFocusKeyboardNavigation="Enabled" para fornecer um comportamento semelhante.

Considere adicionar suporte para navegação de tecla de direção ao usar os seguintes controles:

Botões de caixa de diálogo RadioButtons

AppBarButtons ListItems e GridItems

Paradas de tabulação

Dependendo da funcionalidade e do layout do aplicativo, a melhor opção de navegação para um grupo de controle pode ser uma única parada de tabulação com navegação de seta para elementos filho, várias paradas de tabulação ou alguma combinação.

Usar várias paradas de tabulação e as teclas de seta para botões

Os usuários de acessibilidade dependem de regras de navegação por teclado bem estabelecidas, que normalmente não usa as teclas de seta para navegar por uma coleção de botões. No entanto, os usuários sem deficiências visuais podem achar que o comportamento natural.

Um exemplo de comportamento UWP padrão neste caso é o ContentDialog. Enquanto as teclas de seta podem ser usadas para navegar entre os botões, cada botão também é uma parada de tabulação.

Atribuir parada de tabulação única para padrões da interface de usuário familiares

Em casos onde o layout segue um padrão de interface de usuário conhecido para grupos de controles, atribuir uma única parada de tabulação ao grupo pode melhorar a eficiência da navegação para os usuários.

Os exemplos incluem:

• RadioButtons
• Múltiplos ListViews que se parecem e se comportam como um único ListView
• Qualquer interface de usuário feita para se parecer e se comportar como grade de blocos (como os blocos do menu Iniciar)

Especificando o comportamento do grupo de controles

Use os seguintes APIs para dar suporte ao comportamento personalizado do grupo de controles (todos serão abordados com mais detalhes neste tópico mais adiante):

• XYFocusKeyboardNavigation habilita a navegação por setas entre os controles
• TabFocusNavigation indica se existem várias paradas de tabulação ou apenas uma
• FindFirstFocusableElement e FindLastFocusableElement definem o foco sobre o primeiro item através da tecla Home e sobre o último item através da tecla End, respectivamente

A imagem a seguir mostra um comportamento de navegação por teclado intuitivo para um grupo de controles de botões de rádio associados. Nesse caso, recomendamos uma única parada de tabulação para o grupo de controles, navegação interna entre os botões de rádio através das teclas de seta, tecla Home associada ao primeiro botão, e tecla End associada ao último botão.

Teclado e o Narrador

O Narrador é uma ferramenta de acessibilidade da interface de usuário voltada para os usuários do teclado (também há suporte para outros tipos de entrada). No entanto, as funcionalidades do Narrador excedem as interações por teclado compatíveis com aplicativos UWP, sendo necessário o cuidado extra ao projetar seu aplicativo UWP para o Narrador. (A página Noções básicas do Narrador o orientará durante a experiência de usuário do Narrador.)

Algumas das diferenças entre os comportamentos de teclado UWP e aqueles suportados pelo Narrador incluem:

• Combinações extras de teclas para a navegação, para elementos da interface de usuário que não são expostos através da navegação por teclado padrão, como o Caps lock + teclas de seta para leitura dos rótulos dos controles.
• Navegação para itens desativados. Por padrão, os itens desativados não são expostos através da navegação por teclado padrão.
• Controle "visualizações" para navegação mais rápida com base na granularidade da interface de usuário. Os usuários podem navegar para itens, caracteres, palavras, linhas, parágrafos, links, títulos, tabelas, marcos e sugestões. A navegação por teclado padrão expõe esses objetos como uma lista simples, o que pode tornar a navegação complicada, a menos que você ofereça teclas de atalho.

Estudo de caso – controle AutoSuggestBox

O botão de pesquisa para o AutoSuggestBox não está acessível através da navegação por teclado padrão usando a tecla tab e as setas, pois o usuário pode pressionar a tecla Enter para enviar a consulta de pesquisa. No entanto, ele está acessível através do Narrador, quando o usuário pressiona Caps Lock + uma tecla de seta.

Com o teclado, os usuários pressionamtheEnterkeypara enviar consulta de pesquisa

Com Narrador, os usuários pressionam a tecla Enter para enviar a consulta de pesquisa

Com Narrador, os usuários também podem acessar o botão de pesquisa usando a tecla Caps Lock + Seta para a direita e pressionar a tecla Space

O teclado e o gamepad do Xbox e controle remoto

Os gamepads do Xbox e os controles remotos suportam diversas experiências e comportamentos de teclado UWP. No entanto, devido à falta das várias opções de teclas disponíveis em um teclado, o gamepad e o controle remoto carecem de muitas otimizações do teclado (o controle remoto é ainda mais limitado que o gamepad).

Consulte as interações de gamepad e controle remoto para obter mais detalhes sobre o suporte UWP para entrada de controle remoto e gamepad.

Veja a seguir algum mapeamentos de teclas entre teclado, gamepad e controle remoto.

Teclado	Gamepad	Controle remoto
Space	Botão A	Botão de seleção
Digite	Botão A	Botão de seleção
Escape	Botão B	Botão Voltar
Home/End	N/D	N/D
Page Up/Down	RT e LT para rolagem vertical, RB e LB para rolagem horizontal	N/D

Algumas diferenças importantes que você deve conhecer ao projetar seu aplicativo UWP para uso com gamepad e controle remoto incluem:

• Entrada de texto requer que o usuário pressione A para ativar um controle de texto.

• Navegação por foco não está limitada aos grupos de controles, os usuários podem navegar livremente para qualquer elemento focalizável da interface de usuário no aplicativo.

  OBSERVAÇÃO O foco pode se mover para qualquer elemento da interface na direção desejada a menos que esteja em uma interface de usuário de sobreposição ou que o envolvimento do foco esteja especificado, o que impede que o foco entre/saia da região até que o botão A seja ativado/desativado. Para obter mais informações, consulte a seção navegação direcional.

• O D-pad e os botões do joystick esquerdo são usados para mover o foco entre controles e para navegação interna.

  OBSERVAÇÃO O gamepad e o controle remoto navegam apenas para itens que estão na mesma ordem visual que a tecla direcional pressionada. A navegação é desabilitada naquela direção quando não existe um elemento subsequente que possa receber o foco. Dependendo da situação, os usuários de teclado nem sempre têm essa restrição. Consulte a seção Otimização de teclado integrada para obter mais informações.

Navegação direcional

A navegação direcional é gerenciada pela classe auxiliar Gerenciador de Foco, que analisa a tecla direcional pressionada (tecla de seta, D-pad) e tenta mover o foco na direção visual correspondente.

Ao contrário do teclado, quando um aplicativo opta por sair do Modo do Mouse, a navegação direcional é aplicada em todo o aplicativo para gamepad e controle remoto. Consulte as interações de controle remoto e gamepad para obter mais detalhes sobre a otimização de navegação direcional.

OBSERVAÇÃO A navegação usando a tecla Tab do teclado não é considerada navegação direcional. Para obter mais informações, consulte a seção Paradas de tabulação.

Navegação direcional com suporte Usando teclas direcionais (setas de teclado, gamepad e controle remoto D-pad), o usuário pode navegar entre controles diferentes.

Navegação direcional sem suporte O usuário não pode navegar entre controles diferentes usando chaves direcionais. Outros métodos de navegação entre controles (tecla tab) não são afetados.

Otimização de teclado integrada

Dependendo do layout e controles usados, aplicativos UWP podem ser otimizados especificamente para entrada por teclado.

O exemplo a seguir mostra um grupo de itens de lista, itens de grade e itens de menu que foram atribuídos a uma única parada de tabulação (consulte a seção Paradas de tabulação). Quando o grupo tem o foco, a navegação interna é realizada com as teclas direcionais de seta na ordem visual correspondente (consulte a seção Navegação).

Navegação de tecla de seta de coluna única

Navegação de tecla de seta de linha única

Navegação por Setas em Colunas/Linhas Múltiplas

Envolvendo Itens Homogêneos de Exibição de Lista e Grade

A navegação direcional nem sempre é a maneira mais eficiente para navegar entre os itens List e GridView de várias linhas e colunas.

OBSERVAÇÃO Itens de menu são, normalmente, listas de coluna única, mas regras especiais de foco podem se aplicar em alguns casos (consulte interface de usuário do pop-up).

Objetos de lista e grade podem ser criados com várias linhas e colunas. Eles normalmente estão nas ordens linha-principal (onde os itens preenchem primeiro toda uma linha antes de mover para a próxima) ou coluna-principal (onde os itens preenchem toda uma coluna antes de mover para a próxima coluna). As ordens de linha ou coluna principal dependem da direção de rolagem e você deve garantir que a ordem dos itens não entre em conflito com essa direção.

Na ordem linha-principal (onde os itens preenchem da esquerda para direita, de cima para baixo), quando o foco está no último item de uma linha e a seta Direita é pressionada, o foco é movido para o primeiro item da próxima linha. Esse mesmo comportamento ocorre na ordem inversa: quando o foco for definido para o primeiro item em uma linha e a seta Esquerda for pressionada, o foco é movido para o último item da linha anterior.

Na ordem coluna-principal (onde os itens preenchem de cima para baixo, da esquerda para a direita), quando o foco está no último item de uma coluna e o usuário pressiona a seta Para baixo, o foco é movido para o primeiro item da próxima coluna. Esse mesmo comportamento ocorre na ordem inversa: quando o foco for definido para o primeiro item em uma coluna e a seta Para cima for pressionada, o foco é movido para o último item da coluna anterior.

Navegação de teclado principal de linha

Navegação por teclado na ordem coluna principal

Interface de usuário pop-up

Conforme mencionado, você deve tentar garantir que a navegação direcional corresponda à ordem visual dos controles na interface do usuário do aplicativo.

Alguns controles (como o menu de contexto, o menu estouro commandbar e o menu AutoSuggest) exibem um pop-up de menu em um local e direção (para baixo por padrão) em relação ao controle primário e ao espaço de tela disponível. Observe que a direção de abertura pode ser afetada por uma variedade de fatores em tempo de execução.

Para esses controles, quando o menu é aberto pela primeira vez (e nenhum item foi selecionado pelo usuário), a tecla de seta para baixo sempre define o foco para o primeiro item, enquanto a tecla de seta para cima sempre define o foco para o último item no menu.

Se o último item tiver foco e a tecla seta para baixo for pressionada, o foco passará para o primeiro item no menu. Da mesma forma, se o primeiro item tiver foco e a tecla seta para cima for pressionada, o foco passará para o último item no menu. Esse comportamento é conhecido como ciclismo e é útil para navegar em menus pop-up que podem ser abertos em direções imprevisíveis.

Observação

O ciclismo deve ser evitado em UIs não pop-up em que os usuários possam se sentir presos em um loop sem fim.

Recomendamos que você emule esses mesmos comportamentos em seus controles personalizados. Exemplo de código sobre como implementar esse comportamento pode ser encontrado na documentação de navegação de foco programática .

Testar seu aplicativo

Teste seu aplicativo com todos os dispositivos de entrada suportados para garantir que a navegação pelos elementos da interface de usuário aconteça de maneira coerente e intuitiva para que nenhum elemento não esperado interfira na ordem de tabulação desejada.

Artigos relacionados

• Eventos de teclado
• Identificar dispositivos de entrada
• Responder à presença do teclado virtual
• Amostra de visuais de foco
• Detalhes do teclado de controle NavigationView
• Acessibilidade do teclado

Apêndice

Teclado de software

Um teclado de software é exibido na tela e usado em vez do teclado físico para digitar e inserir dados usando toque, mouse, caneta/caneta ou outro dispositivo apontando. Em dispositivos Xbox One, as chaves individuais precisam ser selecionadas movendo o visual de foco ou usando teclas de atalho no gamepad ou no controle remoto.

Teclado virtual

teclado Windows 11 touch

Dependendo do dispositivo, o teclado virtual aparece quando um campo de texto ou outro controle de texto editável é focalizado ou quando o usuário o ativa manualmente por meio do Centro de Notificações:

Se o seu aplicativo define o foco de forma programática para um controle de entrada de texto, o teclado virtual não é invocado. Isso elimina comportamentos inesperados não instigados diretamente pelo usuário. No entanto, o teclado é ocultado automaticamente quando o foco é movido por meio de programação para um controle de entrada que não é de texto.

Normalmente, o teclado virtual permanece visível enquanto o usuário navega entre controles em um formulário. Esse comportamento pode variar com base nos outros tipos de controle no formulário.

A seguir há uma lista de controles que não são de edição que podem receber o foco durante uma sessão de entrada de texto por meio do teclado virtual sem descartar o teclado. Ao invés de mover desnecessariamente a interface do usuário e possivelmente desorientar o usuário, o teclado virtual permanece à vista, pois pode ser que o usuário alterne entre esses controles e a entrada de texto com o teclado virtual.

• Caixa de seleção
• Caixa de combinação
• Botão de opção
• Barra de rolagem
• Árvore
• Item de árvore
• Menu
• Barra de menus
• Item de menu
• Barra de ferramentas
• Lista
• Item de lista

Veja aqui exemplos de modos diferentes do teclado virtual. A primeira imagem é o layout padrão, a segunda é o layout expandido (que pode não estar disponível em todos os idiomas).

O teclado virtual no modo de layout padrão

O teclado virtual no modo de layout expandido

Interações de teclado bem-sucedidas permitem que os usuários utilizem cenários básicos de aplicativos apenas com o teclado, ou seja, os usuários podem acessar todos os elementos interativos da interface do usuário e ativar a funcionalidade padrão. Diversos fatores podem afetar o grau de sucesso, incluindo a navegação por teclado, as teclas de acesso para acessibilidade e as teclas de aceleração (atalho) para usuários avançados.

Teclado Virtual

Assim como o teclado virtual, o OSK (Teclado Na Tela) é um visual, teclado de software usado em vez do teclado físico para digitar e inserir dados usando toque, mouse, caneta/caneta ou outro dispositivo apontando (uma tela sensível ao toque não é necessária). O OSK é fornecido para sistemas que não têm um teclado físico ou para usuários cujos problemas de mobilidade impedem o uso de dispositivos de entrada físicos tradicionais. O OSK emula a maior parte, se não toda a funcionalidade de um teclado de hardware.

O OSK pode ser ativado na página Teclado Configurações > Facilidade de acesso.

NOTA O OSK tem prioridade sobre o teclado virtual, que não será mostrado se o OSK estiver presente.

Teclado Virtual

teclado Xbox One na tela

Para obter mais detalhes, consulte o teclado na tela.