Pessoa com deficiência visual usa notebook com fones de ouvido enquanto elementos visuais representam o funcionamento de leitor de tela em um site acessível.

Leitor de tela: o que é e como funciona no seu site

Felipe Gruetzmacher
Instagram da Perto DigitalFacebook da Perto DigitalCanal do Youtube da Perto Digital

Uma pessoa cega abre o site de uma loja pelo celular. O leitor de tela lê o menu, mas trava logo depois, num carrossel de imagens sem texto alternativo. Ela desiste, fecha a aba, e a loja nunca vai saber quanto faturamento perdeu com isso.

Uma marca corre esse risco todos os dias sem perceber, às vezes até depois de instalar um plugin de acessibilidade no site. Essa tecnologia assistiva está entre a pessoa usuária e o conteúdo de um site. Entender como ela funciona é o primeiro passo para não perder esse público pelo caminho.

Este artigo mostra qual o papel do leitor de tela e como ele interpreta o conteúdo de uma página. Também apresenta o que precisa mudar no código para que um site funcione bem com esse recurso.

Continue a leitura!

Neste Artigo:

O que é um leitor de tela e quem usa

O leitor de tela é uma tecnologia assistiva que converte o conteúdo de uma tela, seja texto, imagem ou comando de menu, em voz ou em Braille. É assim que pessoas cegas ou com baixa visão navegam por sites, aplicativos e documentos sem depender da visão. 

A mesma lógica vale para quem tem deficiência motora e não consegue usar mouse, ou para quem tem dislexia e entende melhor um conteúdo ouvindo do que lendo.

Como funciona a navegação por leitor de tela

Em linhas gerais, o leitor de tela identifica textos, botões e imagens. Assim, ele lê em voz alta esses conteúdos para orientar a pessoa usuária. Essa síntese de voz é uma ferramenta para a acessibilidade digital.

Por conta disso, elementos como imagens de sites devem vir acompanhados de texto alternativo. Ele é uma descrição textual sucinta, inserida no código, que os leitores de tela interpretam e apresentam para a pessoa usuária.

Além disso, essa tecnologia pode converter conteúdo visual em atualizações táteis por meio de dispositivos físicos, como o display ou linha Braille. O funcionamento segue essa lógica:

  • A conexão entre o software e a Linha Braille (Display Atualizável) levanta pinos mecânicos, formando caracteres em Braille conforme a pessoa usuária avança no texto;
  • O software intercepta o texto do sistema operacional ou da página web. Em seguida, envia esse conteúdo tanto para a linha Braille quanto para o sintetizador de voz;
  • A última etapa é a garantia de que a pessoa usuária tenha liberdade, privacidade e autonomia para compreender os conteúdos.

Há muitos modelos, como:

  • NVDA: programa gratuito usado no Windows;
  • JAWS: leitor pago e profissional para computadores com Windows;
  • VoiceOver: leitor presente nos aparelhos da Apple, como Mac e iPhone;
  • TalkBack: leitor padrão para telefones com sistema Android.

Navegação por teclado: um recurso complementar

Existe, ainda, um recurso que complementa essa tecnologia: a navegação por teclado. Combinados, essas duas soluções permitem que pessoas com deficiência visual operem o computador e compreendam o conteúdo digital sem depender do mouse.

Na prática, a pessoa usuária acessa o site a partir de teclas específicas como Tab, Shift + Tab e Enter para se mover de um elemento para outro na tela. Desse modo, o software detecta onde está o foco do teclado e lê o item em voz alta.

Essa dupla de ferramentas amplia a independência da pessoa usuária na navegação. Muitos outros aspectos desse funcionamento merecem atenção. Eles influenciam diretamente a precisão com que o conteúdo web chega até quem está do outro lado da tela.

O que torna um site compatível com leitor de tela

A compatibilidade com leitor de tela depende da garantia de que a pessoa com deficiência visual consiga navegar pelo site com autonomia. Para isso, o HTML semântico e os atributos ARIA cumprem um papel determinante.

