Usar HTML semântico para facilitar o ganho de teclado

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.

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 ENTER ou SPACE para 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.

Outro antipadrão comum é tratar links como botões anexando um comportamento JavaScript a eles.

<a href="#" onclick="// perform some action">

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.