Panorama da acessibilidade nas redes sociais 
Reinaldo Ferraz 
W3C Brasil
http://conferenciaweb.w3c.br/
http://premio.w3c.br/
Acessibilidade na Web: A quem se destina?
Cegos - daltônicos - baixa visão
Deficiência auditiva
Deficiência motora
Estatísticas 
Pessoas com deficiências no Brasil 
24% 
45.623.910 pessoas 
Fonte: Censo 2010
Fonte: IBGE 
Pessoas com deficiência no Brasil 
Fonte: http://www.ibge.gov.br/home/estatistica/populacao/censo2010/resulta...
Estatísticas 
No mundo, esse número é aproximadamente 
650 milhões pessoas 
Fonte: ONU
Equívoco 
1 
Achar que todas as pessoas acessam seu conteúdo da mesma forma
http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
Equívoco 
2 
Pessoas com deficiência são fazem parte do meu público alvo
Equívoco 
3 
Achar que temos controle sobre o usuário
Você acha que sabe tudo do seu usuário?
NÃO
Você não tem controle sobre o seu usuário
Equívoco 
4 
O problema da acessibilidade é (todo) da aplicação 
Em partes...
Nós também somos responsáveis por publicar conteúdo acessível
Acessibilidade deve fazer parte da rotina
Dicas para publicar conteúdo acessível
Contraste 
Ishihara Test
Visão normal
Protanopia (Deficiências em vermelho)
Deuteranopia (Deficiências em verde)
Tritanopia (Deficiências em azul)
Acromatopsia (Deficiências todas as cores)
Imagens
Infográfico
Vídeos
0:00:00.000,0:00:05.600 
O Comitê Gestor da Internet no Brasil, conhecido também pela sigla CGI.br, 
0:00:05.700,0:00:11.0...
Interface Web
Foto: Flickr.com - Baddog_
<a href="menu.php" onmouseover="swapImageOn('menu')" onfocus="swapImageOn('menu')" onmouseout="swapImageOff('menu')" onblu...
Considerando perspectivas 
<img />
Considerando perspectivas 
<img /> 
<img alt="Foto das teclas W, 3 e C fora do teclado" />
Considerando perspectivas 
<img /> 
<img alt="Foto das teclas W, 3 e C fora do teclado" /> 
<img src="foto.jpg" alt=“Foto ...
Princípio 1: Perceptível
Exemplos 
Em um campo de entrada de texto: 
<label for="firstname">First name:</label> 
<input type="text" name="firstname...
Aciona aqui 
Clicando aqui
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
70% 
Falta de habilidade com o computador/internet 
Fonte: Pesquisa TIC Domicílios 2013 – CGI.br 
Pessoas que nunca usaram...
Início de aprendizado 
Nosso primeiro contato
Idade Avançada 
Nós, daqui alguns anos 
Foto: Flickr.com - Jacob Bøtter
Aplicando acessibilidade 
Web Content Accessibility Guidelines (WCAG) 
Versão 1.0 – 5 de maio de 1999 
Versão 2.0 – 11 de ...
Perceptível 
• Forneça alternativas em texto para o conteúdo não textual. 
• Forneça legendas e outras alternativas para m...
Operável 
• Faça todas as funcionalidades disponíveis a partir de um teclado. 
• Dê aos usuários tempo suficiente para ler...
Compreensível 
• Faça o texto legível e compreensível. 
• Faça o conteúdo aparecer e funcionar de forma previsível. 
• Aju...
Robusto 
• Maximize a compatibilidade com ferramentas de usuário atuais e futuras
Web para todos, em qualquer dispositivo, em qualquer lugar, segura e confiável! 
Foto: everystockphoto.com - woodleywonder...
Tks 
reinaldo@nic.br @reinaldoferraz 
w3cbrasil@nic.br 
@w3cbrasil 
Facebook.com/W3CBrasil
Panorama da Acessibilidade nas redes sociais
Panorama da Acessibilidade nas redes sociais
Panorama da Acessibilidade nas redes sociais
Panorama da Acessibilidade nas redes sociais
Panorama da Acessibilidade nas redes sociais
Panorama da Acessibilidade nas redes sociais
Panorama da Acessibilidade nas redes sociais
Panorama da Acessibilidade nas redes sociais
Panorama da Acessibilidade nas redes sociais
Panorama da Acessibilidade nas redes sociais
Panorama da Acessibilidade nas redes sociais
Panorama da Acessibilidade nas redes sociais
Panorama da Acessibilidade nas redes sociais
Panorama da Acessibilidade nas redes sociais
Panorama da Acessibilidade nas redes sociais
Panorama da Acessibilidade nas redes sociais
Panorama da Acessibilidade nas redes sociais
Panorama da Acessibilidade nas redes sociais
Panorama da Acessibilidade nas redes sociais
Panorama da Acessibilidade nas redes sociais
Panorama da Acessibilidade nas redes sociais
Panorama da Acessibilidade nas redes sociais
Panorama da Acessibilidade nas redes sociais
Panorama da Acessibilidade nas redes sociais
Panorama da Acessibilidade nas redes sociais
Panorama da Acessibilidade nas redes sociais
Panorama da Acessibilidade nas redes sociais
Próximos SlideShares
Carregando em…5
×

