O documento discute a importância da acessibilidade na web para pessoas com deficiências. Ele explica como tornar sites acessíveis para deficientes visuais, auditivos, físicos e cognitivos através do uso correto de tags HTML, atributos como "alt" e "longdesc", e organização da tabulação. Também fornece diretrizes sobre como tornar conteúdo acessível para daltônicos e links úteis sobre o assunto.
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. 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. 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
6. Hum...
6
E se eu quiser colocar
mais detalhes da
imagem?
Irei colocar tudo na
tag alt?
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. 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. 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
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. 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. 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
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.