Acessibilidade na Prática com WAI-ARIA

Uma introdução aos leitores de tela, Aria e uma abordagem simples e prática desse assunto.

Transcript

1. ACESSIBILIDADE NA PRÁTICA COM WAI-ARIA
2. OLÁ! Sou o Fillipe Hott Tecnólogo em Jogos Digitais e especialista em Desenvolvimento de Sistemas para Web pela PUC Minas. Sou front-end na Hotmart e você pode saber mais sobre mim me seguindo: @fhott 2
3. 3 Sério que você vai falar de acessibilidade?! É chato...
4. 4 Então… Eu sei e quem precisa sabe mais ainda!
5. 5 Caso Lara e caso Arthur
6. 6 Kyle Simpson e Eva Ferreira no BrazilJS
7. 7 Você mesmo!
8. Já usou um leitor de telas no seu site?
9. ▹ JAWS (Windows)* ▹ NVDA (Windows) ▹ Orca (Linux) ▹ VoiceOver (MacOS e iOS) ▹ ChromeVox (multiplataforma) * Produto pago Leitores de tela 9
10. Este trecho é familiar? 10
11. Este trecho é familiar? 11
12. Este trecho é familiar? 12 - Pouco controle - Estilos padrões - Muda de acordo com o browser - Controle total - Estilos personalizados - Novos estados (e.g. disabilitado)
13. Este trecho é familiar? 13 Leitor de telas fala: "Clique aqui"
15. A solução ARIA
16. ARIA - Accessible Rich Internet Applications (Aplicações Ricas de Internet Acessíveis) - Define como fazer conteúdo para Web e aplicações mais acessíveis para pessoas com deficiência. - Ajuda especialmente em conteúdos dinâmicos e interfaces de usuário avançadas, desenvolvidas com Ajax, HTML, JavaScript e outras tecnologias. 16
17. E agora? 17
18. E agora? 18
19. ▹ alert ▹ dialog ▹ presentation ▹ status ▹ tab ▹ [...] Outras "roles" 19
20. E agora? 20
21. E agora? 21
22. E agora? 22
23. E agora? 23
24. E agora? 24
25. 25 Um pouco de JavaScript
26. E até CSS! 26
27. Agora sim! Nosso checkbox fala: "Caixa de seleção, aceitar os termos de uso, selecionada" e conseguimos mudar seu estado com o teclado :) 27
28. Oportunidade
29. +6.5 milhões Pessoas com alguma deficiência visual no Brasil +35 milhões Incapazes de enxergar no mundo +500 mil São incapazes de enxergar (cegos) 29 * segundo o IBGE 2010 e a OMS
30. “ Acessibilidade = Paciência e Empatia 30
31. Créditos e referências ▹ O template desta apresentação se encontra no site SlidesCarnival ▹ Esta apresentação foi inspirada em Ceci n'est pas un bouton, de Eva Ferreira ▹ WAI-ARIA – Estendendo o significado das interações ▹ Sobre WAI-ARIA: acessibilidade e semântica ▹ Acessibilidade na HTML5 com WAI-ARIA Roles ▹ Introdução a ARIA ▹ Estatísticas da deficiência visual ▹ IBGE: 6,2% da população têm algum tipo de deficiência 31
32. Créditos e referências ▹ Getting started with VoiceOver & Accessibility ▹ Acessibilidade: como funcionam os leitores de tela ▹ Melhorando a acessibilidade de aplicações Web com ARIA ▹ Single-page application vs. multiple-page application ▹ WAI-ARIA, una aproximación ▹ Acessibilidade da Apple: Manual de Introdução ao VoiceOver ▹ Um apanhado geral sobre o WAI-ARIA 32
33. Obrigado! Perguntas? Você pode me procurar também em: @fhott fillipehottm@gmail.com 33