Navegação por teclado em widgets compostos: roving tabindex, setas e Escape

O que é

O guia de interface de teclado da APG descreve a convenção comum às plataformas desktop: Tab e Shift+Tab movem o foco de um componente da interface para o seguinte, enquanto as outras teclas, sobretudo as setas, movem o foco dentro de um componente que contém vários elementos focáveis. O grupo de botões de rádio é o exemplo nativo: apenas um botão de rádio faz parte da sequência de Tab, as setas alternam entre as opções e Tab sai do grupo. Componentes compostos personalizados (listas de abas, barras de ferramentas, menus, grades, árvores, listboxes) devem se comportar da mesma forma, de modo que uma barra de ferramentas com vinte itens custe um único Tab, e não vinte.

O guia indica duas estratégias de implementação. Com roving tabindex, exatamente um item tem tabindex="0" e todos os outros têm tabindex="-1"; os manipuladores das setas movem o foco do DOM para o item seguinte e trocam os valores, de modo que, ao voltar ao componente mais tarde, o foco cai no último item usado. Com aria-activedescendant, o foco do DOM permanece no contêiner e o atributo aponta para o item que está com foco "virtual", o que é adequado para comboboxes, em que o foco precisa continuar no campo de texto.

Por que importa

Quem não pode usar um ponteiro depende dessas convenções para prever o que cada tecla fará. A WCAG 2.1.2 (No Keyboard Trap, nível A) exige que o foco levado a um componente pelo teclado possa ser retirado dele apenas pelo teclado e que qualquer saída que exija mais do que as setas ou Tab sem modificadores, ou outros métodos padrão, seja explicada ao usuário.

Como aplicar

• Dê a cada componente composto uma única parada de Tab e mova-se dentro dele com as setas; os padrões individuais da APG acrescentam Home e End e, para listboxes, menus e árvores, a navegação pelo primeiro caractere. Siga o padrão do widget: uma lista de abas horizontal usa Esquerda/Direita, um menu vertical usa Cima/Baixo e uma grade usa as quatro direções.
• Escape fecha superfícies transitórias: o padrão de diálogo da APG lista Escape como a tecla que fecha o diálogo, e os padrões de botão de menu e de combobox o usam para fechar seus popups. Feche também quando o foco sair da superfície.
• Enter e Space ativam; o guia desaconselha associar teclas modificadoras a Tab, Enter, Space ou Escape, que pertencem à plataforma.
• Mantenha o indicador visual de foco acompanhando o índice itinerante; um foco virtual via aria-activedescendant precisa de um destaque próprio.
• Decida se a seleção acompanha o foco (as setas selecionam imediatamente, como nos grupos de rádio nativos) ou se é separada (Space seleciona); o guia discute quando cada abordagem é apropriada.

Armadilhas

Definir tabindex="0" em todos os itens faz o Tab percorrer o widget inteiro, item por item. Remover do DOM o item com tabindex="0" (uma aba excluída) deixa o componente sem nenhuma parada de Tab. Manipuladores que chamam preventDefault() em todas as teclas engolem os atalhos do navegador. Editores incorporados que capturam Tab precisam oferecer a saída documentada.