Como avaliar acessibilidade de sites com o VoiceOver

Ilustração com vários códigos de programação escritos de forma aleatória em branco e amarelo sobre um fundo preto.

Este artigo apresenta de forma prática as principais funcionalidades e comandos do leitor de tela da Apple, chamado VoiceOver, para que você possa aprender a navegar em conteúdos web, usar atalhos do teclado, utilizar o cursor e a navegar por imagens e formulários usando esse tipo de software muito útil a quem tem cegueira ou baixa visão.

O VoiceOver já vem instalado em computadores Mac, iPhones, iPads e iPads touch, mas este texto prioriza as versões do OS X. O objetivo deste artigo é ensinar apenas os controles básicos deste tipo de leitor de tela no teste de conteúdos publicados na web e não informar a lista de todos os seus atalhos.

É normal parecer confuso ou difícil o uso deste tipo de tecnologia para quem ainda não tem familiaridade com ela. Por isso, é importante que você reserve um tempo para se dedicar a este novo aprendizado, não tenha pressa e navegue na web pelo menos um pouco por dia usando o VoiceOver. É preciso um pouco de treino para adquirir essa habilidade.

Este texto é uma adaptação do artigo “Using VoiceOver to Evaluate Web Accessibility”, do site em inglês WebAIM. Com ele, você vai aprender mais sobre esse tipo de tecnologia assistiva e a avaliar a acessibilidade de sites e aplicativos que você costuma navegar por meio do VoiceOver. Confira!

Como iniciar o VoiceOver

O jeito de iniciar e parar o VoiceOver varia de acordo com o computador Apple que você utiliza. Em computadores que são novos e têm a tela sensível, você precisa tocar três vezes no botão TouchID para iniciá-lo.

Nos computadores sem o dispositivo de toque (Touch ID), pressione Command + F5 em seu teclado. Se você está usando um computador MacBook, aperte também o botão fn (function) para ativar o F5. Também é possível liberar o VoiceOver escolhendo “ativar VoiceOver” em Menu Apple > Preferências do Sistema > Acessibilidade > VoiceOver.

As teclas que ativam o VoiceOver são control + option, conhecidas como VO. Elas são usadas para acessar comandos e funções especiais. Neste artigo, vamos utilizar apenas VO para chamar control + option. Por exemplo, VO + H (ou control + option + H) abre o menu de ajuda do VoiceOver.

Algumas dicas e lembretes importantes:

O VoiceOver costuma funcionar melhor no navegador Safari. Ele funciona em outros navegadores, mas com alguns erros. Também interage de forma satisfatória com a maioria dos programas nativos OS X. Este artigo foca exclusivamente no teste de acessibilidade de conteúdos web via Safari.
Você deve ativar a acessibilidade total do teclado antes de testar com Safari. Como fazer isso? No menu Safari, selecione Preferências > Avançado > Acessibilidade e selecione “Pressionar Tabulação para destacar cada item de uma página web”.
Geralmente pessoas que usam leitores de tela não usam mouse. Tente usar também apenas o teclado.
A maioria dos atalhos do navegador funcionam com VoiceOver.

Atalhos do teclado para leitura com VoiceOver

O teclado possui 12 atalhos que você pode usar para ler conteúdos web. A lista a seguir apresenta os principais. Com ajuda deles, você conseguirá ler a maioria dos conteúdos. Você pode aproveitar, inclusive, para praticar a leitura desta página usando todos eles.

VO + A: Começar a leitura
control: Parar a leitura
VO + ➡️: Ler o próximo item
VO + ⬅️: Ler o item anterior
VO + P: Ler parágrafo
VO + S: Ler sentença
VO + W: Ler palavra (tecle W múltiplas vezes para soletrar palavras)
VO + B: Ler do topo da localização atual
VO + Home: Pular ao topo da página (em teclados de MacBook, “Home” é fn + ⬅️)
VO + End: Pular ao final da página (em teclados de MacBook, “End” é fn + ➡️)
VO + command + ⬅️/➡️: Selecionar opções de leitura (velocidade, voz, tom etc.). Use VO + command + ⬆️/⬇️ para modificar a configuração selecionada

Atalhos de navegação com o VoiceOver

Pessoas que enxergam navegam em conteúdos web de várias maneiras. Fazem uma visão geral de títulos, listas, tabelas etc. Vários desses métodos estão disponíveis a quem utiliza o VoiceOver se a página web estiver acessível, ou seja, corretamente estruturada e organizada de acordo com as diretrizes da WCAG.

Os atalhos a seguir vão ajudar você a navegar pelas áreas simples das páginas, os chamados elementos comuns. Você pode teclar Shift com estes comandos a seguir para voltar ao item anterior.

