Testar a acessibilidade

Objetivos de aprendizagem

Após concluir esta unidade, você estará apto a:

Explicar por que é fundamental realizar testes de acessibilidade manuais, além dos testes automatizados.
Resumir as etapas para realizar testes de teclado e de gerenciamento de foco no MacOS.
Identificar as verificações que devem ser concluídas ao realizar testes de leitores de tela com o VoiceOver.
Reconhecer elementos para incluir nos planos de teste de acessibilidade.
Descrever estratégias para testes de acessibilidade manuais eficazes.

Compreender a importância do teste manual

Embora os testes de acessibilidade automatizados possam detectar muitos problemas, eles não levam em conta o contexto nem identificam problemas de acessibilidade mais sutis. E, às vezes, eles até deixam problemas importantes passar. É por isso que também é essencial realizar testes manuais para detectar barreiras que os testes automatizados não tenham conseguido identificar. Os testes manuais também permitem validar os problemas detectados durante os testes automatizados e identificar falsos positivos.

Um programador realizando o teste de acessibilidade manual.

Ao contrário dos testes de acessibilidade automatizados, os testes manuais avaliam a jornada do usuário como um todo para simular a experiência de um usuário que tenha uma deficiência ou use tecnologia de assistência. Por exemplo, o teste manual do teclado simula a forma como um usuário navega no software usando apenas um teclado, enquanto o teste manual do leitor de tela simula a forma como um usuário com deficiência visual usa o software.

Vamos analisar mais detalhadamente os testes de acessibilidade manual, começando com o teclado e gerenciamento de foco.

Realizar testes de teclado e gerenciamento de foco

Os testes de teclado e de gerenciamento de foco são ótimas maneiras de garantir que usuários podem navegar e interagir com a interface do usuário de formas simples e previstas.

Ao testar o teclado, explore questões como:

O conteúdo é acessível usando uma variedade de entradas? Os usuários deveriam conseguir navegar pelo conteúdo usando vários dispositivos de entrada, como comandos de voz, telas sensíveis ao toque e controles de alternância. Se algum conteúdo estiver disponível apenas ao passar o cursor do mouse sobre ele, os usuários de telas sensíveis ao toque, ditado de voz e teclados ficarão de fora.
A ordem do foco é lógica? A ordem do foco refere-se à sequência em que os elementos interativos, como links, botões e campos de formulário, recebem o foco. Uma ordem de foco ilógica pode dificultar a navegação.
Um usuário pode navegar pelo conteúdo com eficiência e consistência? Alterações inesperadas na navegação, como diferentes teclas ou comandos, desafiam o usuário final, especialmente se ele usar tecnologia de assistência.
Todos os usuários podem navegar por este conteúdo? Pense nas pessoas com problemas motores, de destreza e de visão.

Ao testar em um Mac, é preciso habilitar o acesso total ao teclado nas System Preferences (Preferências do sistema) do teclado. Siga estas etapas.

Habilitar a navegação do teclado no macOS

Abra as configurações do Keyboard (Teclado) nas System Preferences (Preferências do sistema).
Selecione a guia Shortcuts (Atalhos).
Em Full Keyboard Access (Acesso total ao teclado), selecione All controls (Todos os controles).

A guia Shortcuts (Atalhos) da tela Keyboard Settings (Configurações do teclado) no MacOS com o conjunto de campos Full Keyboard Access (Acesso total ao teclado) destacado e todos os controles selecionados.

Ativar o acesso ao teclado para o Safari

Abra as Preferences (Preferências) no Safari.
Selecione a guia Advanced (Avançadas).
Em Accessibility (Acessibilidade), marque Press Tab to highlight each item on a webpage (Pressionar Tab para destacar cada item em uma página da Web).

Navegue até uma página da Web usando essas teclas.

Uso:	Para:
Tab e Shift+Tab	Navegue por links, campos de entrada e outros controles interativos. Tab avança pela interface do usuário e Shift+Tab retrocede. Não se assuste se não puder usar Tab em todos os itens na página, apenas em coisas interativas.
Ctrl+Tab	Navegue pelos quadros.
Insira	Ative links.
Enter e Espaço	Ative botões.
Espaço	Ative caixas de seleção de campo de entrada e selecione menus suspensos.
Seta para cima e para baixo	Navegue por menus e listas de opções, e menus suspensos de preenchimento automático.
Seta para a esquerda e para a direita	Navegue por guias em um conjunto de guias ou carrossel.
Esc	Feche menus, modais e painéis.

