Regras de Acessibilidade para Navegação
Tornar a navegação acessível é uma das principais preocupações a ter em conta para fornecer um acesso universal aos conteúdos. O facto dos utilizadores conseguirem navegar até ao conteúdo que pretendem aceder, é meio caminho andado para um website acessível.
É importante que o website seja navegável com qualquer sistema, quer seja o rato, o teclado ou um outro dispositivo apontador. E devem ser dadas pistas visuais sobre a localização do cursor no ecrã, de modo a que os utilizadores não se percam na navegação.
De seguida, daremos algumas dicas e sugestões para melhorar a acessibilidade da navegação num website.
Fornecer atalhos para saltar links repetitivos
Para ajudar os utilizadores que usam dispositivos de navegação assistida (ex: screen-readers), devem ser fornecidos atalhos para saltar os blocos de links que se repetem em todas as páginas.
Para os utilizadores que navegam com screen-readers torna-se bastante entediante ter que ouvir todos os links do menu sempre que carregam uma nova página, além do tempo que isso demora até chegar ao conteúdo em si. Para facilitar a navegação e melhorar a experiência de utilização, devemos colocar no topo do site um link para saltar os menus e ir diretamente para os conteúdos.
No HTML basta colocar um link no topo da página (logo a seguir ao <body>). Para fazer com que o link salte para o bloco dos conteúdos, o endereço deverá ser igual à id do bloco para onde queremos saltar:
Muito importante: Para fazer com que a navegação com o teclado continue a partir dos conteúdos em vez de voltar ao topo da página, deve-se adicionar o atributo tabindex="0" para tornar o bloco de conteúdos "focável" pela navegação com o teclado.
<body>
<div id="saltar">
<a href="#conteudos">Saltar para os conteúdos</a>
</div>
<nav>
<!--Lista interminável de links de navegação-->
</nav>
<div id="conteudos" tabindex="0">
<!--Os conteúdos da página-->
</div>
</body>Através de CSS podemos esconder o link dos utilizadores que não utilizem dispositivos de navegação assistida, fazendo com que ele fique apenas disponível para quem usa screen-readers, browsers de texto (sem folhas de estilo) ou outros dispositivos assistivos. Podemos também remover o outline que alguns browsers adicionam aos elementos focados, mas apenas para a div dos conteúdos e nunca para todos os links da página:
#saltar {
position: absolute;
left: -10000px;
top: -10000px;
}
#conteudos:focus, #conteudos:active {
outline:none;
}
Nota: Não usar o CSS {display: none;} para esconder o link, pois isso irá esconder o link tanto do ecrã como dos screen-readers, perdendo assim o seu efeito.
Para quem navega com o teclado, podemos voltar a mostrar estes links escondidos assim que o utilizador passar pelo link. Isto permite que o utilizador saiba onde se situa na página (qual o link que está seleccionado) se estiver a navegar usando a tecla TAB.
Mudando um pouco o CSS podemos reposicionar os links no topo da página (invertendo as instruções anteriores) assim que forem ativados pelo teclado:
#saltar a:focus, #saltar a:active {
display:block;
position:absolute;
top: 10000px;
left: 10350px;
background: #fff;
}Pode ver-se um exemplo real da aplicação desta navegação neste site (SAPO UX), bastando para isso navegar com o teclado (tecla TAB) assim que a página carregar.
Aumentar tamanho dos textos e elementos clicáveis
Para utilizadores com mobilidade reduzida ou com paralisia cerebral, o maior problema é conseguirem acertar em pequenos links ou botões numa página. Seguindo a Lei de Fitts, quanto maior for o alvo, mais fácil é de lhe acertar. Assim, quanto maiores forem as áreas clicáveis, mais facilmente elas poderão ser usadas por pessoas com mobilidade reduzida.
Algumas correções simples que se podem aplicar são:
- Aumentar o texto global do site. Às vezes, um texto um pouco maior, ao mesmo tempo que melhora a legibilidade, permite que os links presentes no texto possam também ser mais facilmente clicados. Recomendamos sempre que sejam usados textos de tamanho superior a 14px (16px seria ótimo) para os conteúdos de modo a serem bem legíveis;
- Adicionar um espaçamento extra (padding) a alguns links mais pequenos, como por exemplo, os links de paginação;
- Aumentar os botões e eventuais ícones que sejam usados para despoletar ações. Quanto maior for o botão, mais fácil será de lhe conseguir acertar;
- Aumentar o espaçamento entre linhas e entre parágrafos para melhorar a legibilidade dos conteúdos.
Segundo a Lei de Fitts, quanto maior for o alvo, mais fácil é de lhe conseguir acertar
Esta recomendação (aumentar os elementos clicáveis) é das poucas que tem impacto visual no site, pois normalmente a maioria das recomendações de acessibilidade têm apenas impacto no código HTML da página.
Fornecer alternativas textuais aos elementos não-textuais
Os elementos não-textuais (gráficos, imagens, etc.) devem conter alternativas em forma de texto. O texto alternativo nas imagens deve ser colocado dentro do atributo alt="texto alternativo da imagem".
No caso das imagens não transmitirem nenhuma informação relevante, é preferível manter o texto alternativo vazio, mas deve ser sempre adicionado o atributo alt="". Isto fará com que os screen-readers e outros sistemas assistivos possam ignorar a imagem.
Um exemplo de uma imagem que não transmite qualquer relevância para o conteúdo é a foto de uma bola de futebol num artigo desportivo.
<!-- As imagens que sejam relevantes, devem conter uma descrição-->
<img src="Obama-Putin-shakehands.jpg" alt="Obama e Putin apertam as mãos em sinal de entendimento" />
<!-- As imagens que não são relevantes devem ter o alt vazio -->
<img src="ball.jpg" alt="" />Nota: Deve ser evitado o uso de imagens decorativas no meio do HTML (ex: cantos arredondados, imagens de espaçamento, etc). Todos os elementos relacionados com a apresentação/decoração devem ser incluídos via CSS.
Não remover o outline dos elementos clicáveis
Outline nos links clicados
O outline que os browsers adicionam aos links quando se faz foco com o teclado ou quando se clica com o rato é uma ajuda útil para que os utilizadores percebam em que elemento da página estão a navegar, especialmente quando se navega com o teclado.
Muitos web designers removem esse outline porque o acham inestético, no entanto, ao fazer isso estão a impedir que uma fatia de utilizadores consiga usar eficazmente o website.
/* Não fazer isto */
a {
outline:none;
}O que se pode fazer, se quisermos ter um maior controlo sobre o efeito do outline, é usar os mesmos estilos do :hover e copiá-los para o :focus. Assim, a navegação com o teclado terá o mesmo feedback que a navegação com o rato.
a:hover, a:focus {
/* Inserir aqui os estilos ao passar com o rato ou navegar com o teclado */
}Outra alternativa é desligar o outline apenas nos links ativos. Isto evita que o outline "inestético" permaneça à volta dos links clicados no website ao mesmo tempo que permite que a navegação com o teclado funcione normalmente.
/* Remove o outline apenas após clicar no link */
a:active {
outline:none;
}Não criar links vazios
Não devem ser criados links sem o atributo href ou sem conteúdo entre as tags <a>.
Todos os links devem ter algum conteúdo textual que possa ser lido. Caso seja usada uma imagem como link, ela deve ter o atributo alt preenchido, pois será esse o texto do link.
<!-- Links vazios serão ignorados pelos screen readers -->
<a href="http://exemplo.pt"></a>
<a href="http://exemplo.pt"><img src="imagem.png" alt="" /></a><!-- Todos os links devem conter algum elemento textual -->
<a href="http://exemplo.pt">Texto do link</a>
<a href="http://exemplo.pt"><img src="imagem.png" alt="Texto do link" /></a>Uso de Font Icons
Os Font Icons são pequenos ícones que podem ser usados no meio do texto e dos links para transmitir uma mensagem visual ao texto ou ao link. No entanto, estes ícones não têm qualquer significado semântico ou textual além do seu significado visual.
Ao criar links que contenham exclusivamente Font Icons (sem qualquer outro texto associado) é preciso adicionar um texto que possa ser lido em substituição do ícone.
<!-- O ícone não é um conteúdo legível -->
<a href="/pesquisa.html"><span class="fa fa-search"></span></a>Existem duas formas de adicionar texto aos ícones e que não têm grande impacto na estrutura dos elementos. A primeira é usando o atributo aria-label de modo a dar um significado textual ao elemento que contém o ícone:
<!-- Exemplo para links -->
<a href="/pesquisa.html" aria-label="Pesquisa"><span class="fa fa-search"></span></a><!-- Exemplo para botões -->
<button type="submit" aria-label="Guardar"><span class="fa fa-save"></span></button>Esta solução é válida, mas como se pode ver, não existe conteúdo real (textual) dentro das tags <a> e <button>, ficando o texto apenas disponível se o browser ou screen-reader suportar WAI-ARIA.
Uma outra forma de o fazer é adicionando o texto da ação dentro das tags, mas primeiro, é preciso criar um estilo para esconder o texto de forma que ele não fique escondido dos screen-readers:
.hide-text {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}Mais informações sobre como esconder conteúdo de forma acessível.
Depois, podemos passar o ícone para o elemento envolvente e escrever o conteúdo dentro das tags:
<!-- Exemplo para links -->
<a href="/pesquisa.html" class="fa fa-search"><span class="hide-text">Pesquisa</span></a><!-- Exemplo para botões -->
<button type="submit" class="fa fa-save"><span class="hide-text">Guardar</span></button>Pode ser visto um exemplo de utilização desta técnica no ícone do formulário de pesquisa do SAPO UX.
Links com interatividade JavaScript
Quando se usa JavaScript para adicionar interatividade a um link, muitas vezes essa interatividade é despoletada através de uma class ou id presente no link, e o destino final do link href é ignorado ou deixado em branco.
<!-- O href não pode ser ignorado -->
<a id="ajax_faz_coisas">Texto do link</a>O href tem de estar sempre presente.
<!-- Caso não exista uma página de destino sem JavaScript, deve-se usar um # -->
<a href="#" id="ajax_faz_coisas">Texto do link</a><!-- Mas o ideal é que a funcionalidade exista mesmo que o JavaScript não carregue -->
<a href="pagina-faz-coisas-sem-js.html" id="ajax_faz_coisas">Texto do link</a>Os links devem indicar o seu destino
Os links que apontem para websites externos devem ser identificados como tal. É importante que os utilizadores percebam que vão abandonar o site atual e vão entrar num novo site assim que clicarem no link.
O ideal será adicionar um ícone a seguir ao link (normalmente uma seta a sair para fora de uma janela) e incluir um texto (usando o atributo title) que indique que o link irá abrir um novo website:
<a class="external" href="http://www.site-externo.pt" alt="Link para site externo">Texto do link</a>Links que abrem em novas janelas/tabs
A mesma solução pode ser usada para links que abrem em novas janelas/tabs.
Não recomendamos que os links abram em novas janelas, mas para abrir sites externos ou em algumas situações em que se justifique, pode-se usar o atributo target="_blank" com um ícone e uma indicação de que o site vai abrir numa nova janela no atributo title.
<a class="external" target="_blank" href="http://www.site-externo.pt" alt="Link para site externo (abre numa nova janela)">Texto do link</a>Links para documentos não HTML
Os links para documentos não HTML (ex: PDF, DOC, etc) também devem ser claramente identificados.
Uma forma fácil de fazer isto é adicionar à frente do link o formato do ficheiro. Isto pode ser feito facilmente e automaticamente para todos os links do site via CSS:
/* Deteta todos os links para ficheiros PDF */
a[href$=".pdf"]:after {
content:" (PDF)";
}
/* Deteta todos os links para ficheiros DOC */
a[href$=".doc"]:after {
content:" (DOC)";
}Referências
Mais dicas e recomendações
Uma vez que as regras de usabilidade e acessibilidade contemplam muitos pontos em comum, além das dicas e recomendações acima, devem também ser aplicadas as recomendaçoes de usabilidade para navegação disponiveis na secção Usabilidade do SAPO UX.