Panorama da Acessibilidade nas redes sociais

813 visualizações

Publicada em

Palestra feita no evento Social media Week São Paulo 2014 sobre um breve panorama da acessibilidade nas redes sociais, abordando barreiras das ferramentas e os cuidados que devem ser tomados ao publicar conteúdo nas redes.

Publicada em: Internet
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
813
No SlideShare
0
A partir de incorporações
0
Número de incorporações
5
Ações
Compartilhamentos
0
Downloads
22
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Panorama da Acessibilidade nas redes sociais

  1. 1. Panorama da acessibilidade nas redes sociais Reinaldo Ferraz W3C Brasil
  2. 2. http://conferenciaweb.w3c.br/
  3. 3. http://premio.w3c.br/
  4. 4. Acessibilidade na Web: A quem se destina?
  5. 5. Cegos - daltônicos - baixa visão
  6. 6. Deficiência auditiva
  7. 7. Deficiência motora
  8. 8. Estatísticas Pessoas com deficiências no Brasil 24% 45.623.910 pessoas Fonte: Censo 2010
  9. 9. Fonte: IBGE Pessoas com deficiência no Brasil Fonte: http://www.ibge.gov.br/home/estatistica/populacao/censo2010/resultados_preliminares/default_resultados_preliminares.shtm Visual: 19% 35.791.488 pessoas Auditiva: 5% 9.722.163 pessoas Motora: 7% 13.273.969 pessoas Cognitiva: 1% 2.617.025 pessoas
  10. 10. Estatísticas No mundo, esse número é aproximadamente 650 milhões pessoas Fonte: ONU
  11. 11. Equívoco 1 Achar que todas as pessoas acessam seu conteúdo da mesma forma
  12. 12. http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
  13. 13. http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
  14. 14. http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
  15. 15. http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
  16. 16. Equívoco 2 Pessoas com deficiência são fazem parte do meu público alvo
  17. 17. Equívoco 3 Achar que temos controle sobre o usuário
  18. 18. Você acha que sabe tudo do seu usuário?
  19. 19. NÃO
  20. 20. Você não tem controle sobre o seu usuário
  21. 21. Equívoco 4 O problema da acessibilidade é (todo) da aplicação Em partes...
  22. 22. Nós também somos responsáveis por publicar conteúdo acessível
  23. 23. Acessibilidade deve fazer parte da rotina
  24. 24. Dicas para publicar conteúdo acessível
  25. 25. Contraste Ishihara Test
  26. 26. Visão normal
  27. 27. Protanopia (Deficiências em vermelho)
  28. 28. Deuteranopia (Deficiências em verde)
  29. 29. Tritanopia (Deficiências em azul)
  30. 30. Acromatopsia (Deficiências todas as cores)
  31. 31. Imagens
  32. 32. Infográfico
  33. 33. Vídeos
  34. 34. 0:00:00.000,0:00:05.600 O Comitê Gestor da Internet no Brasil, conhecido também pela sigla CGI.br, 0:00:05.700,0:00:11.000 é o responsável por coordenar e integrar todas as iniciativas de serviços Internet no país, 0:00:11.100,0:00:17.000 promovendo a qualidade técnica, a inovação e a disseminação dos serviços ofertados. 0:00:18.000,0:00:19.500 — Mas o que isso significa? 0:00:20.000,0:00:25.000 Na verdade, significa que a governança da Internet no Brasil tem no CGI.br 0:00:25.100,0:00:30.000 a participação das diferentes representações da Sociedade,
  35. 35. Interface Web
  36. 36. Foto: Flickr.com - Baddog_
  37. 37. <a href="menu.php" onmouseover="swapImageOn('menu')" onfocus="swapImageOn('menu')" onmouseout="swapImageOff('menu')" onblur="swapImageOff('menu')"> <img id="menu" src="menu_off.gif" alt="Menu" /> </a> Princípio 2: Operável Utilizar o teclado e outras funções específicas do dispositivo
  38. 38. Considerando perspectivas <img />
  39. 39. Considerando perspectivas <img /> <img alt="Foto das teclas W, 3 e C fora do teclado" />
  40. 40. Considerando perspectivas <img /> <img 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" />
  41. 41. Princípio 1: Perceptível
  42. 42. Exemplos Em um campo de entrada de texto: <label for="firstname">First name:</label> <input type="text" name="firstname" id="firstname"> Em um campo checkbox: <input type="checkbox" id="markuplang" name="computerskills“> <label for="markuplang">HTML</label> Princípio 1: Perceptível
  43. 43. Aciona aqui Clicando aqui
  44. 44. Acessibilidade é para todos !
  45. 45. Usuários de Dispositivos Móveis Foto: everystockphoto.com -bartimaeus-
  46. 46. Deficiência temporária Foto: Flickr.com - Tuftronic10000
  47. 47. Medo de usar o computador Foto: everystockphoto.com - Violator3
  48. 48. 70% Falta de habilidade com o computador/internet Fonte: Pesquisa TIC Domicílios 2013 – CGI.br Pessoas que nunca usaram a internet. Motivos pelos quais nunca utilizou a internet Fonte: http://www.cetic.br/
  49. 49. Início de aprendizado Nosso primeiro contato
  50. 50. Idade Avançada Nós, daqui alguns anos Foto: Flickr.com - Jacob Bøtter
  51. 51. 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/
  52. 52. Perceptível • Forneça alternativas em texto para o conteúdo não textual. • Forneça legendas e outras alternativas para multimídia. • Crie conteúdo que pode ser apresentado de diversas formas, inclusive pelas tecnologias assistivas, sem perder o significado. • Torne mais fácil para os usuários a ver e ouvir o conteúdo.
  53. 53. Operável • Faça todas as funcionalidades disponíveis a partir de um teclado. • Dê aos usuários tempo suficiente para ler e usar o conteúdo. • Não crie conteúdo que provoca convulsões. • Ajude os usuários a navegar e encontrar conteúdo.
  54. 54. Compreensível • Faça o texto legível e compreensível. • Faça o conteúdo aparecer e funcionar de forma previsível. • Ajude os usuários a evitar e corrigir erros.
  55. 55. Robusto • Maximize a compatibilidade com ferramentas de usuário atuais e futuras
  56. 56. Web para todos, em qualquer dispositivo, em qualquer lugar, segura e confiável! Foto: everystockphoto.com - woodleywonderworks
  57. 57. Tks reinaldo@nic.br @reinaldoferraz w3cbrasil@nic.br @w3cbrasil Facebook.com/W3CBrasil

×