W3C Acessibilidade

6.172 visualizações

Publicada em

tutorial "metodologia para avaliação de acessibilidade em sites", com leda spelta e horácio soares - 1a conferência web w3c brasil

Publicada em: Design, Tecnologia
  • Seja o primeiro a comentar

W3C Acessibilidade

  1. 1. Metodologia para Avaliação de Acessibilidade em Sites 1ª Conferência Web W3C Brasil Lêda Lucia Spelta e Horácio Soares Novembro 2009
  2. 2. Acessibilidade?
  3. 3. “ Acessibilidade na web é tornar todos os serviços, assuntos e publicações tão fáceis de serem utilizados por todas as pessoas, que até esqueceremos que há diferenças.”   (Carla Nascimento – frase vencedora do concurso “Jornadas de Conhecimento - Acessibilidade na Web”)
  4. 4. Acessibilidade + Web Standards + Usabilidade Acessibilidade de Verdade! + +
  5. 5. Acessi bilidade para quem?
  6. 6. Juca, sem visão.
  7. 7. Mandy, sem visão e braços.
  8. 8. Lucas, com baixa visão utilizando o software ampliador de tela.
  9. 9. Para nosso ex. aluno Isaias, ele é designer e descobriu no início de 2009 que é daltônico. Isaias à esquerda, conduzindo o Januário para um chopinho após curso de acessibilidade Web.
  10. 10. Ok! Acessibilidade então é para pessoas com deficiência visual, certo?
  11. 11. Errado! Errado! Errado!
  12. 12. João Henriques deficiente motor utiliza o mouse com dificuldade. ( www.euroacessibilidade.com )
  13. 13. Eric interagindo através de teclado expandido Funlar – Rio (nov/2006).
  14. 14. João, tetraplégico João (foto de Maíra Soares )
  15. 15. Deficientes auditivos não oralizados têm dificuldades com o português. Apreendem primeiro a língua de sinais. Chapeuzinho Vermelho em português e na língua de sinais (prof. Goulão)
  16. 16. Então acessibilidade é somente para pessoas com deficiências, certo?
  17. 17. Casal João e Ana, eles têm pouca experiência, baixa visão e dificuldades motoras.
  18. 18. Pedro e Laura com dispositivos móveis com acesso a Internet. Pedro olhando para seu smartphone e Laura com uma cara desesperada para seu celular.
  19. 19. Gabriel, linguagem em desenvolvimento... Gabriel compenetrado, olhando para o monitor e clicando com o mouse. Agora ele está olhando e brincando com o teclado.
  20. 20. Calvin, pouca experiência e medo do computador Homem com muito medo olhando por cima de um notebook.
  21. 21. Max, com tendinite, usando o mouse com a mão trocada. Homem com expressão de desespero, usando o mouse com a mão esquerda
  22. 22. E todos nós, primeira experiência. Um criança em frente a um notebook
  23. 23. E finalmente, o bilionário cego!!! Cifrão desenhado com moedas douradas
  24. 24. Google, o bilionário cego!!! É apenas um robô que só indexa conteúdo em texto. Dilbert fazendo parte do logotipo do Google e falando “eu não posso ver”.
  25. 25. Acessibilidade, quais são os custos?
  26. 26. <ul><li>Curva de aprendizagem </li></ul><ul><li>Alto custo no redesign </li></ul><ul><li>Baixo em novos projetos </li></ul><ul><li>Diminui com tempo </li></ul><ul><li>Validação e manutenção </li></ul><ul><li>Melhoria contínua </li></ul><ul><li>Mudança de cultura </li></ul>
  27. 27. E os benefícios? Gráfico de barras em crescimento da esquerda para direita.
  28. 28. Possibilidade de atingir 100% do público alvo; Homem com arma mirando um possível alvo
  29. 29. Atender melhor todas as pessoas
  30. 30. Mas normalmente o tratamento que recebemos é... Avião cheio com passageiro exprimido e impossibilitado fazer seu lanche.
  31. 31. Quando podemos ser surpreendidos Design universal: uma solução para todos Bebedor acessível para todas pessoas, altas, baixas, em cadeiras, etc.
  32. 32. Homem de terno comemorando Fidelizar clientes
  33. 33. Dardo Atender com qualidade novos clientes que surgem com a inclusão digital e o sistema de cotas.
  34. 34. Mais fácil de usar e aprender Casal decepcionado ao utilizar as orientações do fabricante e não conseguir montar uma estante.
  35. 35. Uma mão com laço no dedo indicador Conformidade com o decreto de lei 5296 (dez/04) e com a convenção da ONU que ganhou força de lei (ago/08) ;
  36. 36. Uma senhora acessando um computador. Crescimento do consumidor acima dos 65 anos...
  37. 37. Visualizar os benefícios da acessibilidade Manutenção mais rápida e barata, com melhor performance e diminuição dos custos com banda;
  38. 38. <ul><li>Valorização da </li></ul><ul><li>Diversidade e </li></ul><ul><li>Responsabilidade </li></ul><ul><li>Social; </li></ul>Mãos entrelaçadas
  39. 39. Proteção contra processos pela falta da acessibilidade; Mão com sinal de ok.
  40. 40. Maior visibilidade pelos sistemas de busca; Um grande e bonito olho azul.
  41. 41. Mulher com notebook em sinal de ok Diferencial competitivo Cachorrinho caregando um enorme osso.
  42. 42. <ul><li>Diferencial </li></ul><ul><li>competitivo e </li></ul><ul><li>melhoria da </li></ul><ul><li>qualidade. </li></ul>Mãe e filha felizes na praia dando uma estrela
  43. 43. Navegação as escuras
  44. 44. Validação de Acessibilidade Globo em ambiente futurista.
  45. 45. Validação de Acessibilidade Validações automáticas e semi-automáticas de páginas web
  46. 46. Validação de Acessibilidade Web Standards
  47. 47. Validador W3C – HTML/XHTML http://validator.w3.org/
  48. 48. Validador W3C – CSS http://jigsaw.w3.org/css-validator/
  49. 49. <ul><li>Ferramentas </li></ul><ul><ul><li>Firefox - HTML Validator </li></ul></ul><ul><ul><li>https://addons.mozilla.org/pt-BR/firefox/addon/249 </li></ul></ul>
  50. 50. Validação de Acessibilidade <ul><li>Validação automática e semi-automática de acessibilidade. </li></ul>
  51. 51. Validação de Acessibilidade <ul><li>Validadores automáticas, quem tem um, não tem nenhum... </li></ul>
  52. 52. HERA http://www.sidar.org/hera/index.php.pt
  53. 53. EXAMINATOR http://www.acesso.umic.pt/webax/examinator.php
  54. 54. Da Silva http://www.dasilva.org.br/
  55. 55. Total Validator http://www.totalvalidator.com WCAG 2.0 e WCAG 1.0
  56. 56. Web Xact (Bobby) http://webxact.watchfire.com/ Validador de acessibilidade que foi comprado pela IBM e não está mais disponível na Web.
  57. 57. Truwex Online 2.0 http://checkwebsite.erigami.com/accessibility.html
  58. 58. Functional Accessibility Evaluator 1.0 http://fae.cita.uiuc.edu/
  59. 59. WAVE is a free web accessibility &quot;evaluation tool p rovided by WebAIM . http://wave.webaim.org/
  60. 60. TAW WCAG 1.0, WCAG 2.0 (BETA) http://www.tawdis.net/
  61. 61. Functional Accessibility Evaluator 1.0 http://fae.cita.uiuc.edu/ Achecker (WCAG 2.0) http://achecker.ca/checker/index.php
  62. 62. Lista de validadores indicados pelo WAI: http://www.w3.org/WAI/ER/tools/complete
  63. 63. Validação de Acessibilidade <ul><li>Avaliação de contraste. </li></ul>
  64. 64. Color and accessibility http://www.merttol.com/articles/web/color-and-accessibility.html
  65. 65. Teste de contraste http://www.snook.ca/technical/colour_contrast/colour.html
  66. 66. Teste de contraste http://juicystudio.com/services/luminositycontrastratio.php
  67. 67. Teste de contraste http://www.stainlessvision.com/projects/colour-contrast-visualiser
  68. 68. Teste de contraste http://www.vischeck.com/vischeck/ (teste de imagens e sites)
  69. 69. Teste de contraste Firefox - a nalisador de Contraste de Cores
  70. 70. Validação de Acessibilidade <ul><li>Avaliação do tempo de download das páginas. </li></ul>
  71. 71. WebSiteOptimization - tempo http:// WebSiteOptimization.com / http://webwait.com
  72. 72. Validação de Acessibilidade <ul><li>Teste de links quebrados e página de erro. </li></ul>
  73. 73. W3C - Link checker http://validator.w3.org/checklink
  74. 74. Validação de Acessibilidade <ul><li>Avaliação humana por especialistas. </li></ul>
  75. 75. Validação de Acessibilidade <ul><li>Avaliação humana por especialistas: </li></ul><ul><li>Aplicação de lista de verificação do WCAG por especialista. </li></ul>
  76. 76. Validação de Acessibilidade Checklist W3C WCAG 1.0 (link)
  77. 77. Validação de Acessibilidade WCAG 2.0 Appendix B: Checklist (Non-Normative) Web Content Accessibility Guidelines 2.0 Checklist http://www.w3.org/TR/2006/WD-WCAG20-20060427/appendixB.html
  78. 78. Validação de Acessibilidade <ul><li>Avaliação humana por especialistas em acessibilidade simulando o acesso por pessoas com deficiência. </li></ul>
  79. 79. Validação de Acessibilidade <ul><li>Sem mouse – navegar pelo site em análise utilizando apenas o teclado e monitor, com mouse desligado.. </li></ul>
  80. 80. Validação de Acessibilidade <ul><li>Sem mouse e com software leitor de telas - navegar pelo site com o teclado, um software leitor de telas e com monitor. </li></ul>
  81. 81. Validação de Acessibilidade <ul><li>Sem mouse e sem monitor - navegar pelo seu site utilizando apenas o teclado com orientação do leitor de telas. </li></ul>
  82. 82. Validação de Acessibilidade <ul><li>Testes de acesso em diferentes plataformas e navegadores. </li></ul>
  83. 83. Lynx Viewer http://www.yellowpipe.com/yis/tools/lynx/lynx_viewer.php
  84. 84. Lynx Viewer Testando o site da AcessoDigital.net
  85. 85. Diferentes Navegadores http://browsershots.org
  86. 86. Diferentes Navegadores http://browsershots.org
  87. 87. Diferentes Navegadores http://browsershots.org
  88. 88. Validação de Acessibilidade <ul><li>Testes de acesso com diferentes configurações. </li></ul>
  89. 89. Desabilitar estilos (CSS)
  90. 90. Desabilitar imagens
  91. 91. Desabilitar Scripts
  92. 92. Validação de Acessibilidade <ul><li>Testes de impressão e com dispositivos móveis </li></ul>
  93. 93. Validação de Acessibilidade <ul><li>Canal para reportar problemas de acessibilidade. </li></ul><ul><li>Melhoria contínua da acessibilidade </li></ul>@
  94. 94. Firefox Firefox 3.0.7 http://br.mozdev.org/firefox/download.html Complementos para o Firefox (são instalados a partir de seus respectivos links) : Firebug: https://addons.mozilla.org/pt-BR/firefox/addon/1843 HTML Validator https://addons.mozilla.org/pt-BR/firefox/addon/249 Web Developer https://addons.mozilla.org/pt-BR/firefox/addon/60 Check My Colors! 1.0 https://addons.mozilla.org/pt-BR/firefox/addon/8819 Firefox Accessibility Extension 1.4.5.0 https://addons.mozilla.org/pt-BR/firefox/addon/5809
  95. 95. Firefox Complementos para o Firefox (são instalados a partir de seus respectivos links) : TAW3 with a click 0.9.6 https://addons.mozilla.org/pt-BR/firefox/addon/1158 Juicy Studio Accessibility Toolbar 1.45 https://addons.mozilla.org/pt-BR/firefox/addon/9108 Obtrusive JavaScript Checker 0.81 https://addons.mozilla.org/en-US/firefox/addon/9505
  96. 96. Obrigado! Lêda Lucia Spelta [email_address] Horácio Soares [email_address] Uma mão segurando um cartão de visita da acesso digital.

×