Ir direto para o conteúdo - Acessibilidade Web

Já notaram que em muitos sites existe um link ou botão com um texto parecido com ir direto para o conteúdo ou ir para o conteúdo ou alguma coisa parecida? Mas porque existe isso?

Esses links são muito úteis para a acessibilidade do site, criando um link para ir direto ao conteúdo principal do site, passando pelo cabeçalho, slides e até mesmo o menu, faz com que as pessoas que possuem alguma deficiência física ou motora evitem que a cada página que acessem precisem ter que passar por tudo isso, somente para poder ver o conteúdo que estão buscando.

Essas pessoas geralmente utilizam apenas o teclado para navegar no site, e com isso, utilizam muito a tecla TAB, que vai pulando de elementos em elemento HTML que receba um focus, e caso o site, geralmente a maioria, possua um menu muito extenso, a tecla TAB vai passando de link em link do menu, e até chegar no conteúdo principal, que é o conteúdo que a pessoa esta buscando, pode demorar muito tempo, e isso acaba dificultando a pessoa que já possui uma certa dificuldade.

Para facilitar a navegação basta criar um link que direciona o usuário direto ao conteúdo, esse link deve ser o primeiro elemento da página que será acessado ao clicar a tecla TAB, para isso pode-se usar o atributo tabindex, definido com o valor 1, conforme exemplo a seguir:

<a href="#conteudo" id="irDireto" tabindex="1">Ir direto para o conteúdo</a>

E o conteúdo principal pode receber uma ancora, que ao clicar no link acima, a página será linkada no ponto da ancora, conforme exemplo a seguir:

<a name="conteudo"></a>
<h1 class="tituloConteudo">Conteúdo principal</h1>

Isso funciona bem, porém é interessante que ao clicar no link de ir direto para o conteúdo, o próximo elemento a receber o focus ao clicar na tecla TAB seja os elementos seguintes, com isso em mente ao clicar podemos setar o focus no elemento principal da página que é o título do conteúdo, para isso podemos utilizar Javascript ou jQuery, veja um exemplo simples de como fazer isso...

// Ir direto para o conteúdo
$('#irDireto').click(function(e){
    e.preventDefault();

    $('.tituloConteudo').focus();
});

Esse simples link no site já ajuda bastante para melhorar a acessibilidade do site.