50
Acessibilidade na web Painel Aplicativos de Acessibilidade Campus Party Recife 28 de julho de 2012 Reinaldo Ferraz W3C.br twitter.com/reinaldoferraz

Acessibilidade na Web - CPBR Recife 2012

Embed Size (px)

Citation preview

Page 1: Acessibilidade na Web - CPBR Recife 2012

Acessibilidade na web

Painel Aplicativos de Acessibilidade

Campus Party Recife

28 de julho de 2012

Reinaldo Ferraz – W3C.br

twitter.com/reinaldoferraz

Page 2: Acessibilidade na Web - CPBR Recife 2012

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.

Page 3: Acessibilidade na Web - CPBR Recife 2012

Acessibilidade, para quem?

Page 4: Acessibilidade na Web - CPBR Recife 2012

Cegos – Daltônicos - Baixa visão

Foto: everystockphoto.com - namida-k

Page 5: Acessibilidade na Web - CPBR Recife 2012

Surdos

Foto: everystockphoto.com - jessicafm

Page 6: Acessibilidade na Web - CPBR Recife 2012

Mobilidade reduzida

Page 7: Acessibilidade na Web - CPBR Recife 2012

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 8: Acessibilidade na Web - CPBR Recife 2012

Acessibilidade na web

Pessoas são diferentes

Page 9: Acessibilidade na Web - CPBR Recife 2012

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

Page 10: Acessibilidade na Web - CPBR Recife 2012

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

Page 11: Acessibilidade na Web - CPBR Recife 2012

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

Page 12: Acessibilidade na Web - CPBR Recife 2012

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

Page 13: Acessibilidade na Web - CPBR Recife 2012

Aplicando acessibilidade

O caminho para a

acessibilidade na web

Foto: everystockphoto.com - Colin Gregory Palmer

Page 14: Acessibilidade na Web - CPBR Recife 2012

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 15: Acessibilidade na Web - CPBR Recife 2012

Princípio 1: Perceptível

Isto significa que os usuários devem ser capazes de perceber a

informação que está sendo apresentada, não podendo ser invisível para todos os seus sentidos.

Page 16: Acessibilidade na Web - CPBR Recife 2012

Aplicando acessibilidade

<img src="foto.jpg" alt="" />

<img src="foto.jpg" alt="" />

Page 17: Acessibilidade na Web - CPBR Recife 2012

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" />

Page 18: Acessibilidade na Web - CPBR Recife 2012

Daltonismo

Visão normal

Page 19: Acessibilidade na Web - CPBR Recife 2012

Daltonismo

Protanopia (Deficiências em vermelho)

Page 20: Acessibilidade na Web - CPBR Recife 2012

Daltonismo

Deuteranopia (Deficiências em verde)

Page 21: Acessibilidade na Web - CPBR Recife 2012

Daltonismo

Tritanopia (Deficiências em azul)

Page 22: Acessibilidade na Web - CPBR Recife 2012

Daltonismo

Acromatopsia (Deficiências todas as cores)

Page 23: Acessibilidade na Web - CPBR Recife 2012

Daltonismo

Page 24: Acessibilidade na Web - CPBR Recife 2012

Você consegue ler este texto.

Page 25: Acessibilidade na Web - CPBR Recife 2012

Você consegue ler este texto?

Page 26: Acessibilidade na Web - CPBR Recife 2012

Você não consegue ler este texto!

Page 27: Acessibilidade na Web - CPBR Recife 2012

Princípio 2: Operável

Isto significa que os usuários devem ser capazes de operar a interface; a interface de interação não pode exigir interação que o usuário não possa executar.

Page 28: Acessibilidade na Web - CPBR Recife 2012

• Não utilize conteúdo que cause convulsões.

Page 29: Acessibilidade na Web - CPBR Recife 2012

• Não utilize conteúdo que cause convulsões.

Page 30: Acessibilidade na Web - CPBR Recife 2012

Princípio 3: Compreensível

Isto significa que os usuários devem ser capazes de compreender as

informações, bem como o funcionamento da interface do usuário; o conteúdo ou operação não pode ir além de sua compreensão.

Page 31: Acessibilidade na Web - CPBR Recife 2012

• Ajude os usuários a evitar e corrigir erros.

Page 32: Acessibilidade na Web - CPBR Recife 2012

Princípio 4: Robusto

Isto significa que os usuários devem ser capazes de acessar o

conteúdo conforme as tecnologias evoluem; como a tecnologia e os agentes de usuário evoluem, o conteúdo deve permanecer acessível.

Page 33: Acessibilidade na Web - CPBR Recife 2012

• Maximize a compatibilidade com as tecnologias atuais e futuras.

Page 34: Acessibilidade na Web - CPBR Recife 2012

• Maximize a compatibilidade com as tecnologias atuais e futuras.

http://validator.w3.org/ http://www.w3.org/TR/

Page 35: Acessibilidade na Web - CPBR Recife 2012
Page 36: Acessibilidade na Web - CPBR Recife 2012

Phone

<input type=“tel" name=“tel" placeholder="digite

número de telefone" required />

Website

<input type="url" name="website" required />

Page 37: Acessibilidade na Web - CPBR Recife 2012
Page 38: Acessibilidade na Web - CPBR Recife 2012
Page 39: Acessibilidade na Web - CPBR Recife 2012

Vídeo em HTML5

<video>

http://www.w3.org/2009/02/ThisIsCoffee.html

Page 40: Acessibilidade na Web - CPBR Recife 2012

Vídeo em HTML5

Page 41: Acessibilidade na Web - CPBR Recife 2012

Vídeo em HTML5

Page 42: Acessibilidade na Web - CPBR Recife 2012

ARIA e HTML5

<a href="#“

id="handle_zoomSlider“

role="slider“

aria-orientation="vertical“

aria-valuemin="0“

aria-valuemax="17“

aria-valuetext="14“

aria-valuenow="14" >

<span>11</span>

</a>

http://www.w3.org/WAI/intro/aria

Page 43: Acessibilidade na Web - CPBR Recife 2012

http://premio.w3c.br/

Page 44: Acessibilidade na Web - CPBR Recife 2012

Categorias

• Pessoas / Personalidades / Instituições

• Projetos Web – Governo / Instituições

– Serviços / E-commerce

– Entretenimento / Cultura / Educação / Blogs

• Tecnologias assistivas / Aplicativos

Page 45: Acessibilidade na Web - CPBR Recife 2012

Premiação

• 1º Colocado:

– R$ 5.000,00 (Cinco mil reais) em dinheiro

– Troféu

– Participar do evento W4A (http://www.w4a.info/) Durante a

conferência www2013 no Rio de Janeiro

Trabalho exibido em publicação do W3C.br

• 2º Colocado:

– R$ 3.000,00 (Três mil reais) em dinheiro

– Troféu

– Trabalho exibido em publicação do W3C.br

• 3º Colocado:

– R$ 1.500,00 (Mil e quinhentos reais) em dinheiro

– Troféu

– Trabalho exibido em publicação do W3C.br

Page 46: Acessibilidade na Web - CPBR Recife 2012
Page 47: Acessibilidade na Web - CPBR Recife 2012
Page 48: Acessibilidade na Web - CPBR Recife 2012
Page 49: Acessibilidade na Web - CPBR Recife 2012
Page 50: Acessibilidade na Web - CPBR Recife 2012

Obrigado!

Reinaldo Ferraz W3C Escritório Brasil

www.w3c.br Twitter: @w3cbrasil

[email protected]

Twitter: @reinaldoferraz