Desvendando a Acessibilidade na Web #PraTodosVerem Monica Craveiro https://speakerdeck.com/mocraveirodev/ workshop-de-acessibilidade-na-web

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

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

sensdia.com Acessibilidade é para todos!

Acessibilidade deve fazer parte da rotina! Conscientização Capacitação Documentação Ferramentas Execução

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

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

HTML CSS JavaScript Vamos deixar isso tudo ACESSÍVEL? https://bit.ly/codigobaseworkshop

Vamos primeiro mexer no nosso HTML https://bit.ly/codigobaseworkshop

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

role=”tab” Adicionar a role tab para cada componente da lista de abas. DEPOIS https://bit.ly/codigobaseworkshop ANTES

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

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

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

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

Cada painel terá um aria-labelledby referenciando o id da aba que o controla. aria-labelledby=”tab” DEPOIS https://bit.ly/codigobaseworkshop ANTES

Vamos mexer no nosso JavaScript https://bit.ly/codigobaseworkshop

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

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

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

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

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

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

Tecla espaço Tecla enter A tecla espaço e enter selecionarão o conteúdo da aba. https://bit.ly/codigobaseworkshop

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

Finalizamos nossa página, Pronto! Vamos passar o Leitor de Tela? https://bit.ly/codigobaseworkshop

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