Panorama da Acessibilidade nas redes sociais

84
Panorama da acessibilidade nas redes sociais Reinaldo Ferraz W3C Brasil

description

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.

Transcript of Panorama da Acessibilidade nas redes sociais

Page 1: Panorama da Acessibilidade nas redes sociais

Panorama da acessibilidade nas

redes sociais

Reinaldo Ferraz W3C Brasil

Page 2: Panorama da Acessibilidade nas redes sociais
Page 3: Panorama da Acessibilidade nas redes sociais
Page 4: Panorama da Acessibilidade nas redes sociais
Page 5: Panorama da Acessibilidade nas redes sociais
Page 6: Panorama da Acessibilidade nas redes sociais

http://conferenciaweb.w3c.br/

Page 7: Panorama da Acessibilidade nas redes sociais

http://premio.w3c.br/

Page 8: Panorama da Acessibilidade nas redes sociais

Acessibilidade na Web: A quem se destina?

Page 9: Panorama da Acessibilidade nas redes sociais

Cegos - daltônicos - baixa visão

Page 10: Panorama da Acessibilidade nas redes sociais

Deficiência auditiva

Page 11: Panorama da Acessibilidade nas redes sociais

Deficiência motora

Page 12: Panorama da Acessibilidade nas redes sociais

Estatísticas Pessoas com deficiências no Brasil

24% 45.623.910 pessoas

Fonte: Censo 2010

Page 13: Panorama da Acessibilidade nas redes sociais

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

Estatísticas No mundo, esse número é

aproximadamente

650 milhões

pessoas Fonte: ONU

Page 15: Panorama da Acessibilidade nas redes sociais
Page 16: Panorama da Acessibilidade nas redes sociais

Equívoco

1

Achar que todas as pessoas acessam seu conteúdo da mesma forma

Page 17: Panorama da Acessibilidade nas redes sociais
Page 18: Panorama da Acessibilidade nas redes sociais
Page 19: Panorama da Acessibilidade nas redes sociais

http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/

Page 20: Panorama da Acessibilidade nas redes sociais

http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/

Page 21: Panorama da Acessibilidade nas redes sociais

http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/

Page 22: Panorama da Acessibilidade nas redes sociais

http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/

Page 23: Panorama da Acessibilidade nas redes sociais

Equívoco

2

Pessoas com deficiência são fazem parte do meu público alvo

Page 24: Panorama da Acessibilidade nas redes sociais
Page 25: Panorama da Acessibilidade nas redes sociais

Equívoco

3

Achar que temos controle sobre o usuário

Page 26: Panorama da Acessibilidade nas redes sociais

Você acha que sabe tudo do seu usuário?

Page 27: Panorama da Acessibilidade nas redes sociais

NÃO

Page 28: Panorama da Acessibilidade nas redes sociais

Você não tem controle sobre o seu usuário

Page 29: Panorama da Acessibilidade nas redes sociais
Page 30: Panorama da Acessibilidade nas redes sociais
Page 31: Panorama da Acessibilidade nas redes sociais
Page 32: Panorama da Acessibilidade nas redes sociais
Page 33: Panorama da Acessibilidade nas redes sociais
Page 34: Panorama da Acessibilidade nas redes sociais

Equívoco

4

O problema da acessibilidade é (todo) da aplicação

Em partes...

Page 35: Panorama da Acessibilidade nas redes sociais
Page 36: Panorama da Acessibilidade nas redes sociais
Page 37: Panorama da Acessibilidade nas redes sociais
Page 38: Panorama da Acessibilidade nas redes sociais
Page 39: Panorama da Acessibilidade nas redes sociais
Page 40: Panorama da Acessibilidade nas redes sociais

Nós também somos responsáveis por publicar conteúdo acessível

Page 41: Panorama da Acessibilidade nas redes sociais

Acessibilidade deve fazer parte da rotina

Page 42: Panorama da Acessibilidade nas redes sociais

Dicas para publicar conteúdo acessível

Page 43: Panorama da Acessibilidade nas redes sociais

Contraste Ishihara Test

Page 44: Panorama da Acessibilidade nas redes sociais

Visão normal

Page 45: Panorama da Acessibilidade nas redes sociais

Protanopia (Deficiências em vermelho)

Page 46: Panorama da Acessibilidade nas redes sociais

Deuteranopia (Deficiências em verde)

Page 47: Panorama da Acessibilidade nas redes sociais

Tritanopia (Deficiências em azul)

Page 48: Panorama da Acessibilidade nas redes sociais

Acromatopsia (Deficiências todas as cores)

Page 49: Panorama da Acessibilidade nas redes sociais
Page 50: Panorama da Acessibilidade nas redes sociais
Page 51: Panorama da Acessibilidade nas redes sociais
Page 52: Panorama da Acessibilidade nas redes sociais

Imagens

Page 53: Panorama da Acessibilidade nas redes sociais
Page 54: Panorama da Acessibilidade nas redes sociais
Page 55: Panorama da Acessibilidade nas redes sociais

Infográfico

Page 56: Panorama da Acessibilidade nas redes sociais
Page 57: Panorama da Acessibilidade nas redes sociais
Page 58: Panorama da Acessibilidade nas redes sociais

Vídeos

Page 59: Panorama da Acessibilidade nas redes sociais
Page 60: Panorama da Acessibilidade nas redes sociais

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

Interface Web

Page 62: Panorama da Acessibilidade nas redes sociais

Foto: Flickr.com - Baddog_

Page 63: Panorama da Acessibilidade nas redes sociais

<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

Considerando perspectivas

<img />

Page 65: Panorama da Acessibilidade nas redes sociais

Considerando perspectivas

<img />

<img alt="Foto das teclas W, 3 e C fora do teclado" />

Page 66: Panorama da Acessibilidade nas redes sociais

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

Princípio 1: Perceptível

Page 68: Panorama da Acessibilidade nas redes sociais

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

Aciona aqui Clicando aqui

Page 70: Panorama da Acessibilidade nas redes sociais
Page 71: Panorama da Acessibilidade nas redes sociais

Acessibilidade é para todos !

Page 72: Panorama da Acessibilidade nas redes sociais

Usuários de Dispositivos Móveis

Foto: everystockphoto.com -bartimaeus-

Page 73: Panorama da Acessibilidade nas redes sociais

Deficiência temporária

Foto: Flickr.com - Tuftronic10000

Page 74: Panorama da Acessibilidade nas redes sociais

Medo

de usar o computador

Foto: everystockphoto.com - Violator3

Page 75: Panorama da Acessibilidade nas redes sociais

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

Início de aprendizado

Nosso primeiro contato

Page 77: Panorama da Acessibilidade nas redes sociais

Idade Avançada

Nós, daqui alguns anos

Foto: Flickr.com - Jacob Bøtter

Page 78: Panorama da Acessibilidade nas redes sociais

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

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

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

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

Robusto

• Maximize a compatibilidade com ferramentas de

usuário atuais e futuras

Page 83: Panorama da Acessibilidade nas redes sociais

Web para todos, em qualquer dispositivo, em qualquer lugar,

segura e confiável!

Foto: everystockphoto.com - woodleywonderworks

Page 84: Panorama da Acessibilidade nas redes sociais

Tks [email protected] @reinaldoferraz

[email protected] @w3cbrasil Facebook.com/W3CBrasil