Acessibilidade do teclado

Criando acessibilidade de teclado (para hardware tradicional, modificado ou de emulação de teclado) em seu aplicativo, oferece aos usuários que são cegos, têm baixa visão, deficiências motoras ou têm pouco ou nenhum uso de suas mãos, a capacidade de navegar e usar todas as funcionalidades do seu aplicativo. Além disso, os utilizadores sem deficiências podem escolher o teclado para navegação devido à preferência ou eficiência.

Se a sua aplicação não fornecer um bom acesso ao teclado, os utilizadores invisuais ou com problemas de mobilidade poderão ter dificuldade em utilizar a sua aplicação.

Navegação pelo teclado entre elementos da interface do usuário

Para interagir com um controle usando o teclado, o controle deve ter foco. Para receber o foco (sem usar um ponteiro), o controle deve ser acessível através da navegação por guias. Por padrão, a ordem de tabulação dos controles é a mesma que a ordem em que eles são adicionados a uma superfície de design, declarados em XAML ou adicionados programaticamente a um contêiner.

Normalmente, a ordem de tabulação padrão é baseada em como os controles são definidos em XAML, especialmente porque essa é a ordem na qual os controles são percorridos pelos leitores de tela. No entanto, a ordem padrão não corresponde necessariamente à ordem visual. A posição de exibição real pode depender do contêiner de layout pai e de várias propriedades de elementos filho que podem afetar o layout.

Para garantir que seu aplicativo tenha uma ordem de tabulação ideal, teste o comportamento você mesmo. Se você usar uma grade ou tabela para seu layout, a ordem na qual os usuários podem ler a tela versus a ordem de tabulação pode ser muito diferente. Isso nem sempre é um problema, mas certifique-se de testar a funcionalidade do seu aplicativo por toque e teclado para verificar se a interface do usuário está otimizada para ambos os métodos de entrada.

Você pode fazer com que a ordem de tabulação corresponda à ordem visual ajustando o XAML ou substituindo a ordem de tabulação padrão. O exemplo a seguir mostra como usar a propriedade TabIndex com um layout Grid que usa a navegação de guia coluna primeiro.

<Grid>
  <Grid.RowDefinitions>...</Grid.RowDefinitions>
  <Grid.ColumnDefinitions>...</Grid.ColumnDefinitions>

  <TextBlock Grid.Column="1" HorizontalAlignment="Center">Groom</TextBlock>
  <TextBlock Grid.Column="2" HorizontalAlignment="Center">Bride</TextBlock>

  <TextBlock Grid.Row="1">First name</TextBlock>
  <TextBox x:Name="GroomFirstName" Grid.Row="1" Grid.Column="1" TabIndex="1"/>
  <TextBox x:Name="BrideFirstName" Grid.Row="1" Grid.Column="2" TabIndex="3"/>

  <TextBlock Grid.Row="2">Last name</TextBlock>
  <TextBox x:Name="GroomLastName" Grid.Row="2" Grid.Column="1" TabIndex="2"/>
  <TextBox x:Name="BrideLastName" Grid.Row="2" Grid.Column="2" TabIndex="4"/>
</Grid>

Em alguns casos, talvez você queira excluir um controle específico da ordem de tabulação. Isso geralmente é feito tornando o controle não interativo definindo sua propriedade IsEnabled como false. Um controle desabilitado é automaticamente excluído da ordem de tabulação.

Se você quiser excluir um controle interativo da ordem de tabulação, você pode definir a propriedade IsTabStop como false.

Por padrão, os elementos da interface do usuário que oferecem suporte ao foco geralmente são incluídos na ordem de tabulação. Algumas exceções incluem certos tipos de exibição de texto (como RichTextBlock) que oferecem suporte ao foco para seleção de texto e acesso à área de transferência, mas não estão na ordem de tabulação porque são elementos de texto estáticos. Esses controles não são convencionalmente interativos (eles não podem ser invocados e não exigem entrada de texto, mas suportam o padrão de controle Text que suporta a localização e ajuste de pontos de seleção no texto). Os controles de texto ainda serão detetados por tecnologias assistenciais e lidos em voz alta em leitores de tela, mas isso depende de técnicas diferentes da ordem de tabulação.

