Aula 07 acessibilidade

495 visualizações

Publicada em

Aula 07 acessibilidade

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
495
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
18
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aula 07 acessibilidade

  1. 1. Acessibilidade Cristiano Pires Martins Agradecimento à Professora Fabiana Pupim
  2. 2. Acessibilidade !  É o processo e as técnicas usadas para criar um site que pode ser utilizado por alguém com alguma deficiência. !  É uma categoria de usabilidade. !  Está relacionada ao contexto de uso de um software ou página web. !  Significa fazer um site que funcione para TODOS! 2
  3. 3. Acessibilidade !  A acessibilidade web lida com as deficiências: "  Visuais; "  Auditivas; "  Físicas; "  Fala; "  Cognitivas; "  Neurológicas. !  Além de projetar sites para pessoas mais velhas cujas habilidades estão mudando devido à idade. 3
  4. 4. Acessibilidade - Deficientes Visuais e Motores !  Muito utilizado softwares leitores de tela. !  O leitor de tela lê o texto em uma página web com base na marcação HTML. !  Com o uso do atributo alt na tag img, podemos descrever imagens do site e o leitor irá “falar” a descrição colocada na propriedade alt da imagem !  Exemplos: "  Jaws, Virtual Vision e Window-Eyes (Windows), "  e VoiceOver (MAC OsX) 4
  5. 5. Exemplo <img alt="Logotipo da Strada Transportadora" src="images/banner.png" /> 5
  6. 6. Hum... 6 E se eu quiser colocar mais detalhes da imagem? Irei colocar tudo na tag alt?
  7. 7. Acessibilidade - Deficientes Visuais e Motores !  Em descrições longas de imagem, adicionamos o atributo “longdesc” e o citamos na tag img. !  Para isto criamos um arquivo html normal e acione uma descrição mais longa da imagem. !  Exemplo: 7 <img alt="Logotipo da Strada Transportadora“ longdesc=“descricao.html” src="images/banner.png”/>
  8. 8. Arquivo descricao.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt" lang="pt"> <head> <title> Descrição do logotipo de Strada Transportadora </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" href="stylesheets/estilos.css" type="text/css“ media="all" /> </head> <body> <p> Logotipo de estrada transportadora é composto por um desenho em forma de rodovia com o letreiro transportadora abaixo</p> </body> </html> 8
  9. 9. Acessibilidade – Sem o Mouse !  Para pessoas que utilizam o teclado, podemos fazer uso da tabulação da página de forma ordenada. !  Para isto usamos o atributo tabindex e colocamos a numeração correta nos links. !  Exemplo: <a tabindex=“1” href=“produtos.html”> ....</ a> 9
  10. 10. Exemplo <ul id="nav"> <li><a tabindex="1" class="active" title="Strada Transportadora" href="index.html"> Home </a></li> <li><a tabindex="2“ title="Empresa" href="empresa.html"> Empresa </ a></li> <li><a tabindex="3“ title="Serviços" href="servicos.html"> Serviços </a></ li> <li><a tabindex="4“ title="Contato" href="contato.html"> Contato </a></li> </ul> 10
  11. 11. WCAG !  A WCAG (Web Content Accessibility Guidelines) – Diretrizes de Acessibilidade do Conteúdo Web, foi criado pela W3C para determinar um conjunto de diretrizes que permitam construir sites acessíveis. !  Ela possui uma lista de prioridades definidas em 14 diretrizes com 3 níveis de pontos de verificação. !  A lista de verificação e suas diretrizes são encontradas no site: http://www.w3.org/WAI/GL 11
  12. 12. Acessibilidade - Pessoas Daltônicas !  As cores ajudam a manter seu site acessível para pessoas daltônicas. !  Temos 3 tipos de daltonismo: "  Sem cores verdes (deutanopia) "  Sem cores azuis (tritanopia) "  Sem cores vermelhas (protanopia) 12
  13. 13. Acessibilidade - Pessoas Daltônicas !  Para auxiliar na visão de pessoas com daltonismo, utilizamos as cores de fundo. !  Certifique-se que todas as informações do site sejam oferecidas com a cor e também que estejam disponíveis sem a cor. !  O uso de softwares de verificação de acessibilidade auxiliam o desenvolvedor. Exemplo: Cynthia Says. 13
  14. 14. Links úteis !  Acesso digital: "  http://acessodigital.net/artigos.html !  Vídeo: "  http://www.youtube.com/watch?v=hFI4CuxQjSA !  WebAim "  http://webaim.org/techniques/dreamweaver !  Web Accessibility Evaluation Tools List "  http://www.w3.org/WAI/ER/tools/ !  Acessibilidade.net "  http://www.acessibilidade.net/web/sawdesc.php#sitios 14
  15. 15. Links úteis !  Acessibilidadebrasil.org.br "  http://www.acessibilidadebrasil.org.br/versao_anterior/ index.php?itemid=41 !  dasilva.org.br "  http://www.dasilva.org.br !  w3.org "  http://www.w3.org/TR/WCAG20-TECHS/ 15
  16. 16. 16 Referências !  DIAS, Cláudia. Usabilidade na WEB. Criando portais mais acessíveis. 2ª Ed. Alta Books, 2006. !  WATRALL, E; SIARTO, J. Use A Cabeça! Web Design. Alta Books, 2009.

×