Papéis de diálogo e o elemento nativo dialog
Marque uma camada como uma verdadeira caixa de diálogo modal.
Papéis de diálogo e o elemento nativo dialog é uma aula grátis de Web Accessibility Academy no CoddyKit. Esta é a aula 1 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 torna um diálogo um diálogo
Um diálogo é uma camada que interrompe a página para solicitar uma entrada ou exibir uma mensagem. Usuários de leitores de tela precisam ser informados de que se trata de um diálogo, não apenas de um texto flutuante.
Uma div parece modal, mas não é
Um div estilizado pode parecer uma janela pop-up, mas as tecnologias assistivas o reconhecem como conteúdo comum. Sem a função adequada, os usuários nunca ficam sabendo que uma caixa de diálogo foi aberta.
<div class="modal">Are you sure?</div>Conheça o elemento dialog nativo
O elemento dialog do HTML foi criado para essa finalidade. Ele já traz a semântica de caixa de diálogo, portanto os leitores de tela o anunciam corretamente.
<dialog>Are you sure?</dialog>Abra-o como um modal de verdade
Chame showModal() em JavaScript para abrir a caixa de diálogo como um modal de verdade. É isso que torna a página atrás dele inerte e inacessível.
document.querySelector("dialog").showModal();show() não é modal
Cuidado: show() abre a caixa de diálogo como não modal, portanto a página continua interativa atrás dela. Para uma caixa de diálogo bloqueante, use showModal().
dialog.show();A função por trás de dialog
Internamente, o elemento é associado à função dialog. Se precisar criar uma caixa de diálogo a partir de um div, role="dialog" é o atributo que lhe dá significado.
<div role="dialog">Settings</div>alertdialog para escolhas urgentes
Quando uma caixa de diálogo exige uma resposta, como em uma confirmação de exclusão, use role="alertdialog". Isso sinaliza uma urgência maior para as tecnologias assistivas.
<div role="alertdialog">Delete this file?</div>Toda caixa de diálogo precisa de um nome
Uma caixa de diálogo precisa ter um nome acessível para que os usuários saibam sua finalidade ao abri-la. Aponte aria-labelledby para o título dentro dela.
<dialog aria-labelledby="t"><h2 id="t">Confirm</h2></dialog>Feche-a no código
O elemento nativo oferece um método correspondente, close(). Chamá-lo fecha a caixa de diálogo e permite que a página atrás dela volte a ser acessível.
dialog.close();O plano de fundo integrado
Uma caixa de diálogo modal recebe gratuitamente um plano de fundo que pode ser estilizado com o pseudo-elemento ::backdrop. Ele escurece a página e indica que o foco mudou.
dialog::backdrop { background: rgba(0,0,0,0.5); }Por que o recurso nativo facilita seu trabalho
O dialog nativo gerencia o foco, Escape e a inércia do plano de fundo para você. Usá-lo significa ter menos erros do que ao criar um div manualmente.
Verificação rápida
Você quer uma janela pop-up de confirmação que bloqueie a página até que o usuário responda. Qual chamada deve usar?
Recapitulação: use caixas de diálogo reais
Você aprendeu que um modal precisa da semântica de caixa de diálogo. Prefira o dialog nativo com showModal(), dê a ele um nome e reserve alertdialog para escolhas urgentes.
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 30
- Aulas
- 120
Perguntas Frequentes
A aula “Papéis de diálogo e o elemento nativo dialog” é grátis?
Sim — o texto completo de “Papéis de diálogo e o elemento nativo dialog” é 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 “Papéis de diálogo e o elemento nativo dialog”?
Marque uma camada como uma verdadeira caixa de diálogo modal. 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 1 de 4.
Quanto tempo leva a aula “Papéis de diálogo e o elemento nativo dialog”?
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
- Papéis de diálogo e o elemento nativo dialog
- Prendendo o foco dentro do modal
- Escape para fechar e restaurar o foco
- Plano de fundo inerte e aria-modal