Modais acessíveis
O curso trata de modais construídos com o elemento dialog do HTML no lugar de overlays de div. Ele mostra o que o showModal() oferece nativamente: top layer, fundo, foco preso, Escape, inércia e devolução do foco. As aulas abordam a estilização do ::backdrop com Tailwind, o foco inicial e o uso do autofocus, a ordem de Tab, o clique no fundo e o bloqueio da rolagem. Também tratam de nomes ARIA, rótulos sr-only, ícones com aria-hidden, um controller Stimulus ui--dialog reutilizável com turbo-frames sob demanda e um checklist para testar o ciclo completo.
O que você vai aprender
- ✓O que o showModal() faz nativamente em relação a um overlay de div
- ✓Estilizar o pseudo-elemento ::backdrop com a variante backdrop: do Tailwind
- ✓Foco preso, foco inicial, escolha do autofocus e devolução do foco
- ✓Escape, ordem de Tab, clique no fundo e bloqueio da rolagem da página de trás
- ✓Dar nome a diálogos e rotular botões de ícone para leitores de tela com ARIA
- ✓Um controller Stimulus ui--dialog reutilizável com carregamento sob demanda de turbo-frames
O elemento `<dialog>` substitui overlays de div
Antes de o HTML ganhar o <dialog>, todo modal na web era uma <div> com position: fixed, um fundo feito de outra <div> e um monte de JavaScript para cuidar de foco, eventos de teclado e anúncios de leitor de tela. Essa abordagem funciona, mas reimplementa um comportamento que o elemento <dialog>…
Ler a aula completa grátis →Currículo
7 aulasO elemento `<dialog>` substitui overlays de div
Como o elemento dialog e o showModal() oferecem nativamente top layer, fundo, foco preso, Escape e inércia.
Estilizando o pseudo-elemento `::backdrop`
Estilização do ::backdrop com Tailwind, três padrões de fundo da aplicação, tokens de cor e animação do fundo.
Gerenciamento de foco: trapping, autofocus, restauração
Como o navegador prende o foco, escolhe o foco inicial, devolve o foco e por que a rolagem exige JavaScript.
Navegação por teclado: Escape, Tab, scroll
O evento cancel no Escape, a ordem de Tab pelo DOM, o clique no fundo, a rolagem no iOS e atalhos.
Leitores de tela: ARIA roles, labels, live regions
A role dialog implícita, nomes com aria-label ou aria-labelledby, rótulos sr-only, ícones com aria-hidden e aria-describedby.
O controller Stimulus reutilizável `ui--dialog`
Leitura do controller ui--dialog: carregamento sob demanda de turbo-frames, bloqueio da rolagem e fechamento ao clicar no fundo.
Modais acessíveis: juntando tudo
O ciclo completo do diálogo, um checklist para diálogos novos, a auditoria do modal com div e erros comuns.