1. Teste seu site quanto à acessibilidade do teclado
O objetivo mais importante da acessibilidade do teclado é disponibilizar todos os elementos interativos, como links e controles de formulário, com o Aba chave. É assim que os usuários apenas com teclado navegam por uma página da web. Testar a acessibilidade do teclado em seu site é realmente muito fácil: basta pressionar o botão Aba e navegue do topo para a parte inferior da página, destacando os elementos ativos conforme você avança.
![Navegando em links rápidos no rodapé do Tuts com a tecla Tab](https://i0.wp.com/cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/31966/image/keyboard-3.gif?ssl=1)
![Navegando em links rápidos no rodapé do Tuts com a tecla Tab](https://i0.wp.com/cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/31966/image/keyboard-3.gif?ssl=1)
![Navegando em links rápidos no rodapé do Tuts com a tecla Tab](https://i0.wp.com/cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/31966/image/keyboard-3.gif?ssl=1)
Observe como é fácil ou difícil chegar ao conteúdo principal com o método de tabulação do teclado. Clique em um item de menu, preencha um formulário, opere um controle deslizante ou siga sua posição atual na página. Você também pode testar a direção reversa usando o Shift + Tabulação atalho de teclado.
2. Criar perceptível :focus
Estilos
CSS tem um :focus
pseudoclasse que é acionada quando um usuário clica ou toca em um item, ou o seleciona com o Aba chave. O :focus
estado só se aplica a elementos focáveis, ou seja, ,
,
,
,
e
Cada navegador vem com seu próprio padrão :focus
estilos – geralmente um contorno preto pontilhado ao redor do elemento ou um brilho borrado, porém muitos designers acham que não é do seu gosto e o removem completamente. Na verdade, este é o erro número um que arruína a acessibilidade do teclado nas páginas da web. Se você não gosta dos estilos padrão, use algo que combine com o design do seu site.
![estilos de foco no navegador Google Chrome](https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/31966/image/chrome.jpg)
![estilos de foco no navegador Google Chrome](https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/31966/image/chrome.jpg)
![estilos de foco no navegador Google Chrome](https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/31966/image/chrome.jpg)
Escolha um estilo que seja facilmente perceptível, mas que não dependa apenas de cores. Aqui está um exemplo possível que pode funcionar bem para usuários apenas de teclado:
1 |
:focus { |
2 |
outline: 3px solid red; |
3 |
}
|
3. Crie modais acessíveis por teclado
Certifique-se de que quando uma caixa de diálogo modal for aberta, o foco do teclado mude para um elemento dentro da caixa de diálogo, normalmente o primeiro elemento focável ou elemento estático com tabindex="-1"
se o conteúdo incluir estruturas semânticas.
Usar Tab
e Shift + Tab
para navegar pelos elementos da caixa de diálogo, garantindo que a ordem do foco seja lógica. Certifique-se de que Escape
fecha a caixa de diálogo.
Para configurar isso, você pode usar um
role="dialog"
para modais. Rotule o modal com aria-labelledby
se tiver um título, ou aria-label
para modais sem título visível. Isso ajuda os usuários de leitores de tela a compreender o conteúdo e a finalidade do modal.
Após fechar a caixa de diálogo, retorne o foco para o elemento que invocou a caixa de diálogo. Se o elemento de chamada não existir mais ou se o fluxo de trabalho incluir etapas relacionadas à tarefa da caixa de diálogo, o foco deverá ser movido para um elemento que forneça um fluxo de trabalho lógico.
Atalhos de acessibilidade de teclado como esses ajudam quem usa dispositivos assistivos a navegar em seu site de maneira mais lógica e sem comprometer a experiência do usuário.
4. Use designadores sem cores para links
Os hiperlinks não devem ser diferenciados apenas pela cor. Este princípio é normalmente mencionado em relação à acessibilidade visual, pois as pessoas com baixa visão têm dificuldade em discernir as diferenças entre determinadas cores. No entanto, links claramente visíveis também são importantes para a acessibilidade do teclado. Os usuários que utilizam apenas o teclado devem ser capazes de localizar links o mais rápido possível. Isso os ajuda a digitalizar a página e descobrir como navegar até a parte em que estão interessados.
similarmente a :focus
estilos, os hiperlinks também vêm com estilo de navegador padrão – sublinhados azuis na maioria dos casos. No entanto, os designers frequentemente removem o sublinhado e usam cores apenas para indicar a presença de um link. Se você remover o sublinhado padrão, sempre use outro designador sem cor que corresponda ao design do seu site, como bordas, ícones ou contornos.
![Limpar links no govuk 1 hiperlink 2 focado 3 visitado](https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/31966/image/links.png)
![Limpar links no govuk 1 hiperlink 2 focado 3 visitado](https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/31966/image/links.png)
![Limpar links no govuk 1 hiperlink 2 focado 3 visitado](https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/31966/image/links.png)
Você pode usar o title
atributo para descrever o conteúdo de um link, mas ele só se torna visível quando alguém passa o mouse sobre o link. Usuários somente de teclado não têm acesso a eventos de foco, portanto, nunca coloque informações cruciais no title
atributo. Também não conta como um designador sem cor. Por exemplo, nunca faça isso:
1 |
href="#" title="Important information">
|
2 |
Click here |
3 |
|
Em vez disso, faça o seguinte:
1 |
href="#" title="Repetition of Important Information or addition of some secondary details">
|
2 |
Important information |
3 |
|
WCAG 2.0 também alerta sobre os problemas de acessibilidade do atributo title. Use-o com cuidado ou simplesmente não use.
5. Use elementos de controle nativos
Os formulários são elementos interativos, portanto precisam ser acessíveis por meio do teclado. Os usuários que utilizam apenas o teclado devem ser capazes de preencher formulários, pressionar botões, usar controles deslizantes de intervalo, selecionar opções e operar controles com facilidade. Se você possui algum formulário em seu site você deve testá-lo um por um, usando o Aba chave. Pense em formulários de inscrição, formulários de boletins informativos, formulários de login, formulários de comentários, carrinhos de compras e assim por diante.
A melhor maneira de criar formulários acessíveis é usar elementos de controle nativos sempre que possível. Os elementos de controle nativos vêm com acessibilidade de teclado integrada, o que significa que eles podem ser focados e respondem a eventos de pressionamento de tecla por padrão. Eles são os seguintes:
Por exemplo, você pode criar um controle deslizante de intervalo acessível pelo teclado com o seguinte HTML:
1 |
type="range" min="0" max="10">
|
Os usuários de teclado podem primeiro focar com o Aba e mova o controle deslizante para cima e para baixo com Espaço.
Se você precisar usar uma tag HTML não focável para um elemento interativo por algum motivo, poderá torná-la focável com o tabindex="0"
atributo. Por exemplo, aqui está um
1 |
|
2 |
Click me |
3 |
|
O role="button"
O atributo no trecho acima é uma função de referência da ARIA. Embora usuários apenas de teclado não precisem dele, é indispensável para usuários de leitores de tela e acessibilidade visual.
Mesmo que o botão não nativo tenha sido focalizado, ele ainda é inferior ao seu equivalente nativo em termos de acessibilidade do teclado. Você entenderá isso imediatamente ao tentar adicionar um manipulador de eventos ao botão. Esta é a aparência de um ouvinte de evento de clique com o nativo elemento:
1 |
|
2 |
Click me |
3 |
|
E aqui está o equivalente usando o botão div:
1 |
|
2 |
Click me |
3 |
|
Se você clicar nos botões usando o mouse ou touchpad, poderá ver ambas as mensagens de alerta. No entanto, se você navegar para cada botão usando o Aba tecla e bateu Digitar para processá-los, você verá apenas a primeira mensagem, pertencente ao botão nativo. Para fazer com que o botão não nativo processe a entrada do teclado, você também precisa definir um manipulador de eventos keypress separadamente:
1 |
|
2 |
onkeydown="alert('Hi, I am a non-native button!')"> |
3 |
Click me |
4 |
|
Agora, quando os usuários do teclado clicam Enter
, eles também verão a mensagem pertencente ao botão não nativo. Como você pode ver, é muito mais fácil e rápido usar a versão nativa. Portanto, a menos que você tenha um bom motivo para não usá-los, sempre use elementos de controle nativos ao trabalhar na acessibilidade do teclado.
6. Adicione um link “Pular para o conteúdo principal”
Adicionando um Ir para o conteúdo ou Pular navegação vincular às suas páginas da web ajuda muito os usuários que usam apenas o teclado. Na maioria dos casos, esses usuários não vão querer passar por todos os links de navegação antes de começarem a ler o conteúdo. Isso é especialmente verdadeiro quando eles acessam mais de uma página do seu site. Imagine só, sem um link para pular navegação, eles terão que passar pelos mesmos links de navegação na página inicial toda vez. Não parece uma atividade particularmente divertida.
Para criar um link para pular navegação funcional, você precisa vinculá-lo ao conteúdo principal usando o id
e href
atributos HTML da seguinte maneira:
1 |
class="skip-main" href="#main">Skip to main content
|
2 |
Navigation |
3 |
|
Você também precisa adicionar o tabindex="-1"
atributo ao contêiner do conteúdo principal. Este é o mesmo índice de tabulação que usamos acima para tornar o botão não nativo focável. O tabindex
atributo é usado para modificar a ordem de navegação padrão. Com um valor de 0
, torna os elementos não focáveis focáveis. Com um valor de -1
, também torna os elementos focáveis, mas eles se tornam inacessíveis com a navegação padrão do teclado. Certos navegadores, como Chrome e IE, exigem a presença de tabindex="-1"
no alvo do link para pular navegação, portanto nunca o omita.
Revele o link Pular para conteúdo apenas para usuários de teclado
Você pode usar CSS para tornar o link para pular navegação visível apenas para usuários de teclado. Em seu estado padrão, oculte o link de usuários regulares posicionando-o fora da janela de visualização. Em seguida, revele-o para usuários de teclado criando estilos separados para o estado de foco que é acionado quando o usuário pressiona o botão Aba chave.
Você pode ver esse efeito em ação em sites como webaim.org, www.w3.org e (como sempre) www.gov.uk:
![Revele o link para pular apenas para usuários de teclado](https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/31966/image/skip.jpg)
![Revele o link para pular apenas para usuários de teclado](https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/31966/image/skip.jpg)
![Revele o link para pular apenas para usuários de teclado](https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/31966/image/skip.jpg)
O CSS a seguir é uma versão simplificada do código de navegação do Manual de Acessibilidade de TI da NC State University:
1 |
a.skip-main { |
2 |
left: -999px; |
3 |
position: absolute; |
4 |
top: auto; |
5 |
width: 1px; |
6 |
height: 1px; |
7 |
overflow: hidden; |
8 |
z-index: -999; |
9 |
}
|
10 |
a.skip-main:focus { |
11 |
left: auto; |
12 |
top: auto; |
13 |
width: 30%; |
14 |
height: auto; |
15 |
overflow: auto; |
16 |
margin: 0 35%; |
17 |
padding: 5px; |
18 |
font-size: 20px; |
19 |
outline: 3px solid red; |
20 |
text-align: center; |
21 |
z-index: 999; |
22 |
}
|
Quando o usuário acerta o Aba chave, o .skip-main
O elemento recebe seu estado de foco e o link para pular navegação aparece na tela.
Você pode testar rapidamente como funciona se clicar no topo da demonstração abaixo e clicar no botão Aba chave. Talvez seja mais fácil abrir a demonstração abaixo na visualização de página inteira.
Próximos passos
Neste artigo, compartilhei algumas dicas básicas de acessibilidade do teclado que você pode implementar usando HTML e CSS. Existem outras coisas mais avançadas que você também pode fazer para acessibilidade do teclado. Por exemplo, você poderia:
Além dessas dicas, evite usar CAPTCHAs sempre que possível, pois eles apresentam sérios problemas de acessibilidade, tanto para leitores de tela quanto para usuários somente de teclado. Se você ainda precisar utilizá-los, forneça mais de duas maneiras de resolvê-los, caso contrário, os usuários com necessidades de acessibilidade terão dificuldade para processar seus formulários. Deixe-nos saber se você tem alguma dica de acessibilidade do teclado!