Você pode alcançar cada elemento interativo e acionar sua ação?

Alguns componentes complexos com vários elementos interativos têm interações de teclado mais exclusivas além de noções básicas, incluindo ComboBoxes, menus, grades de dados, diálogos modais e não modais e conjuntos de guias. Essas interações de teclado seguem certas expectativas definidas pelas Práticas de criação de ARIA do World Wide Web Consortium (W3C).

O Salesforce cria suas diretrizes de teclado com base nessas expectativas e essas diretrizes são usadas nas bibliotecas de componentes React do Lightning e do Lightning Design System. Compilamos alguns recursos úteis no site do Lightning Design System 2 para ajudar você a criar e testar esses componentes.

Diretrizes de acessibilidade de interação do teclado: Uma lista de testes manuais do teclado
Diretrizes de acessibilidade de foco globais: Dicas sobre o comportamento esperado para o gerenciamento de foco
Acessibilidade: Especificações de HTML e interação para widgets/padrões comuns

Testar a navegação do teclado

Ao testar a navegação do teclado, verifique se:

A ordem de tabulação é lógica. Use o teclado para se mover pelo aplicativo. A ordem de navegação padrão deve ser lógica e parecer natural.
O foco do teclado está visível. Use o teclado para navegar em uma página e confirmar que um indicador visual mostra o elemento que tem o foco do teclado.

Itens acionáveis recebem foco. Use o teclado para navegar por uma página. Teste se todos os botões, links, campos de formulário, guias e quaisquer outros itens interativos aceitam o foco do teclado. Se um usuário puder clicar em um item para executar uma ação ou passar o cursor do mouse sobre ele para revelar informações, isso significa que ele deve aceitar o foco do teclado.

Elementos interativos podem ser navegados. Verifique se você pode navegar em todos os elementos interativos, como menus, modais, elementos de arrastar e soltar, conjuntos de guias, painéis e menus suspensos de preenchimento automático. Verifique se você pode usar o teclado para selecionar e ativar itens.

Diálogos modais podem ser navegados. Use o teclado para abrir e navegar por um diálogo modal e operar todos os controles desse diálogo. Verifique se você pode interagir apenas com a janela modal atual, não com a página por trás dela. Quando um modal está aberto, o foco deve ficar preso nele. Certifique-se de que, quando o modal estiver fechado, o foco retorne ao lugar correto na página.

Não se esqueça que os testes de teclado e de leitor de tela não são a mesma coisa. Experimente testar com o teclado antes de testar com um leitor de tela para destacar muitos problemas que um leitor de tela pode não detectar.

Recomendamos testar leitores de tela tanto no macOS quanto no Windows. O macOS tem um leitor de tela integrado chamado VoiceOver que lê o elemento selecionado em voz alta e lê o rótulo ou texto alternativo. Quando você testa com um leitor de tela, descobre se seu texto alternativo é preciso e, em seguida, faça os ajustes necessários.

Veja algumas verificações simples que você pode fazer com o VoiceOver no MacOS.

Use Cmd+F5 para ativar e desativar o VoiceOver.
Use Cmd+u para abrir o Web Rotor.
Use o Web Rotor para verificar se:
- Links e botões têm rótulos concisos e significativos.
- Os cabeçalhos estão na ordem correta.
- A página tem bons pontos de referência.
Percorra a interface do usuário para verificar se:
- Os campos editáveis leem o rótulo, o tipo da entrada e a palavra editar.
- Os conjuntos de guias indicam qual guia está selecionada e podem ser navegadas com as teclas de seta.
- As caixas de seleção falam audivelmente seus estados quando alternadas com a barra de espaço.

Não se preocupe se não conseguir acessar o todo o conteúdo com a tabulação por meio de uma interface do usuário usando um leitor de tela. Os usuários de leitores de tela têm atalhos de teclado específicos para navegar elemento por elemento pela página, incluindo elementos não interativos, portanto, a tecla Tab não precisa (e realmente não deve) alcançar tudo. Com o VoiceOver, você pode usar Ctrl+Opção+Seta para a esquerda ou Ctrl+Opção+Seta para a direita para ler linearmente para trás ou para frente, respectivamente, pelo conteúdo da página.

No Windows, recomendamos usar NVDA.

