Professional Documents
Culture Documents
www.governoeletronico.gov.br
Cartilha Tcnica
Documento de Referncia
Verso 2.0
14 de Dezembro de 2005
SUMRIO
1 Introduo .................................................................................................................3
2 Recomendaes de Acessibilidade para a Construo e Adaptao de
Contedos na Internet...................................................................................................4
2.1
2.2
5.2
6 Leitura complementar.............................................................................................44
1 Introduo
Buscando atender e propiciar a acessibilidade dos stios governamentais, como proposto em
eMAG, Acessibilidade de Governo Eletrnico Modelo, foi desenvolvida esta Cartilha Tcnica
de recomendaes. Enquanto a Viso do Cidado tratada no documento Modelo de
Acessibilidade preocupa-se com o entendimento facilitado do Modelo de Acessibilidade para
a maioria dos cidados brasileiros, a Viso Tcnica focaliza o trabalho em uma forma
adequada para um outro perfil de pessoa, o desenvolvedor de stios e profissionais
relacionados a esta tarefa.
O presente documento prope-se a detalhar a Viso Tcnica do Modelo de Acessibilidade,
expressando detalhadamente nossa proposta para a implementao das Recomendaes de
Acessibilidade para a Construo ou Adaptao de Contedos do Governo Brasileiro na
Internet.
<html lang=pt-br>
<head></head>
<body><p>
Gostaria de saber a origem da feijoada? Muitos atribuem aos escravos, outros aos
portugueses, outros ainda aos franceses.
</p></body></html>
<html lang=pt-br>
<head></head>
<body><p>
Me, ele est dizendo para ir. Ele disse, <span lang=fr> Allons, Madame
plaisante!
</p></body></html>
Recomendao 1.3 - Fornecer meios para ignorar e explicar inseres de arte ASCII com
vrias linhas, tais como links de ncora ou pginas alternativas.
Exemplo: Abaixo um exemplo de cdigo que pode ser usado para saltar arte ASCII :
<p>
wWWw
(______)
Y
\|/
\ | /
|
^^^^^^^^
Recomendao 1.4 - Assegurar que todas as informaes veiculadas com cor estejam
tambm disponveis sem cor.
Procedimento azul.
Procedimento vermelho.
Nesse exemplo, para os casos em que o usurio no possa ver atravs de um monitor colorido,
mais fcil localizar a informao porque est localizada textualmente.
Recomendao 1.5 - Assegurar que a combinao de cores entre o fundo e o primeiro plano
seja suficientemente contrastante para poder ser vista por pessoas com cromodeficincias,
bem como pelas que utilizam monitores de vdeo monocromticos.
Usar uma combinao de cores que oferea um bom contraste entre texto e o fundo. Produza
para suas pginas um conjunto de cores que possa ser visto tanto em monitores coloridos
como em monitores monocromticos.
TEXTO ACESSVEL
TEXTO INACESSVEL
Recomendao 1.6 - Organizar os documentos de tal forma que possam ser lidos sem recurso
folhas de estilo. Por exemplo, se um documento em HTML for reproduzido sem as folhas de
estilo que lhe esto associadas, deve continuar a ser possvel l-lo.
Recomendao 1.7 - No usar concepes que possam provocar intermitncia da tela, at
que os leitores de tela ou navegadores do usurio possibilitem o seu controle.
Exemplo: Podem ocorrer no uso de flash, applet, gif animado, scripts, entre outros, que
permitem imagens piscantes.
Obs: Pessoas com epilepsia fotosensitiva podem desencadear um ataque epilptico com o
cintilar ou piscar numa banda de 4 a 59 intermitncias por segundo (Hertz), com um pico nas
8
20 intermitncias por segundo, bem como com alteraes rpidas do escuro para a luz (como
sucede com as lmpadas das discotecas).
Recomendao 1.8 - Criar uma seqncia lgica de tabulao para percorrer links, controles
de formulrios e objetos.
A tecla TAB pode ser usada para navegar dentro das pginas. Portando, as marcaes devem
ser dispostas para que sejam navegadas de forma linear. O comando TABINDEX permite que
voc estabelea uma ordem lgica, ao usar a tecla TAB eles surgem na ordem correta (para
navegadores que suportam o atributo tabkey). O TABINDEX trabalha com os elementos: <a>,
<area>, <button>, <input>, <object>, <select> e <textarea>.
No cdigo html:
<form method=post action=home.htm>
Qual a sua cor favorita? <br> <br>
Nome:
<input type=text name=tboxin tabindex=1 size=20>
<br><br>
<input type=checkbox name=cb1 value=checkbox1
tabindex=2> Vermelho <br>
<input type=checkbox name=cb3 value=checkbox3
tabindex=3> Azul <br>
<input type=submit value=enviar tabindex=4>
<input type=reset value=apagar tabindex=5>
</form>
Apesar de poder controlar a ordem da tecla TAB, o ideal que voc crie os formulrios de
forma lgica. O TABINDEX altamente recomendado para o caso dos campos obrigatrios de
formulrios extensos.
Recomendao 1.9 - Utilizar a linguagem mais clara e simples possvel, logicamente,
adequada ao contedo do stio. Siga estas instrues de redao:
Crie cabealhos e as descries dos links de forma clara e concisa. Avalie todos os
cabealhos, notas, e menus para ver se as palavras chaves significam exatamente o
que se pretende, e se existem mais palavras em comum que tenham o mesmo
significado;
Evite o uso de linguagem especializada com vocabulrio familiar, a no ser que seja
fornecida uma explicao mais extensa;
Construa frases curtas para os links, mas com suficiente significado, de forma que
faam sentido quando lidas fora do contexto, isoladas ou como parte de uma srie de
links.
10
Para uma imagem meramente ilustrativa ou representaes grficas de texto, faz-se apenas
uma breve descrio desta:
No cdigo html:
<img src=carro.jpg alt=Foto de um carro amarelo.>
No cdigo html:
<img src=titulo.gif alt=A pedra e o metal>
O atributo longdesc foi criado para situaes em que a descrio a ser feita deve ser mais
longa do que a permitida pelo atributo alt.
No cdigo html:
<img src=orquideas.jpg longdesc=orquideas.htm alt=Foto de
diferentes orqudeas.>
O documento orquideas.htm possui um texto com a descrio mais detalhada da imagem.
No caso de grficos assegurar que os leitores de tela possam extrair a informao significativa.
Por exemplo, uma descrio textual da informao transmitida atravs de um grfico em pizza
deve estar disponvel atravs da utilizao do alt ou longdesc de maneira que os dados do
grfico possam ser compreendidos pelo usurio.
11
No cdigo html:
<img src=grafico.gif
longdesc=grafico.htm
alt=distribuio de espao em
pginas>
Recomendao 1.12 - Fornecer links de texto redundantes relativos a cada regio ativa de um
mapa de imagem armazenado tanto no cliente quanto no servidor. No esquecendo de
adicionar texto equivalente imagem mostrada, no caso o alt ou longdesc.
No cdigo html:
<img src=img/imgmap1.gif alt=o texto alternativo.title=cones
para as sees do stio usemap=#map1 border=0>
<map name=map1>
<area coords=0,0,39,39 href=a.htm alt=link seo a do stio. >
<area coords=40,0,79,39 href=b.htm alt=link seo b do stio. >
</map> <map name=map2>
[<a href=a.htm>seo a</a> | <a href=b.htm>seo b</a> ]
</map>
Observao: o texto alt que se encontra no elemento img informa ao usurio que existe um
equivalente textual. No descreve, no entanto, a imagem por si s, para tanto, utiliza-se o
atributo longdesc.
12
Recomendao 1.14 - Em tabelas de dados com dois ou mais nveis lgicos de cabealhos,
sejam de linha ou de coluna, utilizar marcaes para associar as clulas de dados s clulas
de cabealho. Organize tabelas complexas de forma que possa identificar facilmente suas
divises.
A tabela seria mostrada da seguinte maneira no navegador:
13
Nota: no caso de utilizar tabelas para formatar pginas (em vez de CSS), ento NO deve usar
a notao existente para tabelas de dados - como th, thead, tbody, scope, colgroup, etc
- pois so elementos utilizados para identificar e manipular os dados.
14
Forma correta
<frame name=frame_foto src=home.html>
Em que home.html deve conter o seguinte:
<img src=home.gif alt=Fotografia de uma casa.>
Forma errada
<frame name=frame_foto src=home.gif>
Se a fonte do frame for prprio arquivo de imagem, no possvel dar um equivalente textual
imagem. A descrio do frame cabe ao documento HTML chamado pelo frame.
Recomendao 1.16 - Assegurar a acessibilidade do contedo de frames, fornecendo uma
pgina alternativa atravs do elemento noframes.
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Frameset//EN>
<html lang=pt-br>
<head>
<title>este o topo.html</title> </head>
<frameset cols=50%, 50% title=O nosso documento grande>
<frame src=main.html title=Onde os assuntos do ndice so visualizados>
<frame src=table_of_contents.html title=ndice> </frameset> <noframes>
<body> <a href=table_of_contents.html>ndice.</a>
<!-- os outros links de navegao que se encontram disponveis em main.html encontram-se
aqui tambm. -->
</body> </noframes> </html>
O cdigo abaixo cria um layout com dois frames em navegadores que suportam frames,
enquanto que o elemento noframes gera uma nica janela de contedo que mostrada nos
navegadores que no suportam frames.
15
Recomendao 1.17- Dar a cada frame um ttulo que facilite a identificao dos frames e sua
navegao.
<frame src=f1.htm title=Ttulo e frame da barra de navegao principal>
<frame src=f3.htm title=Frame para visualizao do contedo>
Observao: O mesmo processo ocorre com <iframes>.
Recomendao 1.18 - Descrever a finalidade dos frames e o modo como se relacionam entre
si, se isso no for bvio a partir unicamente dos ttulos, fornea uma descrio mais detalhada.
Evite a criao de links que usem javascript tais como URL. Se um usurio no usar scripts,
ento no ser capaz de encontrar os links, uma vez que o navegador no consegue criar o
contedo link. Isto um link considerado como beco sem sada para um navegador em que
os scripts no so suportados ou gravados.
16
Recomendao 1.20 - Assegurar que todas as pginas possam ser utilizadas mesmo que os
programas interpretveis, os applets ou outros objetos programados tenham sido desativados
ou no sejam suportados. Sempre que tiver script associe logo a seguir o elemento noscript.
Uma apresentao pode incluir qualquer forma de multimdia, como um filme, animao ou
apresentao com slides. As legendas (que fornecem acesso s faixas udio) e as descries
em udio (que fornecem acesso s faixas visuais) constituem alternativas equivalentes a estes
tipos de apresentao. A faixa que contm a legenda uma alternativa para espectadores
surdos ou com dificuldades auditivas. A faixa de descrio em udio uma alternativa para
pessoas cegas ou com baixa viso.
Mantenha sempre presente que para pessoas que no tm acesso aos dispositivos de
reproduo multimdia, ou para pessoas surdas ou cegas, a transcrio do udio e do udiodescrio continuam a ser as melhores alternativas.
Recomendao 1.23 - Evitar pginas contendo movimento, at que os agentes do usurio
possibilitem o controle e a imobilizao do contedo.
Quando uma pgina incluir contedo em movimento, fornea um mecanismo dentro do script
ou do applet que permita aos usurios congelar o movimento ou atualiz-lo, quando o usurio
desejar.
Ao usar folhas de estilo com script para criar movimento, d a possibilidade ao usurio de
desligar ou alterar os parmetros de uma forma fcil.
Recomendao 1.24 No sendo possvel criar uma pgina acessvel, crie uma pgina
alternativa, juntamente com uma justificativa apropriada, que utilize tecnologias em
conformidade com este documento - acessvel, que contenha informaes (ou funcionalidade)
equivalentes e seja atualizada to freqentemente quanto a pgina original, considerada
inacessvel.
18
19
o cdigo est dentro das regras da linguagem utilizada. Para maiores informaes acesse a
pgina do W3 Consortium sobre o assunto: http://www.w3.org/QA/Tips/Doctype.
Recomendao 2.2 - Utilizar unidades relativas, e no absolutas, nos valores dos atributos de
tabelas, textos, etc. Em CSS no use valores absolutos como pt ou px e sim valores
relativos como o em, ex ou em porcentagem.
No cdigo html:
<ol type=a> <li>Lista de instrumentos
encontrados numa banda de rock:</li>
<ol type=1>
<li>Guitarra</li>
<li>Baixo</li>
<li>Bateria</li>
</ol> </ol>
20
Em pginas que possuem limite de tempo para serem respondidas, o usurio deve ser alertado
antes do trmino do tempo, e dever ser dado um tempo suficiente para leitura e
preenchimento.
Recomendao 2.5 - No utilizar marcaes para redirecionar as pginas automaticamente,
at que os leitores de tela ou navegadores do usurio possibilitem interromper o processo.
Nunca use os atributos meta-refresh para redirecionar para uma nova pgina ao invs disso
deve-se configurar o servidor para que execute o redirecionamento de forma transparente ao
usurio. Utilize o cdigo apropriado HTTP(301). O uso de cabealhos HTTP prefervel,
porque reduz o trfego de Internet e os tempos de download, pode ser aplicado a documentos
non-HTML, e pode ser utilizado por agentes que apenas fazem uso do HEAD (e.g.,
verificadores de links). Os cdigos de status do tipo 30x, tambm fornecem informao como
moved permanently (movido permanentemente) ou moved temporarily (movido
temporariamente) os quais no podem ser dados pelo refresh do META.
Como soluo menos indicada pode-se substituir a pgina que vai ser redirecionada, por outra
esttica que contenha um link normal para a nova pgina.
Recomendao 2.6 - No provocar o aparecimento de janelas de sobreposio, janelas popup
ou outras quaisquer, assim como nenhuma modificao do contedo sem que o usurio seja
informado disso. No recomendvel para o usurio, que links abram em uma nova janela.
Se o usurio utiliza um navegador com tela cheia no poder voltar para a pgina anterior,
tambm o histrico e a possibilidade de ir e voltar a pginas visitadas ficam comprometidos.
Caso voc tenha uma real necessidade que sua pgina abra uma outra janela, informe ao
usurio:
<a href=outroSitio.htm target=_blank>Link para outro stio, que se abrir em uma
nova janela do navegador.</a>
Recomendao 2.7 - Sempre que existir uma linguagem de marcao apropriada, utilizar
marcaes em vez de imagens para transmitir informaes, um exemplo a linguagem
MathML que permite a criao de frmulas matemticas somente utilizando-se das tags
apropriadas.
21
Exemplo: No caso de equaes matemticas use MathML para sua construo e folhas de
estilo para formatar o texto e controlar o layout. Evite tambm usar imagens para representar
texto.
No cdigo html:
<semantics>
<mrow> <msubsup>
<mo>?</mo>
<mn>0</mn>
<mi>t</mi>
</msubsup>
<mfrac> <mrow>
<mo>d</mo>
<mi>x</mi></mrow>
<mi>x</mi>
</mfrac></mrow>
<annotation-xml encoding=MathML-Content>
<apply><int/>
<bvar><ci>x</ci></bvar>
<lowlimit><cn>0</cn></lowlimit>
<uplimit><ci>t</ci></uplimit>
<apply><divide/>
<cn>1</cn>
<ci>x</ci>
</apply></apply>
</annotation-xml>
</semantics>
Existem programas que convertem equaes para MathML. Para maiores informaes sobre
este formato acesse a pgina do W3 Consortium: http://www.w3.org/TR/REC-MathML/.
Recomendao 2.8 - Utilizar o elemento blockquote para marcar citaes quando existentes.
No use blockquote, ul, dl & dt, table e outros elementos para criar efeitos visuais nos
pargrafos. Caso a inteno seja organizar a estrutura ou a disposio de textos no stio, utilize
folhas de estilo.
22
No cdigo html:
A Arte e a Vida
A arte baseia-se na vida, porm no como
matria mas como forma. Sendo a arte um
produto directo do pensamento, do
pensamento que se serve como matria; a
forma vai busc-la vida. A obra de arte um
pensamento tornado vida: um desejo realizado
de si-mesmo. Como realizado tem que usar a
forma da vida, que essencialmente a
realizao; como realizado em si-mesmo tem
que tirar de si a matria em que realiza.
Fernando Pessoa, in 'Ricardo Reis - Prosa'
<blockquote>
<p> <strong>A Arte e a Vida </strong></p>
<p> A arte baseia-se na vida, porm no
como matria mas como forma. Sendo a arte
um produto directo do pensamento, do
pensamento que se serve como matria; a
forma vai busc-la vida. A obra de arte um
pensamento tornado vida: um desejo realizado
de si-mesmo. Como realizado tem que usar a
forma da vida, que essencialmente a
realizao; como realizado em si-mesmo tem
que tirar de si a matria em que realiza.
</p>
<p><em>Fernando Pessoa, in 'Ricardo Reis Prosa'</em></p>
</blockquote>
Use folha de estilo para controlar o layout das pginas, formatar cor, tamanho e tipo de fonte.
Os elementos font e basefont esto ultrapassados no HTML 4.0. No use os elementos h1
a h6 para formatar os textos.
Recomendao 2.9 - Criar um estilo de apresentao coerente e sistemtico, ao longo das
diferentes pginas, como exemplo, mantendo um padro de desenho, agrupando os itens do
menu de forma coerente. Mantenha os botes principais de navegao no mesmo local em
cada pgina. Isso ajudar ao usurio a localizar-se rapidamente, e saber o destino de cada
boto levar. Mantenha para o stio uma paleta de cores, estilos de texto e diagramao
consistente. Identifique as regies da pgina, navegao e fim de pgina de forma clara.
Recomendao 2.10 - Utilize elementos de cabealho de forma lgica, organizando o
contedo de acordo com uma hierarquia.
23
O Ttulo
No cdigo html:
<h1>O Ttulo</h1>
Capitulo 1
<h2>Captulo 1</h2>
<p> Aqui vai um texto introdutrio.</p>
24
No cdigo html:
<select name=Servidores>
<optgroup label=Portas e Servidores>
<optgroup label=Servidor 3>
<option label=3.7.1 value=sp3_3.7.1>
Servidor 3 na porta 3.7.1
<option label=3.7 value=sp3_3.7>
Servidor 3 na porta 3.7
<option label=3.5 value=sp3_3.5>
Servidor 3 na porta 3.5
</optgroup> <optgroup label=Servidor 2>
<option label=3.7 value=sp2_3.7>
Servidor 2 na porta 3.7
<option label=3.5 value=sp2_3.5>
Servidor 2 na porta 3.5
</optgroup> </optgroup>
<optgroup label=Linux>
<optgroup label=Servidor 1>
<option label=3.7x value=sp_3.7x>
Servidor 1 na porta 3.7x
<option label=3.5x value=sp_3.5x>
Servidor 1 na porta 3.5x
</optgroup> </optgroup>
</select>
de usurio que suportem o legend sero capazes de tornar essa informao disponvel para
quem deseja. Alguns navegadores grficos atuais mostram a legenda como texto que surge
num espao circunscrito por um borda pelo elemento fieldset.
No cdigo html:
<fieldset> <legend> Selecione sua opo
</legend> <fieldset>
<legend>Bicicleta /Nmero de marchas</legend>
<br>
<input type=radio name=marchas value=8m>
8 marchas <br>
<input type=radio name=marchas value=12m>
12 marchas<br>
<input type=radio name=marchas value=18m>
18 marchas
</fieldset> </fieldset>
Correto:
<td><strong>D-me texto em negrito</strong></td>
Errado:
<th>D-me texto em negrito</th>
26
Recomendao 2.15 - Usar o elemento label juntamente com o atributo id para associar os
rtulos aos respectivos controles dos formulrios. Assim, os leitores de tela associaro os
elementos do formulrio de forma correta. Usando o comando label as pessoas que usam
leitores de tela no tero problemas ao ler o formulrio. Caso haja grupos de informao,
controles, etc, a estes devem estar devidamente diferenciados, seja por meio de espaamento,
localizao ou elementos grficos.
Em uma aplicao, os rtulos dos campos so posicionados, consistentemente, esquerda do
campo mostrado, os rtulos dos cones posicionados abaixo do cone mostrado e rtulos para
botes de rdio so posicionados, consistentemente, direita.
27
Nota: Ateno especial deve ser dispensada na diferenciao visual entre rtulo e informao
colocados prximos uns dos outros.
No cdigo html:
<fieldset>
<legend align=top>Opes de Turno</legend>
<input type="checkbox" name=opt1 id=opt1
value=mn>
<label for=opt1> Turno da Manh</label><br>
<input type="checkbox" name=opt2 id=opt2 value=td>
<label for=opt2>Turno da Tarde </label><br>
<input type="checkbox" name=opt3 id=opt3 value=nt>
<label for=opt3> Turno da Noite</label><br>
<input type="checkbox" name=opt4 id=opt4
value=md>
<label for=opt4>Turno da Madrugada</label><br>
</fieldset>
verde |
amarelo |
28
Recomendao 2.17 Fornea informaes sobre como o stio est estruturado, atravs de
um mapa ou de sumrio. Crie o mapa de forma textual, associando aos ttulos das pginas
para no causar confuso aos usurios que utilizarem leitores de tela.
O mapa ou sumrio do stio pode mostrar a hierarquia das pginas, isso feito utilizando o
atributo title dentro do comando a.
No cdigo html:
<a href=a.htm title=nvel 1>Pgina de boas-vindas</a>
<a href=b.htm title=nvel 2>Pgina de entrada</a> (pgina principal)
<a href=c1.htm title=nvel 3>Produtos</a>
<a href=d1.htm title=nvel 4>Sistemas</a>
<a href=e1.htm title=nvel 5>Sistema 1000</a>
Note que no existe equivalente de teclado para duplo-click (ondblclick) em HTML 4.0.
Utilize eventos independentes do dispositivo, que trabalhem com qualquer ao de entrada
apropriada, no caso, onfocus trabalha com o teclado e com o mouse, e por isso
considerado um evento independente do dispositivo.
Exemplo:
Cdigo do boto: <button onfocus=pop1()> Ganhe um prmio!</button>
O script:
<script language=javascript type=text/javascript> function pop1() { alert
(Primeiro Prmio!) }</script>
<noscript>Primeiro Prmio!</noscript>
O exemplo acima o boto ativado com o script, ao clicar nele ou usar TAB uma pequena
caixa de alerta surgir contendo uma mensagem sobre o prmio. Pressionando a tecla
escape far com que a mesma desaparea.
Em alguns casos deve-se usar mais de um evento, quando este for dependente de dispositivo:
onclick requer mouse, enquanto que onkeypress requer teclado.
Ambos so dependentes de dispositivos, mas a sua incluso vai permitir a qualquer um
beneficiar-se da tcnica.
Cdigo do boto: <button onclick=pop2() onkeypress=pop2()>
Ganhar um prmio diferente!</button>.
Cdigo da funo script:
<script language=javascript type=text/javascript>function pop2() { window.open
(premio.htm) } </script>
<noscript><a href=cadastro.htm>Cadastre-se agora!</a></noscript>
Neste exemplo o boto tanto ativado pelo comando de teclado quanto pelo clique do mouse.
31
32
Recomendao 3.3 - Fornecer atalhos por teclado que apontem para links importantes
(incluindo os contidos em mapas de imagem armazenados no cliente), para incio da rea
principal de contedo da pgina, controles de formulrios, e grupo de controles de formulrios.
Pode-se permitir que o usurio possa saltar ou ir diretamente a campos do formulrio, ou que
ele pule o cabealho da pgina indo direto para a rea principal de contedo da pgina,
utilizando-se do comando accesskey.
No cdigo html:
<a href=#fim> vai para o fim: Alt + m</a>
Texto qualquer...
<p>texto qualquer</p>
<a name=fim href=# accesskey=m> FIM </a>
Recomendao 3.4 - Inserir, entre links adjacentes, caracteres que no funcionem como link e
sejam passveis de impresso (como um espao), at que os leitores de tela ou navegadores
(incluindo as tecnologias de apoio) reproduzam clara e distintamente os links adjacentes.
Quando h muitos links numa mesma linha, separe-os com caracteres de forma a criar mais
espao entre eles. Isso criar um intervalo entre os links quando estiver utilizando um leitor de
tela.
No cgigo html:
[ <a href=a.htm>Seo A</a> | <a href=b.htm>Seo B</a> | <a href=c.htm>Seo C</a> |
<a href=d.htm>Seo D</a> | <a href=e.htm>Seo E</a> ]
33
Recomendao 3.5 - Sempre que possvel, fornecer informaes que possibilitem aos
usurios receber os documentos de acordo com as suas preferncias (por ex., por idioma ou
por tipo de contedo).
Exemplo: Em vez de incluir links tais como Aqui est a verso francesa deste documento, use
negociao de contedos de forma a que a verso Francesa seja apresentada de acordo com
o requerido pelos clientes desta verso dos documentos.
Em HTML 4.0 muitos elementos permitem especificar o idioma com o atributo lang.
Para usurios de sintetizadores de fala, isto significa ter que ouvir um nmero grande de links
similares em todas as pginas antes de chegar ao contedo singular dessa pgina. No entanto,
quando os links se encontram agrupados em conjuntos lgicos, tais como barras de
navegao, os sintetizadores conseguem manipular uma pea em vez de diversas peas.
Desta forma, eles podem preceder os elementos agrupados por um link, permitindo ao usurio
saltar o conjunto de links e posicionar-se de forma imediata no incio do corpo principal da
pgina. Uma forma de agrupar os links usando o comando MAP. No necessrio ter uma
imagem associada ao comando para poder us-lo.
No cdigo html:
<map name=map2>
Navegar no stio.<br>
[ <a href=a.htm>Seo A</a> |
<a href=b.htm>Seo B</a> |
<a href=c.htm>Seo C</a> |
<a href=d.htm>Seo D</a> ]
</map>
Recomendao 3.8 - Se forem oferecidas funes de pesquisa, ativar diferentes tipos de
pesquisa de modo a corresponderem a diferentes nveis de competncia e s preferncias dos
usurios. Sendo possvel, quando a pesquisa no encontrar a palavra, sugerir palavras
semelhantes.
Exemplo: Essa recomendao no obriga voc a colocar um mecanismo de pesquisa no stio.
Mas, ao colocar, faa de maneira acessvel. importante conhecer os tipos de pesquisa
(busca) que existem, para quando implementar no stio, escolher o mais adequado ao seu
projeto.
Pesquisa por palavra-chave: Neste tipo de pesquisa o usurio digita apenas uma
palavra que o mecanismo de pesquisa procura em todo o sitio, por pginas que
contenham a palavra digitada.
35
Pesquisa complexa: Nesta pesquisa, alm de digitar uma palavra, o usurio adiciona
operadores Booleanos (and, or). Caso a busca no encontre, sugira palavras
semelhantes.
Sea Cucumbers Galore outro dos stios sobre invertebrados com interesse para uma
visita.
Recomendao 3.10 - Fornecer informaes sobre documentos compostos por vrias pginas
(isto , colees de documentos). Caso seja necessrio, utilize ferramentas de compactao de
arquivo, tais como ZIP, TAR, GZIP ou ARJ. Informe o tamanho do arquivo e o tempo estimado
para baixar por meio de um modem comum. Fornea documentos em formatos alternativos,
passveis de leitura pelos leitores de tela.
Deve-se indicar o nmero de pginas existentes num documento seqncia html, como
manuais ou instrues passo-a-passo e sua navegao deve ser colocada de forma clara.
36
<head>
<link rel=anterior href=chk9-0.htm>
<link rel=ndice href=overchk.htm>
<link rel=prximo href=chk11-0.htm>
</head>
Acima temos um exemplo que mostra uma forma de fornecer informao sobre um documento
seqencial. Ele mostra como se usa a notao link rel=next e link rel=prev para indicar o
URL da prxima pgina e da anterior como informao de navegao extra.
<p>O link a seguir se refere ao manual das recomendaes (pontos
de verificao) do W3C. Possui 150Kb e seu tempo estimado para
download de 60 segundos. <br>
<a href=manual.zip> Manual do W3C (150kb formato .rtf
compactado </a></p>
Os documentos disponibilizados para download devem estar em formatos compatveis com os
leitores de tela, seno, disponibilizar tambm na pgina o download de uma verso compatvel
textual (ex: formatoTXT).
Recomendao 3.11 - Complementar o texto com apresentaes grficas ou sonoras, sempre
que puderem facilitar a compreenso da pgina.
Em certos casos, torna-se necessria a utilizao de equivalentes no textuais, tais como
imagens, animaes ou vdeos. Isto especialmente til para os analfabetos que podem
visualizar as apresentaes visuais, para os surdos que possuem comunicao com as mos
(lngua gestual) e para os analfabetos que tambm podem se beneficiar muito de equivalentes
grficos.
Os equivalentes no visuais e no textuais so bastante diversos. Entre os mais comuns,
encontra-se a pr-gravao, udio de msica, lngua falada, ou efeitos sonoros. Esses
equivalentes sero especialmente importantes para os analfabetos que podem perceber as
37
No exemplo correto a frase est colocada de forma concisa. Desta maneira, o link ser
compreensvel at para usurios de leitores de tela. Nos exemplos incorretos, fazer o link em
toda a extenso da frase no necessrio e pode causar confuso para quem usa os leitores
de tela. J no segundo exemplo, a frase Clique aqui fica muito vaga. Onde o aqui da
frase? Outro recurso a incluso do atributo title dentro do link para dar mais informao ao
usurio.
<a href=next.htm title=Tudo sobre receita fiscal. >Receita fiscal</a>
39
mais abrangente que inclui pessoas no tcnicas, com uma perspectiva de compreenso mais
intuitiva quanto aos resultados do processo de acessibilidade.
As Recomendaes de Acessibilidade podem ser segmentadas quanto Viso do Cidado
auxiliando na compreenso de onde cada recomendao contribui no resultado percebido pelo
cidado sendo divididas a partir de suas quatro reas: rea da Percepo, rea da Operao, rea
do Entendimento e rea da Compatibilidade.
Da mesma forma que as Diretrizes da Viso Tcnica organiza as recomendaes de forma a facilitar o
domnio do tcnico agrupando as recomendaes de acordo com a percepo do resultado, as
recomendaes dividem-se de acordo com as reas da Viso do Cidado, consolidando assim
a relao existente entre as duas vises, auxiliando na compreenso de onde cada
recomendao contribui no resultado percebido pelo cidado.
Assim relacionamos as recomendaes de acordo com as reas da Viso do Cidado:
rea da Percepo: Trata de benefcios relacionados apresentao do contedo, da
informao. Ela preocupa-se com a percepo de elementos como grficos, sons,
imagens, multimdia e equivalentes.
Recomendaes: 1.11, 1.4, 1.5, 1.6, 1.7, 1.11, 1.12, 1.13, 1.14, 1.15, 1.16, 1.17, 1.18,
1.20, 1.21, 1.22, 1.23, 2.2, 2.3, 2.8, 2.9, 2.10, 2.11, 2.12, 2.13, 2.17, 3.1, 3.4, 3.11.
40
41
42
43
6 Leitura complementar
Gerais
Acessibilidade Brasil - www.acessobrasil.org.br
Web Accessibility Initiative - www.w3.org/WAI
Acessibilidade.net - www.acessibilidade.net
Dicas para fazer sites de Web acessveis
WAI QuickTips - http://www.w3.org/WAI/References/QuickTips/qt.pt.htm
Lista de ferramentas para acessibilidade - www.w3.org/WAI/ER/existingtools.html
Techniques For Accessibility Evaluation And Repair Tools - http://www.w3.org/TR/AERT
Side by Side WCAG vs. 508 - Web http://jimthatcher.com/sidebyside.htm
IBM Accessibility Center - http://www-306.ibm.com/able/
SUN Accessibility - http://www.sun.com/access/
Microsoft Accessibility - http://www.microsoft.com/enable/
Apple Accessibility - http://www.apple.com/accessibility/
Introduo criao de um site acessvel - www.diveintoaccessibility.org
Rede SACI - www.saci.org.br
PRODAM - www.prodam.sp.gov.br/acess
WebAIM - www.webaim.org
Checklist de Acessibilidade para Usurios Idosos - www.labiutil.inf.ufsc.br/acessibilidade
Pases com leis de acessibilidade
Alemanha - www.bmgs.bund.de/nn_617014/EN/Social-Security/Disabled-persons/disabledpersons-node,param=.html__nnn=true
Austrlia - www.hreoc.gov.au/disability_rights/standards/standards.html
Canad - www.tbs-sct.gc.ca/ig-gi
Dinamarca - www.fsk.dk/fsk/publ/1997/freedom
Espanha - www.sidar.org/index.php
Estados Unidos - www.access-board.gov/sec508/guide/
Frana - www.senat.fr/accessibilite.html
Hong Kong - www.info.gov.hk/digital21/e-gov/eng/roadmap/a.htm
India - www.ksphc.org/right-to-information.htm
44
Ireland - www.accessit.nda.ie/policy_and_legislation.html
www.accessit.nda.ie
Itlia - www.pubbliaccesso.it/normative/law_20040109_n4.htm
www.innovazione.gov.it/ita/intervento/accessibilita.shtml
Japo - www.soumu.go.jp/joho_tsusin/eng
Nova Zelndia - www.e-government.govt.nz/web-guidelines
Portugal - www.acessibilidade.net/petition/government_resolution.html
www.acesso.umic.pcm.gov.pt/
Reino Unido - www.cabinetoffice.gov.uk/e-government/resources/eaccessibility/index.asp
Unio Europia - europa.eu.int/information_society/policy/accessibility
45