Panorama da Acessibilidade nas redes sociais
-
Upload
reinaldo-ferraz -
Category
Internet
-
view
333 -
download
0
description
Transcript of Panorama da Acessibilidade nas redes sociais
![Page 1: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/1.jpg)
Panorama da acessibilidade nas
redes sociais
Reinaldo Ferraz W3C Brasil
![Page 2: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/2.jpg)
![Page 3: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/3.jpg)
![Page 4: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/4.jpg)
![Page 5: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/5.jpg)
![Page 6: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/6.jpg)
http://conferenciaweb.w3c.br/
![Page 7: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/7.jpg)
http://premio.w3c.br/
![Page 8: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/8.jpg)
Acessibilidade na Web: A quem se destina?
![Page 9: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/9.jpg)
Cegos - daltônicos - baixa visão
![Page 10: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/10.jpg)
Deficiência auditiva
![Page 11: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/11.jpg)
Deficiência motora
![Page 12: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/12.jpg)
Estatísticas Pessoas com deficiências no Brasil
24% 45.623.910 pessoas
Fonte: Censo 2010
![Page 13: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/13.jpg)
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
![Page 14: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/14.jpg)
Estatísticas No mundo, esse número é
aproximadamente
650 milhões
pessoas Fonte: ONU
![Page 15: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/15.jpg)
![Page 16: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/16.jpg)
Equívoco
1
Achar que todas as pessoas acessam seu conteúdo da mesma forma
![Page 17: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/17.jpg)
![Page 18: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/18.jpg)
![Page 19: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/19.jpg)
http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
![Page 20: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/20.jpg)
http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
![Page 21: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/21.jpg)
http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
![Page 22: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/22.jpg)
http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
![Page 23: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/23.jpg)
Equívoco
2
Pessoas com deficiência são fazem parte do meu público alvo
![Page 24: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/24.jpg)
![Page 25: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/25.jpg)
Equívoco
3
Achar que temos controle sobre o usuário
![Page 26: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/26.jpg)
Você acha que sabe tudo do seu usuário?
![Page 27: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/27.jpg)
NÃO
![Page 28: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/28.jpg)
Você não tem controle sobre o seu usuário
![Page 29: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/29.jpg)
![Page 30: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/30.jpg)
![Page 31: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/31.jpg)
![Page 32: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/32.jpg)
![Page 33: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/33.jpg)
![Page 34: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/34.jpg)
Equívoco
4
O problema da acessibilidade é (todo) da aplicação
Em partes...
![Page 35: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/35.jpg)
![Page 36: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/36.jpg)
![Page 37: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/37.jpg)
![Page 38: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/38.jpg)
![Page 39: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/39.jpg)
![Page 40: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/40.jpg)
Nós também somos responsáveis por publicar conteúdo acessível
![Page 41: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/41.jpg)
Acessibilidade deve fazer parte da rotina
![Page 42: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/42.jpg)
Dicas para publicar conteúdo acessível
![Page 43: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/43.jpg)
Contraste Ishihara Test
![Page 44: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/44.jpg)
Visão normal
![Page 45: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/45.jpg)
Protanopia (Deficiências em vermelho)
![Page 46: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/46.jpg)
Deuteranopia (Deficiências em verde)
![Page 47: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/47.jpg)
Tritanopia (Deficiências em azul)
![Page 48: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/48.jpg)
Acromatopsia (Deficiências todas as cores)
![Page 49: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/49.jpg)
![Page 50: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/50.jpg)
![Page 51: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/51.jpg)
![Page 52: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/52.jpg)
Imagens
![Page 53: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/53.jpg)
![Page 54: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/54.jpg)
![Page 55: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/55.jpg)
Infográfico
![Page 56: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/56.jpg)
![Page 57: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/57.jpg)
![Page 58: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/58.jpg)
Vídeos
![Page 59: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/59.jpg)
![Page 60: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/60.jpg)
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,
![Page 61: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/61.jpg)
Interface Web
![Page 62: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/62.jpg)
Foto: Flickr.com - Baddog_
![Page 63: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/63.jpg)
<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
![Page 64: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/64.jpg)
Considerando perspectivas
<img />
![Page 65: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/65.jpg)
Considerando perspectivas
<img />
<img alt="Foto das teclas W, 3 e C fora do teclado" />
![Page 66: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/66.jpg)
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" />
![Page 67: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/67.jpg)
Princípio 1: Perceptível
![Page 68: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/68.jpg)
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
![Page 69: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/69.jpg)
Aciona aqui Clicando aqui
![Page 70: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/70.jpg)
![Page 71: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/71.jpg)
Acessibilidade é para todos !
![Page 72: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/72.jpg)
Usuários de Dispositivos Móveis
Foto: everystockphoto.com -bartimaeus-
![Page 73: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/73.jpg)
Deficiência temporária
Foto: Flickr.com - Tuftronic10000
![Page 74: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/74.jpg)
Medo
de usar o computador
Foto: everystockphoto.com - Violator3
![Page 75: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/75.jpg)
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/
![Page 76: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/76.jpg)
Início de aprendizado
Nosso primeiro contato
![Page 77: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/77.jpg)
Idade Avançada
Nós, daqui alguns anos
Foto: Flickr.com - Jacob Bøtter
![Page 78: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/78.jpg)
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/
![Page 79: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/79.jpg)
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.
![Page 80: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/80.jpg)
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.
![Page 81: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/81.jpg)
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.
![Page 82: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/82.jpg)
Robusto
• Maximize a compatibilidade com ferramentas de
usuário atuais e futuras
![Page 83: Panorama da Acessibilidade nas redes sociais](https://reader033.fdocuments.net/reader033/viewer/2022052600/5585dbbed8b42a7c4a8b4beb/html5/thumbnails/83.jpg)
Web para todos, em qualquer dispositivo, em qualquer lugar,
segura e confiável!
Foto: everystockphoto.com - woodleywonderworks