Construa Windows Modal Acessível com Diálogo A11y

Modais são amplamente suportados em navegadores modernos. Eles podem ser usados ​​como pop-ups de notificação, Como campos de opt-in, ou mesmo para slideshows de fotos.

Você pode construir essas janelas usando CSS puro mas esta não é a solução mais acessível. Em vez disso, confira Diálogo A11y, uma janela modal totalmente funcional que coloca o foco acessibilidade primeiro.

Ele é executado em baunilha JavaScript com o seu própria API personalizada e suporta todos os navegadores modernos em todos os dispositivos. Você pode conferir este demo para ver como fica em ação.

Ele parece muito com uma janela modal típica. Mas esse roteiro usa tags ARIA para apoiar a acessibilidade moderna para todos os usuários.

Por padrão, o A11y Dialog também suporta telas sensíveis ao toque, por isso, o toque tem o mesmo efeito que clicar. Você pode clicar ou tocar em qualquer lugar fora da janela para fechá-lo, ou em um computador apertar a tecla ESC.

De alguma forma, essa biblioteca é bem pequena, apenas 1,2kb, incluindo todo o código CSS e JS. Isso torna mais leve em cima de totalmente acessível.

Você pode aprender mais lendo as informações Repositório GitHub e A11y Dialog tem sua própria página de documentação, também. Isso inclui uma seção sobre instalação e configuração para iniciantes completos. Há também uma longa seção cobrindo o API do DOM para adicionar botões para a sua página que pode abrir (ou fechar) a janela modal.

Se você está tentando construir sites mais acessíveis Considere seriamente a execução do A11y Dialog em seus projetos. Você pode obter o código fonte do GitHub ou baixá-lo de um gerenciador de pacotes como npm ou Bower.

Dê uma olhada na página principal para saber mais sobre a configuração e os recursos básicos do JavaScript. Esta biblioteca vem com muito mais do que acessibilidade da ARIA, então vale a pena testar se você quiser expandir os recursos de suas janelas modais.