Ao usar os elementos HTML semânticos corretos, você pode atender à maioria ou a todas
as necessidades de acesso por teclado. Isso significa menos tempo mexendo com tabindex
e mais usuários satisfeitos.
Suporte a teclado sem custo financeiro e experiências melhores em dispositivos móveis
Há vários elementos interativos integrados com semântica adequada e suporte a teclado. As que a maioria dos desenvolvedores usa são:
Além disso, elementos com o atributo
contenteditable
às vezes são usados para entrada de texto em formato livre.
É fácil ignorar o suporte integrado ao teclado que esses elementos oferecem.
Confira abaixo alguns exemplos de elementos. Em vez de usar o
mouse, tente usar o teclado para operá-las. Você pode usar TAB (ou SHIFT +
TAB) para se mover entre controles e usar as teclas de seta e teclas como
ENTER e SPACE para manipular os valores.
Se você tiver um smartphone por perto, vai perceber que, muitas vezes, esses elementos integrados têm interações exclusivas em dispositivos móveis. Tentar reproduzir essas interações por conta própria dá muito trabalho. Esse é outro bom motivo para usar elementos integrados sempre que possível.
Usar button em vez de div
Um antipadrão comum de acessibilidade é tratar um elemento não interativo, como
um div ou um span, como um botão adicionando um manipulador de cliques a ele.
No entanto, para ser considerado acessível, um botão precisa:
- Ser focalizável pelo teclado
- Suporte sendo desativado
- Ofereça suporte às teclas
ENTERouSPACEpara realizar uma ação - Ser anunciado corretamente por um leitor de tela
Um botão div não tem nenhuma dessas coisas. Isso significa que você vai precisar escrever
um código extra para replicar o que o elemento button oferece sem custo financeiro.
Por exemplo, os elementos button têm um truque chamado *ativação de clique
sintético*. Se você adicionar um gerenciador de cliques a um button, ele será executado quando o
usuário pressionar ENTER ou SPACE. Um botão div não tem esse recurso. Portanto,
você vai precisar escrever um código adicional para detectar o evento keydown, verificar
se o código da tecla é ENTER ou SPACE e executar o gerenciador de cliques. Ai!
É muito trabalho extra!
Compare a diferença neste exemplo. TAB para controlar e usar ENTER
e SPACE para tentar clicar neles.
Se você tiver botões div no seu site ou aplicativo, troque-os
por elementos button. button é fácil de estilizar e tem muitas
vantagens de acessibilidade.
Links e botões
Outro antipadrão comum é tratar links como botões anexando um comportamento JavaScript a eles.
<a href="#" >
Os botões e links oferecem suporte a alguma forma de ativação sintética de cliques. Qual você deve escolher?
- Se clicar no elemento realizar uma ação na página, use
<button>. - Se clicar no elemento navegar o usuário para uma nova página, use
<a>. Isso inclui apps da Web de página única que carregam novo conteúdo e atualizam o URL usando a API History.
Isso acontece porque os leitores de tela anunciam botões e links de maneira diferente. Usar o elemento correto ajuda os usuários de leitores de tela a saber qual resultado esperar.
TODO: DevSite - avaliação de pensar e verificar
Estilo
Alguns elementos integrados, em especial <input>, podem ser difíceis de estilizar.
Com um CSS inteligente, você conseguirá contornar algumas dessas
limitações. O projeto WTFForms (nome hilário)
contém uma folha de estilo
de exemplo
que demonstra várias técnicas para estilizar alguns dos elementos
integrados mais difíceis.
Próximas etapas
O uso de elementos HTML integrados melhora muito a acessibilidade do site e reduz significativamente a carga de trabalho. Tente navegar pelo site e procure controles sem suporte a teclado. Se possível, substitua-as por alternativas HTML padronizadas.
Às vezes, você pode encontrar um elemento que não tem uma contraparte em HTML.
Não tem problema. Continue lendo para saber como adicionar suporte ao teclado a controles interativos
personalizados usando tabindex.