oficina de acessibilidade secop2012
TRANSCRIPT
![Page 1: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/1.jpg)
Oficina de Acessibilidade na web O caminho das pedras para construir sítios acessíveis
São Paulo - SP
21 de setembro de 2012
Reinaldo Ferraz – W3C.br
Fernanda Lobato – SLTI
Leonardo Gleison – Instituto Laramara
![Page 2: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/2.jpg)
Acessibilidade, para quem?
![Page 3: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/3.jpg)
Cegos – Daltônicos - Baixa visão
Foto: everystockphoto.com - namida-k
![Page 4: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/4.jpg)
Surdos
Foto: everystockphoto.com - jessicafm
![Page 5: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/5.jpg)
Mobilidade reduzida
![Page 6: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/6.jpg)
CaPtcHa
Pessoas são diferentes
![Page 7: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/7.jpg)
http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
![Page 8: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/8.jpg)
http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
![Page 9: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/9.jpg)
http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
![Page 10: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/10.jpg)
http://random.irb.hr/signup.php
http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
![Page 11: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/11.jpg)
http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
![Page 12: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/12.jpg)
Já testou o seu site?
Já testou seu site?
Foto: Flickr.com - Baddog_
![Page 13: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/13.jpg)
Já testou o seu site?
Acessível via teclado
Foto: Flickr.com - Baddog_
![Page 14: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/14.jpg)
Já testou o seu site?
![Page 15: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/15.jpg)
Já testou o seu site?
João é
tetraplégico
![Page 16: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/16.jpg)
Já testou o seu site?
Vídeos com legendas
![Page 17: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/17.jpg)
Já testou o seu site?
Michele é
surda
![Page 18: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/18.jpg)
Já testou o seu site?
Sem CSS
e imagens
Foto: Flickr.com - Baddog_
![Page 19: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/19.jpg)
Ou mesmo sem monitor
![Page 20: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/20.jpg)
Já testou o seu site?
Carlos é cego
![Page 21: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/21.jpg)
Acessibilidade na web
Beneficia pessoas com deficiência
![Page 22: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/22.jpg)
Acessibilidade é para todos !
![Page 23: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/23.jpg)
Usuários de Dispositivos Móveis
Foto: everystockphoto.com -bartimaeus-
![Page 24: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/24.jpg)
Deficiência temporária
Foto: Flickr.com - Tuftronic10000
![Page 25: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/25.jpg)
Medo
de usar o
computador
Foto: everystockphoto.com - Violator3
![Page 26: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/26.jpg)
Estatísticas
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
Fonte: http://www.cetic.br/
![Page 27: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/27.jpg)
Início de aprendizado
Nosso primeiro contato
![Page 28: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/28.jpg)
Idade Avançada
Nós, daqui
alguns
anos Foto: Flickr.com - Jacob Bøtter
![Page 29: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/29.jpg)
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/
![Page 30: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/30.jpg)
Aplicando acessibilidade
Web Content Accessibility
Guidelines (WCAG)
Versão 2.0 – 11 de dezembro de 2008
www.w3.org/TR/WCAG/
![Page 31: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/31.jpg)
Páginas Web Acessíveis
• Páginas Web Acessíveis
Dimensões e características da Web
brasileira: um estudo do .gov.br
2% das páginas
web do .gov.br são
acessíveis em 2010
![Page 32: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/32.jpg)
Páginas Web Acessíveis
2011
4,5% .gov.br
![Page 33: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/33.jpg)
Aplicando acessibilidade
E-Mag
Modelo de Acessibilidade em
Governo Eletrônico
Versão 3.0
http://emag.governoeletronico.gov.br
![Page 34: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/34.jpg)
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
![Page 35: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/35.jpg)
Estatísticas
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 36: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/36.jpg)
![Page 37: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/37.jpg)
![Page 38: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/38.jpg)
![Page 39: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/39.jpg)
![Page 40: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/40.jpg)
![Page 41: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/41.jpg)
![Page 42: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/42.jpg)
![Page 43: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/43.jpg)
Imagens acessíveis
![Page 44: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/44.jpg)
Cabeçalhos
<H1>Título Principal</H1>
<H2>Subtítulo</H2>
<H3>Sub-Subtítulo</H3>
<H2>Subtítulo</H2>
<H3>Sub-Subtítulo</H3>
<H4>....</H4>
![Page 45: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/45.jpg)
Contraste
![Page 46: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/46.jpg)
Formulários
![Page 47: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/47.jpg)
Formulários
<input type="checkbox" value="yes" name="apples">
Apples
<input type="checkbox" value="yes" name="oranges">
Oranges
<input type="checkbox" value="yes" name="lemons">
Lemons
<input type="checkbox" value="yes" name="limes">
Limes
![Page 48: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/48.jpg)
Formulários
<input type="checkbox" value="yes" id=“apples“ name="apples">
<label for=“apples"> Apples</label>
<input type="checkbox" value="yes" id=“oranges“ name="oranges">
<label for=“oranges"> Oranges</label>
<input type="checkbox" value="yes" id=“lemmons“ name="lemons">
<label for=“lemons"> Lemons</label>
<input type="checkbox" value="yes" id=“limes“ name="limes">
<label for=“limes"> Limes</label>
![Page 49: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/49.jpg)
Tabelas
![Page 50: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/50.jpg)
Tabelas
A5 - TIPO DE CONEXÃO PARA ACESSO À INTERNET NO
DOMICÍLIO Percentual sobre o total de domicílios com acesso à
Internet 1 Percentual (%) Modem Tradicional (acesso discado linha
telefônica) Banda Larga 2 Outros NS/NR 3 TOTAL Banda Larga
Modem digital via linha telefônica (tecnologia DSL) Modem via cabo
Conexão via rádio Conexão via satélite TOTAL BRASIL 20 66 23 25 14
3 6 10 ÁREA URBANA 19 66 24 26 14 3 6 9 RURAL 21 55 17 14 20 5 8
16 REGIÕES DO PAÍS SUDESTE 22 65 21 30 11 3 4 10 NORDESTE
19 64 12 32 18 1 10 9 SUL 13 71 34 12 22 3 8 10 NORTE 31 49 23 11
11 5 14 7 CENTRO-OESTE 13 67 34 18 13 2 8 13 RENDA FAMILIAR
Até R$465 16 51 14 20 14 3 12 21 R$466-R$930 22 61 18 24 15 4 4 14
R$931-R$1395 23 62 22 24 13 2 6 9 R$1396-R$2325 23 63 23 22 15 3
6 8 R$2326-R$4650 16 75 32 28 11 4 7 4 R$4651 ou mais 12 78 27 34
16 1 6 5 CLASSE SOCIAL 4 A 11 81 24 41 14 3 9 3 B 18 71 28 26 13 3
6 7 C 22 61 19 24 15 3 5 12 DE 26 41 10 15 15 2 3 29
![Page 51: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/51.jpg)
Acessível via teclado
![Page 52: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/52.jpg)
HTML e CSS
![Page 53: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/53.jpg)
Princípios do W3C
Web para todos,
em qualquer
dispositivo, em
qualquer lugar,
segura e
confiável!
Foto: everystockphoto.com - woodleywonderworks
![Page 54: Oficina de acessibilidade Secop2012](https://reader036.vdocuments.pub/reader036/viewer/2022081403/554bcc09b4c905706a8b47dc/html5/thumbnails/54.jpg)
Obrigado!
Reinaldo Ferraz [email protected]
Twitter: @reinaldoferraz
Fernanda Lobato [email protected]
Twitter: @egovbr
Leonardo Gleison [email protected]
Twitter: @leonardo_gf