O HTML semântico utiliza tags que atribuem significado ao conteúdo, funcionando como um mapa por meio destas etapas:

  • Tags como <header>, <nav>, <main> e <footer> informam essa tecnologia sobre onde fica o menu, o conteúdo principal e o rodapé. Assim, a pessoa usuária consegue acessar direto a parte que deseja ouvir;
  • O uso de <h1>, <h2> e <h3> em ordem correta possibilita que o leitor crie um sumário. Dessa forma, a pessoa usuária pode saltar de título em título;
  • A utilização de <button> para ações e <a> para links garante que o leitor aponte se o item é um link para outra página ou um botão.

Já os atributos ARIA (Accessible Rich Internet Applications) são códigos acrescentados ao HTML. Eles ajudam leitores de tela e outras tecnologias assistivas a compreender elementos complexos ou dinâmicos nas páginas web. Esses fatores são importantes porque:

  • Agregam significados a elementos visuais que o HTML puro não descreve bem;
  • Modificam o modo como essa tecnologia enxerga o elemento, sem mudar a aparência visual da página;
  • Mostram se um menu está aberto, se uma caixa de marcação está selecionada ou se um botão foi ativado.

Web Content Accessibility Guidelines (WCAG)

Outro aspecto importante na compatibilidade é o cumprimento da WCAG.

Afinal, as Diretrizes WCAG são regras criadas para garantir que sites sejam compatíveis e funcionem bem com leitores de tela e demais softwares de acessibilidade. Assim, a WCAG exige uma estrutura lógica no código para que o áudio siga uma sequência correta.

Um plugin de acessibilidade substitui o leitor de tela?

O plugin de acessibilidade instalado em um site não substitui o leitor de tela, mas pode complementar o trabalho dele quando é bem construído. 

A acessibilidade efetiva depende de código limpo, com rótulos corretos e HTML bem estruturado, e nenhum plugin substitui essa base. Um plugin bem projetado, porém, reforça exatamente esse trabalho: soma camadas de acessibilidade ao que já existe no código, em vez de tentar substituí-lo.

O Plugin Perto foi pensado exatamente para isso. Ele reforça a experiência de quem já usa leitor de tela e outras tecnologias assistivas, ao lado do trabalho de deixar o código acessível. 

Faça um teste gratuito agora mesmo e veja o que muda na prática para o site da sua empresa!

Perguntas frequentes

Quais os leitores de tela mais usados no Brasil?

Entre os leitores de tela mais conhecidos estão NVDA e JAWS, no Windows, VoiceOver, em dispositivos Apple, e TalkBack, em dispositivos Android.

Meu site precisa de um plugin para ser compatível com leitor de tela?

Não. A compatibilidade com leitores de tela depende principalmente de uma estrutura acessível, com HTML semântico, textos alternativos, nomes acessíveis, foco adequado e uso correto de ARIA quando necessário. Um plugin pode oferecer recursos complementares, mas não substitui a acessibilidade do código.

Felipe Gruetzmacher

Felipe Emilio Gruetzmacher é um homem autista que atua como redator da Perto Digital, diretor de produção textual da diverSCInnova, copywriter da Editora Simulacro e blogueiro do site da ANAGEA (Associação Nacional dos Gestores Nacionais). Acredita no potencial da tecnologia em transformar a experiência digital e promover a inclusão das pessoas com deficiência.
LinkedInInstagram
Ver todos os posts

Posts relacionados

Pessoa com deficiência visual usa notebook com fones de ouvido enquanto elementos visuais representam o funcionamento de leitor de tela em um site acessível.

Felipe Gruetzmacher

Leitor de tela: o que é e como funciona no seu site

Entenda o que é leitor de tela, como funciona e o que torna um site compatível com essa tecnologia.

Ler artigo

Homem com deficiência visual utiliza um computador com teclado, enquanto ícones de setas representam a navegação por teclado em um site acessível.

Felipe Gruetzmacher

Navegação por teclado: o que é e como aplicar no seu site

Entenda o que é navegação por teclado, por que ela importa e como testar seu site.

Ler artigo

Homem usando laptop para design digital, com interface de edição de cores e textos visíveis na tela. Ambiência moderna e iluminada.

Felipe Gruetzmacher

Como tornar um site acessível para pessoas com daltonismo

Um site acessível para pessoas com daltonismo utiliza contraste adequado, elementos visuais que...

Ler artigo