Depois de fazer esse post com dicas de acessibilidade, resolvi fazer mais este para que você conheça um pouco de um recurso muito interessante: a WAI ARIA. Vamos?
Um elemento visual que hora ou outra precisamos fazer em nossos projetos é aquela janelinha modal ou dialog. Sabe? Aquela que aparece sempre para te irritar informar sobre algo importante ou confirmar alguma ação? Como essa da imagem abaixo:
Como normalmente você faria essa janela? O novo elemento pode ser uma boa, mas o suporte atualmente ainda não é muito bom.. Poderíamos ir com uma singela
Agora, como será que o usuário de leitor de tela ouviria isso? Para demonstrar isso sem que você tenha que baixar um desses softwares (o que recomendo, sua percepção como profissional e pessoa vai mudar bastante), dá uma olhada no GIF abaixo que mostra o exibidor de fala de um deles, o NVDA: 
Sem aviso nenhum, o usuário se perderá quando essa janela surgir. Idealmente, o leitor de tela deveria informar que uma janela foi aberta. Como fazer isso? Podemos fazer uso de um recurso super bacana chamado WAI ARIA.
Pense na WAI ARIA como vários pacotes de expansão do The Sims HTML. Com ela podemos simplesmente colocar um atributo em um elemento e assim mudar totalmente seu valor semântico. Um botão poderia virar um link, um link poderia virar um título, e por aí vai. Inclusive em um futuro post mostrarei como deixar uma
que representa nossa modal é na verdade uma janela modal, devemos mudar a função que ela tem em nosso HTML, alterar seu papel, com o atributo role. Mas qual valor colocar? Dialog, modal, popup? Para isso que temos a documentação da WAI ARIA e nela podemos ver que tem justamente o que precisamos: o valor “dialog”. Colocando o atributo role=”dialog” e chegamos nesse resultado:
Agora veja como o NVDA interpreta isso:
Só isso para uma modal acessível?
Não, mas é um começo! Alguns pontos interessantes para tomarmos cuidado quando fazemos uma modal:
- Com a modal aberta, o foco nunca deve ir para os elementos do fundo;
- Botão de fechar não pode falar apenas “X”, deveria falar “Fechar modal”;
- Ao fechar, foco volto pro botão que abriu a modal;
- Descrição sobre o que se trata a modal com o atributo “aria-labelledby”;
- Cores com contraste decente (ferramenta que ajuda nisso);
- Informações textuais sempre bem escritas, sem figuras de linguagem (já viu a série Atypical?).
Modal, dialog ou pop-up?
Também tinha essa dúvida! Fiz uma rápida enquete no meu Twitter, e apesar do correto ser o termo “dialog”, galera aqui no BR fala “modal” mesmo:
Resumo
Tente usar os elementos nativos do HTML5 que não tem muito erro. Se por algum motivo você não puder ou for algo que ainda não foi criado, use a WAI ARIA para te ajudar a deixar seu projeto um pouco mais acessível. Se tiver interesse em se aprofundar em acessibilidade, tanto na parte de design/layouts quanto na parte de front-end, recomendo a dar uma olhada nesse post com dicas de acessibilidade e nos meus cursos de acessibilidade na Alura, em que mostro como deixar seu site mais inclusivo para todos.
