O documento discute a importância da acessibilidade na web para pessoas com deficiências. Apresenta as diretrizes WCAG para tornar sites acessíveis e exemplos de como aplicá-las corretamente, como fornecer texto alternativo para imagens e compatibilidade com leitores de tela. Também mostra estatísticas sobre a população brasileira com deficiência e o prêmio W3C para projetos acessíveis.

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

2. 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.

3. Acessibilidade, para quem?

4. Cegos – Daltônicos - Baixa visão
Foto: everystockphoto.com - namida-k

5. Surdos
Foto: everystockphoto.com - jessicafm

6. Mobilidade reduzida

7. 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

8. Acessibilidade na web
Pessoas são diferentes

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

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

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

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

13. Aplicando acessibilidade
O caminho para a
acessibilidade na web
Foto: everystockphoto.com - Colin Gregory Palmer

14. 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/

15. 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.

16. Aplicando acessibilidade
<img src="foto.jpg" alt="" />
<img src="foto.jpg" alt="" />

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

18. Daltonismo
Visão normal

19. Daltonismo
Protanopia (Deficiências em vermelho)

20. Daltonismo
Deuteranopia (Deficiências em verde)

21. Daltonismo
Tritanopia (Deficiências em azul)

22. Daltonismo
Acromatopsia (Deficiências todas as cores)

23. Daltonismo

24. Você consegue ler este texto.

25. Você consegue ler este texto?

26. Você não consegue ler este texto!

27. 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.

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

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

30. 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.

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

32. 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.

33. • Maximize a compatibilidade com as tecnologias
atuais e futuras.

34. • Maximize a compatibilidade com as tecnologias
atuais e futuras.
http://validator.w3.org/ http://www.w3.org/TR/

36. Phone
<input type=“tel" name=“tel" placeholder="digite
número de telefone" required />
Website
<input type="url" name="website" required />

39. Vídeo em HTML5
<video>
http://www.w3.org/2009/02/ThisIsCoffee.html

40. Vídeo em HTML5

41. Vídeo em HTML5

42. 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

43. http://premio.w3c.br/

44. Categorias
• Pessoas / Personalidades / Instituições
• Projetos Web
– Governo / Instituições
– Serviços / E-commerce
– Entretenimento / Cultura / Educação / Blogs
• Tecnologias assistivas / Aplicativos

45. 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

50. Obrigado!
Reinaldo Ferraz
W3C Escritório Brasil
www.w3c.br
Twitter: @w3cbrasil
reinaldo@nic.br
Twitter: @reinaldoferraz