Por uma web para todos! Iseminar 2011 Reinaldo Ferraz · Já testou o seu site? De acordo com o...
Transcript of Por uma web para todos! Iseminar 2011 Reinaldo Ferraz · Já testou o seu site? De acordo com o...
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 equipe em tempo integral,
• participação do público
para colaborativamente
desenvolver padrões universais
para a Web.
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.
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 respostas.
Uso de cores
Obrigado por suas 715 respostas. Clique
no botão verde para salvar ou no vermelho
para apagar todas as respostas.
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...
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 2010 – CGI.br
Pessoas que nunca acessaram a internet, mas usaram um computador.
Motivos pelos quais nunca utilizou a internet
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 – 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/
Já testou o seu site?
Vídeo
Arquitetura inclusiva
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?
Márcia é cega.
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, 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
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 Gordon Foto: 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
O caminho para a
acessibilidade na web
Foto: everystockphoto.com - Colin Gregory Palmer
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/
Versão 2.0 – 11 de dezembro de 2008
www.w3.org/TR/WCAG/
WCAG 2.0 4 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
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=“Foto das teclas W, 3 e
C fora do teclado" />
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 respectivos campos
Baseado no post do blog Line 25 http://line25.com/articles/10-usability-crimes-you-really-shouldnt-commit
Aciona aqui Clicando aqui
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
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.
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.com - woodleywonderworks
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
Twitter: @reinaldoferraz