Slide 1

Slide 1 text

Globalcode – Open4education Acessibilidade na Web #ParaTodosVerem Monica Craveiro de Menezes https://speakerdeck.com/mocraveirodev

Slide 2

Slide 2 text

Monica Craveiro de Menezes Meio Carioca Meio Cearense , Bacharel em Sistemas de Informação e Matemática, Desenvolvedora Back-end na Sensedia, Voluntária e Host do Canal do YouTube da NodeBR, ex-aluna do [des]programe, {reprograma} e DigitalHouse>. Professora de Programação, além de Participante e Palestrante em diversas comunidades de TI. Quem sou? @mocraveirodev

Slide 3

Slide 3 text

Globalcode – Open4education Já pararam pra pensar como a acessibilidade é importante? Pense

Slide 4

Slide 4 text

Globalcode – Open4education VOCÊ VAI LER ISSO AQUI PRIMEIRO depois vai ler isso aqui. e depois isso aqui E só por último vai ler isso aqui.

Slide 5

Slide 5 text

Quão importante é o layout, o tamanho das fontes e suas cores para que a gente consiga ter um entendimento completo de algo?

Slide 6

Slide 6 text

O que define um website para você? Claramente, não é possível saber o que está escrito, uma vez que as palavras estão borradas. No entanto, há dicas visuais que nos auxiliam a entender quais informações estão disponíveis e onde elas estão.

Slide 7

Slide 7 text

As dicas visuais são de extrema importância para o usuário. Pensando nisso, como podemos melhorar a experiência de usuários com algum tipo de deficiência?

Slide 8

Slide 8 text

Globalcode – Open4education Agenda ❏ Por que? ❏ Quanto? ❏ Onde? ❏ Como?

Slide 9

Slide 9 text

Globalcode – Open4education Por que? Por que a gente tem que se preocupar com acessibilidade?

Slide 10

Slide 10 text

Globalcode – Open4education 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

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

Lei nº 13.146 de 06 de Julho de 2015 Art. 63. É obrigatória a acessibilidade nos sítios da internet mantidos por empresas com sede ou representação comercial no País ou por órgãos de governo, para uso da pessoa com deficiência, garantindo-lhe acesso às informações disponíveis, conforme as melhores práticas e diretrizes de acessibilidade adotadas internacionalmente.

Slide 13

Slide 13 text

sensedia.com Acessibilidade é para todos!

Slide 14

Slide 14 text

Globalcode – Open4education Quanto? Quanto custa a gente investir em acessibilidade?

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Globalcode – Open4education Onde? Onde encontro conteúdo e documentação sobre acessibilidade?

Slide 17

Slide 17 text

Uma das formas de validar se o usuário está tendo uma boa experiência é através do WCAG, uma documentação criada pelo WAI (Web Accessibility Initiative) para conteúdos na web. Este documento é estruturado da seguinte forma:

Slide 18

Slide 18 text

Para cada recomendação existem critérios de sucesso, que são pontos específicos que devem ser atingidos e, para cada critério de sucesso, estão disponíveis técnicas específicas, com exemplos de como o objetivo do critério pode ser atingido e testado. Cada critério de sucesso é indicado por um nível de conformidade, que pode ser A, AA ou AAA: Nível A: barreiras mais significativas de acessibilidade. Não garante um site altamente acessível; Nível AA: estar em conformidade com todos os critérios de sucesso de nível AA garante um site bastante acessível. Nível AAA: o nível de conformidade triplo A é bastante meticuloso, ou seja, visa garantir um nível otimizado de acessibilidade. A maioria dos critérios de sucesso de nível AAA referem-se a situações bastante específicas, normalmente objetivando refinar os critérios de sucesso de nível AA. Muitos sites não possuem conteúdo que se aplica aos critérios de sucesso de nível AAA. Documentação WCGA

Slide 19

Slide 19 text

https://www.w3.org/TR/WCAG21/

Slide 20

Slide 20 text

https://www.w3.org/TR/wai-aria/

Slide 21

Slide 21 text

https://developers.google.com/style/accessibility https://developer.mozilla.org/en-US/docs/Web/Accessibility https://developer.apple.com/accessibility/ https://developer.wordpress.org/themes/functionality/accessibility/ https://reactjs.org/docs/accessibility.html https://developer.android.com/guide/topics/ui/accessibility https://docs.oracle.com/javase/8/docs/legal/docaccessibility.html https://reactnative.dev/docs/accessibility Documentações

Slide 22

Slide 22 text

Globalcode – Open4education Como? Como faço para tornar esse conteúdo acessível?

Slide 23

Slide 23 text

A chave é uma semântica HTML bem escrita! É muito importante tomar cuidado e entender qual deve ser a experiência do usuário quando for implementar ou atualizar um componente. Dessa forma, você consegue sempre utilizar os elementos corretos, permitindo que os leitores de tela possam fazer uma leitura correta e permitindo ao usuário uma experiência mais completa.

Slide 24

Slide 24 text

A árvore de acessibilidade herda os componentes da árvore HTML e, por isso, é muito importante utilizar corretamente as tags, roles e atributos aria. De acordo com a recomendação da documentação do WCAG e do WAI-ARIA.

Slide 25

Slide 25 text

