Sie sind auf Seite 1von 91

Acessibilidade na web

Por uma web para todos!

Iseminar 2011 22 de outubro de 2011 Reinaldo Ferraz W3C.br

Um pouco do W3C

um consrcio internacional, criado em 1994 por Tim BernersLee com organizaes filiadas, uma equipe em tempo integral, participao do pblico para colaborativamente desenvolver padres universais para a Web.

O W3C no Brasil

O escritrio brasileiro comeou suas atividades em outubro de 2007. uma iniciativa do CGI.br, que o responsvel por coordenar e integrar as iniciativas de servios da Internet no Pas e do NIC.br, criado para implementar as decises e os projetos do Comit Gestor da Internet no Brasil.

Acessibilidade na web: A quem se destina?

Foto: everystockphoto.com - namida-k

Cegos Daltnicos - Baixa viso

Foto: everystockphoto.com - jessicafm

Surdos

Mobilidade reduzida

Entendendo as barreiras

Foto de um ursinho de pelcia marrom com um lao quadriculado preto e branco amarrado ao pescoo

Uso de cores

Obrigado por suas 715 respostas. Clique no boto verde para salvar ou no vermelho para apagar todas as respostas.

Uso de cores

Obrigado por suas 715 respostas. Clique no boto verde para salvar ou no vermelho para apagar todas as respostas.

Uso de cores

Obrigado por suas 715 respostas. Clique no boto verde para salvar ou no vermelho para apagar todas as respostas.

Essa ao no poder ser desfeita...

Uso de cores

A acessibilidade em um vdeo.

Vdeo de Tim Berners-Lee sem udio ou legendas

Voc

Voc entendeu

Voc entendeu alguma

Voc entendeu alguma coisa?

No?

Uma

Uma pessoa

Uma pessoa surda

Uma pessoa surda tambm no...

Vdeo de Tim Berners-Lee sem som e com legendas

Acessibilidade na web: A quem se destina?

Acessibilidade para todos !

Foto: everystockphoto.com -bartimaeus-

Usurios de Dispositivos Mveis

Foto: Flickr.com - Tuftronic10000

Deficincia temporria

Medo de usar o computador


Foto: everystockphoto.com - Violator3

Acessibilidade na web: A quem se destina?

Motivos pelos quais nunca utilizou a internet

55%
Falta de habilidade com o computador/internet
Pessoas que nunca acessaram a internet, mas usaram um computador. Fonte: Pesquisa TIC Domiclios 2010 CGI.br

Incio de aprendizado

Nosso primeiro contato

Idade Avanada

Ns, daqui alguns anos


Foto: Flickr.com - Jacob Btter

Estatsticas

Nmero de pessoas com 60 anos ou mais no mundo: 1950 205 milhes 2000 606 milhes

Estimativa para 2050 Quase 2 bilhes de pessoas com mais de 60 anos. (+ de 20% da populao)
Foto: Flickr.com - Jacob Btter

Fonte: http://www.un.org/esa/population/publications/worldageing19502050/

J testou o seu site?

Vdeo Arquitetura inclusiva

Acessvel via teclado

Foto: Flickr.com - Baddog_

J testou o seu site?

J testou o seu site?

Joo tetraplgico

Foto de Mara Soares (cortesia Horcio 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?

Mrcia 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 populao brasileira (mais de 24 milhes) era portadora de, pelo menos, uma das deficincias investigadas pela pesquisa. - Em 2000, existiam 148 mil pessoas cegas e 2,4 milhes com grande dificuldade de enxergar - O nmero de surdos no Brasil era de 166.400. Alm disso, cerca de 900 mil pessoas declararam ter grande dificuldade permanente de ouvir. - Pessoas com tetraplegia, paraplegia ou hemiplegia permanente so 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 acessvel?

Quais as vantagens de um site acessvel?

Convencer seu cliente

Quais as vantagens de um site acessvel?

Custo baixo no incio do projeto


Foto: everystockphoto.com - fluzo

Foto: everystockphoto.com -James Gordon

O site fica mais fcil de usar

Foto: everystockphoto.com -James Gordon Foto: everystockphoto.com - lusi

Manuteno mais rpida e barata

Melhor performance

Vantagem sobre a concorrncia

Foto: everystockphoto.com - Bill Tracey

J testou o seu site?

Vdeo O mundo adaptado

O caminho para a acessibilidade na web

Foto: everystockphoto.com - Colin Gregory Palmer

Aplicando acessibilidade

Utilizar padres web

www.w3.org

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)


Verso 1.0 5 de maio de 1999 www.w3.org/TR/WCAG10/ Verso 2.0 11 de dezembro de 2008 www.w3.org/TR/WCAG/

WCAG 2.0

4 Princpios

WCAG 2.0

Entendendo as Recomendaes

Recomendaes (12 no total)

Critrios de sucesso
Como Cumprir os critrios de sucesso Entendendo os critrios de sucesso

Tcnicas suficientes e aconselhadas

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

Viso normal

Daltonismo

Protanopia (Deficincias em vermelho)

Daltonismo

Deuteranopia (Deficincias em verde)

Daltonismo

Tritanopia (Deficincias em azul)

Daltonismo

Acromatopsia (Deficincias todas as cores)

Site acessvel feio

Padres 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

Foto: everystockphoto.com - michael morel

Facilidade de uso

Aplicando acessibilidade

Crimes de usabilidade que no devemos cometer


Rtulos de formulrios que no esto associados respectivos campos

Clicando aqui

Aciona aqui

Baseado no post do blog Line 25 http://line25.com/articles/10-usability-crimes-you-really-shouldnt-commit

Aplicando acessibilidade

Crimes de usabilidade que no devemos cometer


Um logo que no tem link para a pgina principal

Voltar para a pgina principal

Baseado no post do blog Line 25 http://line25.com/articles/10-usability-crimes-you-really-shouldnt-commit

Aplicando acessibilidade

Crimes de usabilidade que no devemos cometer


Sublinhar contedo que no link

Nossa empresa informa de maneira clara e direta que as funes delegadas a seus funcionrios devero ser cumpridas integralmente.

Isso aqui no link?

Baseado no post do blog Line 25 http://line25.com/articles/10-usability-crimes-you-really-shouldnt-commit

Contedo

Aplicando acessibilidade

Escrever a arte de cortar palavras

Ento, Resuma!

Arquitetura da Informao

Foto: everystockphoto.com - Andre Charland

Aplicando acessibilidade

Eletrodomsticos ou Eletroportteis?

Foto: everystockphoto.com - bcmom

Aplicando acessibilidade

Menos (muito) mais!

Aplicando acessibilidade

Princpios do W3C

Web para todos, em qualquer dispositivo, em qualquer lugar, segura e confivel!

Foto: everystockphoto.com - woodleywonderworks

Vdeo da violinista surda

Princpios do W3C

As diferenas existem para serem respeitadas

Obrigado!

Reinaldo Ferraz W3C Escritrio Brasil www.w3c.br Twitter: @w3cbrasil


reinaldo@nic.br Twitter: @reinaldoferraz