![\"Iniciando](\"http:\/\/www.movimentolivre.org\/imagens\/dicas-navegacao-internet.png\" "\\"Dicas")
<\/p>\n<\/p>\n
Como muitos sabem, sou o criador e mantenedor do site do Movimento Livre, h\u00e1 mais ou menos um ano e meio. Nesse per\u00edodo aprendi muita coisa sobre programa\u00e7\u00e3o, usabilidade e principalmente sobre acessibilidade na web. Fiz, e continuo fazendo, v\u00e1rias pesquisas sobre acessibilidade em sites e na internet de modo geral.<\/p>\n
Essa experi\u00eancia me fez entender de forma mais clara como os leitores de telas interagem com os sites, assim posso garantir pra voc\u00ea, que entendendo melhor como funcionam as p\u00e1ginas da internet voc\u00ea ter\u00e1 um desempenho melhor na hora de desfrutar um conte\u00fado.<\/p>\n
As dicas e sugest\u00f5es abaixo far\u00e3o voc\u00ea agilizar a navega\u00e7\u00e3o em sites com leitor de telas. Essas dicas s\u00e3o uma jun\u00e7\u00e3o de anos de uso de internet, aliado \u00e0 meus conhecimentos de programa\u00e7\u00e3o e \u00e0 minha defici\u00eancia visual.<\/p>\n
Os leitores de telas usados para criar esse artigo foram: JAWS<\/a>, NVDA<\/a> e Orca (Linux)<\/a>.<\/p>\n Entender como \u00e9 a estrutura de um site, pode nos ajudar a navegar melhor nos mesmos. Normalmente, sites e blogs seguem uma estrutura b\u00e1sica, \u00e9 claro que pode variar um pouco, mas em termos gerais, temos uma estrutura dividida em quatro partes:<\/p>\n Como disse ali em cima, nem sempre essa estrutura \u00e9 seguida \u00e0 risca. Depende muito da proposta do site, mas todos seguem uma ordem natural, que \u00e9 fazer o usu\u00e1rio come\u00e7ar a ver o site de cima para baixo, como em um livro. Afinal, voc\u00ea n\u00e3o come\u00e7a lendo a p\u00e1gina de um livro de baixo para cima, nem da \u00faltima p\u00e1gina para a primeira p\u00e1gina, n\u00e9?<\/p>\n E o seu leitor de telas, simplesmente faz isso, come\u00e7a a ler o site de cima para baixo, passando pelo topo, menu lateral, conte\u00fado e rodap\u00e9. Simples assim, filho!<\/p>\n Agora que voc\u00ea j\u00e1 conhece a estrutura b\u00e1sica de um site, fica mais f\u00e1cil entender as dicas que eu vou dar de gra\u00e7a pra voc\u00ea. N\u00e3o, n\u00e3o, n\u00e3o! De gra\u00e7a n\u00e3o! Vou cobrar pelo menos um coment\u00e1rio no final desse artigo. Combinado?<\/p>\n Assim como em revistas, livros e jornais, t\u00edtulos servem para chamar a aten\u00e7\u00e3o do leitor. Geralmente, possui letras grandes e chamativas. Nos sites usa-se muito t\u00edtulos e subt\u00edtulos, e na linguagem de programa\u00e7\u00e3o usamos uma marca\u00e7\u00e3o chamada Heading (l\u00ea-se R\u00e9din e em portugu\u00eas significa Cabe\u00e7alho) para definir tais t\u00edtulos. Esses t\u00edtulos v\u00e3o do n\u00edvel 1 at\u00e9 o 6, sendo que o n\u00edvel 1 gerar\u00e1 um t\u00edtulo bem grande e o n\u00edvel 6 gerar\u00e1 um t\u00edtulo bem pequeno. \u00c9 muito comum vermos os t\u00edtulos dos artigos com o n\u00edvel 1 ou 2 e subt\u00edtulos desses mesmos artigos em n\u00edvel 2 ou 3.<\/p>\n Para encontrarmos t\u00edtulos e subt\u00edtulos com um leitor de telas, basta usar a letra H (de Heading, \u00f3bvio!). E ainda por cima, nossos queridos amigos de fala sint\u00e9tica, nos informam qual o n\u00edvel. \u201cT\u00edtulo de n\u00edvel 2 \u2013 Em busca da felicidade!\u201d<\/strong><\/p>\n Depois de achar um t\u00edtulo, basta ir com a seta para baixo para ouvir o conte\u00fado t\u00e3o desejado ou com a tecla Tab para encontrar links abaixo desse t\u00edtulo.<\/p>\n Em muitos casos, os menus dentro de um site s\u00e3o organizados na forma de uma lista. A\u00ed voc\u00ea me pergunta: Ricardo, igual lista de supermercado?<\/strong> Eu diria igual a qualquer lista que voc\u00ea precise fazer, mas vamos pegar o exemplo do mercado.<\/p>\n Vamos supor que voc\u00ea v\u00e1 ao supermercado e precise fazer uma lista para comprar itens essenciais \u00e0 sua sobreviv\u00eancia: item 1 \u2013 bolacha recheada, item 2 \u2013 refrigerante, item 3 \u2013 batatinha frita e item 4 \u2013 Iogurte. (itens essenciais para mim, ok?). Se for o caso, voc\u00ea poder\u00e1 criar uma outra lista, mas dessa vez s\u00f3 com produtos sup\u00e9rfluos (nem queira imaginar os meus!).<\/p>\n Enfim, os sites organizam seus menus , sejam eles dentro do topo ou na parte lateral, no formato de lista. E a\u00ed fica f\u00e1cil saber que tecla no leitor de telas usar para localizar uma lista, n\u00e9? Letra L para listas e letra I para itens.<\/p>\n Ao apertar a letra L, seu leitor falar\u00e1 se h\u00e1 listas no site, e se houver falar\u00e1 quantos itens tem dentro daquela lista, exemplo: \u201cLista com cinco itens\u201d<\/strong>. Se houver mais de uma lista, o que \u00e9 bem prov\u00e1vel, tecle L mais de uma vez. Para navegar entre os itens de uma lista, tecle I ou Tab.<\/p>\n Observa\u00e7\u00e3o: Nem todas as listas est\u00e3o em menus e nem todas as listas s\u00e3o links. As listas podem fazer parte de um artigo, para classificar ou enumerar itens.<\/p>\n Por favor, n\u00e3o v\u00e1 ficar se matando apertando Tab para localizar os links de um site. \u00c9 cansativo e dispendioso. S\u00f3 aceito o uso do Tab em duas situa\u00e7\u00f5es: Quando o link que voc\u00ea quer est\u00e1 no come\u00e7o do site, perto ou no topo , ou no final do site, perto ou no rodap\u00e9. Nesse \u00faltimo caso, utilize SHIFT + TAB. Imagine navegar num site com mais de 100 links, e justamente o link que voc\u00ea quer est\u00e1 l\u00e1 perto do final da p\u00e1gina? Haja Tab hein!<\/p>\n Como alternativa utilize recursos que classificam os links, como por exemplo, a combina\u00e7\u00e3o INSERT + F7 do JAWS e NVDA.<\/p>\n Conhecer atalhos de teclado, tamb\u00e9m conhecidos como teclas de atalho, \u00e9 uma maneira muito inteligente de ganhar tempo em sites. Muitos sites possuem teclas de atalho personalizadas, que facilitam a navega\u00e7\u00e3o entre os links e fun\u00e7\u00f5es internas dos mesmos. Nosso site possui essa fun\u00e7\u00e3o. Clique no link, atalhos de teclado do site<\/a> para conhecer nossos atalhos de teclado. Procure conhecer tamb\u00e9m as teclas de atalho do seu navegador. E \u00e9 claro, que conhecer os atalhos de teclado do seu leitor de telas \u00e9 importante tamb\u00e9m. E a\u00ed voc\u00ea me vem com outra pergunta: Mas Ricardo, cada leitor tem seus pr\u00f3prios atalhos. E a\u00ed, com\u00e9 que fica?<\/strong> De fato cada leitor possui suas pr\u00f3prias teclas de atalho, mas estamos falando de sites, e nesse quesito \u00e9 necess\u00e1rio seguir um padr\u00e3o, pelo menos no que diz respeito \u00e0 elementos da p\u00e1gina. Se o seu leitor foge desse padr\u00e3o, n\u00e3o posso fazer nada! Apenas indicar novamente que leia o manual da crian\u00e7a.<\/p>\n Uma dica que acho importante, \u00e9 fazer o que chamo de Teste de A \u2013 Z,<\/strong> que nada mais \u00e9 do que, ao entrar em um site, testar na sequ\u00eancia as letras de A at\u00e9 Z e ouvir o que o leitor fala. Mas pra voc\u00ea n\u00e3o ficar boiando na sopa de braille, vou listar e explicar algumas das principais teclas abaixo:<\/p>\n Letra A:<\/strong> Localiza links do tipo \u00e2ncora. Tamb\u00e9m conhecidos como links de salto. S\u00e3o links dentro da mesma p\u00e1gina (de um ponto \u00e0 outro); Todos n\u00f3s sabemos que a maioria dos sites n\u00e3o s\u00e3o acess\u00edveis, mas isso n\u00e3o significa que voc\u00ea vai ficar parado, com cara de piso t\u00e1til, esperando que eles se tornem minimamente acess\u00edveis. Posso criar pol\u00eamica com o que vou dizer a seguir, mas o primeiro passo para um site acess\u00edvel, \u00e9 o deficiente visual conhecer bem seu leitor de telas e minimamente seu sistema operacional e de como os sites funcionam. Adianta alguma coisa ter um site acess\u00edvel, como o do Movimento Livre, se voc\u00ea n\u00e3o parar para conhecer seu leitor de telas e o sistema operacional que voc\u00ea usa?<\/p>\nEstrutura de um site<\/h3>\n
\n
Localize t\u00edtulos e subt\u00edtulos mais facilmente<\/h3>\n
![\"Iniciando](\"http:\/\/img826.imageshack.us\/img826\/791\/titulon.jpg\")
<\/p>\nEncontre menus rapidamente<\/h3>\n
![\"Iniciando](\"http:\/\/img407.imageshack.us\/img407\/8291\/listadecompras.jpg\")
<\/p>\nFuja do Tab<\/h3>\n
Atalhos de Teclado<\/h3>\n
\nLetra B:<\/strong> Localiza bot\u00f5es. Comuns em formul\u00e1rios;
\nLetra C:<\/strong> Localiza caixas de combina\u00e7\u00e3o;
\nLetra E:<\/strong> Localiza campos de edi\u00e7\u00e3o. \u00datil para preencher campos de formul\u00e1rio do tipo: Nome, E-mail e etc;
\nLetra G:<\/strong> Localiza imagens;
\nLetra H:<\/strong> Localiza T\u00edtulos e subt\u00edtulos;
\nLetra I:<\/strong> Localiza itens de uma lista;
\nLetra L:<\/strong> Localiza listas;
\nLetra T:<\/strong> Localiza tabelas;
\nLetra U: <\/strong>Localiza links n\u00e3o visitados na p\u00e1gina;.
\nLetra V:<\/strong> Localiza links visitados na p\u00e1gina.<\/p>\nAcessibilidade atitudinal<\/h3>\n
![\"Iniciando](\"http:\/\/img406.imageshack.us\/img406\/8889\/aguardando.jpg\")
<\/p>\n