Slide 1

Slide 1 text

Acessibilidade na Web #ParaTodosVerem Monica Craveiro https://speakerdeck.com/mocraveirodev/

Slide 2

Slide 2 text

Monica Craveiro ● CARIOCA morando em SP há 12 anos ● Desenvolvedora Back-end ● Bacharel em Sistemas de Informação e Matemática ● Ex-aluna do [des]programe, {reprograma} e DigitalHouse> ● Professora de Programação na {reprograma} ● 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 Progra{m}aria ● Host do Canal do da NodeBR do YouTube ● Criadora de Conteúdo para as Redes Sociais

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

AGENDA ● Por que? ● Quanto? ● Onde? ● Como?

Slide 9

Slide 9 text

Por que? Por que a gente tem que se preocupar com acessibilidade?

Slide 10

Slide 10 text

Em torno de 16% da população mundial vivem com algum tipo de deficiência. Fonte: Fio Cruz Pelo menos 45 milhões de pessoas têm algum tipo de deficiência no Brasil. Fonte: TRE-PR

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

Acessibilidade é para todos!

Slide 14

Slide 14 text

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

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: O princípio POUR (acrônimo em inglês para Perceptível, Operável, Compreensível e Robusto) é o que orienta a construção de sites acessíveis.

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

Documentações 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

Slide 22

Slide 22 text

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

A chave é uma semântica HTML bem escrita! 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

Slide 26

Slide 26 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 27

Slide 27 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 28

Slide 28 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 29

Slide 29 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 30

Slide 30 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 31

Slide 31 text

● 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/cartilha-w3cbr-acessibilidade-we b-fasciculo-I.html ● https://www.gov.br/governodigital/pt-br/acessibilidade-digital/Cartilhaversao1.0.pdf ● https://developer.mozilla.org/pt-BR/docs/Web/HTML Alguns links para aprofundar o assunto...

Slide 32

Slide 32 text

Obrigada! Monica Craveiro de Menezes @mocraveirodev Estão preparados para criar sites mais acessíveis?