Acessibilidade para componentes de preenchimento automático

O padrão de caixa de combinação WAI-ARIA define um conjunto específico de funções e propriedades para componentes de preenchimento automático. Uma caixa de combinação é um elemento de entrada associado a uma janela emergente de lista. O padrão garante que os leitores de tela anunciem corretamente o comportamento interativo, as opções disponíveis e a seleção atual para usuários que não conseguem ver a interface visual.

Envolva a entrada em uma div com role="combobox". Isso informa à tecnologia assistiva que a entrada tem uma lista emergente associada. Defina aria-expanded={isOpen} neste contêiner para informar aos leitores de tela se a lista de sugestões está visível ou oculta no momento.

O próprio elemento de entrada deve ter: aria-autocomplete="list" (a janela emergente contém uma lista de sugestões), aria-haspopup="listbox" (clicar ou digitar abre uma lista), aria-expanded={isOpen} e aria-controls="suggestion-list-id", apontando para o id do elemento da lista suspensa.

aria-activedescendant na entrada aponta para o id da opção atualmente destacada. Quando selectedIndex for 0, defina aria-activedescendant="option-0". Os leitores de tela usam isso para anunciar qual item está ativo sem mover o foco real da entrada. Quando nenhum item estiver selecionado, remova o atributo ou defina-o como uma cadeia vazia.

O elemento contêiner da lista suspensa deve ter role="listbox" e um id exclusivo que corresponda a aria-controls da entrada. Essa função informa à árvore de acessibilidade que o elemento é uma lista de opções selecionáveis. A lista recebe foco indiretamente por meio de aria-activedescendant na entrada.

Cada item de sugestão deve ter role="option" e um id exclusivo, como option-0, option-1 etc. Adicione aria-selected={index === selectedIndex} para indicar qual item está destacado no momento. Os leitores de tela anunciam tanto o conteúdo da opção quanto se ela está selecionada quando o usuário navega com as teclas de seta.

Quando o usuário pressiona ArrowDown e aria-activedescendant é atualizado para option-1, o VoiceOver anuncia algo como "ganchos do React, 2 de 5". O leitor de tela lê automaticamente o texto da opção e sua posição na lista a partir da marcação ARIA. Não são necessárias regiões dinâmicas adicionais para a navegação pelo teclado.

Faça um teste com o VoiceOver no macOS (Cmd+F5 para alternar) e com o NVDA no Windows (download gratuito). Navegue até a entrada e comece a digitar. Verifique se o leitor de tela anuncia a função de caixa de combinação, o número de resultados encontrados e cada opção conforme você navega com as teclas de seta. Compare o comportamento com os exemplos do Guia de práticas de criação do WAI-ARIA.

Quando as sugestões forem carregadas de forma assíncrona, adicione uma div visualmente oculta com aria-live="polite" e aria-atomic="true". Atualize seu conteúdo textual quando o carregamento terminar: "5 resultados encontrados" ou "Nenhum resultado encontrado". O leitor de tela anuncia essa mensagem depois que a fala atual termina, mantendo os usuários informados sem interrompê-los.

O Guia de práticas de criação do WAI-ARIA (APG), disponível em w3.org/WAI/ARIA/apg, contém uma página dedicada ao padrão de caixa de combinação, com exemplos funcionais de código e especificações detalhadas de interação pelo teclado. Consulte sempre o APG ao implementar componentes interativos, como preenchimento automático, caixas de diálogo ou abas, para garantir conformidade total com os requisitos de acessibilidade.

Forneça um aria-label na entrada se não existir um elemento de rótulo visível: aria-label="Search suggestions". Não dependa somente de placeholder para os rótulos: os espaços reservados desaparecem quando o usuário digita e não são anunciados de maneira consistente por todos os leitores de tela. Um elemento label visível com htmlFor é sempre a melhor opção.

Qual é a finalidade do atributo aria-activedescendant em uma entrada de preenchimento automático?

Use role="combobox" no contêiner, aria-autocomplete="list" na entrada, além de aria-expanded, aria-controls e aria-activedescendant para conectar a entrada à lista de sugestões. Cada opção precisa de role="option", um id exclusivo e aria-selected. Adicione uma região aria-live para as contagens de resultados assíncronos.