aula 07 acessibilidade
TRANSCRIPT
Acessibilidade
Cristiano Pires Martins Agradecimento à Professora Fabiana Pupim
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
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
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
Exemplo
<img alt="Logotipo da Strada Transportadora" src="images/banner.png" />
5
Hum...
6
E se eu quiser colocar mais detalhes da
imagem? Irei colocar tudo na
tag alt?
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”/>
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
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
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
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
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
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
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
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
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.