Quer você ajuste os valores de TabIndex ou use a ordem padrão, estas regras se aplicam:

• Se TabIndex não estiver definido em um elemento, o valor padrão será Int32.MaxValue e a ordem de tabulação será baseada na ordem de declaração nas coleções XAML ou filho.
• Se TabIndex estiver definido em um elemento:
  • Os elementos da interface do usuário com TabIndex igual a 0 são adicionados à ordem de tabulação com base na ordem da declaração em XAML ou coleções filhas.
  • Os elementos da interface do usuário com TabIndex maior que 0 são adicionados à ordem de tabulação com base no valor TabIndex .
  • Os elementos da interface do usuário com TabIndex menor que 0 são adicionados à ordem de tabulação e aparecem antes de qualquer valor zero.

O trecho de código a seguir mostra uma coleção de elementos com várias configurações de TabIndex (B é atribuído o valor de Int32.MaxValue ou 2.147.483.647).

<StackPanel Background="#333">
  <StackPanel Background="#FF33FF">
    <Button>A</Button>
    <Button TabIndex="2147483647">B</Button>
    <Button>C</Button>
  </StackPanel>
  <StackPanel Background="#33FFFF">
    <Button TabIndex="1">D</Button>
    <Button TabIndex="1">E</Button>
    <Button TabIndex="0">F</Button>
  </StackPanel>
</StackPanel>

Isso resulta na seguinte ordem de tabulação:

1. F
2. D
3. E
4. Um
5. B
6. C

Navegação pelo teclado entre painéis de aplicativos com F6

Um painel de aplicativo é uma área lógica de interface do usuário relacionada e proeminente dentro de uma janela de aplicativo (por exemplo, os painéis do Microsoft Edge incluem a barra de endereço, a barra de favoritos, a barra de guias e o painel de conteúdo). A tecla F6 pode ser usada para navegar entre esses painéis, onde grupos de elementos filho podem ser acessados usando a navegação padrão do teclado.

Embora a navegação pelo teclado possa fornecer uma interface do usuário compatível com acessibilidade, tornar uma interface do usuário utilizável acessível geralmente requer mais algumas etapas. Normalmente, isso inclui:

• Ouvir F6 para navegar entre seções importantes da sua interface do usuário.
• Adicionar atalhos de teclado para ações comuns na sua interface do usuário.
• Adicionar teclas de acesso a controles importantes em sua interface do usuário.

Consulte Atalhos de teclado abaixo e Teclas de acesso para obter mais orientações sobre como implementar atalhos e teclas de acesso.

Otimizar para F6

F6 permite que os usuários do teclado naveguem com eficiência entre os painéis da interface do usuário sem passar por potencialmente centenas de controles.

Por exemplo, F6 no Microsoft Edge alterna entre a barra de endereço, a barra de favoritos, a barra de guias e o painel de conteúdo. Como uma página da Web pode potencialmente ter centenas de controles ajustáveis, F6 pode tornar mais fácil para os usuários do teclado alcançar a barra de guias e a barra de endereço sem usar atalhos específicos do aplicativo.

O ciclo de guias F6 também pode corresponder vagamente a pontos de referência ou títulos no conteúdo, embora não precise corresponder exatamente. F6 deve se concentrar em regiões grandes e distintas em sua interface do usuário, enquanto os pontos de referência podem ser mais granulares. Por exemplo, você pode marcar uma barra de aplicativos e sua caixa de pesquisa como pontos de referência, mas incluir apenas a própria barra de aplicativos no ciclo F6.

Sempre que possível, as regiões do ciclo F6 devem ter um nome acessível: através de um marco ou adicionando manualmente um AutomationProperties.Name ao elemento "raiz" da região.

Shift-F6 deve pedalar na direção oposta.

Navegação pelo teclado em um elemento da interface do usuário

