Publicações

7 ferramentas que auxiliam na acessibilidade para web

Caio Fábio Duarte Ferreira
Caio Fábio Duarte Ferreira Frontend Developer

Acessibilidade, em outras palavras, é fazer com que todas as pessoas desfrutem da mesma experiência.

Segundo a Convenção das Nações Unidas sobre os direitos das pessoas com deficiência, acessar e contribuir com conteúdo da web é um direito humano básico que não deve ser limitado de nenhuma forma.

Se sua empresa tem algum produto ou serviço e quer ter qualidade na entrega, ter uma boa acessibilidade tornará seu produto visível por muito mais pessoas.

Ao longo desse post, você irá conhecer 7 ferramentas que auxiliam a fazer testes de acessibilidade na sua aplicação, além de trazerem também melhorias na experiência de navegação de pessoas com alguma deficiência, possibilitando que a página web se torne mais acessível.

1 - Job Access With Speech (JAWS)

JAWS é o leitor de tela mais popular do mundo, projetado para usuários de computador que perderam a visão e tem dificuldades na navegação. O JAWS fornece saída de voz e braille para os aplicativos de computador mais populares no PC.

Job Access With Speech logo

Você poderá navegar na Internet, escrever documentos, ler e-mails e criar apresentações no escritório, área de trabalho remota ou em casa. Confira uma demonstração prática do uso do JAWS.

O JAWS permite que todas as funções principais do sistema operacional Microsoft Windows sejam controladas com atalhos de teclado e feedback falado, possibilitando testes prévios de acessibilidade por desenvolvedores para evitar tirar conclusões erradas, proporcionando implementações que melhorem a experiência de um usuário que possui deficiência visual.

Especificações
Ferramenta Memoria (RAM) Sistema operacional Som
Paga Recomendado: 16 GB ou mais Windows® 11, 10, Server® 2019, and Server 2016 Placa de som compatível com Windows (para fala)

2 - NonVisual Desktop Access (NVDA)

NVDA é um leitor de tela portátil gratuito para Microsoft Windows.

NonVisual Desktop Access logo

Além das funções gerais do Windows, o NVDA também pode ser usado com aplicativos de escritório da Microsoft:

  • WordPad
  • Bloco de notas
  • Internet Explorer
  • Chrome e outros softwares
  • Mozilla Firefox

Suporta as funções básicas:

  • Outlook Express
  • Microsoft Word
  • Microsoft PowerPoint
  • Microsoft Excel
  • LibreOffice
  • OpenOffice.org

O NVDA oferece suporte ao padrão WAIARIA para acessar aplicativos ricos da Internet para promover um melhor acesso aos aplicativos da Web para usuários cegos.

Por mais que seja uma ferramenta gratuita, você nunca terá que sacrificar a qualidade quanto as alternativas de leitores de tela pagos.

Os dois líderes são JAWS e NVDA. JAWS é a plataforma de escolha para usuários cegos. No entanto, é muito caro.

A diferença mais significativa entre o NVDA e o JAWS é que o JAWS oferece muitos recursos (incluindo scripts) que permitem que usuários cegos personalizem suas configurações.

Especificações
Ferramenta Licença Memoria (RAM) Sistema operacional Velocidade do processador
Gratuita Open source 256 MB ou mais de RAM Todas as edições de 32 e 64 bits do Windows 7, 8, 8.1, 10 e 11. 1,0 ghz ou superior,Cerca de 90 MB de espaço de armazenamento

3 - Hand Talk

O Hand Talk é um plugin que permite fazer leitura de textos e imagens gerando um tradutor virtual em tempo real para pessoas com deficiência auditiva.

Hand talk logo

Cerca de 9,7 milhões de pessoas possuem deficiência auditiva no Brasil. São semi-alfabetizados ou analfabetos nas línguas escritas e dependem das Línguas de Sinais.

Você pode avaliar as traduções do Hugo, o tradutor virtual, e salvar as suas favoritas, ajustar a velocidade, personalizar suas roupas e muito mais!

