Ao usar os elementos HTML semânticos corretos, é possível atender à maioria ou a todas
as necessidades de acesso ao teclado. Isso significa menos tempo mexendo com tabindex
e mais usuários satisfeitos.
Suporte ao teclado sem custo financeiro (e melhores experiências em dispositivos móveis)
Há vários elementos interativos integrados com semântica e suporte de teclado adequados. A maioria dos desenvolvedores usa:
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 ao teclado integrado que esses elementos oferecem.
Confira abaixo alguns exemplos de elementos. Em vez de usar o
mouse, tente usar o teclado para operá-los. É possível usar TAB (ou SHIFT +
TAB) para alternar entre controles e as teclas de seta e as teclas de seta, como ENTER e SPACE, para manipular os valores.
Se você tiver um smartphone à mão, vai notar que muitas vezes esses elementos integrados têm interações únicas em dispositivos móveis. Tentar reproduzir essas interações de celular por conta própria dá muito trabalho. É outro bom motivo para se ater a elementos integrados sempre que possível.
Usar button em vez de div
Um antipadrão de acessibilidade comum é tratar um elemento não interativo, como
um div ou um span, como um botão, adicionando um gerenciador de cliques a ele.
Mas, para ser considerado acessível, um botão precisa:
- Ser focalizável pelo teclado
- Suporte desativado
- Oferecer suporte às teclas
ENTERouSPACEpara realizar uma ação - Ser anunciado corretamente por um leitor de tela
O botão div não tem nenhuma dessas coisas. Isso significa que você vai precisar escrever
outro código para replicar o que o elemento button oferece sem custos.
Por exemplo, os elementos button têm um truque interessante chamado *ativação de
clique sintético*. Se você adicionar um gerenciador de "clique" a um button, ele será executado quando o
usuário pressionar ENTER ou SPACE. Um botão div não tem esse recurso. Por isso,
é necessário programar outro código para detectar o evento keydown, verificar
se o código de tecla é ENTER ou SPACE e executar o gerenciador de cliques. Ai!
É muito trabalho extra!
Compare a diferença neste exemplo. TAB para controlar e use ENTER
e SPACE para tentar clicar neles.
Se você tiver botões div no seu site ou aplicativo, considere
trocá-los por elementos button. button é fácil de estilizar e cheio de
conquistas de acessibilidade.
Links versus botões
Outro antipadrão comum é tratar links como botões anexando o comportamento do JavaScript a eles.
<a href="#" onclick="// perform some action">
Tanto botões quanto links são compatíveis com alguma forma de ativação por clique sintético. Então, qual você deve escolher?
- Se clicar no elemento realizar uma ação na página, use
<button>. - Se clicar no elemento levará o usuário a uma nova página, use
<a>. Isso inclui apps da Web de página única que carregam novos conteúdos e atualizam o URL usando a API History.
O motivo é que botões e links são anunciados de maneiras diferentes pelos leitores de tela. Usar o elemento correto ajuda os usuários do leitor de tela a saber qual resultado esperar.
O que fazer: DevSite - Avaliação de reflexão e verificação
Estilo
Pode ser difícil definir o estilo de alguns elementos integrados, em especial o <input>.
Com um pouco de CSS inteligente, você pode contornar algumas dessas limitações. O projeto WTFForms (de forma hilária)
contém um exemplo
de folha de estilo
que demonstra várias técnicas para estilizar alguns dos elementos
integrados mais difíceis.
Próximas etapas
O uso de elementos HTML integrados pode melhorar muito a acessibilidade do seu site e reduzir significativamente a carga de trabalho. Tente navegar pelo site e procure controles sem suporte ao teclado. Se possível, troque-os por alternativas HTML padronizadas.
Às vezes, você pode encontrar um elemento que não tem uma contraparte em HTML.
Sem problemas. Continue lendo para saber como adicionar suporte ao teclado a controles interativos
personalizados usando tabindex.