Este módulo se concentra no uso de tecnologia adaptativa (TA) para testes de acessibilidade. Uma pessoa com deficiência pode usar a TA para aumentar, manter ou melhorar as capacidades de realizar uma tarefa.
No espaço digital, as TAs podem ser:
- De baixa ou nenhuma tecnologia: bastões de cabeça e boca, lupas manuais, dispositivos com botões grandes
- De alta tecnologia: dispositivos ativados por voz, dispositivos de rastreamento ocular, teclados e mouses adaptáveis
- Hardware: botões de interruptor, teclados ergonômicos, dispositivo Braille com atualização automática
- Software: programas de conversão de texto em voz, legendas ao vivo, leitores de tela
Recomendamos que você use vários tipos de TAs no fluxo de trabalho geral de testes.
Princípios básicos de testes de leitores de tela
Neste módulo, vamos nos concentrar em uma das TAs digitais mais populares, os leitores de tela. Um leitor de tela é um software que lê o código subjacente de um site ou app. Em seguida, ele converte essas informações em saída de voz ou Braille para o usuário.
Os leitores de tela são essenciais para pessoas cegas e surdocegas, mas também podem beneficiar pessoas com baixa visão, distúrbios de leitura e deficiências cognitivas.
Compatibilidade com navegadores
Há várias opções de leitores de tela disponíveis. Os mais populares leitores de tela são JAWS, NVDA e VoiceOver para computadores desktop e VoiceOver e Talkback para dispositivos móveis.
Dependendo do seu sistema operacional (SO), navegador favorito e dispositivo usado, um leitor de tela pode se destacar como a melhor opção. A maioria dos leitores de tela é criada com hardware e navegadores da Web específicos. Ao usar um leitor de tela com um navegador para o qual ele não foi calibrado, você pode encontrar mais "bugs" ou comportamentos inesperados. Os leitores de tela funcionam melhor quando usados nas combinações a seguir.
| Leitor de tela | SO | Compatibilidade com navegadores |
|---|---|---|
| Job Access With Speech (JAWS) | Windows | Chrome, Firefox, Edge |
| Non-Visual Desktop Access (NVDA) | Windows | Chrome e Firefox |
| Narrator | Windows | Edge |
| VoiceOver | macOS | Safari |
| Orca | Linux | Firefox |
| TalkBack | Android | Chrome e Firefox |
| VoiceOver (para dispositivos móveis) | iOS | Safari |
| ChromeVox | ChromeOS | Chrome |
Comandos do leitor de tela
Depois de configurar corretamente o software do leitor de tela para seu computador ou dispositivo móvel, consulte a documentação do leitor de tela (vinculada na tabela anterior) e execute alguns comandos essenciais do leitor de tela para se familiarizar com a tecnologia. Se você já usou um leitor de tela antes, tente um novo.
Ao usar um leitor de tela para testes de acessibilidade, seu objetivo é detectar problemas no código que interferem no uso do site ou app, não emular a experiência de um usuário de leitor de tela. Assim, há muito que você pode fazer com algum conhecimento básico, alguns comandos de leitor de tela e um pouco (ou muito) de prática.
Se você precisar entender melhor a experiência do usuário de pessoas que usam leitores de tela e outras TAs, entre em contato com muitas organizações e indivíduos para ter esse insight valioso. Lembre-se de que o uso de uma TA para testar o código em relação a um conjunto de regras e perguntar aos usuários sobre a experiência deles geralmente gera resultados diferentes. Ambos são aspectos importantes para criar produtos totalmente inclusivos.
Comandos principais para leitores de tela de computador
| Elemento | NVDA (Windows) | VoiceOver (macOS) |
|---|---|---|
| Teclas de comando gerais | Insert | Control+Option |
| Parar áudio | Control | Control |
| Ler próximo/anterior | ↓ ou ↑ | Control+Option+→ ou ← |
| Começar a ler | Insert↓ | Control+Option+A |
| Lista de elementos/rotor | NVDA + F7 | Control+Option+U |
| Pontos de referência | D | Control+Option+U |
| Títulos | H | Control+Option+Command+H |
| Links | K | Control+Option+Command+L |
| Controles de formulários | F | Control+Option+Command+J |
| Tabelas | T | Control+OptionCommand+T |
| Em tabelas | Insert Alt + ↓ ↑ ← → | Control+Option+↓ ↑ ← → |
Comandos principais para leitores de tela de dispositivos móveis
| Elemento | TalkBack (Android) | VoiceOver (iOS) |
|---|---|---|
| Explorar | Arraste um dedo pela tela | Arraste um dedo pela tela |
| Selecionar ou ativar | Tocar duas vezes | Tocar duas vezes |
| Mover para cima ou para baixo | Deslize para cima ou para baixo com dois dedos | Deslize para cima ou para baixo com três dedos |
| Alterar páginas | Deslize para a esquerda ou direita com dois dedos | Deslize para a esquerda ou direita com três dedos |
| Próximo/anterior | Deslize para a esquerda ou direita com um dedo | Deslize para a esquerda ou direita com um dedo |
Demonstração de testes de leitores de tela
Para testar nossa demonstração, usamos um Safari em um laptop com macOS e capturamos o som. Você pode seguir estas etapas usando qualquer leitor de tela, mas a maneira como você encontra alguns erros pode ser diferente da descrita neste módulo.
Etapa 1
Acesse o CodePen atualizado, que tem todas as atualizações de acessibilidade automatizadas e manuais aplicadas.
Visualize-o no modo de depuração para continuar com os próximos testes. Isso é importante, porque remove o <iframe> que envolve a
página da Web de demonstração, o que pode interferir em algumas ferramentas de teste. Saiba mais sobre
o modo de depuração do CodePen.
Etapa 2
Ative o leitor de tela de sua preferência e acesse a página de demonstração. Você pode navegar por toda a página de cima para baixo antes de se concentrar em problemas específicos.
Gravamos o leitor de tela para cada problema, antes e depois das correções serem aplicadas à demonstração. Recomendamos que você execute a demonstração com seu próprio leitor de tela.
Problema 1: estrutura de conteúdo
Títulos e pontos de referência são uma das principais maneiras de as pessoas navegarem usando leitores de tela. Se eles não estiverem presentes, um usuário de leitor de tela terá que ler a página inteira para entender o contexto. Isso pode levar muito tempo e causar frustração.
Se você tentar navegar por qualquer elemento na demonstração, vai descobrir rapidamente que eles não existem.
- Exemplo de ponto de referência:
<div class="main">...</div> - Exemplo de título:
<p class="h1">Join the Club</p>
Se você atualizou tudo corretamente, não haverá mudanças visuais, mas a experiência do leitor de tela terá melhorado muito.
Vamos corrigir isso.
Alguns elementos inacessíveis não podem ser observados apenas olhando para o site. Você pode se lembrar da importância dos níveis de título e do HTML semântico do módulo Estrutura de conteúdo. Um conteúdo
pode parecer um título, mas na verdade está envolvido em um <div> estilizado.
Para corrigir o problema com títulos e pontos de referência, primeiro identifique cada elemento que precisa ser marcado como tal e atualize o HTML relacionado. Não se esqueça de atualizar o CSS relacionado também.
- Exemplo de ponto de referência:
<main>...</main> - Exemplo de título:
<h1>Join the Club</h1>
Se você atualizou tudo corretamente, não haverá mudanças visuais, mas a experiência do leitor de tela terá melhorado muito.
Problema 2: contexto do link
É importante fornecer conteúdo aos usuários de leitores de tela sobre a finalidade de um link e se ele está redirecionando para um novo local fora do site ou app.
Na nossa demonstração, corrigimos a maioria dos links quando atualizamos o texto alternativo da imagem ativa, mas há alguns links adicionais sobre as várias doenças raras que poderiam se beneficiar de um contexto adicional, especialmente porque eles redirecionam para um novo local.
<a href="https://rarediseases.org/rare-diseases/maple-syrup-urine-disease">
Maple syrup urine disease (MSUD)
</a>
Para corrigir esse problema para usuários de leitores de tela, atualizamos o código para adicionar mais informações, sem afetar o elemento visual. Ou, para ajudar ainda mais pessoas, como aquelas com distúrbios de leitura e cognitivos, podemos adicionar texto visual adicional.
Há muitos padrões diferentes que podemos considerar para adicionar informações de link adicionais. Com base no nosso ambiente que oferece suporte a apenas um idioma, um rótulo ARIA é uma opção simples nessa situação. O rótulo ARIA substitui o texto do link original. Portanto, inclua essas informações na atualização.
<a href="https://rarediseases.org/rare-diseases/maple-syrup-urine-disease"
aria-label="Learn more about Maple syrup urine disease on the Rare Diseases website.">
Maple syrup urine disease (MSUD)
</a>
Problema 3: imagem decorativa
No nosso módulo de testes automatizados, o Lighthouse não conseguiu detectar o SVG inline que atua como a imagem de abertura principal na nossa página de demonstração. No entanto, o leitor de tela o encontra e o anuncia como "imagem" sem informações adicionais.
Isso é verdade, mesmo sem adicionar explicitamente o role="img" atributo ao
SVG.
<div class="section-right">
<svg>...</svg>
</div>
Para corrigir esse problema, primeiro precisamos decidir se a imagem é informativa ou decorativa. Com base nessa decisão, precisamos adicionar o texto alternativo de imagem apropriado (imagem informativa) ou ocultar a imagem dos usuários de leitores de tela (decorativa).
Analisamos as vantagens e desvantagens de como categorizar melhor a imagem e decidimos que ela era decorativa, o que significa que queremos adicionar ou modificar o código para ocultar a imagem. Um método rápido é adicionar um role="presentation" diretamente à imagem SVG. Isso envia um sinal ao leitor de tela para pular essa imagem e não listá-la no grupo de imagens.
<div class="section-right">
<svg role="presentation">...</svg>
</div>
Problema 4: decoração de marcador
Você pode ter notado que o leitor de tela lê a imagem de marcador CSS nas seções de doenças raras. Embora essa imagem não seja a mesma que discutimos no módulo Imagens, ela ainda precisa ser modificada, pois interrompe o fluxo do conteúdo e pode distrair ou confundir um usuário de leitor de tela.
<p class="bullet">...</p>
Assim como o exemplo de imagem decorativa discutido anteriormente, você pode adicionar um
role="presentation" ao HTML com a classe de marcador para ocultá-lo do
leitor de tela. Da mesma forma, um role="none" funcionaria. Não use aria-hidden: true ou você vai ocultar todas as informações do parágrafo dos usuários de leitores de tela.
<p class="bullet" role="none">...</p>
Problema 5: campo de formulário
No módulo Formulários, aprendemos que todos os campos de formulário também precisam ter um rótulo visual e programático. Esse rótulo precisa permanecer visível em todos os momentos.
Na nossa demonstração, não temos um rótulo visual e programático no campo de e-mail de inscrição na newsletter. Há um elemento de marcador de texto, mas ele não substitui o rótulo, porque não é visualmente persistente e não é totalmente compatível com todos os leitores de tela.
<form>
<div class="form-group">
<input type="email" placeholder="Enter your e-mail address" required>
<button type="submit">Subscribe</button>
</div>
</form>
Para corrigir esse problema, substitua o marcador de texto por um elemento de rótulo semelhante. Esse elemento de rótulo está conectado programaticamente ao campo do formulário, e o movimento foi adicionado com JavaScript para manter o rótulo visível mesmo quando o conteúdo é adicionado ao campo.
<form>
<div class="form-group">
<input type="email" required id="youremail" name="youremail" type="text">
<label for="youremail">Enter your e-mail address</label>
<button type="submit" aria-label="Subscribe to our newsletter">Subscribe</button>
</div>
</form>
Conclusão
Parabéns! Você concluiu todos os testes desta demonstração. Você pode conferir todas essas mudanças no Codepen atualizado para esta demonstração.
Agora, você pode usar o que aprendeu para revisar a acessibilidade dos seus próprios sites e apps.
O objetivo de todos esses testes de acessibilidade é resolver o maior número possível de problemas que um usuário possa encontrar. No entanto, isso não significa que seu site ou app seja perfeitamente acessível depois de terminar. Você terá mais sucesso ao projetar seu site ou app com acessibilidade durante todo o processo e incorporar esses testes com seus outros testes de pré-lançamento.