Realize testes de acessibilidade com vários leitores de tela. Se você testar apenas com o VoiceOver, poderá não detectar problemas específicos que outros leitores de tela, como o JAWS ou o NVDA, detectarão.

Se você realizar testes com um leitor de tela, mas não usar um regularmente, será comum encontrar erro do usuário. Consulte os vídeos A11ycasts na seção de recursos para saber mais sobre os detalhes do uso de leitores de tela.

Escrever planos de teste de acessibilidade

Torne a acessibilidade parte do seu plano de testes, incluindo-a nas especificações dos componentes, nos critérios de aceitação e nas histórias dos usuários.

Exemplo: Iniciador de aplicativos

Para abrir o App Launcher (Iniciador de aplicativos), selecione . No Iniciador de aplicativos, os usuários podem procurar aplicativos, abrir aplicativos, ler descrições de aplicativos e reorganizar aplicativos.

Iniciador de aplicativos com a seção “All Apps” (Todos os Aplicativos) expandida.

Quais casos de teste você pode criar para reorganizar aplicativos?

Veja um plano de teste de exemplo para diferentes casos de uso associados ao Iniciador de aplicativos.

Para contextualizar, funcionalidade refere-se ao que um produto ou sistema é capaz de fazer, ou seja, recursos e ações. “Affordance” (reconhecimento) é um elemento de design que sugere como um objeto deve ser usado com base na aparência ou comportamento.

Tipo	Mouse	Teclado	Leitor de tela
Funcionalidade	Clicar em blocos abre aplicativo	Pressionar Enter no bloco abre aplicativo	Todas as expectativas do teclado se aplicam
Acessível	O bloco move o cursor quando o mouse é passado	O botão de movimento do bloco tem um indicador de foco visual distinto	O usuário é notificado de possíveis interações
Funcionalidade	Clicar e manter o bloco segurado inicia o arraste	A tecla Espaço inicia o modo de arrastar	Estado de arraste, posição e instruções lidas quando o usuário entrar no modo de arrastar
Acessível	O modo de arrastar tem um estado visual distinto (bloco no ângulo com borda azul)	O modo de arrastar tem um estado visual distinto (bloco no ângulo com borda azul)
Funcionalidade	Mover o mouse ao arrastar move o bloco	As teclas de seta movem o aplicativo para a posição seguinte/anterior na lista
Acessível	O usuário vê a visualização da posição do aplicativo	O usuário vê a visualização da posição do aplicativo	A posição do aplicativo é lida quando muda
Funcionalidade	A liberação do mouse termina o arraste	A tecla Enter sai do modo de arrastar	Posição final e leitura do estado de arraste quando o usuário sai do modo de arrastar

Que outros casos de teste você pode adicionar? Como você fará para testá-los? Embora você consiga escrever testes automatizados para os atributos do leitor de tela e para o comportamento do teclado, você ainda quer fazer alguns testes manuais para garantir que a experiência seja perfeita.

Usar estratégias de testes manuais

Pronto para juntar tudo isso? Veja algumas estratégias para realizar testes de acessibilidade manuais eficazes.

Escrever um plano de teste

Você deve incluir:

Chamar $A.test.assertAccessible para os principais estados visuais (para testes de componentes).
Verificar manualmente o fluxo do teclado.
Considerar fatores exclusivos para seu caso de uso.

Teste cedo e frequentemente

Ao criar as interfaces de usuário:

Teste manualmente.
Habilite a automação de testes.
Procure oportunidades para bloquear a acessibilidade com testes personalizados.

Registrar e corrigir bugs

Na Salesforce, damos prioridade aos bugs de acessibilidade, independentemente do número de usuários que eles afetam. No caso dos usuários afetados por esses bugs, eles podem ser uma barreira fundamental para a conclusão do trabalho. Seja como for que sua organização prioriza bugs, você deve manter os problemas acessibilidade não resolvidos no mínimo.

Ao realizar testes de acessibilidade automatizados e manuais, e eliminar barreiras de acessibilidade, você estará proporcionando uma experiência digital verdadeiramente inclusiva na qual todos podem participar e desfrutar!

Tempo estimado

Tópicos

Procurando ajuda?

Salesforce Platform Recursos

Testar a acessibilidade

Objetivos de aprendizagem

Compreender a importância do teste manual

Realizar testes de teclado e gerenciamento de foco