Para controles compostos, é importante garantir uma navegação interna adequada entre os elementos contidos. Um controle composto pode gerenciar o elemento filho atualmente ativo para reduzir a sobrecarga de ter todos os elementos filho com foco de suporte. O controle composto é incluído na ordem de tabulação e manipula os próprios eventos de navegação do teclado. Muitos controles compostos já têm alguma lógica de navegação interna incorporada em seu tratamento de eventos. Por exemplo, a travessia de itens por tecla de seta é habilitada por padrão nos controles ListView, GridView, ListBox e FlipView .

Alternativas de teclado para ações e eventos de ponteiro para elementos de controle específicos

Os elementos da interface do usuário que podem ser clicados também devem ser invocáveis através do teclado. Para usar o teclado com um elemento da interface do usuário, o elemento deve ter foco (somente as classes que derivam do foco de suporte de controle e navegação de guia).

Para elementos da interface do usuário que podem ser invocados, implemente manipuladores de eventos de teclado para as teclas Barra de espaço e Enter. Isso garante suporte básico à acessibilidade do teclado e permite que os usuários alcancem todos os elementos interativos da interface do usuário e ativem a funcionalidade usando apenas o teclado.

Quando um elemento não suporta foco, você pode criar seu próprio controle personalizado. Nesse caso, para habilitar o foco, você deve definir a propriedade IsTabStop como true e fornecer uma indicação visual do estado visual focado com um indicador de foco.

No entanto, pode ser mais fácil usar a composição de controle para que o suporte para paradas de tabulação, foco e pares e padrões de automação da interface do usuário da Microsoft sejam manipulados pelo controle no qual você escolhe compor seu conteúdo. Por exemplo, em vez de manipular um evento pressionado com ponteiro em uma Imagem, envolva esse elemento em um Button para obter suporte a ponteiro, teclado e foco.

<!--Don't do this.-->
<Image Source="sample.jpg" PointerPressed="Image_PointerPressed"/>

<!--Do this instead.-->
<Button Click="Button_Click"><Image Source="sample.jpg"/></Button>

Atalhos de teclado

Além de implementar a navegação e 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.

Um atalho é uma combinação de teclado que fornece uma maneira eficiente para o usuário acessar a funcionalidade 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 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. As teclas de acesso normalmente consistem na tecla Alt mais uma tecla de letra.

Sempre forneça uma maneira fácil para os usuários que dependem de leitores de tela e outras tecnologias assistivas descobrirem as teclas de atalho do seu aplicativo. Comunique teclas de atalho usando dicas de ferramentas, nomes acessíveis, descrições acessíveis ou alguma outra forma de comunicação na tela. No mínimo, as teclas de atalho devem estar bem documentadas no conteúdo da Ajuda do seu aplicativo.

Você pode documentar as teclas de acesso por meio de leitores de tela definindo a propriedade anexada AutomationProperties.AccessKey como uma cadeia de caracteres que descreve a tecla de atalho. Há também uma propriedade anexada AutomationProperties.AcceleratorKey para documentar teclas de atalho não mnemônicas, embora os leitores de tela geralmente tratem ambas as propriedades da mesma maneira. Tente documentar teclas de atalho de várias maneiras, usando dicas de ferramentas, propriedades de automação e documentação de Ajuda escrita.

O exemplo a seguir demonstra como documentar teclas de atalho para reprodução de mídia, pausar e parar botões.

<Grid KeyDown="Grid_KeyDown">

  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
  </Grid.RowDefinitions>

  <MediaElement x:Name="DemoMovie" Source="xbox.wmv"
    Width="500" Height="500" Margin="20" HorizontalAlignment="Center" />

  <StackPanel Grid.Row="1" Margin="10"
    Orientation="Horizontal" HorizontalAlignment="Center">

    <Button x:Name="PlayButton" Click="MediaButton_Click"
      ToolTipService.ToolTip="Shortcut key: Ctrl+P"
      AutomationProperties.AcceleratorKey="Control P">
      <TextBlock>Play</TextBlock>
    </Button>

    <Button x:Name="PauseButton" Click="MediaButton_Click"
      ToolTipService.ToolTip="Shortcut key: Ctrl+A"
      AutomationProperties.AcceleratorKey="Control A">
      <TextBlock>Pause</TextBlock>
    </Button>

    <Button x:Name="StopButton" Click="MediaButton_Click"
      ToolTipService.ToolTip="Shortcut key: Ctrl+S"
      AutomationProperties.AcceleratorKey="Control S">
      <TextBlock>Stop</TextBlock>
    </Button>
  </StackPanel>
