Interações de teclado

Saiba como projetar e otimizar seus aplicativos do Windows para que eles forneçam as melhores experiências 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 de aplicativos do Windows. Uma experiência de teclado bem projetada permite que os usuários naveguem com eficiência na interface do usuário do seu aplicativo e acessem sua funcionalidade completa sem nunca levantar as mãos do teclado.

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

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

Muitas das diretrizes e recomendações discutidas aqui, incluindo visuais de foco, chaves de acesso e navegação da interface do usuário, também são aplicáveis a esses 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

Junto com o mouse, o teclado é o periférico mais usado em computadores e, como tal, é uma parte fundamental da experiência do computador. Os usuários de computador esperam uma experiência abrangente e consistente do sistema e de aplicativos individuais em resposta à entrada do teclado.

Todos os controles UWP incluem suporte interno para experiências avançadas de teclado e interações do usuário, enquanto a plataforma em si fornece uma base abrangente para criar experiências de teclado que você acha que são mais adequadas para seus controles personalizados e aplicativos.

A UWP dá suporte ao teclado com qualquer dispositivo

Experiências básicas

Conforme mencionado anteriormente, dispositivos de entrada, como um controle remoto e um painel de jogos, e ferramentas de acessibilidade, como o Narrador, compartilham grande parte da experiência de entrada do teclado para navegação e comando. Essa experiência comum entre tipos de entrada e ferramentas minimiza o trabalho adicional de você e contribui para a meta "criar uma vez, executar em qualquer lugar" da Plataforma Universal do Windows.

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

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

Experiências personalizadas e teclado eficiente

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

• Suporte à navegação e interação do teclado
  • Verifique se os itens acionáveis são identificados como paradas de tabulação (e itens não acionáveis não são) e a ordem de navegação é lógica e previsível (consulte paradas de tabulação)
  • Definir o foco inicial no elemento mais lógico (consulte o foco inicial)
  • Fornecer navegação de tecla de direção para "navegação interna" (consulte Navegação)
• Dar suporte a atalhos de teclado
  • Fornecer chaves de acelerador para ações rápidas (consulte Aceleradores)
  • Forneça chaves de acesso para navegar na interface do usuário do aplicativo (consulte as chaves do Access)

Visuais de foco

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

Um destaque visual:

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

NOTA O visual de foco UWP não é o mesmo que o retângulo de foco do Narrador.

Paradas de tabulação

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

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 os elementos da interface do usuário são criados. Por exemplo, se um StackPanel contém um Button, um Checkboxe um TextBox, ordem de tabulação é Button, Checkboxe TextBox.

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

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

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

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 faça o foco saltar 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.

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

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

Tente classificar e apresentar os comandos, controles e conteúdo mais importantes primeiro na ordem de tabulação e na ordem visual. No entanto, a posição de exibição real pode depender do contêiner de layout pai e das propriedades específicas 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.

NOTA A ordem visual também depende da localidade e do idioma.

Foco inicial

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

Para aplicativos UWP, o foco inicial é definido como o elemento com o tabIndex mais alto que pode receber o foco. Elementos filhos dos controles de contêiner são ignorados. Em um empate, o primeiro elemento na árvore visual recebe o foco.

Definir o foco inicial no elemento mais lógico

Defina o foco inicial no elemento de interface do usuário para a primeira ou principal ação que os usuários têm mais probabilidade de realizar ao iniciar seu aplicativo ou ao navegar para uma página. Alguns exemplos incluem:

• Um aplicativo de fotos em que o foco é definido como o primeiro item em uma galeria
• Um aplicativo de música em que o foco está no botão de reproduzir

Não defina o foco inicial em um elemento que exponha um resultado potencialmente negativo ou até mesmo desastroso

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

Consulte a navegação de foco para obter mais detalhes sobre como substituir a ordem de tabulação.

Navigation

Normalmente, há suporte para navegação de teclado por meio das teclas Tab e seta.

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

