Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Acessibilidade Web - Codificando empatia

1,043 views

Published on

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

Published in: Internet
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Acessibilidade Web - Codificando empatia

  1. 1. Acessibilidade Web: Codificando empatia Autor: Wender Pinto Machado Contato: wenderpmachado@gmail.com
  2. 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. 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. 4. Fluxo do Acesso Acesso
  5. 5. Fluxo do Acesso Acesso Navegação
  6. 6. Fluxo do Acesso Acesso Navegação
  7. 7. Fluxo do Acesso ● VoiceOver ● TalkBack ● Jaws ● . . . Acesso Navegação Descrição sonora
  8. 8. 1. Lendo toda a página Navegação pelo teclado / touch Fonte: brasil.uxdesign.cc
  9. 9. 2. Lendo os links Navegação pelo teclado / touch Fonte: brasil.uxdesign.cc
  10. 10. Navegação pelo teclado / touch 3. Lendo os cabeçalhos Fonte: brasil.uxdesign.cc
  11. 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. 12. Princípios WCag ● Perceptível ● Operável ● Compreensível ● Robusto Fonte: http://www.d.umn.edu
  13. 13. Site: http://www.dasilva.org.br Ferramenta disponível:
  14. 14. No desenvolvimento, considerar... ● Semântica ● Foco ● Estilo ● Aria Fonte: CodinGeek Edição: Wender Pinto Machado
  15. 15. No desenvolvimento, considerar... ● Semântica ● Foco ● Estilo ● Aria Fonte: CodinGeek Edição: Wender Pinto Machado
  16. 16. Semântica: Tags HTML5 Fonte: HTML Goodies
  17. 17. Semântica: Label
  18. 18. Semântica: Texto alternativo (alt)
  19. 19. Semântica: formulário ● Temos: ○ Role ○ Name/Label ○ Value ○ State Fonte: Google Developers
  20. 20. Semântica: Árvore de Acessibilidade Fonte: Google Developers
  21. 21. Ferramenta: ChromeVox (Google Chrome)
  22. 22. No desenvolvimento, considerar... (cont) ● Semântica ● Foco ● Estilo ● Aria Fonte: CodinGeek Edição: Wender Pinto Machado
  23. 23. Foco: Exemplo 1
  24. 24. Foco: Exemplo 1 (cont)
  25. 25. Foco: Exemplo 1 (cont)
  26. 26. Foco: Exemplo 1 (cont)
  27. 27. Foco: Exemplo 1 - Resolução
  28. 28. Foco: Exemplo 2
  29. 29. Foco: Exemplo 2 (cont) #dicaDePesquisa ● Keyboard TRAP ● Offscreen content
  30. 30. Foco: Exemplo 3
  31. 31. Foco: Exemplo 3 (cont)
  32. 32. Foco: Exemplo 3 (cont)
  33. 33. Foco: Exemplo 3 (cont)
  34. 34. No desenvolvimento, considerar... (cont) ● Semântica ● Foco ● Estilo ● Aria Fonte: CodinGeekFonte: CodinGeek Edição: Wender Pinto Machado
  35. 35. Estilo: Exemplo
  36. 36. No desenvolvimento, considerar... (cont) ● Semântica ● Foco ● Estilo ● Aria Fonte: CodinGeekFonte: CodinGeek Edição: Wender Pinto Machado
  37. 37. (wai) Aria Web Accessibility Initiative Accessible Rich Internet Applications
  38. 38. Aria Fonte: Google Developers Accessible Rich Internet Applications
  39. 39. Aria: Exemplo 1
  40. 40. Aria: Exemplo 2
  41. 41. Aria: Exemplo 3
  42. 42. Aria: Exemplo 4
  43. 43. Aria: Plugin AxE (Google Chrome)
  44. 44. Automatizando...
  45. 45. Bonus ³
  46. 46. Aria: documentação https://www.w3.org/TR/wai-aria
  47. 47. No desenvolvimento, considerar... (cont) ● Semântica ● Foco ● Estilo ● Aria Fonte: CodinGeekFonte: CodinGeek Edição: Wender Pinto Machado
  48. 48. No desenvolvimento, considerar... (FIM?) ● Semântica ● Foco ● Estilo ● Aria Fonte: CodinGeek Edição: Wender Pinto Machado
  49. 49. E as pessoas com baixo desempenho cognitivo ?
  50. 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. 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. 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. 53. ferramenta: Lighthouse (Audits do Google Chrome)
  54. 54. Automatizando...
  55. 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. 56. Bonus ¹
  57. 57. Bonus ²
  58. 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. 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. 60. Fim wenderpmachado@gmail.com https://github.com/wenderpmachado https://linkedin.com/in/wenderpmachado OBRIGADO!

×