Dicas para agilizar a navegação em sites com leitor de tela

2924 Visualizações:
Comentários: 22
Curtidas:

Como muitos sabem, fui o criador e mantenedor do site do Movimento Livre, há mais ou menos 3 anos atrás. Nesse período aprendi muita coisa sobre programação, usabilidade e principalmente sobre acessibilidade na web. Fiz, e continuo fazendo, várias pesquisas sobre acessibilidade em sites e aplicações web em geral.

Essa experiência me fez entender de forma mais clara como os leitores de tela interagem com os sites, assim posso garantir pra você, que entendendo melhor como funcionam as páginas da internet, você terá um desempenho melhor na hora de desfrutar um conteúdo.

As dicas e sugestões abaixo farão você agilizar a navegação em sites com leitor de tela. Essas dicas são uma junção de anos de uso de internet, aliado à meus conhecimentos de programação e à minha deficiência visual.

Os leitores de tela usados para criar esse artigo foram: JAWS e NVDA.

Estrutura básica de um site

Entender como é a estrutura básica de um site, pode nos ajudar a navegar melhor nos mesmos. Normalmente, sites e blogs seguem uma estrutura parecida, é claro que pode variar um pouco, mas em termos gerais, temos uma estrutura dividida em quatro partes:

estrutura básica de um site, com topo, lateral, conteúdo e rodapé

  • Parte 1 – Topo: Como o próprio nome sugere, fica na área superior do site. Normalmente, seu conteúdo é composto por um logotipo e por um menu com links fixos, como por exemplo, página inicial, quem somos e fale conosco.
  • Parte 2 – Conteúdo: Lugar onde é exibido os artigos, textos e notícias de um site. Normalmente o conteúdo ocupa boa parte da área visível de uma página, já que é o lugar onde o usuário vai focar sua atenção.
  • Parte 3 – Lateral: Essa área pode ficar tanto do lado esquerdo, quanto do lado direito, e sua função normalmente é agregar conteúdos e sessões secundárias do site. Por exemplo: links de redes sociais, propagandas e artigos mais lidos.
  • Parte 4 – Rodapé: Fica na base do site, em geral, contém links com pouco destaque, como por exemplo, Política de Privacidade do site, Mapa do site, Ajuda do site. Também poderá haver informações gerais como telefone, endereço e e-mail da empresa ou organização que mantém o site.

Como disse ali em cima, nem sempre essa estrutura é seguida à risca. Depende muito da proposta do site, mas todos seguem uma ordem natural, que é fazer o usuário começar a ver o site de cima para baixo e da esquerda para a direita, como em um livro. Afinal, você não começa lendo a página de um livro de baixo para cima, nem da última página para a primeira página, né?

E o seu leitor de tela, simplesmente faz isso, começa a ler o site de cima para baixo, passando pelo topo, conteúdo, lateral e rodapé – como se as áreas estivessem uma embaixo da outra. Simples assim, filho!

Agora que você já conhece a estrutura básica de um site, fica mais fácil entender as dicas que eu vou dar de graça pra você. Não, não, não! De graça não! Vou cobrar pelo menos um comentário no final desse artigo. Combinado?

Localize títulos e subtítulos mais facilmente

Ícone de um jornal com um título bem destacado

Assim como em revistas, livros e jornais, títulos servem para chamar a atenção do leitor. Geralmente, possui letras grandes e chamativas. Nos sites usa-se muito títulos e subtítulos, e na linguagem de programação usamos uma marcação chamada Heading (lê-se Rédin e em português significa Cabeçalho ou Título). Esses títulos vão do nível 1 até o 6, sendo que o nível 1 gerará um título bem grande e o nível 6 gerará um título bem pequeno. É muito comum vermos os títulos dos artigos com o nível 1 ou 2 e subtítulos desses mesmos artigos em nível 2 ou 3.

Para encontrarmos títulos e subtítulos com um leitor de tela, basta usar a letra H (de Heading, óbvio!). E ainda por cima, nossos queridos amigos de fala sintética, nos informam qual o nível. Título de nível 2 – Em busca da felicidade!

Também é possível utilizar os números de 1 à 6 do teclado alfanumérico. Por exemplo: o número 1 localiza títulos de nível 1, o número 2 localiza títulos de nível 2 e assim por diante.

