nicholascostadev / notus-learning-accessibility

web-acessibility

Notus Learning

Acessibilidade

Feito para exemplificar a apresentação

Divido entre seções

Tornando divs clicáveis, acessíveis

Cada exemplo é uma continuação do primeiro exemplo, sempre melhorando aos poucos

1. Div com click
2. Div com click + clique no teclado
3. Div com click + clique no teclado + possível focar com "TAB"
4. Div com click + clique no teclado + possível focar com "TAB" + role

Ícones clicáveis (aria-label)

1. Tornando um botão que é um ícone, acessível, adicionando aria-label
2. Tornando um botão que é um ícone, acessível, adicionando texto para screen-readers

Seções e sua importância

1. Duas "divs" que dividem conteúdo em duas partes, mostrando como funciona o leitor de tela nesse caso.
2. Duas sections que dividem o conteúdo em duas partes, mostrando como o leitor de tela identifica cada seção e como fica melhor a sua separação para uma pessoa que tenha que usar o leitor de tela.

Modal acessível

1. Exemplo de um modal bem pensado pra acessibilidade.
   • Foco apenas internamente.
   • aria-label para o modal
   • role para o modal (role="dialog") pra mostrar como o leitor de tela deve interpretar esse elemento
   • aria-modal pra mostrar que ele se comporta como um modal W3 docs

Links utilizados para aprendizado

1. W3
2. W3 aria-modal
3. W3 dialog-modal
4. Aria by Mozilla
5. Github Eslint Plugin para acessibilidade