tab: Próximo link ou item do formulário
VO + command + L: Próximo link
VO + command + H: Próximo título ou nível de cabeçalho
VO + command + J: Próximo campo de formulário
VO + command + T: Próxima tabela
VO + command + X: Próxima lista
VO + command + G: Próximo gráfico
VO + space: Ativar um link ou campo de formulário

Acesso pelo cursor através do VoiceOver

O VoiceOver também oferece acesso a vários elementos de página web utilizando o cursor. Abra o cursor pelo teclado (VO + U) e aperte ⬅️ ou ➡️ para alternar entre tabelas, quadros, imagens, títulos (níveis de cabeçalho), links, pontos automáticos web (lista de itens estruturais e significantes da página, gerada automaticamente), campos de formulário, pontos web (áreas de identificação do usuário). Quanto você escolhe um tipo de elemento, basta usar ⬆️ ou ⬇️ para selecionar um elemento específico e enter para ativá-lo.

Você pode digitar para filtrar elementos disponíveis no cursor. Por exemplo, dentro da opção de títulos (níveis de cabeçalho), se digitar “2” filtrará o segundo nível de cabeçalho. Ao digitar “nav”, filtrará os títulos ou níveis de cabeçalho que contém esses caracteres.

Tente fazer isso nesta página para filtrar um título específico. O cursor ajuda você a ter uma visão geral da página e acessar muitos de seus elementos.

Outros atalhos úteis

shift + VO + F: Achar o menu – achar uma grande variedade de elementos da página
shift + VO + I: Ler as estatísticas da página – ter uma visão geral dos conteúdos da página
shift + VO + M: Abrir o menu de atalhos – o equivalente a clicar com o botão direito do mouse
shift + VO + ?: Ajuda online
VO + F8: Utilidades do VoiceOver – trocar as configurações e customizações do VoiceOver
command + L: Barra de endereço do navegador
VO + M: Barra de menu – navegar pelos menus do navegador

Testando o VoiceOver em imagens

Cada imagem que contém conteúdo ou uma função na página precisa de um texto alternativo. Navegue pelo site do Movimento Web para Todos e em outros sites de sua preferência para experimentar como o VoiceOver se comporta com vários tipos de imagens, com ou sem texto alternativo.

Para saber mais sobre como descrever imagens e deixar seu site mais acessível, leia as dicas que divulgamos durante a Campanha #ImagensQueFalam.

Navegação do VoiceOver em tabela de dados

É possível navegar pelas células de uma tabela de dados usando VO + setas. Se a tabela tem cabeçalhos adequados, eles serão automaticamente lidos conforme for explorada no Safari. VO + C também lê os cabeçalhos de coluna e VO + R lê os cabeçalhos de linha.

Funcionamento do VoiceOver em formulários

O VoiceOver funciona bem com formulários construídos corretamente. Quando o elemento de legenda <label> é usado corretamente para associar de maneira clara e direta os campos de formulário e suas descrições, o VoiceOver lerá apropriadamente as legendas quando aquele campo for selecionado.

Se um campo do formulário tiver uma legenda visual que não é associada com um <label>, o VoiceOver não associará automaticamente a descrição do campo de formulário com base na proximidade. A legenda para um <fieldset> será lida por grupos de campos de formulário. Em campos de formulário sem legenda, será lido o valor de título atribuído. Se não forem fornecidos tanto o valor de título quanto a legenda, ambos não serão lidos.

Vamos praticar?

Revise esta página, seção por seção. Ao final de cada uma delas, volte ao topo e navegue por outras páginas de diferentes maneiras. Por exemplo:
- Use a tabela de conteúdos.
- Use VO + U para navegar por vários itens pelo cursor.
- Navegue pelos títulos (VO + command + H).
Cadastre-se no “Faça Parte” do site do Movimento sem usar o mouse.
Você pode escurecer totalmente a tela com VO + shift + F11. Isso proporciona uma experiência mais completa, permitindo que você garanta que a página da web seja realmente acessível apenas por áudio. Ative o escurecimento de tela ou desligue o monitor e repita algumas dessas tarefas listadas anteriormente.

VoiceOver no celular

O VoiceOver funciona de maneira muito parecida no desktop, no iPhone, no iPod Touch e no iPad. A diferença é que tudo é controlado pelo toque nos dispositivos móveis. Alguns deles também suportam a funcionalidade do teclado.

Aprenda mais

Se você não puder ou não quiser esperar até a publicação de nossos próximos guias relacionados a esse tópico, pode acessar os links a seguir retirados do site WebAim. O conteúdo está todo em inglês, mas é possível ativar a tradução automática disponível em alguns navegadores.

*Este conteúdo é uma adaptação do artigo “Using VoiceOver to Evaluate Web Accessibility“, do WebAIM. A tradução é de Vinícius Barqueiro e Gustavo Kitagawa. A edição é de Bianca Evangelista.