Slides

Acessibilidade Web - Codificando empatia

Description
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
Categories
Published
of 60
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Share
Transcript
  • 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!
  • We Need Your Support
    Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

    Thanks to everyone for your continued support.

    No, Thanks
    SAVE OUR EARTH

    We need your sign to support Project to invent "SMART AND CONTROLLABLE REFLECTIVE BALLOONS" to cover the Sun and Save Our Earth.

    More details...

    Sign Now!

    We are very appreciated for your Prompt Action!

    x