Depois de achar um título, basta ir com a seta para baixo para ouvir o conteúdo tão desejado ou com a tecla Tab para encontrar links abaixo desse título.

Encontre menus rapidamente

Uma caneta marcado um ítem em uma lista

Em muitos casos, os menus dentro de um site são organizados na forma de uma lista. Aí você me pergunta: Ricardo, igual lista de supermercado? Eu diria igual a qualquer lista que você precise fazer, mas vamos pegar o exemplo do mercado.

Vamos supor que você vá ao supermercado e precise fazer uma lista para comprar itens essenciais à sua sobrevivência: item 1 – bolacha recheada, item 2 – refrigerante, item 3 – batatinha frita e item 4 – Iogurte. (itens essenciais para mim, ok?). Se for o caso, você poderá criar uma outra lista, mas dessa vez só com produtos supérfluos (nem queira imaginar os meus!).

Enfim, os sites organizam seus menus , sejam eles dentro do topo ou na parte lateral, no formato de lista. E aí fica fácil saber que tecla no leitor de tela usar para localizar uma lista, né? Letra L para listas e letra I para itens de lista.

Ao apertar a letra L, seu leitor falará se há listas no site, e se houver falará quantos itens tem dentro daquela lista, exemplo: “Lista com cinco itens”. Se houver mais de uma lista, o que é bem provável, tecle L mais de uma vez. Para navegar entre os itens de uma lista, tecle I.

Observação: Nem todas as listas estão em menus e nem todas as listas são links. As listas podem fazer parte de um artigo, para classificar ou enumerar itens.

Fuja do Tab

Foco na tecla tab de um teclado

Por favor, não vá ficar se matando apertando Tab para localizar os links de um site. É cansativo e dispendioso. Só aceito o uso do Tab em duas situações: Quando o link que você quer está no começo do site, perto ou no topo , ou no final do site, perto ou no rodapé. Nesse último caso, utilize SHIFT + TAB.

Imagine navegar num site com mais de 100 links, e justamente o link que você quer está lá perto do final da página? Haja Tab hein!

Como alternativa utilize recursos que classificam os links, como por exemplo, a combinação INSERT + F7 do JAWS e NVDA.

Uma maneira inteligente de fugir do Tab e ganhar tempo em sites é conhecer atalhos de teclado ou teclas de atalho. Muitos sites possuem teclas de atalho personalizadas, que facilitam a navegação entre os links e funções internas dos mesmos. Procure conhecer também as teclas de atalho do seu navegador. E é claro, que conhecer os atalhos de teclado do seu leitor de tela é importante também. E aí você me vem com outra pergunta: Mas Ricardo, cada leitor tem seus próprios atalhos. E aí, comé que fica? De fato cada leitor possui suas próprias teclas de atalho, mas estamos falando de sites, e nesse quesito é necessário seguir um padrão, pelo menos no que diz respeito à elementos da página. Se o seu leitor foge desse padrão, não posso fazer nada! Apenas indicar novamente que leia o manual ou guia de usuário da criança.

Uma dica que acho importante ao acessar um site novo, é perder um tempo – por assim dizer – usando a seta para baixo e fazendo o reconhecimento dos elementos da página. Outra dica, é fazer o que chamo de Teste de A – Z, que nada mais é do que, ao entrar em um site, testar na sequência as letras de A até Z e ouvir o que o leitor fala.

Dessa forma você começa à entender como o site foi construido e qual comando deve usar para acessar determinadas áreas do site. Mas pra você não ficar boiando na sopa de letrinhas, abaixo uma pequena tabela com alguns comandos e suas funções:

Comandos Função
Letra A Localiza links do tipo âncora. Também conhecidos como links de salto. São links dentro da mesma página (de um ponto à outro)
Letra B Localiza botões. Comuns em formulários
Letra C Localiza caixas de combinação
Letra E Localiza campos de edição. Útil para preencher campos de formulário do tipo: Nome, E-mail e etc
Letra G Localiza imagens
Letra H Localiza Cabeçalhos
Letra I Localiza itens de uma lista
Letra L Localiza listas
Letra T Localiza tabelas
Letra U Localiza links não visitados na página
Letra V Localiza links visitados na página