O aplicativo Hand Talk é uma ferramenta poderosa, utilizada nos mais diversos contextos:

  • Em sala de aula, por professores, alunos e intérpretes como recurso complementar de comunicação
  • Em casa, por famílias com surdos e ouvintes
  • Por alunos de língua de sinais que desejam aprimorar seu vocabulário com o Help do Hugo

Ao instalar o Hand Talk no seu site ou na sua aplicação, o conteúdo fica acessível em Libras em questão de poucos minutos.

Após a instalação da ferramenta, os usuários da sua página têm acesso à janela de Libras, onde podem traduzir os conteúdos para a língua de sinais através do Hugo, o tradutor virtual.

Especificações
Ferramenta
Gratuita

4 - Windows

O sistema operacional possui tecnologias assistivas integradas que funcionam não apenas com o próprio sistema operacional, mas também com aplicativos do Windows e software de desktop para fornecer às pessoas acesso direto à experiência do Windows.

Ferramentas de acessibilidade Windows

Usando dispositivos de toque, as pessoas podem interagir diretamente com tudo em sua tela através do toque e sem a necessidade de usar um mouse ou teclado, incluindo o gerenciamento de opções de acessibilidade por meio da Central de Facilidade de Acesso do sistema operacional.

O novo painel de acessibilidade e o ícone humano nas configurações do Windows 11 foram projetados para facilitar a localização e o uso de todos os recursos de acessibilidade integrados fornecidos pelo Windows para personalizar seu dispositivo de acordo com suas necessidades exclusivas, podendo ser utilizado para testar sistemas para web de forma nativa.

Especificações
Ferramentas para acessibilidade inclusas no windows
Visão, Audição, Mobilidade, Neurodiversidade e aprendizagem

5 - Android

Os recursos de acessibilidade do Android permitem que os usuários personalizem seus dispositivos modificando as configurações ou aplicativos de acessibilidade para melhorar sua experiência.

Sistema android logo

Isso permite que indivíduos com várias deficiências (como deficiências visuais, auditivas, físicas ou de linguagem) melhorem sua capacidade de acessar e interagir com páginas da web e aplicativos, além de ser um ótimo recurso para ajudar os desenvolvedores a testarem a acessibilidade do site.

Recursos de acessibilidade do android:

  • Feedback falado
  • Selecionar para falar
  • Acesso com interruptor
  • Comandos de voz
  • Display Braille
  • Tamanho de exibição e tamanho da fonte
  • Gestos de ampliação
  • Opções de contraste e cor
  • Legendas
Especificações
Recursos de suporte android
Áudio, Visão, Mobilidade

6 - Apple

O equipamento mais personalizado do mundo é projetado para todos.

Sistema IOS apple logo

Portanto inclui pessoas com:

  • Deficiência visual
  • Deficiência de mobilidade
  • Deficiência auditiva

MacOS e iOS incluem uma ampla gama de recursos e tecnologias de assistência, como ampliação de tela e cursor, leitores de tela inteira, alerta visuais intermitentes, suporte a legendas ocultas e muito mais.

Diferente das outras ferramentas que são softwares a parte, esses recursos de acessibilidade na Apple já são integrados possibilitando desenvolvedores a testar para web utilizando essas ferramentas nativa.

Especificações
Recursos de suporte IOS
Toque assistido, Controle do interruptor, Acesso guiado, Controle de voz

7 - Essential accessibility

Essential Accessibility é uma ferramenta que auxilia pessoas com diversos tipos de deficiências:

  • Paralisia de membros superiores

  • Paralisia cerebral

  • Fatores relacionados com a idade

  • AVC

  • Dislexia / Iliteracia

  • Distrofia Muscular

  • Problemas Congênitos

  • Artrite / Artrose

  • Esclerose múltipla

  • Mal de Parkinson

Essential accessibility logo

Uma solução tudo-em-um que combina tecnologia de primeira classe, acessibilidade incomparável, experiência e suporte jurídico, bem como treinamento de certificação e conformidade em uma única plataforma.

Recursos da ferramenta:

  • Mouse visual
  • Teclado na tela
  • Leitor de página
  • Comandos de Voz
  • Substitutos de Mouse
  • Barra de ferramentas personalizável
