Aula 07 acessibilidade

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.

Aula 07 acessibilidade

Mais conteúdo relacionado

Mais procurados (20)

Destaque (20)

Semelhante a Aula 07 acessibilidade (20)

Mais de Cristiano Pires Martins (12)

Último (20)

Aula 07 acessibilidade