</Grid>

A manipulação de chaves é implementada em code-behind, não em XAML. Você ainda precisa anexar manipuladores para eventos KeyDown ou KeyUp no controle relevante para realmente implementar o comportamento de atalho de teclado em seu aplicativo. Além disso, a decoração de texto sublinhado para uma chave de acesso não é fornecida automaticamente. Você deve sublinhar explicitamente o texto para a chave específica em seu mnemônico como formatação de sublinhado embutido se desejar mostrar texto sublinhado na interface do usuário.

Para simplificar, o exemplo anterior omite o uso de recursos para cadeias de caracteres como "Ctrl+A". No entanto, você também deve considerar as teclas de atalho durante a localização. A localização de teclas de atalho é relevante porque a escolha da chave a ser usada como tecla de atalho normalmente depende do rótulo de texto visível para o elemento.

Para obter mais orientações sobre como implementar teclas de atalho, consulte Teclas de atalho nas Diretrizes de interação da experiência do usuário do Windows.

Implementando um manipulador de eventos chave

Os eventos de entrada (como os eventos principais) usam um conceito de evento chamado eventos roteados. Um evento roteado pode borbulhar através dos elementos filho de um controle composto pai, de modo que o controle pai pode manipular eventos para vários elementos filho. Esse modelo de evento é conveniente para definir ações-chave de atalho para um controle que contém vários elementos filho, nenhum dos quais pode ter foco ou fazer parte da ordem de tabulação.

Por exemplo, código que mostra como escrever um manipulador de eventos de chave que inclui a verificação de modificadores, como a tecla Ctrl, consulte Interações de teclado.

Navegação por teclado para controles personalizados

Recomendamos usar as teclas de seta como atalhos de teclado para navegar entre elementos filho nos casos em que os elementos filho têm uma relação espacial entre si. Se os nós de visualização em árvore tiverem subelementos separados para lidar com expandir-recolher e ativar o nó, use as teclas de seta para a esquerda e para a direita para fornecer a funcionalidade expandir-recolher do teclado. Se você tiver um controle orientado que suporte a travessia direcional dentro do conteúdo do controle, use as teclas de seta apropriadas.

Geralmente, você implementa o tratamento de chaves personalizado para controles personalizados incluindo uma substituição dos métodos OnKeyDown e OnKeyUp como parte da lógica de classe.

Um exemplo de um estado visual para um indicador de foco

Como mencionado anteriormente, qualquer controle personalizado que suporte foco deve ter um indicador de foco visual. Normalmente, esse indicador de foco é apenas um retângulo que descreve o retângulo delimitador do controle. O retângulo para foco visual é um elemento de mesmo nível para o resto da composição do controle em um modelo de controle, mas é inicialmente definido com um valor de visibilidade de Recolhido porque o controle ainda não está focado. Quando o controle obtém foco, um estado visual é invocado que define especificamente a Visibilidade do foco visual como Visível. Quando o foco é movido para outro lugar, outro estado visual é chamado e a Visibilidade torna-se Recolhida.

Todos os controles XAML focalizáveis exibem um indicador de foco visual apropriado quando focados. Os selecionados pelo usuário também podem afetar a aparência do indicador (particularmente se o usuário estiver usando um modo de alto contraste). Se você estiver usando os controles XAML em sua interface do usuário (e não estiver substituindo os modelos de controle), não precisará fazer nada a mais para obter indicadores de foco visual padrão. No entanto, se você pretende remodelar um controle ou se estiver curioso sobre como os controles XAML fornecem seus indicadores de foco visual, o restante desta seção explica como isso é feito em XAML e a lógica de controle.