Acessibilidade atitudinal

Um relógio em primeiro plano, logo atrás um homem olhando para o relógio

Todos nós sabemos que a maioria dos sites não são acessíveis, mas isso não significa que você vai ficar parado, com cara de piso tátil, esperando que eles se tornem minimamente acessíveis. Posso criar polêmica com o que vou dizer a seguir, mas o primeiro passo para um site acessível, é a pessoa com deficiência visual conhecer bem seu leitor de tela e minimamente seu sistema operacional e de como os sites funcionam. Adianta alguma coisa ter um site acessível, como este, se você não parar para estudar seu leitor de tela e o sistema operacional que você usa?

Agora vamos supor que você seja o Rei do Virtual Vision, sabe fazer o garoto ler até hieróglifos, mas entrou em um site e não consegue fazer porcaria nenhuma. Nada funciona. O que você faz? Se tiver alguém do seu lado, um vidente de preferência, peça ajuda para que ele faça uma pequena descrição de como é o site. Isso pode lhe ajudar um bocado. Tente também acessar o site com outro leitor de tela e/ou outro navegador.

Nunca se prenda à uma única opção. Se possível, instale outros leitores de tela e outros navegadores. Imagine se você só pudesse usar uma cueca durante toda sua vida?

Mesmo em sites conhecidos, procure alguém, por exemplo, aquele seu sobrinho chato e pentelho, que não serve para nada, e peça ao sacaninha para descrever o que ele vê na tela. Pode ser um exercício bem interessante tanto para ele, quanto para você.

Sempre que tiver dificuldade, procure entrar em contato com o responsável pelo site. Normalmente, os programadores, além de loucos, são bem amigáveis e solícitos. Informe que possui deficiência visual , que usa o sistema operacional X, o navegador Y e o leitor de tela Z, e que está com dificuldades para acessar o conteúdo por ele criado. Como disse, programadores são pessoas meio doidas e se sentirão motivados em descobrir novas maneiras de programar seus projetos.

“Acessibilizar pessoas vem antes de acessibilizar máquinas”

Para finalizar, lembre-se que sites e leitores de tela, são frios e calculistas. Eles só farão aquilo que você mandar. Se você souber mandar, dificilmente ocorrerá algo do tipo: Ricardo, apertei o H em um site, meu leitor de tela me xingou, desligou meu computador, botou fogo no meu quarto e ainda por cima acionou uma bomba-relógio com audiodescrição!

Ricardo De Melo
WRITTEN BY

Ricardo De Melo

Web Designer, Especialista em SEO , WordPress, E-commerce, Marketing Digital e Acessibilidade Web. Atualmente, trabalha como Web Designer na instituição LARAMARA. Nessa instituição, também atuou como professor de informática acessível e tecnologias assistivas para pessoas com deficiência visual por 7 anos. Idealizador dos blogs: O AMPLIADOR de ideias e HEINRIC

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

22 comentários em “Dicas para agilizar a navegação em sites com leitor de tela

  1. Tirando o comentário sobre q vc troca de mulher como troca de cueca, aff, sem necessidade amigo, eu gostei demais da forma descontraida que você explica algo que as vezes é complexo, me inspirou demais seu texto. Valeu.

  2. · 3 de novembro de 2020 às 21:53

    Voc~e é show.

  3. · 9 de maio de 2020 às 00:21

    Muito bom, amo a sua didática, não tem como não aprender.☺️🤩

  4. E aí Ricardo! tudo bem?
    Sou professor de informática na Fundação Dorina Nowill e sempre fico vasculhando a internet à procura de algo novo que possa beneficiar meus alunos e lógico, de preferência escrito por pessoas com deficiência visual, que são aquelas que vivenciam as dificuldades no seu dia a dia, mesmo porque, sou vidente e meu conhecimento é teórico em relação a essas pessoas. Passei por aqui para parabenizá-lo pelo seu trabalho de difundir/multiplicar seus conhecimentos. Tenho um blog que eu faço postagens/compartilho assuntos sobre tecnologia e se você me permitir vou replicar seus artigos, que eu acho muito interessante, lógico, sem esquecer de divulgar a fonte. Abraços e sucesso!!