Workshop de Acessibilidade na Web

Prepare-se para mergulhar em um universo de Acessibilidade Web como nunca antes! Veja como é simples usando apenas componentes de HTML, CSS e JavaScript, seguindo as orientações e padrões da documentação oficial, ter uma web verdadeiramente inclusiva!

Transcript

1. Desvendando a Acessibilidade na Web #PraTodosVerem Monica Craveiro https://speakerdeck.com/mocraveirodev/ workshop-de-acessibilidade-na-web
2. Quem sou eu? - CARIOCA - Desenvolvedora Back-end - Bacharel em Sistemas de Informação e Matemática - Ex-aluna do [des]programe, {reprograma} e DigitalHouse> - Professora de Programação - Palestrante, Apresentadora/Mestre de Cerimônias e Participante de Diversos Eventos na área de Tecnologia - Coordenadora e Voluntária em Diversas Comunidades de TI - Embaixadora da Programaria - Host do Canal do da NodeBR do YouTube - Criadora de Conteúdo para as Redes Sociais Monica Craveiro @mocraveirodev
3. Por que a gente tem que se preocupar com acessibilidade? Vamos aos números Mais de 1 bilhão de pessoas no mundo vivem com algum tipo de deficiência. Fonte: Nações Unidas Pelo menos 45 milhões de pessoas têm algum tipo de deficiência no Brasil. Fonte: IBGE/2019
4. sensdia.com Acessibilidade é para todos!
5. Acessibilidade deve fazer parte da rotina! Conscientização Capacitação Documentação Ferramentas Execução
6. Hora de colocar a mão na massa Vamos criar um elemento simples conforme tela ao lado de navegação por abas, onde vamos aplicar os conceitos de acessibilidade conforme padrões orientados pela documentação oficial do WAI-ARIA Link para o código base: https://bit.ly/codigobaseworkshop
7. O que vamos usar? • Editor de código-fonte ◦ VSCode ◦ Notepad++ ◦ Sublime Text ◦ Brackets ◦ VIM ◦ Entre outros… • Leitor de Tela ◦ NVDA ◦ Screen Reader ◦ Jaws ◦ TalkBack ◦ VoiceOver ◦ Dosvox https://bit.ly/codigobaseworkshop
8. HTML CSS JavaScript Vamos deixar isso tudo ACESSÍVEL? https://bit.ly/codigobaseworkshop
9. Vamos primeiro mexer no nosso HTML https://bit.ly/codigobaseworkshop
10. Vamos colocar a role tablist no elemento que serve de container e envolve a lista de abas. role =”tablist” ANTES DEPOIS https://bit.ly/codigobaseworkshop
11. role=”tab” Adicionar a role tab para cada componente da lista de abas. DEPOIS https://bit.ly/codigobaseworkshop ANTES
12. Adicione a role tabpanel à todos os elementos que correspondem ao conteúdo dos painéis exibidos em cada aba da lista. role=”tabpanel” ANTES DEPOIS https://bit.ly/codigobaseworkshop
13. Nossa lista de abas não tem nenhum título visível, então usaremos o aria-label para dar um título ao nosso elemento. aria-label=”Lista de abas” ANTES DEPOIS Caso tenha um título visível, usamos o aria-labelledby. https://bit.ly/codigobaseworkshop
14. Cada aba do nosso elemento terá um aria-controls referenciando o id do painel que irá controlar. aria-controls=”tab-content” ANTES DEPOIS https://bit.ly/codigobaseworkshop
15. aria-selected=”true” aria-selected=”false” A aba ativa do nosso elemento receberá o aria-selected com o valor true e as demais abas receberão o aria-selected com valor false ANTES DEPOIS https://bit.ly/codigobaseworkshop
16. Cada painel terá um aria-labelledby referenciando o id da aba que o controla. aria-labelledby=”tab” DEPOIS https://bit.ly/codigobaseworkshop ANTES
17. Vamos mexer no nosso JavaScript https://bit.ly/codigobaseworkshop
18. Foco na tab ativa Quando o foco da página chegar no nosso elemento, ele deve ir direto para tab ativa. Para isso, o atributo tabindex=”0” deve estar apenas no elemento ativo, os demais ficarão com o tabindex=”-1”. ANTES DEPOIS https://bit.ly/codigobaseworkshop
19. Atualmente já temos implementado no código base a navegação por cliques em nosso elemento. Agora vamos implementar a navegação via teclado. Para isso, vamos adicionar um novo listener pelo “keydown” no nosso elemento e identificar as teclas que clicamos. https://bit.ly/codigobaseworkshop
20. Agora vamos começar a mexer em específico nas funcionalidades de cada tecla iniciando pela seta da direita. Lembrando que além de jogar o foco para o próximo elemento, temos que trocar o tabindex de 0 para -1 do elemento atual e trocar o tabindex de -1 para 0 do próximo elemento. Obs.: Caso chegue no último elemento, deve voltar para o primeiro. Navegação para a direita https://bit.ly/codigobaseworkshop
21. Navegação para a esquerda Agora vamos mexer nas funcionalidades da seta da esquerda. Lembrando que além de jogar o foco para o elemento anterior, temos que trocar o tabindex de 0 para -1 do elemento atual e trocar o tabindex de -1 para 0 do próximo elemento. Obs.: Caso chegue no primeiro elemento, deve voltar para o último. https://bit.ly/codigobaseworkshop
22. Agora vamos mexer nas funcionalidades da tecla home. Lembrando que ao clicar, deve jogar o foco para primeira tab e também temos que trocar o tabindex de 0 para -1 do elemento atual e trocar o tabindex de -1 para 0 do primeiro elemento. Tecla home https://bit.ly/codigobaseworkshop
23. Tecla end Agora vamos mexer nas funcionalidades da tecla end. Lembrando que ao clicar, deve jogar o foco para última tab e também temos que trocar o tabindex de 0 para -1 do elemento atual e trocar o tabindex de -1 para 0 do último elemento. https://bit.ly/codigobaseworkshop
24. Tecla espaço Tecla enter A tecla espaço e enter selecionarão o conteúdo da aba. https://bit.ly/codigobaseworkshop
25. Vamos ajustar o evento de clique para que, ao clicar, altere o aria-selected da aba ativa de true para false e troque o tabindex de 0 para -1 e também alterar o aria-selected da aba atual de false para true e troque o tabindex de -1 para 0. Evento de clique https://bit.ly/codigobaseworkshop
26. Finalizamos nossa página, Pronto! Vamos passar o Leitor de Tela? https://bit.ly/codigobaseworkshop
27. Estão preparados para criar sites mais acessíveis? @mocraveirodev OBRIGADA! Monica Craveiro https://bit.ly/workshop-acessibilidade https://speakerdeck.com/mocraveirodev/ workshop-de-acessibilidade-na-web