Apresentação com parte teórica, onde explico os conceitos e fundamentos de acessibilidade e usabilidade na internet, e parte técnica, que demonstro situações e preucupações necessária na hora de programar, além de indicaer ferramentas para verificar as páginas criadas. CEFET/RJ - Nova Friburgo - Turma de IHC 2018.1 - 26/04/2018 Evento: OpenLabs 2017 - IV Conferência de Tecnologia da Região Serrana - 18/11/2017

1. Acessibilidade Web:
Codificando empatia
Autor: Wender Pinto Machado
Contato: wenderpmachado@gmail.com

2. ● Acessibilidade
○ Lei Brasileira de Inclusão da Pessoa com Deficiência,
sancionada em 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 [...] "
Introdução

3. ● Pessoas com deficiência:
○ Temporaria
○ Permanente
● Pessoas com baixo desempenho cognitivo
○ Terceira idade
○ Crianças
Acessibilidade para quem?
6,2% possuem
algum tipo de eficiência
=
+12Milhões
Fonte: IBGE senso 2015

4. Fluxo do Acesso
Acesso

5. Fluxo do Acesso
Acesso Navegação

6. Fluxo do Acesso
Acesso Navegação

7. Fluxo do Acesso
● VoiceOver
● TalkBack
● Jaws
● . . .
Acesso Navegação
Descrição sonora

8. 1. Lendo toda a página
Navegação pelo teclado / touch
Fonte: brasil.uxdesign.cc

9. 2. Lendo os links
Navegação pelo teclado / touch
Fonte: brasil.uxdesign.cc

10. Navegação pelo teclado / touch
3. Lendo os cabeçalhos
Fonte: brasil.uxdesign.cc

11. ● Diretrizes:
○ Wcag 1.0 / Wcag 2.0 - W3C
■ Recomendações de Acessibilidade para Conteúdo Web
○ e-MAG - Governo Federal
■ Modelo de Acessibilidade em Governo Eletrônico
Acessibilidade da Internet

12. Princípios WCag
● Perceptível
● Operável
● Compreensível
● Robusto
Fonte: http://www.d.umn.edu

13. Site: http://www.dasilva.org.br
Ferramenta disponível:

14. No desenvolvimento, considerar...
● Semântica
● Foco
● Estilo
● Aria
Fonte: CodinGeek
Edição: Wender Pinto Machado

15. No desenvolvimento, considerar...
● Semântica
● Foco
● Estilo
● Aria
Fonte: CodinGeek
Edição: Wender Pinto Machado

16. Semântica: Tags HTML5
Fonte: HTML Goodies

17. Semântica: Label

18. Semântica: Texto alternativo (alt)

19. Semântica: formulário
● Temos:
○ Role
○ Name/Label
○ Value
○ State
Fonte: Google Developers

20. Semântica: Árvore de Acessibilidade
Fonte: Google Developers

21. Ferramenta: ChromeVox (Google Chrome)

22. No desenvolvimento, considerar... (cont)
● Semântica
● Foco
● Estilo
● Aria
Fonte: CodinGeek
Edição: Wender Pinto Machado

23. Foco: Exemplo 1

24. Foco: Exemplo 1 (cont)

25. Foco: Exemplo 1 (cont)

26. Foco: Exemplo 1 (cont)

27. Foco: Exemplo 1 - Resolução

28. Foco: Exemplo 2

29. Foco: Exemplo 2 (cont)
#dicaDePesquisa
● Keyboard TRAP
● Offscreen content

30. Foco: Exemplo 3

31. Foco: Exemplo 3 (cont)

32. Foco: Exemplo 3 (cont)

33. Foco: Exemplo 3 (cont)

34. No desenvolvimento, considerar... (cont)
● Semântica
● Foco
● Estilo
● Aria
Fonte: CodinGeekFonte: CodinGeek
Edição: Wender Pinto Machado

35. Estilo: Exemplo

36. No desenvolvimento, considerar... (cont)
● Semântica
● Foco
● Estilo
● Aria
Fonte: CodinGeekFonte: CodinGeek
Edição: Wender Pinto Machado

37. (wai) Aria
Web
Accessibility
Initiative
Accessible
Rich
Internet
Applications

38. Aria
Fonte: Google Developers
Accessible
Rich
Internet
Applications

39. Aria: Exemplo 1

40. Aria: Exemplo 2

41. Aria: Exemplo 3

42. Aria: Exemplo 4

43. Aria: Plugin AxE (Google Chrome)

44. Automatizando...

45. Bonus ³

46. Aria: documentação
https://www.w3.org/TR/wai-aria

47. No desenvolvimento, considerar... (cont)
● Semântica
● Foco
● Estilo
● Aria
Fonte: CodinGeekFonte: CodinGeek
Edição: Wender Pinto Machado

48. No desenvolvimento, considerar... (FIM?)
● Semântica
● Foco
● Estilo
● Aria
Fonte: CodinGeek
Edição: Wender Pinto Machado

49. E as pessoas com baixo desempenho cognitivo ?

50. Acessibilidade + Usabilidade = ❤
10 Heurísticas de Nielsen
1. Visibilidade do status do sistema 2. Controle de usuários e liberdade
3. Correspondência entre sistema e mundo real

51. Acessibilidade + Usabilidade = ❤
10 Heurísticas de Nielsen
6. Prevenção de erros
5. Design estético e minimalista4. Consistência e padrões

52. Acessibilidade + Usabilidade = ❤
10 Heurísticas de Nielsen
7. Flexibilidade e eficiência de uso 8. Ajude os usuários a reconhecer,
diagnosticar e recuperar erros
9. Reconhecimento ao invés de recordar 10. Ajuda e documentação

53. ferramenta: Lighthouse (Audits do Google Chrome)

54. Automatizando...

55. ● Existem padrões, documentações e ferramentas para auxiliar os
desenvolvedores
● 12 Milhões NÃO são opcionais
● Todos possuem chances de adquirir alguma deficiência
● É Lei
○ Lei Brasileira de Inclusão (LBI – Lei 13.146/15)
Conclusão

56. Bonus ¹

57. Bonus ²

58. Bibliografia
● Udacity: Web Acessibility - https://br.udacity.com/course/web-accessibility--ud891
● Wcag - https://www.w3.org/TR/WCAG20-TECHS/
● e-MAG - http://emag.governoeletronico.gov.br/
● Ícones - https://www.flaticon.com/
○ Feepik
○ Gregor Cresnar
○ Scott de Jonge
● Heurísticas Nielsen - http://blog.caelum.com.br/
● WebAIM - https://webaim.org/
○ Wave - http://wave.webaim.org

59. Bibliografia
● Dados IBGE -
http://www.ebc.com.br/noticias/2015/08/ibge-62-da-populacao-tem-algum-tipo-
de-deficiencia
● Total brasileiros 2015 -
http://g1.globo.com/economia/noticia/2015/08/brasil-tem-204-milhoes-de-habita
ntes-segundo-o-ibge.html

60. Fim
wenderpmachado@gmail.com
https://github.com/wenderpmachado
https://linkedin.com/in/wenderpmachado
OBRIGADO!