Especificações
Recursos disponibilizado pela EA
Varredura Automatizada , Teste Humano, Treinamento e capacitação, Teste de aplicativo móvel, VPATs

Como melhorar a acessibilidade de seu site

Agora que sabemos quais ferramentas nos auxiliam na acessibilidade, abordaremos algumas técnicas utilizando elementos do HTML semântico garantindo o máximo de acessibilidade para seu site.

Pré-requisitos

  • Conhecimento básico de informática
  • Básico de HTML

Objetivo

Se familiarizar com elementos do HTML que utilizam acessibilidade e utilizá-los de forma apropriada.

Estrutura website

Aplicar corretamente as tags semânticas do HTML5 facilitará o uso das ferramentas acima e impulsionará a acessibilidade do conteúdo web para mecanismos de busca.

Em questão de tamanho, essas tags são mais limpas e menores, o que significa ser mais fácil de manter o código.

<header>
  <h1>Cabeçalho</h1>
</header>

<nav>
  <!-- Navegação principal aqui -->
</nav>

<!-- Aqui é o conteúdo principal da página -->
<main>

  <!-- Que contém um artigo -->
  <article>
    <h2>Título do artigo</h2>

    <!-- Conteúdo do artigo aqui -->
  </article>

  <aside>
    <h2>Relacionados</h2>

    <!-- Conteúdo a parte aqui -->
  </aside>

</main>

<!-- E aqui é um rodapé utilizado em todas as páginas do nosso site -->

<footer>
  <!-- Conteúdo do rodapé aqui -->
</footer>

Conteúdo textual da página

Uma das melhores maneiras de ajudar os leitores de tela a interpretar suas páginas é criar uma estrutura boa e consistente de cabeçalhos, parágrafos, listas, etc.

Portanto, utilize as tags HTML que atende seu significado e proposito evitando uma estrutura não semântica.

Exemplos de boa semântica são os seguintes:

<h1>Meu título</h1>

<p>Essa é a primeira sessão do meu documento.</p>

<p>Eu vou adicionar outro parágrafo aqui também.</p>

<ol>
  <li>Aqui é</li>
  <li>uma lista para</li>
  <li>você ler</li>
</ol>

<h2>Meu sub-título</h2>

<p>Essa é a primeira sub sessão do meu documento. Eu adoro quando as pessoas conseguem encontrar meu conteúdo!</p>

<h2>Meu segundo sub-título</h2>

<p>Essa é a primeira sub sessão do meu documento. Eu acho que essa é mais interessante que a última.</p>

Botão

O elemento <button> possui padrões de acessibilidade pelo teclado — botões podem ser navegados através da tecla tab do teclado, e ativados utilizando a tecla Enter / Return.

 <button>Play vídeo</button>

Imagem

O atributo alt deve sempre fornecer uma representação direta da imagem e do que ela transmite visualmente.

Nenhum conhecimento pessoal ou descrição adicional deve ser incluído aqui, pois não é útil para pessoas que nunca encontraram a imagem antes, pois o leitor de tela ira encontrar esse atributo.

Noiva dançando em campo aberto e arvores ao redor.

 <img
  src="noiva.png"
  title="Noiva dançando em campo verde"
  alt="Noiva dançando em campo aberto e arvores ao redor"
 />

Nesse caso, a maioria dos leitores de tela lerá o texto alternativo, atributos de título e nomes de arquivo. Além disso, o navegador exibe o texto do título como uma dica de ferramenta quando o mouse é passado.

Considerações finais sobre acessibilidade

Neste artigo, fornecemos informações básicas sobre acessibilidade que podem ajudá-lo a desenvolver aplicativos e a manter as boas práticas como desenvolvedor. Também mencionamos as principais ferramentas que podem oferecer suporte a nossos testes de acessibilidade e como seguir esses padrões estabelecidos, usando-os corretamente para manter boas práticas e deixar a web mais acessível.

Para saber mais

Referências

Solução de problemas, melhoria de gestão e aumento de produtividade

Com tecnologias renomadas, aplicamos práticas ágeis e capacitamos sua equipe.

Fale com um consultor