Como começar a testar seu site com um leitor de tela

Não há dúvidas quanto à importância de construir sites acessíveis. É um tópico constante de discussão na comunidade de web design. E, na minha opinião, a maioria dos designers quer acertar.

A acessibilidade impacta a todos nós de uma forma ou de outra. Sejam as palavras específicas usadas em uma postagem de blog ou a capacidade de navegar de uma página para outra – isso importa.

Mas se você não é alguém que depende de tecnologia assistiva como um leitor de tela, pode haver uma desconexão. É muito fácil ignorar como um determinado recurso afeta os usuários. Isso é provável porque não testamos nesse contexto.

Admito que tenho lutado nesta área. E aposto que há muitos outros designers que também têm. Meu privilégio como usuário com visão que navega através do mouse nem sempre me levou a considerar alguns aspectos importantes da acessibilidade.

É verdade, eu testo com ferramentas automatizadas. Certifico-me de que as fontes são legíveis, o contraste de cores atende aos padrões WCAG e as imagens utilizam o atributo ALT. Essas são todas as coisas boas. No entanto, eles não representam a experiência completa de usar um site.

Então, como levar as coisas para o próximo nível? Testar seu site com um leitor de tela é uma ótima maneira de começar. Vamos dar uma olhada para iniciantes no que está envolvido. A partir daí, compartilharei o que encontrei durante minha experimentação.

Encontre um aplicativo de leitura de tela

O primeiro passo no processo é encontrar um aplicativo de leitura de tela adequado. Talvez você não precise ir muito longe, pois alguns sistemas operacionais incluem um por padrão.

Os usuários de Mac têm acesso ao VoiceOver, enquanto os do Windows podem acessar o Narrador. Além disso, existem várias outras opções disponíveis para praticamente todos os sistemas operacionais. De minha parte, vou com o aplicativo de código aberto NVDA. É de uso gratuito (sustentado por doações) e está entre as escolhas mais populares.

Independentemente do aplicativo que você escolher, é importante ter uma compreensão básica de como ele funciona. Além disso, pode haver a necessidade de fazer alguns ajustes de antemão. Por exemplo, você deve certificar-se de que consegue entender o que está sendo lido. Você também pode querer que o software destaque o conteúdo à medida que ele é lido, facilitando o acompanhamento.

O WebAIM reuniu alguns guias úteis para configurar vários leitores de tela para fins de teste. Eles o colocarão em uma boa posição para ver o quão acessível é o seu site.

Como se locomover

Agora que você tem um leitor de tela confiável pronto, é hora de testar! Para ter um gostinho da experiência do usuário, tente percorrer as várias partes do seu site por meio de um teclado com o leitor de tela ativado.

Alguns comandos do teclado são mais universais do que outros. Por exemplo, a tecla TAB o levará a vários links e controles de formulário, enquanto ENTER o levará ao destino de um link. A maioria parece usar as setas do teclado para se mover de linha em linha.

No entanto, pode haver alguns comandos especiais específicos para um aplicativo de leitura de tela. Eles permitem navegar entre títulos, pontos de referência como cabeçalhos e rodapés, etc. Para isso, você deve verificar sua documentação.

Também vale a pena notar que é preciso prática para navegar efetivamente em um site dessa maneira. As primeiras tentativas podem ser um pouco estranhas. Mas assim que você pegar o jeito dos vários comandos, as coisas devem se tornar mais intuitivas.

Minha experiência com um leitor de tela

Só para esclarecer as coisas – não sou um usuário especialista em leitores de tela. Meu conhecimento é rudimentar na melhor das hipóteses. Mas minha experiência com o NVDA tem sido esclarecedora.

Usei algumas páginas do site da minha empresa como campo de testes. E o que encontrei não foram necessariamente grandes falhas. O texto podia ser lido e o site podia ser navegado.

Em vez disso, descobri alguns aborrecimentos – coisas que, compreensivelmente, frustrariam os usuários. Vamos analisar alguns exemplos:

Um controle deslizante que interrompe

Em uma entrevista com o especialista em acessibilidade Taylor Arndt, ela mencionou carrosséis/apresentações de slides como recursos que podem prejudicar a acessibilidade. Testar com um leitor de tela traz isso à tona.

O carrossel automatizado que usei era navegável, mas tinha o péssimo hábito de se anunciar toda vez que o próximo slide aparecia. Isso tornou muito difícil para o leitor de tela ir muito longe em outras seções da página antes de ser interrompido.

Eu encontrei uma correção bastante simples. O plug-in de controle deslizante do WordPress que utilizo (Soliloquy) tem a opção de alterar a região ao vivo do ARIA para uma configuração menos agressiva. Isso, juntamente com o uso de navegação manual para o carrossel, eliminou o incômodo.

Texto repetitivo

Usar o atributo ALT com imagens é um conselho comum de acessibilidade. Mas para imagens puramente decorativas, fornecer texto descritivo pode ser redundante. Eu me deparei com isso em algumas ocasiões diferentes.

As listagens de postagens do blog foram as principais culpadas. Tanto o título do post quanto os atributos ALT da imagem em destaque eram idênticos – o que significa que o leitor de tela os leu duas vezes. O resultado é que mesmo uma listagem de posts relativamente curta contribui para um UX doloroso.

O ponto de discórdia é que o bloco de listagens de posts do WordPress que usei não tem uma opção para deixar atributos ALT vazios. Assim, uma solução alternativa pode ser necessária.

Descubra como a acessibilidade do site funciona na prática

Construir sites que seguem os padrões WCAG é satisfatório – e é o que devemos fazer como web designers. Mas marcar as caixas em uma lista de tarefas não conta a história completa.

Obter uma melhor compreensão de como os outros experimentarão seu trabalho requer um pouco de esforço extra. O teste com um leitor de tela fornece um caminho para obter mais informações. E embora este não seja de forma alguma um guia completo, espero que ajude a despertar seu interesse e experiência.

Como descobri, mesmo que um item seja considerado acessível pela letra de um padrão, isso não significa que seja fácil de usar. É por isso que vale a pena cavar um pouco mais fundo. Pode ser a diferença entre um site que é meramente utilizável ou um que oferece a melhor experiência possível.

Nota: Como mencionado acima, sou um novato quando se trata dessa tecnologia. Se você tiver dicas de leitores de tela para compartilhar, sinta-se à vontade para entrar em contato comigo pelo Twitter.