Acessibilidade na web
Por uma web para todos!
Iseminar 2011
22 de outubro de 2011
Reinaldo Ferraz – W3C.br
Um pouco do W3C
É um consórcio internacional,
criado em 1994 por Tim Berners-
Lee com
• organizações filiadas,
• uma equip...
O W3C no Brasil
O escritório brasileiro começou suas atividades
em outubro de 2007.
É uma iniciativa do CGI.br, que é o re...
Acessibilidade na web: A quem se destina?
Cegos – Daltônicos - Baixa visão
Foto: everystockphoto.com - namida-k
Surdos
Foto: everystockphoto.com - jessicafm
Mobilidade reduzida
Entendendo as barreiras
Foto de um ursinho de
pelúcia marrom com
um laço quadriculado
preto e branco
amarrado ao pescoço
Uso de cores
Obrigado por suas 715 respostas. Clique
no botão verde para salvar ou no vermelho
para apagar todas as respos...
Uso de cores
Obrigado por suas 715 respostas. Clique
no botão verde para salvar ou no vermelho
para apagar todas as respos...
Uso de cores
Obrigado por suas 715 respostas. Clique
no botão verde para salvar ou no vermelho
para apagar todas as respos...
Uso de cores
A acessibilidade em um
vídeo.
Vídeo de Tim Berners-Lee
sem áudio ou legendas
Você
Você
entendeu
Você
entendeu
alguma
Você
entendeu
alguma
coisa?
Não?
Uma
Uma
pessoa
Uma
pessoa
surda
Uma
pessoa
surda
também não...
Vídeo de Tim Berners-Lee
sem som e com legendas
Acessibilidade na web: A quem se destina?
Acessibilidade é para todos !
Usuários de Dispositivos Móveis
Foto: everystockphoto.com -bartimaeus-
Deficiência temporária
Foto: Flickr.com - Tuftronic10000
Medo de usar o computador
Foto: everystockphoto.com - Violator3
Acessibilidade na web: A quem se destina?
55%
Falta de habilidade com o
computador/internet
Fonte: Pesquisa TIC Domicílios...
Início de aprendizado
Nosso primeiro contato
Idade Avançada
Nós, daqui
alguns
anos
Foto: Flickr.com - Jacob Bøtter
Estatísticas
Foto: Flickr.com - Jacob Bøtter
Número de pessoas com
60 anos ou mais
no mundo:
1950 – 205 milhões
2000 – 60...
Já testou o seu site?
Vídeo
Arquitetura inclusiva
Foto: Flickr.com - Baddog_
Acessível via teclado
Foto: Flickr.com - Baddog_
Já testou o seu site?
Já testou o seu site?
João é
tetraplégico
Foto de Maíra Soares
(cortesia Horácio Soares)
Já testou o seu site?
Michele é surda
Sem CSS e imagens
Foto: Flickr.com - Baddog_
Ou mesmo sem monitor
Já testou o seu site?
Leda é cega
(cortesia Horácio Soares)
Autonomia na web
http://jovemnerd.ig.com.br/nerdcast/nerdcast-256-cegos-nerds-e-loucos/
Já testou o seu site?
De acordo com o Censo 2000:
- 14,5% da população brasileira (mais de 24 milhões) era portadora
de, p...
Quais as vantagens de um site acessível?
Quais as vantagens de um site acessível?
Convencer seu
cliente
Quais as vantagens de um site acessível?
Custo baixo no início do projeto
Foto: everystockphoto.com - fluzo
O site fica mais fácil de usar
Foto: everystockphoto.com -James Gordon
Manutenção mais rápida e barata
Foto: everystockphoto.com -James GordonFoto: everystockphoto.com - lusi
Melhor performance
Vantagem sobre a concorrência
Foto: everystockphoto.com - Bill Tracey
Já testou o seu site?
Vídeo
O mundo adaptado
Foto: Flickr.com - Baddog_
O caminho para a
acessibilidade na web
Foto: everystockphoto.com - Colin Gregory Palmer
Aplicando acessibilidade
Utilizar padrões web
www.w3.org
Acessibilidade na web
http://1997.webhistory.org/www.lists/www-talk.1993q1/0182.html
Acessibilidade na web
http://1997.webhistory.org/www.lists/www-html.1995q2/0128.html
Aplicando acessibilidade
Web Content Accessibility
Guidelines (WCAG)
Versão 1.0 – 5 de maio de 1999
www.w3.org/TR/WCAG10/
...
WCAG 2.04 Princípios
Recomendações
(12 no total)
Critérios de
sucesso
Técnicas
suficientes e
aconselhadas
Como Cumprir os ...
Aplicando acessibilidade
<img src="foto.jpg" alt="" />
<img src="foto.jpg" alt="" />
Aplicando acessibilidade
<img src="foto.jpg"
alt=“Foto das teclas W, 3 e
C fora do teclado" />
<img src="foto.jpg"
alt=“Fo...
Daltonismo
Daltonismo
Visão normal
Daltonismo
Protanopia (Deficiências em vermelho)
Daltonismo
Deuteranopia (Deficiências em verde)
Daltonismo
Tritanopia (Deficiências em azul)
Daltonismo
Acromatopsia (Deficiências todas as cores)
Site acessível é feio
Padrões Web limitam o design
http://www.csszengarden.com/
Foto: Flickr.com - Patrick Q
http://www.csszengarden.com/
Foto: Flickr.com - Patrick Q
http://www.csszengarden.com/
Foto: Flickr.com - Patrick Q
http://www.csszengarden.com/
Foto: Flickr.com - Patrick Q
http://www.csszengarden.com/
Foto: Flickr.com - Patrick Q
Aplicando acessibilidade
Usabilidade
Foto: everystockphoto.com - quinet
Facilidade de uso
Foto: everystockphoto.com - michael morel
Aplicando acessibilidade
Crimes de usabilidade que não devemos cometer
Rótulos de formulários que não estão associados res...
Aplicando acessibilidade
Crimes de usabilidade que não devemos cometer
Um logo que não tem link para a página principal
Ba...
Aplicando acessibilidade
Crimes de usabilidade que não devemos cometer
Sublinhar conteúdo que não é link
Baseado no post d...
Conteúdo
Aplicando acessibilidade
Escrever é a arte de cortar palavras
Então, Resuma!
Arquitetura da Informação
Foto: everystockphoto.com - Andre Charland
Aplicando acessibilidade
Eletrodomésticos
ou
Eletroportáteis?
Foto: everystockphoto.com - bcmom
Aplicando acessibilidade
Menos é (muito) mais!
Aplicando acessibilidade
Princípios do W3C
Web para todos,
em qualquer
dispositivo, em
qualquer lugar,
segura e
confiável!
Foto: everystockphoto.co...
Vídeo da violinista surda
Princípios do W3C
As diferenças
existem para
serem respeitadas
Obrigado!
Reinaldo Ferraz
W3C Escritório Brasil
www.w3c.br
Twitter: @w3cbrasil
reinaldo@nic.br
Twitter: @reinaldoferraz
Acessibilidade na Web -  iseminar 2011
Acessibilidade na Web -  iseminar 2011
Acessibilidade na Web -  iseminar 2011
Acessibilidade na Web -  iseminar 2011
Próximos SlideShares
Carregando em…5
×