• As teclas Tabulação navegam entre controles acionáveis/ativos na ordem de tabulação.
• Shift + Tab navega pelos controles na ordem inversa de tabulação. Se o usuário tiver navegado dentro do controle usando a tecla de direção, o foco será definido como o último valor conhecido dentro do controle.
• As setas direcionais expõem a "navegação interna" específica do controle. Quando o usuário insere "navegação interna", as setas direcionais não permitem sair do controle. Veja a seguir alguns exemplos:
  • A tecla das setas para cima e para baixo move o foco dentro de ListView e MenuFlyout
  • Modificar valores selecionados no momento para Slider e RatingsControl
  • Mover o cursor para dentro TextBox
  • Expandir/recolher itens dentro de TreeView

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

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

Fornecer navegação com teclas de seta em um conjunto de controles relacionados reforça sua relação na estrutura geral da interface do usuário do aplicativo.

Por exemplo, o ContentDialog controle 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 Controle ).

A interação com uma coleção de botões relacionados fica mais fácil com a navegação da tecla de direção

Se os itens forem exibidos em uma única coluna, a tecla de seta para cima/seta para baixo navegará pelos itens. Se os itens forem exibidos em uma única linha, a tecla de seta para a direita/esquerda navegará pelos itens. Se os itens estiverem em várias colunas, as quatro teclas de seta permitem navegar.

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 empilhados ListView . A imagem à esquerda mostra a navegação da tecla de direção usada com um ponto de parada do tab para navegar entre ListView controles, enquanto a imagem à direita mostra como tornar a navegação entre elementos filho mais fácil e eficiente eliminando a necessidade de passar pelos controles pai usando a tecla tab.

A interação com dois controles ListView empilhados pode ser mais fácil e eficiente ao eliminar a parada de tabulação e navegar apenas com as teclas de seta.

Visite a seção Grupo de Controle para saber como aplicar os exemplos de otimização à interface do usuário do aplicativo.

Interação e comando

Depois que um controle tem foco, um usuário pode interagir com ele e invocar qualquer funcionalidade associada usando entrada de teclado específica.

Entrada de texto

Para esses controles especificamente projetados para entrada de texto como TextBox e RichEditBox, todas as entradas de teclado são usadas para inserir ou navegar texto, o que tem prioridade sobre outros comandos de teclado. Por exemplo, o menu suspenso de um AutoSuggestBox controle não reconhece a tecla Space como um comando de seleção.

Tecla de espaço

Quando não está no modo de entrada de texto, a tecla Space invoca a ação ou o comando associado ao controle focalizado (assim como um toque com toque ou um clique com um mouse).

Inserir chave

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 Hyperlink. Para evitar confusão do usuário final, a tecla Enter também ativa controles que se parecem com controles de comando como ToggleButton ou AppBarToggleButton.
• Exibe a interface seletora para controles como ComboBox e DatePicker. A tecla Enter também confirma e fecha a interface do usuário do seletor.
• Ativa controles de lista, como ListView, GridViewe ComboBox.
  • A chave Enter executa a ação de seleção como a tecla Space para itens de lista e grade, a menos que haja uma ação adicional associada a esses itens (abrindo uma nova janela).
  • Se uma ação adicional estiver associada ao controle, a tecla Enter executará a ação adicional e a tecla Space executará a ação de seleção.

NOTA A tecla Enter e a tecla Space nem sempre executam a mesma ação, mas geralmente executam.

Chave Esc

A tecla Esc permite que um usuário cancele a interface transitória (juntamente com todas as ações em andamento nesta interface).

Exemplos dessa experiência incluem:

• O usuário abre um ComboBox com um valor selecionado e usa as teclas de direção para mover a seleção de foco para um novo valor. Pressionar a tecla Esc fecha o ComboBox e redefine o valor selecionado para o valor original.
• O usuário invoca uma ação de exclusão permanente para um email e lhe é solicitado ContentDialog confirmar a ação. O usuário decide que essa não é a ação pretendida e pressiona a tecla Esc para fechar a caixa de diálogo. Como a chave Esc está associada ao botão Cancelar , a caixa de diálogo é fechada e a ação é cancelada. A chave Esc afeta apenas a interface do usuário transitória, ela não fecha ou navega novamente pela interface do usuário do aplicativo.

Teclas Home e End

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

Exemplos dessa experiência incluem:

