Acessibilidade na Web - CPBR Recife 2012

620 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
620
On SlideShare
0
From Embeds
0
Number of Embeds
349
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Acessibilidade na Web - CPBR Recife 2012

  1. 1. Acessibilidade na web Painel Aplicativos de Acessibilidade Campus Party Recife 28 de julho de 2012 Reinaldo Ferraz – W3C.br twitter.com/reinaldoferraz
  2. 2. Um pouco do W3C É um consórcio internacional, criado em 1994 por Tim Berners- Lee com • organizações filiadas, • uma equipe em tempo integral, • participação do público para colaborativamente desenvolver padrões universais para a Web.
  3. 3. Acessibilidade, para quem?
  4. 4. Cegos – Daltônicos - Baixa visão Foto: everystockphoto.com - namida-k
  5. 5. Surdos Foto: everystockphoto.com - jessicafm
  6. 6. Mobilidade reduzida
  7. 7. Estatísticas 24% 45.623.910 pessoas Censo 2010 Fonte: IBGE Pessoas com deficiência no Brasil Fonte: http://www.ibge.gov.br/home/estatistica/populacao/censo2010/resultados_preliminares/default_resultados_preliminares.shtm
  8. 8. Acessibilidade na web Pessoas são diferentes
  9. 9. http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
  10. 10. http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
  11. 11. http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
  12. 12. http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
  13. 13. Aplicando acessibilidade O caminho para a acessibilidade na web Foto: everystockphoto.com - Colin Gregory Palmer
  14. 14. Aplicando acessibilidade Web Content Accessibility Guidelines (WCAG) Versão 1.0 – 5 de maio de 1999 Versão 2.0 – 11 de dezembro de 2008 www.w3.org/TR/WCAG/
  15. 15. Princípio 1: Perceptível Isto significa que os usuários devem ser capazes de perceber a informação que está sendo apresentada, não podendo ser invisível para todos os seus sentidos.
  16. 16. Aplicando acessibilidade <img src="foto.jpg" alt="" /> <img src="foto.jpg" alt="" />
  17. 17. Aplicando acessibilidade <img src="foto.jpg" alt=“Foto das teclas W, 3 e C fora do teclado" /> <img src="foto.jpg" alt=“Foto das teclas W, 3 e C fora do teclado" />
  18. 18. Daltonismo Visão normal
  19. 19. Daltonismo Protanopia (Deficiências em vermelho)
  20. 20. Daltonismo Deuteranopia (Deficiências em verde)
  21. 21. Daltonismo Tritanopia (Deficiências em azul)
  22. 22. Daltonismo Acromatopsia (Deficiências todas as cores)
  23. 23. Daltonismo
  24. 24. Você consegue ler este texto.
  25. 25. Você consegue ler este texto?
  26. 26. Você não consegue ler este texto!
  27. 27. Princípio 2: Operável Isto significa que os usuários devem ser capazes de operar a interface; a interface de interação não pode exigir interação que o usuário não possa executar.
  28. 28. • Não utilize conteúdo que cause convulsões.
  29. 29. • Não utilize conteúdo que cause convulsões.
  30. 30. Princípio 3: Compreensível Isto significa que os usuários devem ser capazes de compreender as informações, bem como o funcionamento da interface do usuário; o conteúdo ou operação não pode ir além de sua compreensão.
  31. 31. • Ajude os usuários a evitar e corrigir erros.
  32. 32. Princípio 4: Robusto Isto significa que os usuários devem ser capazes de acessar o conteúdo conforme as tecnologias evoluem; como a tecnologia e os agentes de usuário evoluem, o conteúdo deve permanecer acessível.
  33. 33. • Maximize a compatibilidade com as tecnologias atuais e futuras.
  34. 34. • Maximize a compatibilidade com as tecnologias atuais e futuras. http://validator.w3.org/ http://www.w3.org/TR/
  35. 35. Phone <input type=“tel" name=“tel" placeholder="digite número de telefone" required /> Website <input type="url" name="website" required />
  36. 36. Vídeo em HTML5 <video> http://www.w3.org/2009/02/ThisIsCoffee.html
  37. 37. Vídeo em HTML5
  38. 38. Vídeo em HTML5
  39. 39. ARIA e HTML5 <a href="#“ id="handle_zoomSlider“ role="slider“ aria-orientation="vertical“ aria-valuemin="0“ aria-valuemax="17“ aria-valuetext="14“ aria-valuenow="14" > <span>11</span> </a> http://www.w3.org/WAI/intro/aria
  40. 40. http://premio.w3c.br/
  41. 41. Categorias • Pessoas / Personalidades / Instituições • Projetos Web – Governo / Instituições – Serviços / E-commerce – Entretenimento / Cultura / Educação / Blogs • Tecnologias assistivas / Aplicativos
  42. 42. Premiação • 1º Colocado: – R$ 5.000,00 (Cinco mil reais) em dinheiro – Troféu – Participar do evento W4A (http://www.w4a.info/) Durante a conferência www2013 no Rio de Janeiro Trabalho exibido em publicação do W3C.br • 2º Colocado: – R$ 3.000,00 (Três mil reais) em dinheiro – Troféu – Trabalho exibido em publicação do W3C.br • 3º Colocado: – R$ 1.500,00 (Mil e quinhentos reais) em dinheiro – Troféu – Trabalho exibido em publicação do W3C.br
  43. 43. Obrigado! Reinaldo Ferraz W3C Escritório Brasil www.w3c.br Twitter: @w3cbrasil reinaldo@nic.br Twitter: @reinaldoferraz

×