Saiba mais sobre duas dicas sobre como tornar seu site acessível

1. Use pular navegação

Os usuários de leitores de tela precisam ler documentos HTML de cima para baixo, sem a capacidade de varrer a página da Web para obter as informações em que estão interessados. Saltar navegação permite que usuários de leitores de tela e pessoas que não podem usar um mouse ignorem longas listas de links, como a navegação principal em um site. Pular navegação é simplesmente um link no topo da sua página da web que, quando clicado, o posiciona na seção de conteúdo.

Você pode ocultar este link de usuários fisicamente ativos movendo o link para fora da janela de visualização do navegador usando CSS. Aqui está um exemplo: digamos que você tenha a estrutura HTML abaixo e queira ter um skip nav que posicione o leitor na área de conteúdo principal ( div#content).

<ul id=”nav”> <li><a href=”home.html” title=””>Início</a></li> <li><a href=”about.html” title=”” >Sobre</a></li> <li><a href=”blog.html” title=””>Blog</a></li> <li><a href=”portfolio.html” title= “”>Portfólio</a></li> <li><a href=”contact.html” title=””>Contato</a></li> </ul> <div id=”leftCol”> <h1>Meus amigos</h1> <ul> <li><a href=”http://blogofafriend.com/” title=””>Blog de um amigo</a></li> <li>< a href=”http://friendofablog.com/” title=””>Amigo de um blog</a></li> </ul> </div> <div id=”#content”> <h1>Título da página</h1> … </div>

Você colocaria seu link de navegação para pular logo acima de sua lista não ordenada, assim:

<a id=”skipnav” href=”#content” title=”Ir para o conteúdo”>Pular navegação</a> <ul id=”nav”> <li><a href=”home.html” title=” “>Página inicial</a></li> <li><a href=”about.html” title=””>Sobre</a></li> <li><a href=”blog.html” title =””>Blog</a></li> <li><a href=”portfolio.html” title=””>Portfólio</a></li> <li><a href=”contact.html ” title=””>Contato</a></li> </ul> <div id=”leftCol”> <h1>Meus amigos</h1> <ul> <li><a href=”http:/ /blogofafriend.com/” title=””>Blog de um amigo</a></li> <li><a href=”http://friendofablog.com/” title=””>Amigo de um blog</a></li> </ul> </div> <div id=”#content”> <h1 >Título da página</h1> …

</div>

Alguns sites decidem manter o link de pular navegação visível, mas se preferir ocultá-lo de usuários com visão, você pode usar CSS para recuar o link fora da janela de visualização do navegador da web:

#skipnav { posição:absoluto; topo: -10000px ; }

A desvantagem da técnica acima é que, embora funcione para usuários de leitores de tela, ela não ajudará os usuários que não podem usar um mouse, pois não poderão usar a tecla Tab para navegar até o link de pular navegação . Uma melhoria no método acima pode ser encontrada no WebAIM: Links que se tornam visíveis com foco no teclado . A navegação de salto é fácil de implementar, mas muito útil em páginas da web com muito conteúdo acima da área de conteúdo principal.

WebAIM tem uma discussão muito completa sobre a navegação de salto que inclui várias técnicas (e seus prós e contras) que você deve ler.

2. Rotule seus elementos de formulário

Os formulários da web em HTML são a principal maneira de interagir com um site. Devido à importância dos formulários da web, certificar-se de usar a marcação correta é crucial para o design universal. Rotule seus elementos de entrada com texto significativo e descritivo.

Isso deixa claro para o usuário quais informações eles devem fornecer.

<label for=”searchbox” >Digite as palavras-chave para pesquisar:</label> <input id=”searchbox” name=”searchbox ” type=”text” />

Com CSS, você pode estilizar esse elemento de rótulo em um ícone ou ocultá-lo da visualização simples, empurrando-o para fora da janela de visualização do navegador, se realmente precisar.