• Para ListView e GridView controles, a tecla Home move o foco para o primeiro elemento e rola-o para que fique visível, enquanto a tecla End move o foco para o último elemento e rola-o para que fique visível.
• Para um ScrollView controle, a tecla Home rola até a parte superior da região, enquanto a tecla End rola até a parte inferior da região (o foco não é alterado).

Teclas Page Up e Page Down

As teclas de página permitem que um usuário role uma região da UI em incrementos discretos.

Por exemplo, para os controles ListView e GridView, a tecla Page up rola a região para cima por uma "página" (normalmente a altura da área de visualização) e move o foco para a parte superior da região. Como alternativa, a tecla Page down rola a região para baixo por uma página e move o foco para a parte inferior da região.

Tecla F6

A chave F6 permite que um usuário pedale entre painéis ou seções importantes do aplicativo ou da interface do usuário. O Shift-F6 normalmente circula para trás (consulte a acessibilidade do teclado).

Geralmente, eles estão relacionados a pontos de referência e títulos, mas não precisam corresponder diretamente.

Por exemplo:

• No Edge, pressionar F6 alternará entre a barra de guias, a barra de endereços/a barra de aplicativos e o conteúdo da página.
• No Explorador de Arquivos, pressionar F6 alternará entre as seções do aplicativo.
• Na área de trabalho, pressionar F6 alternará entre partes da barra de tarefas e da área de trabalho.

Atalhos do teclado

Além de implementar a navegação e a ativação do teclado, também é uma boa prática implementar atalhos de teclado, como aceleradores de teclado e teclas de acesso para funcionalidades importantes ou usadas com frequência.

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

Um atalho é uma combinação de teclado que aumenta a produtividade fornecendo uma maneira eficiente para o usuário acessar a funcionalidade do aplicativo. Existem dois tipos de atalhos:

• Aceleradores são atalhos que invocam um comando do 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 tecla de letra.
• As teclas de acesso são atalhos que definem o foco para uma interface do usuário específica em seu aplicativo. Normalmente, as chaves de acesso consistem na chave Alt mais uma chave de letra.

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

Aceleradores

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

Exemplos de aceleradores:

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

Os aceleradores têm as seguintes características:

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

Chaves de acesso

Veja a página Teclas de acesso para obter mais informações detalhadas sobre como dar suporte a teclas de acesso no UWP.

As chaves de acesso ajudam os usuários com deficiências de função motora a pressionar uma tecla por vez para agir em um item específico na interface do usuário. Além disso, as chaves de acesso podem ser usadas para comunicar chaves de atalho adicionais para ajudar os usuários avançados a executar ações rapidamente.

As chaves de acesso têm as seguintes características:

• Eles usam a chave Alt mais uma chave alfanumérica.
• Eles são principalmente para acessibilidade.
• Eles são documentados diretamente na interface do usuário, adjacente ao controle, por meio de Dicas de Chave.
• Eles têm efeito apenas na janela atual e navegam até o item de menu ou controle correspondente.
• As chaves de acesso devem ser atribuídas consistentemente a comandos comumente usados (especialmente botões de confirmação), sempre que possível.
• Eles estão localizados.

Atalhos comuns de teclado

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

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

Experiências avançadas

Nesta seção, discutiremos algumas das experiências de interação de teclado mais complexas compatíveis com aplicativos UWP, juntamente com alguns dos comportamentos que você deve estar ciente quando seu aplicativo é usado em diferentes dispositivos e com ferramentas diferentes.

Grupo de controle

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

Navegação pelas teclas de seta

Os usuários esperam suporte para navegação de tecla de direção quando há um grupo de controles semelhantes relacionados em uma região da interface do usuário:

• AppBarButtons em um CommandBar
• ListItems ou GridItems dentro de ListView ou GridView
• Buttons dentro ContentDialog

Os controles UWP dão suporte à navegação por tecla de direção por padrão. Para layouts personalizados e grupos de controle, use XYFocusKeyboardNavigation="Enabled" para fornecer um comportamento semelhante.

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

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 teclas de direção para botões

Os usuários de acessibilidade dependem de regras de navegação de teclado bem estabelecidas, que normalmente não usam teclas de direção para navegar em uma coleção de botões. No entanto, os usuários sem deficiência visual podem sentir que o comportamento é natural.

