Como usar Skip Links para tornar seu site WordPress mais acessível

Em nossa série de introdução à acessibilidade, falamos sobre a base das várias Diretrizes de Acessibilidade de Conteúdo da Web (WCAG). Agora é hora de dar o próximo passo, observando algumas das principais diretrizes e mostrando como tornar seu site mais acessível. Vamos começar com blocos de desvio, mais comumente conhecidos como links de salto.

O que é um Skip Link?

Um link para pular é um link especial que fica oculto em seu site até entrar em :focus por meio da tecla tab ou de um leitor de tela. Seu objetivo é dar aos usuários de tecnologia alternativa (pessoas que usam teclados e leitores de tela) a capacidade de pular blocos de conteúdo. Direto dos padrões:

“Um mecanismo está disponível para contornar blocos de conteúdo que são repetidos em várias páginas da Web.” – Norma WCAG 2.4.1 – Bloqueios Bypass

2.4.1 é um padrão de nível A. Isso significa que é coberto pela Seção 508 e exigido por lei. Você precisa ter links de salto.

Você consegue adivinhar qual é o bloco mais comum de links para pular de conteúdo? Se você adivinhou “o cardápio”, acertou. Os menus aparecem em quase todas as páginas de um site. Usuários com visão e usuários de mouse tendem a rolar para a direita porque é um daqueles elementos do site que você espera que esteja lá. Mas os menus de navegação não são os únicos blocos que precisam pular links.

Uma área comumente negligenciada para pular links são as barras laterais esquerdas (ou barras laterais direitas para sites em idiomas da direita para a esquerda, como o árabe). Por causa de onde eles tendem a cair na ordem semântica, os usuários precisarão de uma maneira de pular a barra lateral repetida regularmente para ir direto ao conteúdo.

O mesmo vale para blocos de postagem em destaque que aparecem fora da página inicial. Alguns designs de sites carregam seções de postagem em destaque ou controles deslizantes para páginas internas. A menos que o conteúdo dessas seções esteja mudando, por exemplo: páginas de categoria ou arquivo, deve haver um link de pular no lugar.

Como adicionar links de salto?

Agora que você sabe o que é um link de pular, é hora de adicioná-los ao seu site. Existem algumas maneiras de resolver esse problema. A maneira mais fácil (e para vocês não codificadores, a única maneira) é instalar um plug-in. A maneira mais difícil é codificá-los em seu tema.

Usando um plug-in

Um plug-in que recomendamos quando se trata de pular links: WP Accessibility de Joe Dolson. Ele resolve vários problemas de acessibilidade, incluindo a adição de links de pular básicos para você.

Codificando você mesmo

Sua outra opção é codificar os links de pular você mesmo. O código em si é bastante simples e requer apenas alguns conhecimentos básicos de HTML e CSS, mas você precisa estar familiarizado com o funcionamento dos temas e modelos do WordPress antes de tentar esse método. A partir deste ponto, assumiremos que você sabe como encontrar os arquivos referenciados e como editá-los.

Começaremos escrevendo os links de salto reais primeiro. Isso permitirá copiar e colar facilmente nos arquivos de modelo. Lembrando do conhecimento de HTML, você precisará escrever uma tag âncora. Observe que a formatação aqui é para facilitar a leitura.

 <a href=”[don't fill this in yet]” class=”skip-link”> Skip to Main Content </a>

Deixamos o atributo href em branco de propósito. Isso ocorre porque precisamos definir para onde nosso link de pular será vinculado. Para este exemplo, usaremos o elemento <main> como nosso alvo. Como não podemos vincular diretamente a um elemento sem um ID, precisamos garantir que nosso elemento <main> tenha um. Seu elemento <main> provavelmente será encontrado em header.php , mas nem sempre. Depois de localizar o elemento, você precisará garantir que ele tenha um ID. Se não, adicione um assim:

 <main id=”main-content”> [a bunch more code below]

O valor específico do ID não é importante, mas você precisará se lembrar dele. Agora você deseja atualizar seu código de link de pular com o valor de ID.

 <a href=”#main-content” class=”skip-link”> Skip to Main Content </a>

Agora que você criou seu link de pular, volte para o arquivo header.php ou onde quer que a tag <body> de abertura do seu tema esteja localizada. A tag <body> é um posicionamento essencial para pular links, pois eles precisam ser a primeira coisa absoluta a aparecer no :focus para usuários de teclado e leitor de tela.

Logo após a tag <body> , após o HTML concluído. O seguinte mostra um exemplo mais detalhado com vários links de salto. Se você deseja adicionar vários links ao seu site, verifique se os IDs foram aplicados corretamente.

 <body> <a href=”#left-sidebar” class=”skip-link”>Skip to Sidebar</a> <a href=”#featured-posts-block” class=”skip-link”>Skip to Featured Posts</a> <a href=”#main-content” class=”skip-link”>Skip to Main Content</a> [Header navigation goes here]

Agora você tem links de salto em seu código, mas ainda não acabou! Se você carregar sua página agora, verá os links para pular na parte superior. Hora de adicionar algum CSS. O estilo de pular links é bem simples, usando o exemplo abaixo:

 .skip-link { position: absolute; top: 0; z-index: 9999; right: 100%; padding: 5px; padding: 0.5rem; font-size: 20px; font-size: 2rem; color: #000; background: #FFF; } .admin-bar .skip-link { top: 32px; } .skip-link:focus { right: auto; }

O que você não vê é o uso de display: none . Usá-lo fará com que um leitor de tela ignore totalmente o link, anulando totalmente o objetivo. A ocultação é feita colocando o texto fora da tela usando right: 100% e deslocando-o para right: auto on :focus .

Com seu CSS aplicado, está tudo pronto. Seus links de pular estão no lugar, mas ocultos. Quando um usuário de teclado ou leitor de tela carrega sua página em inicializa :focus , seus links para pular permitem que eles passem direto para o conteúdo que procuram.

Embrulhando-o

Skip links são um exemplo perfeito de um recurso de acessibilidade que parece muito trabalhoso, mas na verdade não é. Tudo o que fizemos no lado do código foi adicionar algumas linhas de HTML e CSS. Para a abordagem não técnica, instalamos um plugin. Nenhum dos métodos leva muito tempo, o que é importante observar, pois os links de salto são um padrão de nível A para WCAG 2.0 (os padrões WCAG mais atuais). Você é obrigadopor lei a tê-los em seu site.Não se coloque em risco; adicione seus links de pular hoje!