Acessibilidade na Web - iseminar 2011

581 visualizações

Publicada em

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
581
No SlideShare
0
A partir de incorporações
0
Número de incorporações
345
Ações
Compartilhamentos
0
Downloads
2
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Acessibilidade na Web - iseminar 2011

  1. 1. Acessibilidade na web Por uma web para todos! Iseminar 2011 22 de outubro de 2011 Reinaldo Ferraz – W3C.br
  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. O W3C no Brasil O escritório brasileiro começou suas atividades em outubro de 2007. É uma iniciativa do CGI.br, que é o responsável por coordenar e integrar as iniciativas de serviços da Internet no País e do NIC.br, criado para implementar as decisões e os projetos do Comitê Gestor da Internet no Brasil.
  4. 4. Acessibilidade na web: A quem se destina?
  5. 5. Cegos – Daltônicos - Baixa visão Foto: everystockphoto.com - namida-k
  6. 6. Surdos Foto: everystockphoto.com - jessicafm
  7. 7. Mobilidade reduzida
  8. 8. Entendendo as barreiras
  9. 9. Foto de um ursinho de pelúcia marrom com um laço quadriculado preto e branco amarrado ao pescoço
  10. 10. Uso de cores Obrigado por suas 715 respostas. Clique no botão verde para salvar ou no vermelho para apagar todas as respostas.
  11. 11. Uso de cores Obrigado por suas 715 respostas. Clique no botão verde para salvar ou no vermelho para apagar todas as respostas.
  12. 12. Uso de cores Obrigado por suas 715 respostas. Clique no botão verde para salvar ou no vermelho para apagar todas as respostas. Essa ação não poderá ser desfeita...
  13. 13. Uso de cores
  14. 14. A acessibilidade em um vídeo.
  15. 15. Vídeo de Tim Berners-Lee sem áudio ou legendas
  16. 16. Você
  17. 17. Você entendeu
  18. 18. Você entendeu alguma
  19. 19. Você entendeu alguma coisa?
  20. 20. Não?
  21. 21. Uma
  22. 22. Uma pessoa
  23. 23. Uma pessoa surda
  24. 24. Uma pessoa surda também não...
  25. 25. Vídeo de Tim Berners-Lee sem som e com legendas
  26. 26. Acessibilidade na web: A quem se destina? Acessibilidade é para todos !
  27. 27. Usuários de Dispositivos Móveis Foto: everystockphoto.com -bartimaeus-
  28. 28. Deficiência temporária Foto: Flickr.com - Tuftronic10000
  29. 29. Medo de usar o computador Foto: everystockphoto.com - Violator3
  30. 30. Acessibilidade na web: A quem se destina? 55% Falta de habilidade com o computador/internet Fonte: Pesquisa TIC Domicílios 2010 – CGI.br Pessoas que nunca acessaram a internet, mas usaram um computador. Motivos pelos quais nunca utilizou a internet
  31. 31. Início de aprendizado Nosso primeiro contato
  32. 32. Idade Avançada Nós, daqui alguns anos Foto: Flickr.com - Jacob Bøtter
  33. 33. Estatísticas Foto: Flickr.com - Jacob Bøtter Número de pessoas com 60 anos ou mais no mundo: 1950 – 205 milhões 2000 – 606 milhões Estimativa para 2050 Quase 2 bilhões de pessoas com mais de 60 anos. (+ de 20% da população) Fonte: http://www.un.org/esa/population/publications/worldageing19502050/
  34. 34. Já testou o seu site? Vídeo Arquitetura inclusiva Foto: Flickr.com - Baddog_
  35. 35. Acessível via teclado Foto: Flickr.com - Baddog_
  36. 36. Já testou o seu site?
  37. 37. Já testou o seu site? João é tetraplégico Foto de Maíra Soares (cortesia Horácio Soares)
  38. 38. Já testou o seu site? Michele é surda
  39. 39. Sem CSS e imagens Foto: Flickr.com - Baddog_
  40. 40. Ou mesmo sem monitor
  41. 41. Já testou o seu site? Leda é cega (cortesia Horácio Soares)
  42. 42. Autonomia na web http://jovemnerd.ig.com.br/nerdcast/nerdcast-256-cegos-nerds-e-loucos/
  43. 43. Já testou o seu site? De acordo com o Censo 2000: - 14,5% da população brasileira (mais de 24 milhões) era portadora de, pelo menos, uma das deficiências investigadas pela pesquisa. - Em 2000, existiam 148 mil pessoas cegas e 2,4 milhões com grande dificuldade de enxergar - O número de surdos no Brasil era de 166.400. Além disso, cerca de 900 mil pessoas declararam ter grande dificuldade permanente de ouvir. - Pessoas com tetraplegia, paraplegia ou hemiplegia permanente são mais de 937 mil e com falta de um membro mais de 478 mil. Fonte: IBGE - http://www.ibge.gov.br/home/presidencia/noticias/27062003censo.shtm
  44. 44. Quais as vantagens de um site acessível?
  45. 45. Quais as vantagens de um site acessível? Convencer seu cliente
  46. 46. Quais as vantagens de um site acessível?
  47. 47. Custo baixo no início do projeto Foto: everystockphoto.com - fluzo
  48. 48. O site fica mais fácil de usar Foto: everystockphoto.com -James Gordon
  49. 49. Manutenção mais rápida e barata Foto: everystockphoto.com -James GordonFoto: everystockphoto.com - lusi
  50. 50. Melhor performance
  51. 51. Vantagem sobre a concorrência Foto: everystockphoto.com - Bill Tracey
  52. 52. Já testou o seu site? Vídeo O mundo adaptado Foto: Flickr.com - Baddog_
  53. 53. O caminho para a acessibilidade na web Foto: everystockphoto.com - Colin Gregory Palmer
  54. 54. Aplicando acessibilidade Utilizar padrões web www.w3.org
  55. 55. Acessibilidade na web http://1997.webhistory.org/www.lists/www-talk.1993q1/0182.html
  56. 56. Acessibilidade na web http://1997.webhistory.org/www.lists/www-html.1995q2/0128.html
  57. 57. Aplicando acessibilidade Web Content Accessibility Guidelines (WCAG) Versão 1.0 – 5 de maio de 1999 www.w3.org/TR/WCAG10/ Versão 2.0 – 11 de dezembro de 2008 www.w3.org/TR/WCAG/
  58. 58. WCAG 2.04 Princípios Recomendações (12 no total) Critérios de sucesso Técnicas suficientes e aconselhadas Como Cumprir os critérios de sucesso Entendendo os critérios de sucesso Entendendo as Recomendações WCAG 2.0
  59. 59. Aplicando acessibilidade <img src="foto.jpg" alt="" /> <img src="foto.jpg" alt="" />
  60. 60. 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" />
  61. 61. Daltonismo
  62. 62. Daltonismo Visão normal
  63. 63. Daltonismo Protanopia (Deficiências em vermelho)
  64. 64. Daltonismo Deuteranopia (Deficiências em verde)
  65. 65. Daltonismo Tritanopia (Deficiências em azul)
  66. 66. Daltonismo Acromatopsia (Deficiências todas as cores)
  67. 67. Site acessível é feio Padrões Web limitam o design
  68. 68. http://www.csszengarden.com/ Foto: Flickr.com - Patrick Q
  69. 69. http://www.csszengarden.com/ Foto: Flickr.com - Patrick Q
  70. 70. http://www.csszengarden.com/ Foto: Flickr.com - Patrick Q
  71. 71. http://www.csszengarden.com/ Foto: Flickr.com - Patrick Q
  72. 72. http://www.csszengarden.com/ Foto: Flickr.com - Patrick Q
  73. 73. Aplicando acessibilidade Usabilidade Foto: everystockphoto.com - quinet
  74. 74. Facilidade de uso Foto: everystockphoto.com - michael morel
  75. 75. Aplicando acessibilidade Crimes de usabilidade que não devemos cometer Rótulos de formulários que não estão associados respectivos campos Baseado no post do blog Line 25 http://line25.com/articles/10-usability-crimes-you-really-shouldnt-commit Aciona aqui Clicando aqui
  76. 76. Aplicando acessibilidade Crimes de usabilidade que não devemos cometer Um logo que não tem link para a página principal Baseado no post do blog Line 25 http://line25.com/articles/10-usability-crimes-you-really-shouldnt-commit Voltar para a página principal
  77. 77. Aplicando acessibilidade Crimes de usabilidade que não devemos cometer Sublinhar conteúdo que não é link Baseado no post do blog Line 25 http://line25.com/articles/10-usability-crimes-you-really-shouldnt-commit Isso aqui não é link? Nossa empresa informa de maneira clara e direta que as funções delegadas a seus funcionários deverão ser cumpridas integralmente.
  78. 78. Conteúdo
  79. 79. Aplicando acessibilidade Escrever é a arte de cortar palavras Então, Resuma!
  80. 80. Arquitetura da Informação Foto: everystockphoto.com - Andre Charland
  81. 81. Aplicando acessibilidade Eletrodomésticos ou Eletroportáteis? Foto: everystockphoto.com - bcmom
  82. 82. Aplicando acessibilidade Menos é (muito) mais!
  83. 83. Aplicando acessibilidade
  84. 84. Princípios do W3C Web para todos, em qualquer dispositivo, em qualquer lugar, segura e confiável! Foto: everystockphoto.com - woodleywonderworks
  85. 85. Vídeo da violinista surda
  86. 86. Princípios do W3C As diferenças existem para serem respeitadas
  87. 87. Obrigado! Reinaldo Ferraz W3C Escritório Brasil www.w3c.br Twitter: @w3cbrasil reinaldo@nic.br Twitter: @reinaldoferraz

×