Perceptível Operável A informação e os componentes da interface do usuário têm de ser apresentados aos usuários em formas que eles possam perceber. Os componentes de interface de usuário e a navegação têm de ser operáveis. Princípios Recomendações 1.1 Fornecer alternativas textuais para qualquer conteúdo não textual 1.2 Fornecer alternativas para multimídia 1.3 Criar conteúdo que possa ser apresentado de modos diferentes sem perder informação ou estrutura 1.4 Tornar mais fácil aos usuários a visualização e audição de conteúdos, incluindo as separações das camadas da frente e de fundo 2.1 Fazer com que todas as funcionalidades estejam disponíveis no teclado 2.2 Prover tempo suficiente para os usuários lerem e usarem o conteúdo 2.3 Não projetar conteúdo de uma forma conhecida por causar ataques epiléticos 2.4 Prover formas de ajudar os usuários a navegar, localizar conteúdos e determinar onde se encontram Documentação WCGA

Slide 26

Slide 26 text

Compreensível Robusto A informação e a operação da interface de usuário têm de ser compreensíveis. O conteúdo tem de ser robusto o suficiente para poder ser interpretado de forma concisa por diversos agentes do usuário, incluindo recursos de tecnologia assistiva. Princípios Recomendações 3.1 Tornar o conteúdo de texto legível e compreensível 3.2 Fazer com que as páginas da Web apareçam e funcionem de modo previsível 3.3 Ajudar os usuários a evitar e corrigir erros 4.1 Maximizar a compatibilidade entre os atuais e futuros agentes do usuário, incluindo os recursos de tecnologia assistiva Documentação WCGA

Slide 27

Slide 27 text

A seguir temos alguns exemplos de estruturas, atributos mais importantes e boas práticas.

Slide 28

Slide 28 text

A primeira dica é: os elementos e
são elementos que não possuem sentido semântico. Portanto, os leitores de tela não leem esses elementos. Para que sejam lidos, deve-se adicionar tabindex=”0”. Mas espere! Não é pra sair adicionando tabindex=”0” em todo lugar! Quando for criar um novo componente, atente-se ao uso correto das tags semânticas, são elas:

,

, … ,

Slide 29

Slide 29 text

Linguagem da página Título da página Formas de navegação Pontos de referência Contraste Foco Título Tabindex Atributos ARIA Roles A chave é uma semântica HTML bem escrita!

Slide 30

Slide 30 text

Boas práticas - HTML ● Verificar se todas os elementos foram abertos e fechadas corretamente; ● Se os elementos estão em suas hierarquias corretas de acordo com as especificações; ● se não há IDs duplicados; ● Use um linter.

Slide 31

Slide 31 text

Boas práticas - CSS ● Não utilize visibility:hidden! Os leitores de tela leem esses elementos da mesma forma, para escondê-los na página e para os leitores, utilize o display:none; ● Caso o elemento esteja visível no página, mas você entende que ele não deve ser lido pelo leitor de telas, utilize aria-hidden=’true’ no html do elemento; ● Evite utilizar o outline:none para o estado de foco dos elementos, essa propriedade é muito importante para as pessoas que utilizam o site através da navegação do teclado, dessa forma elas conseguem saber em que posição estão no site; ● Evite alterar a ordem dos elementos; ● Evite incluir conteúdo com CSS.

Slide 32

Slide 32 text

Boas práticas - Javascript ● Todo conteúdo inserido por script deve ser acessível; ● Os scripts não podem impedir a navegação por leitores de tela nem por teclado; ● Os scripts devem funcionar independente do tipo de dispositivo utilizado.

Slide 33

Slide 33 text

Axe Tools Um plugin interessante para utilizar na hora do desenvolvimento do seu site e que ajuda na validação das regras de acessibilidade é o Axe Tools, ele é uma extensão do chrome e além de fazer a varredura da página sugere quais alterações devem ser feitas, quando necessário. Link para adicionar a extensão

Slide 34

Slide 34 text

Lighthouse Esta ferramenta, tem por objetivo testar e devolver aos desenvolvedores recomendações para melhorias como, por exemplo, o desempenho, o SEO, a segurança, as práticas recomendadas e a acessibilidade de um site. Link para adicionar a extensão

Slide 35

Slide 35 text

Contrast Checker É uma ferramenta de verificação de contrastes de acordo com as diretrizes da WCAG nas versões 2.0 e 2.1, do World Wide Web Consortium (W3C). A ferramenta verifica o contraste nos níveis AA e AAA. Você pode inserir o código da cor ou o seletor de cores disponível no site. Link para Contrast Checker Link para WebAIM

Slide 36

Slide 36 text

Heading Maps Mostra a hierarquia de títulos da página, auxiliando na visualização do fluxo de navegação. Link para adicionar a extensão

Slide 37

Slide 37 text

Leitores de Tela Screen Reader NVDA Leitores de tela são softwares de tecnologia assistiva que fornecem informações através de síntese de voz sobre os elementos exibidos na tela. Jaws Dosvox VoiceOver TalkBack

Slide 38

Slide 38 text

Alguns links para aprofundar o assunto... ● https://web.dev/learn/accessibility/ ● https://asesweb.governoeletronico.gov.br/ ● https://www.devmedia.com.br/html-semantico-conheca-os -elementos-semanticos-da-html5/38065 ● https://mwpt.com.br/acessibilidade-digital/boas-praticas/ ● https://www.pedrodias.net/ux/dicas-de-acessibilidade-web ● http://www.acessibilidadelegal.com/ ● https://www.w3c.br/pub/Materiais/PublicacoesW3C/cartilh a-w3cbr-acessibilidade-web-fasciculo-I.html ● https://www.gov.br/governodigital/pt-br/acessibilidade-dig ital/Cartilhaversao1.0.pdf ● https://developer.mozilla.org/pt-BR/docs/Web/HTML

Slide 39

Slide 39 text

Estão preparados para criar sites mais acessíveis? Obrigada! Monica Craveiro de Menezes @mocraveirodev https://speakerdeck.com/mocraveirodev