Combobox e preenchimento automático do jeito certo
Crie uma seleção pesquisável que os leitores de tela compreendam.
Combobox e preenchimento automático do jeito certo é uma aula grátis de Web Accessibility Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Web Accessibility Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Web Accessibility Academy inclui 4 aulas no total.
O que é uma combobox
Uma combobox é um campo de entrada associado a uma janela de sugestões. Pense em caixas de pesquisa que exibem resultados correspondentes conforme você digita. 🔍
Duas partes trabalhando juntas
Uma combobox tem um campo de texto no qual a pessoa digita e uma lista suspensa separada de opções. A ARIA conecta as duas para que os leitores de tela as relacionem.
Função no campo de entrada
Você coloca role="combobox" no próprio campo de texto. Isso informa à tecnologia assistiva que digitar ali exibirá uma lista de opções.
<input role="combobox" aria-expanded="false"
aria-controls="results" type="text">Aponte para a janela suspensa
Use aria-controls no campo de entrada, definindo-o como o id da janela suspensa. Isso vincula o campo à listbox que ele abre e fecha.
Anuncie se está aberta ou fechada
Alterne aria-expanded para true quando a lista for exibida e para false quando for ocultada. Os leitores de tela anunciam o estado da janela por meio desse atributo.
A janela suspensa é uma listbox
O contêiner de sugestões recebe role="listbox" e cada sugestão recebe role="option". Isso oferece às pessoas uma lista familiar e navegável.
<ul id="results" role="listbox">
<li role="option" id="o1">Apple</li>
</ul>O foco permanece no campo de entrada
O segredo é que o foco do teclado nunca sai do campo de entrada. A pessoa continua digitando enquanto as teclas de seta movem o destaque pelas opções.
aria-activedescendant
No campo de entrada, aponte aria-activedescendant para o id da opção destacada. É assim que o leitor de tela lê a opção ativa sem mover o foco real.
<input role="combobox"
aria-activedescendant="o1">As teclas esperadas
As setas para baixo e para cima percorrem as opções, Enter seleciona a opção ativa e Escape fecha a janela suspensa. Essas teclas vêm diretamente do APG.
Marque a opção escolhida
Defina aria-selected="true" na opção destacada e false nas demais. Em uma combobox de seleção única, somente uma opção deve estar selecionada por vez.
Comportamento de preenchimento automático
Use aria-autocomplete para descrever como as sugestões aparecem: "list" para um menu filtrado ou "both" quando o texto também é completado diretamente no campo.
Verificação rápida
A pessoa usuária usa a seta para baixo para percorrer as sugestões da sua combobox. Qual atributo informa ao leitor de tela qual opção está ativa?
Recapitulação
Uma combobox combina um campo de entrada e uma listbox: conecte-os com aria-controls e aria-expanded, mantenha o foco no campo e acompanhe a opção ativa com aria-activedescendant. ✅
Perguntas Frequentes
A aula “Combobox e preenchimento automático do jeito certo” é grátis?
Sim — o texto completo de “Combobox e preenchimento automático do jeito certo” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Web Accessibility Academy, atualize para CoddyKit PRO. O curso de Web Accessibility Academy inclui 4 aulas no total.
O que vou aprender em “Combobox e preenchimento automático do jeito certo”?
Crie uma seleção pesquisável que os leitores de tela compreendam. Você pratica Web Accessibility Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Web Accessibility Academy?
Nenhuma experiência prévia é necessária. Web Accessibility Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Combobox e preenchimento automático do jeito certo”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Web Accessibility Academy?
Sim. Cada aula de Web Accessibility Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Lendo o APG: padrões, teclas e exemplos
- Combobox e preenchimento automático do jeito certo
- Menu, barra de menus e botão de menu
- Grade em árvore e outros padrões avançados