Acessibilidade Web: Primeiros passos

814 visualizações

Publicada em

Primeiros passos para conhecer e como fazer acessibilidade (o básico).
Apresentação feita para os alunos do IFRS de Bento Gonçalves, 15 de junho.

Publicada em: Tecnologia
1 comentário
10 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
814
No SlideShare
0
A partir de incorporações
0
Número de incorporações
7
Ações
Compartilhamentos
0
Downloads
13
Comentários
1
Gostaram
10
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Acessibilidade Web: Primeiros passos

  1. 1. VANESSA ME TONINI Acessibilidade para Web Primeiros Passos
  2. 2. SOBRE MIM... •Desenvolvedora front-end desde 2007 •Tecnóloga em Sistemas para Internet. UNIVALI/2011 •Especialista em desenvolvimento Web. UTFPR/2014 •MBA em Engenharia de Software orientada a SOA. FIAP •Certified Magento Front End Developer •Membro e organizadora do MariaLab Hackerspace •Consultora Agile Coach
  3. 3. Consórcio fundado em 1994 pelo criador da web, Sir Tim Berners-Lee.
  4. 4. Formado por organizações filiadas, uma equipe em tempo integral e o público. Qualquer um pode participar da criação dos padrões para a Web.
  5. 5. Publicou mais de 100 padrões para web HTML XML CSS XHTML
  6. 6. ACESSIBILIDADE WEB O que é?
  7. 7. Por que? 45.623.910 24% Pessoas com deficiência no Brasil Censo 2010 - IBGE
  8. 8. Por que? 35.791.488 Pessoas com deficiência visual no Brasil Censo 2010 - IBGE
  9. 9. Pessoas com deficiência visual no Brasil Não consegue enxergar 528.624 Grande dificuldade 6.056.684 Alguma dificuldade 29.206.180 Censo 2010 - IBGE
  10. 10. QUEM SE BENEFICIA COM ISTO?
  11. 11. QUEM SE BENEFICIA COM ISTO?
  12. 12. https://www.youtube.com/watch?v=hFI4CuxQjSA VÍDEO ACESSIBILIDADE NA WEB: CUSTO OU BENEFÍCIO?
  13. 13. COMO COMEÇAR A FAZER ACESSIBILIDADE WEB?!
  14. 14. CONHEÇA OS PADRÕES DE ACESSIBILIDADE W3C Web Content Accessibility Guidelines (WCAG) 2.0 Diretrizes de Acessibilidade para Conteúdo Web http://www.w3.org/Translations/WCAG20-pt-br/ Accessible Rich Internet Applications Suite (WAI-ARIA) Suíte de recomendações para aplicações rica de internet http://www.w3.org/TR/wai-aria/
  15. 15. VALIDE SEU CÓDIGO http://validator.w3.org/
  16. 16. VALIDE SEU CÓDIGO http://jigsaw.w3.org/css-validator/
  17. 17. VALIDE A ACESSIBILIDADE http://wave.webaim.org/
  18. 18. VALIDE A ACESSIBILIDADE http://www.acessibilidade.gov.pt/accessmonitor/ Access Monitor
  19. 19. VALIDE A ACESSIBILIDADE http://www.tawdis.net/
  20. 20. VALIDE A ACESSIBILIDADE http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG/ases-avaliador-e- simulador-de-acessibilidade-sitios
  21. 21. VALIDAÇÃO MANUAL: LEITORES DE TELA NVDA Open Source, desenvolvido por programadores deficientes visuais http://www.nvaccess.org/
  22. 22. VALIDAÇÃO MANUAL: LEITORES DE TELA JAWS Software proprietário, com versão para testes http://www.freedomscientific.com/Products/Blindness/JAWS
  23. 23. VALIDAÇÃO MANUAL: LEITORES DE TELA DOSVOX Open Source, e brasileiro http://intervox.nce.ufrj.br/dosvox/
  24. 24. VALIDAÇÃO MANUAL: LEITORES DE TELA Voice Over https://www.apple.com/br/accessibility/osx/voiceover/
  25. 25. VALIDAÇÃO MANUAL: LEITORES DE TELA Orca https://git.gnome.org/browse/orca https://en.wikipedia.org/wiki/Orca_(assistive_technology)
  26. 26. IDIOMA DO CONTEÚDO atributo lang <!DOCTYPE html> <html lang="pt-BR" > .... é um atributo global, pode ser utilizado em todas as tags
  27. 27. VIDEOS COM LEGENDA the web video text track formats WebVTT http://dev.w3.org/html5/webvtt/
  28. 28. FONTES tamanho adequado? contraste adequado? legível?
  29. 29. NAVEGAÇÃO: POR ARIA LANDMARKS atributo role
  30. 30. NAVEGAÇÃO: POR HTML HEADERS <h1> <h2> <h3>
  31. 31. NAVEGAÇÃO: DESABILITE O CSS E AS IMAGENS Já testou a navegação por teclado?
  32. 32. Já testou seu site com monitor desligado?
  33. 33. FORMULÁRIOS: LABELS E ARIA- REQUIRED
  34. 34. FORMULÁRIOS: IDENTIFICAR CAMPOS OBRIGATÓRIOS *
  35. 35. FORMULÁRIOS: IDENTIFICAR CAMPOS OBRIGATÓRIOS a cor vermelha pode ser imperceptível para daltônicos
  36. 36. MENSAGENS DE FEEDBACK aria-live :focus
  37. 37. CORES E CONTRASTES utilizar símbolos junto a cores
  38. 38. MENUS “INVISÍVEIS” https://adobe-accessibility.github.io/Accessible-Mega-Menu/ Exemplo Open Source da Adobe de como fazer um Menu com submenu e imagens acessíveis
  39. 39. ARIA • Promove acesibilidade em aplicações com conteúdo dinâmico e controles avançados do usuário, no qual demandam AJAX, HTML e Javascript Confira os meus slides de uma palestra sobre WAI-ARIA em: goo.gl/IzrxV6
  40. 40. • A realização da acessibilidade não depende só de mudanças estruturais mas principalmente de uma mudança cultural. •
  41. 41. A diferença não deve ser vista nunca como um problema. • As pessoas diferentes são uma contribuição pra sociedade. •
  42. 42. • Qualquer pessoal em algum momento da vida vai precisar de acessibilidade. • Por isso tornar o mundo acessível é um compromisso de todos. •
  43. 43. Muito Obrigada!
  44. 44. @vanessametonini

×