Acessibilidade na Web #ParaTodosVerem

Você acha mesmo que a web está preparada para todos? Já parou para pensar como a internet impacta a vida das pessoas? Imagine um mundo digital onde todos podem navegar, consumir informações e interagir sem barreiras, uma página web mal escrita equivale a uma porta fechada, na qual pessoas que possuem algum tipo de deficiência não conseguem acessar. Como em torno de 25% da população brasileira possui algum tipo de deficiência, já passou da hora de começarmos a criar sites e plataformas acessíveis para todos, independentemente de suas habilidades ou limitações.

Palestra apresentada em 17/08/2024 no WordCamp Rio

Transcript

1. Acessibilidade na Web #ParaTodosVerem Monica Craveiro https://speakerdeck.com/mocraveirodev/
2. 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
3. Já pararam pra pensar como a acessibilidade é importante? Pense
4. VOCÊ VAI LER ISSO AQUI PRIMEIRO depois vai ler isso aqui. e depois isso aqui E só por último vai ler isso aqui.
5. Quão importante é o layout, o tamanho das fontes e suas cores para que a gente consiga ter um entendimento completo de algo?
6. 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.
7. 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?
8. AGENDA • Por que? • Quanto? • Onde? • Como?
9. Por que? Por que a gente tem que se preocupar com acessibilidade?
10. 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
12. 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.
13. Acessibilidade é para todos!
14. Quanto? Quanto custa a gente investir em acessibilidade?
15. Acessibilidade deve fazer parte da rotina! Conscientização Capacitação Documentação Ferramentas Execução
16. Onde? Onde encontro conteúdo e documentação sobre acessibilidade?
17. 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.
18. 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
19. https://www.w3.org/TR/WCAG21/
20. https://www.w3.org/TR/wai-aria/
21. 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
22. Como? Como faço para tornar esse conteúdo acessível?
23. 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.
24. 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.
25. 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
26. 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
27. 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
28. 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
29. 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
30. 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
31. • 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...
32. Obrigada! Monica Craveiro de Menezes @mocraveirodev Estão preparados para criar sites mais acessíveis?