Um exemplo de comportamento UWP padrão nesse caso é o ContentDialog. Embora as teclas de direção possam ser usadas para navegar entre botões, cada botão também é uma parada de tabulação.

Atribuir parada de guia única a padrões familiares de interface do usuário

Nos casos em que o layout segue um padrão de interface do usuário conhecido para grupos de controle, atribuir uma única parada de tabulação ao grupo pode melhorar a eficiência de 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 do usuário feita para parecer e se comportar como grade de blocos (como os blocos de menu Iniciar)

Especificando o comportamento do grupo de controle

Use as seguintes APIs para dar suporte ao comportamento do grupo de controle personalizado (todas são discutidas com mais detalhes mais adiante neste tópico):

• XYFocusKeyboardNavigation habilita a navegação de tecla de direção entre controles
• TabFocusNavigation indica se há várias paradas de tabulação ou parada de tabulação única
• FindFirstFocusableElement e FindLastFocusableElement definem o foco no primeiro item com a chave Inicial e o último item com a chave End

A imagem a seguir mostra um comportamento intuitivo para navegação com teclado para um grupo de controles de botões de opção associados. Nesse caso, recomendamos uma única parada de tabulação para o grupo de controle, navegação interna entre os botões de opção usando as teclas de seta, tecla Home associada ao primeiro botão de opção e tecla End associada ao último botão de opção.

Teclado e Narrador

O Narrador é uma ferramenta de acessibilidade da interface do usuário voltada para usuários de teclado (outros tipos de entrada também têm suporte). No entanto, a funcionalidade do Narrador vai além das interações de teclado compatíveis com aplicativos UWP e é necessário cuidado extra ao projetar seu aplicativo UWP para o Narrador. (A página noções básicas do Narrador orienta você pela experiência do usuário do Narrador.)

Algumas das diferenças entre os comportamentos de teclado do UWP e os compatíveis com o Narrador incluem:

• Combinações de teclas extras para navegação em elementos de interface do usuário que não são expostos por meio da navegação de teclado padrão, como caps lock + teclas de seta para ler rótulos de controle.
• Navegação para itens desabilitados. Por padrão, os itens desabilitados não são expostos por meio da navegação de teclado padrão.
• Controle "exibições" para uma navegação mais rápida com base na granularidade da interface do usuário (UI). Os usuários podem navegar até itens, caracteres, palavras, linhas, parágrafos, links, títulos, tabelas, pontos de referência e sugestões. A navegação de teclado padrão expõe esses objetos como uma lista simples, o que pode tornar a navegação complicada, a menos que você forneça teclas de atalho.

Estudo de Caso – Controle AutoSuggestBox

O botão de pesquisa para o AutoSuggestBox não está acessível à navegação de teclado padrão usando teclas de direção e guia porque o usuário pode pressionar a tecla Enter para enviar a consulta de pesquisa. No entanto, ele é acessível por meio do Narrador quando o usuário pressiona Caps Lock + uma tecla de direção.

Com o teclado, os usuários pressionam a tecla Enterpara enviar a consulta de pesquisa

Teclado, game pad e controle remoto

Os game pads e controles remotos dão suporte a muitos comportamentos e experiências de teclado UWP. No entanto, devido à falta de várias opções de teclas disponíveis em um teclado, o game pad e o controle remoto não têm muitas otimizações de teclado (o controle remoto é ainda mais limitado que o game pad).

Consulte o painel de jogos e as interações de controle remoto para obter mais detalhes sobre o suporte da UWP para a entrada do controle remoto e do painel de jogos.

O exemplo a seguir mostra alguns mapeamentos de teclas entre teclado, game pad e controle remoto.

Algumas das principais diferenças que você deve estar ciente ao criar seu aplicativo UWP para uso com o game pad e o uso de controle remoto incluem:

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

• A navegação de foco não se limita a grupos de controle, os usuários podem navegar livremente para qualquer elemento focalizável da interface de usuário no aplicativo.

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

• Os botões D-pad e left stick são usados para mover o foco entre controles e para navegação interna.

  NOTA 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 nessa direção quando não há nenhum 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 interna do teclado para obter mais informações.

Navegação direcional

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

Ao contrário do teclado, quando um aplicativo opta por não usar o Modo 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.

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

Otimização interna do teclado