Aqui estão alguns exemplos de XAML que vem do modelo XAML padrão para um Button.

XAML

<ControlTemplate TargetType="Button">
...
    <Rectangle
      x:Name="FocusVisualWhite"
      IsHitTestVisible="False"
      Stroke="{ThemeResource FocusVisualWhiteStrokeThemeBrush}"
      StrokeEndLineCap="Square"
      StrokeDashArray="1,1"
      Opacity="0"
      StrokeDashOffset="1.5"/>
    <Rectangle
      x:Name="FocusVisualBlack"
      IsHitTestVisible="False"
      Stroke="{ThemeResource FocusVisualBlackStrokeThemeBrush}"
      StrokeEndLineCap="Square"
      StrokeDashArray="1,1"
      Opacity="0"
      StrokeDashOffset="0.5"/>
...
</ControlTemplate>

Até agora esta é apenas a composição. Para controlar a visibilidade do indicador de foco, defina estados visuais que alternam a propriedade Visibilidade . Isso é feito usando o VisualStateManager e a propriedade anexada VisualStateManager.VisualStateGroups, conforme aplicado ao elemento raiz que define a composição.

<ControlTemplate TargetType="Button">
  <Grid>
    <VisualStateManager.VisualStateGroups>
       <!--other visual state groups here-->
       <VisualStateGroup x:Name="FocusStates">
         <VisualState x:Name="Focused">
           <Storyboard>
             <DoubleAnimation
               Storyboard.TargetName="FocusVisualWhite"
               Storyboard.TargetProperty="Opacity"
               To="1" Duration="0"/>
             <DoubleAnimation
               Storyboard.TargetName="FocusVisualBlack"
               Storyboard.TargetProperty="Opacity"
               To="1" Duration="0"/>
         </VisualState>
         <VisualState x:Name="Unfocused" />
         <VisualState x:Name="PointerFocused" />
       </VisualStateGroup>
     <VisualStateManager.VisualStateGroups>
<!--composition is here-->
   </Grid>
</ControlTemplate>

Observe como apenas um dos estados nomeados ajusta a visibilidade diretamente, enquanto os outros estão aparentemente vazios. Com estados visuais, assim que o controle usa outro estado do mesmo VisualStateGroup, todas as animações aplicadas pelo estado anterior são imediatamente canceladas. Como a Visibilidade padrão da composição é Recolhido, o retângulo não aparecerá. A lógica de controle controla isso ouvindo eventos de foco como GotFocus e alterando os estados com GoToState. Muitas vezes, isso já é tratado para você se você estiver usando um controle padrão ou personalizando com base em um controle que já tem esse comportamento.

Acessibilidade do teclado e dispositivos sem teclado de hardware

Alguns dispositivos não têm um teclado de hardware dedicado e dependem de um SIP (Soft Input Panel). Os leitores de tela podem ler a entrada de texto do SIP de texto e os usuários podem descobrir onde estão seus dedos porque o leitor de tela pode detetar que o usuário está digitalizando chaves e lê o nome da chave digitalizada em voz alta. Além disso, alguns dos conceitos de acessibilidade orientados para o teclado podem ser mapeados para comportamentos relacionados à tecnologia assistiva que não usam um teclado. Por exemplo, mesmo que um SIP não inclua uma tecla Tab, o Narrador suporta um gesto de toque que é o equivalente a pressionar a tecla Tab, portanto, ter uma ordem de tabulação útil através dos controles em uma interface do usuário ainda é essencial para acessibilidade. O Narrador também suporta muitos outros gestos de toque, incluindo teclas de seta para navegar dentro de controlos complexos (consulte Comandos do teclado do Narrador e gestos de toque).

Examples

O aplicativo WinUI 3 Gallery inclui exemplos interativos da maioria dos controles, recursos e funcionalidades do WinUI 3. Obtenha o aplicativo da Microsoft Store ou obtenha o código-fonte no GitHub

Tópicos relacionados

• Acessibilidade
• Interações com o teclado
• Exemplo de teclado tátil
• Exemplo de acessibilidade XAML