Dependendo do layout e dos controles usados, os aplicativos UWP podem ser otimizados especificamente para entrada de 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 Tab stops ). Quando o grupo tem foco, a navegação interna é executada com as teclas de direção na ordem visual correspondente (consulte a seção Navegação ).

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

Navegação com Teclas de Seta em Linha Única

Navegação com as setas do teclado para múltiplas colunas/linhas

Encapsulando itens de exibição de lista e grade homogêneos

A navegação direcional nem sempre é a forma mais eficiente de percorrer múltiplas linhas e colunas de itens em List e GridView.

NOTA Os itens de menu normalmente são listas de colunas simples, mas regras de foco especiais podem se aplicar em alguns casos (consulte a interface do usuário pop-up).

Os objetos List e Grid podem ser criados com várias linhas e colunas. Normalmente, elas estão em ordem de armazenamento por linhas (em que os itens preenchem a linha inteira primeiro antes de passar para a próxima linha) ou em ordem de armazenamento por colunas (em que os itens preenchem a coluna inteira primeiro antes de passar para a próxima coluna). A ordem principal da linha ou coluna depende da direção da rolagem e você deve garantir que a ordem do item não entre em conflito com essa direção.

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

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

Interface do usuário do 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 de estouro da CommandBar e o menu de AutoSugestão) 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 disponível na tela. 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.

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ático .

Testar seu aplicativo

Teste seu aplicativo com todos os dispositivos de entrada com suporte para garantir que os elementos da interface do usuário possam ser navegados de maneira coerente e intuitiva e que nenhum elemento inesperado interfira na ordem de tabulação desejada.

Artigos relacionados

• Eventos de teclado
• Identificar dispositivos de entrada
• Responder à presença do teclado virtual
• Exemplo de elementos visuais de foco
• Especificações de controle de teclado do 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 apontador. Em dispositivos de jogos, as chaves individuais precisam ser selecionadas movendo o visual de foco ou usando teclas de atalho em um game pad ou controle remoto.

Teclado de toque

Teclado virtual do Windows 11

Dependendo do dispositivo, o teclado virtual é exibido quando um campo de texto ou outro controle de texto editável obtém o foco ou quando o usuário o habilita manualmente por meio da Central de Notificações:

Se o aplicativo definir o foco programaticamente para um controle de entrada de texto, o teclado virtual não será invocado. Isso elimina comportamentos inesperados não instigados diretamente pelo usuário. No entanto, o teclado se oculta automaticamente quando o foco é movido programaticamente para um controle de entrada não textual.

O teclado virtual normalmente 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 dentro do formulário.

Veja a seguir uma lista de controles não editados que podem receber foco durante uma sessão de entrada de texto usando o teclado virtual sem ignorar o teclado. Em vez de alternar desnecessariamente a interface do usuário e potencialmente desorientar o usuário, o teclado virtual permanece em exibição porque é provável que o usuário vá e volte 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
• Tree
• Item de árvore
• Menu
• Barra de menus
• Item de menu
• Barra de ferramentas
• List
• Item de lista

Aqui estão exemplos de modos diferentes para o 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 sensível ao toque no modo de layout expandido

Interações de teclado bem-sucedidas permitem que os usuários realizem cenários básicos de aplicativo usando apenas o teclado; ou seja, os usuários podem alcançar todos os elementos interativos e ativar a funcionalidade padrão. Vários fatores podem afetar o grau de sucesso, incluindo navegação por teclado, teclas de acesso para acessibilidade e teclas de acelerador (ou atalho) para usuários avançados.

Teclado virtual

Assim como o teclado virtual, o teclado na tela (OSK) é um teclado visual de software usado em vez do teclado físico para digitar e inserir dados usando toque, mouse, caneta/stylus ou outro dispositivo apontador (não é necessária uma tela sensível ao toque). O OSK é fornecido para sistemas que não têm um teclado físico ou para usuários cujas deficiências de mobilidade os impedem de usar dispositivos de entrada física tradicionais. O OSK emula a maioria, se não todas, as funcionalidades de um teclado de hardware.

O OSK pode ser ativado na página Teclado em Configurações > de 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 virtual do Xbox One

Para obter mais detalhes, consulte Usar o teclado na tela para digitar.