You are on page 1of 45

Departamento de Governo Eletrnico

Secretaria de Logstica e Tecnologia da Informao


Ministrio do Planejamento, Oramento e Gesto

www.governoeletronico.gov.br

Recomendaes de Acessibilidade para a


Construo e Adaptao de Contedos do
Governo Brasileiro na Internet

eMAG, Acessibilidade de Governo Eletrnico

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

Viso Tcnica do Modelo Proposto.................................................................................... 4

2.2

Diretrizes Tcnicas de Acessibilidade ................................................................................ 4

3 Nveis de Acessibilidade e Recomendaes ..........................................................6


3.1

Nvel de Prioridade 1 .......................................................................................................... 6

3.1.1 Casos gerais....................................................................................................................... 6


3.1.2 Casos em que so utilizados imagens e mapas de imagem ........................................... 10
3.1.3 Casos em que so utilizadas tabelas ............................................................................... 13
3.1.4 Casos em que so utilizados frames................................................................................ 15
3.1.5 Casos em que so utilizados applets, objects, scripts e programas interpretveis ......... 16
3.1.6 Casos em que utilizada multimdia................................................................................ 17
3.2

Nvel de Prioridade 2 ........................................................................................................ 19

3.2.1 Casos gerais..................................................................................................................... 19


3.2.2 No caso de serem utilizadas tabelas................................................................................ 26
3.2.3 No caso de serem utilizados formulrios.......................................................................... 27
3.2.4 No caso de serem utilizados applets e programas interpretveis .................................... 29
3.3

Nvel de Prioridade 3 ........................................................................................................ 32

3.3.1 Casos Gerais.................................................................................................................... 32

4 Relao entre as reas de Acessibilidade compreendidas na Viso do Cidado


e as Recomendaes da Viso Tcnica ....................................................................40
5 Detalhes da Avaliao e Validao........................................................................42
5.1

Programas Avaliadores de Acessibilidade ....................................................................... 42

5.2

Programas Leitores de Tela ............................................................................................. 43

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.

2 Recomendaes de Acessibilidade para a


Construo e Adaptao de Contedos na Internet
2.1 Viso Tcnica do Modelo Proposto
Esta cartilha est dividida, de forma macro, conforme os Nveis de Prioridade de
Acessibilidade, descritos na Viso do Cidado do modelo de acessibilidade proposto
documento eMAG, Acessibilidade de Governo Eletrnico - Modelo.
So 3 nveis de prioridade de acessibilidade, sendo o Nvel Prioridade de Acessibilidade 1 as
exigncias bsicas de acessibilidade; o Nvel Prioridade de Acessibilidade 2 com as normas e
recomendaes que sendo implementadas garantem o acesso s informaes do documento;
e o Nvel Prioridade de Acessibilidade 3 com normas e recomendaes que sendo
implementadas facilitaro o acesso aos documentos armazenados na Web.
Dentro de cada nvel, as Recomendaes de Acessibilidade subdividem-se de acordo com
suas caractersticas tcnicas, facilitando mais ainda o processo de operacionalizao da
acessibilidade dos contedos.
Alm destes dois agrupamentos, a Viso Tcnica do modelo define uma camada de abstrao
intermediria entre suas recomendaes e a Viso do Cidado, que chamada de Diretrizes
Tcnicas de Acessibilidade de Governo Eletrnico, assunto que ser abordado a seguir.

2.2 Diretrizes Tcnicas de Acessibilidade


No item 2.1 desta cartilha foi descrita a forma de organizao da presente cartilha, sendo as
recomendaes para acessibilidade de contedos divididas em nveis de prioridade e, dentro
de cada nvel, pelo tipo de envolvimento tcnico necessrio para implementar estas
recomendaes. Estas recomendaes sero tratadas no item 3.
As Diretrizes Tcnicas de Acessibilidade so uma outra forma de visualizar e compreender as
Recomendaes de Acessibilidade, no baseadas em suas prioridades de implementao,
4

mas na facilidade do processo cognitivo e de aprendizado dos tcnicos envolvidos neste


assunto. A diretriz se preocupa com o impacto tcnico, o resultado da implementao das
recomendaes.
As Diretrizes Tcnicas de Acessibilidade de Governo Eletrnico buscam facilitar ao tcnico a
compreenso, a fixao e o domnio das recomendaes aqui propostas. Elas no definem
uma ordem de implementao, que cabe ao modelo de Nveis de Acessibilidade, contudo,
agrupam as recomendaes de acordo com a percepo do resultado.
Diretriz 1. Fornea alternativas equivalentes para o contedo grfico e sonoro.
Recomendaes: 1.10, 1.11, 1.20, 1.21.
Diretriz 2. Assegure-se de que seu stio seja legvel e compreensvel mesmo sem o uso de
formataes.
Recomendaes: 1.4, 1.5, 1.6, 1.13, 1.14, 1.15, 2.12, 2.13, 3.2.
Diretriz 3. D preferncia s tecnologias de marcao e formatao.
Recomendaes: 2.1, 2.2, 2.3, 2.7, 2.8, 2.10.
Diretriz 4. Assegure que toda a informao seja interpretada corretamente, com clareza e
simplicidade.
Recomendaes: 1.1, 1.2, 1.9, 1.18, 1.19, 2.9, 2.11, 2.14, 2.15, 3.2, 3.5, 3.11.
Diretriz 5. Assegure que as tecnologias utilizadas funcionem - de maneira acessvel independente de programas, verses e futuras mudanas.
Recomendaes: 1.16, 1.17, 1.19, 1.20.
Diretriz 6. Assegure sempre o controle do usurio sobre a navegao no stio.
Recomendaes: 1.7, 1.8, 1.23, 2.4, 2.5, 2.6, 2.19, 3.1, 3.3.
Diretriz 7. Identifique claramente quais so os mecanismos de navegao.
Recomendaes: 1.3, 1.10, 2.16, 3.6, 3.7, 3.8, 3.9, 3.10, 3.12, 3.13.
Diretriz 8. Em casos no contemplados pelas diretrizes anteriores, utilize sempre recursos
reconhecidos, por instituies com propriedade no assunto, como tecnologias acessveis.
Recomendao: 1.24.

3 Nveis de Acessibilidade e Recomendaes


Conforme o documento da Viso do Cidado do Modelo de Acessibilidade proposto eMAG,
Acessibilidade de Governo Eletrnico Modelo, a clara necessidade de ser proposta uma
acessibilidade evolutiva, baseada em prioridades.
Os nveis de prioridades no somente agrupam as recomendaes conforme suas prioridades
de implementao, como tambm agrupam as recomendaes conforme suas caractersticas
tcnicas de implementao.
Prope-se que este modelo de nveis de prioridades seja seguido, implementando-se primeiro
as recomendaes do nvel de prioridade 1, seguidas pelas recomendaes do nvel de
prioridade 2 e, finalmente, pelas recomendaes do nvel de prioridade 3, conforme descrito
abaixo.

3.1 Nvel de Prioridade 1


As recomendaes de Nvel de Prioridade 1 referem-se s exigncias bsicas de
acessibilidade. Pontos em que os criadores e adaptadores de contedo Web devem satisfazer
inteiramente. Se no cumpridas, grupos de usurios ficaro impossibilitados de acessar as
informaes do documento.

3.1.1 Casos gerais


Recomendao 1.1 - Identificar o principal idioma utilizado nos documentos.O idioma do
documento deve ser especificado na expresso HTML. Neste exemplo, o idioma principal do
contedo italiano.

<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>

Recomendao 1.2 - Identificar claramente quaisquer mudanas de idioma no texto de um


documento, bem como nos equivalentes textuais (por ex., legendas de imagens). Use o
atributo lang para identificar claramente as alteraes do idioma no texto.

<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
\|/
\ | /
|
^^^^^^^^

<a href=#post-art>saltar por cima do arte ASCII</a>


<!-- Arte ASCII entra aqui -->
<a name=post-art>Primeira linha de texto do corpo principal ...</a>

Recomendao 1.4 - Assegurar que todas as informaes veiculadas com cor estejam
tambm disponveis sem cor.

Existem dois procedimentos para executar a tarefa, o mais indicado o


procedimento em vermelho.
.
.

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;

Coloque o tpico da frase ou pargrafo no incio de um desses elementos;


9

Limite cada pargrafo a uma idia principal;

Evite linguagem idiomtica, jargo tcnico, expresses e vocabulrio no familiar;

Evite o uso de linguagem especializada com vocabulrio familiar, a no ser que seja
fornecida uma explicao mais extensa;

Evite a voz passiva;

Evite uma estrutura de frases complexa;

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.

Recomendao 1.10 - Utilizar os mecanismos de navegao de maneira coerente, consistente


e sistemtica. Por exemplo, organizar itens do menu por tema, sees ou classes, etc.
A padronizao do layout, ou seja, um mesmo estilo de apresentao em cada pgina, permite
aos usurios encontrar facilmente os botes de navegao assim como procurar o contedo
anterior em cada pgina. Enquanto isto ordena logicamente, resulta em grande benefcio para
pessoas com incapacidade de leitura e aprendizagem. Torna tambm previsvel a localizao
da informao necessria em cada uma das pginas, maximizando desta forma sua
localizao.

3.1.2 Casos em que so utilizados imagens e mapas de imagem


Recomendao 1.11 - Fornecer um equivalente textual a cada imagem (isso abrange:
representaes grficas do texto, incluindo smbolos, GIFs animados, imagens utilizadas como
sinalizadores de pontos de enumerao, espaadores e botes grficos), para tanto, utiliza-se
o atributo alt ou longdesc em cada imagem.
Imagens decorativas ou de acabamento: no caso de uma imagem ter apenas um fim decorativo
ou de acabamento, como o canto arredondado de uma tabela ou uma rgua separadora utilizase o atributo alt com um espao em branco.
<img src=canto_tabela.gif alt= >

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

3.1.3 Casos em que so utilizadas tabelas


Recomendao 1.13 - Fornecer resumos das tabelas utilizando o atributo summary, caso
seja criada uma tabela para dados. Se a tabela foi criada para efeito de design, deixar o
summary em branco.

<table border=1 summary=Esta tabela contm os dados relativos ao nmero de


xcaras de caf>
...cdigo da tabela...
</table>

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:

A seguir o cdigo a ser utilizado:

13

<table border=1 cellpadding=2 cellspacing=3>


<caption>Despesas de Viagem (custo actual, euros)</caption>
<thead> <tr>
<th><p><span id=t-l1>VIAGEM</span>,<br>
<span id=t-l2> data</span></p></th>
<th scope=column>Refeies</th>
<th scope=column>Alojamento</th>
<th scope=column><abbr=Transporte>Trans.</abbr></th>
<th scope=column>Total</th>
</tr> </thead>
<tbody>
<tr> <th scope=rowgroup headers=t-l1>Lisboa</th>
</tr> <tr>
<td scope=row headers=t-l2> 25 Ago 97</td>
<td>37.74</td> <td>112.00</td> <td>45.00</td>
</tr> <tr>
<td scope=row headers=t-l2> 26 Ago 97</td>
<td>27.28</td> <td>112.00</td> <td>45.00</td>
</tr> <tr>
<td scope=row>Subtotal</td>
<td>65.02</td> <td>224.00</td> <td>90.00</td> <td>379.02</td>
</tr> </tbody> <tbody> <tr>
<th scope=rowgroup headers=t-l1>Porto</th>
</tr> <tr>
<td scope=row headers=t-l2> 27 Ago 97</td>
<td>96.25</td> <td>109.00</td> <td>36.00</td>
</tr> <tr>
<td scope=row headers=t-l2> 28 Ago 97</td>
<td>35.00</td> <td>109.00</td> <td>36.00</td>
</tr> <tr>
<td scope=row>Subtotal</td>
<td>131.25</td> <td>218.00</td> <td>72.00</td> <td>421.25</td>
</tr> </tbody> </table>

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

3.1.4 Casos em que so utilizados frames


Recomendao 1.15 - Assegurar que os equivalentes de contedo dos frames (dinmico ou
no) sejam atualizados sempre que esse contedo mudar. A origem do frame sempre deve
estar ligada a um arquivo HTML.

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.

<frame src=main.htm longdesc=maindesc.htm title=Frame do Contedo Principal.>


Caso seja necessrio, explicar com mais detalhes sobre a finalidade de cada frame, use o
atributo londesc para complementar a informao.

3.1.5 Casos em que so utilizados applets, objects, scripts e


programas interpretveis
Recomendao 1.19 - Assegure a acessibilidade de objetos programados, tais como
programas interpretveis e applets, garantindo que a resposta a eventos seja independente do
dispositivo de entrada e que qualquer elemento dotado de interface prpria possa funcionar
com qualquer leitor de tela ou navegador que o usurio utilize. Evite colocar scripts que
estejam vinculados a links, se isso no for possvel, fornecer informaes equivalentes em uma
pgina alternativa acessvel.
NO use: <A href=javascript: pop()>Cadastre-se agora!</A>

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.

Aqui est o cdigo usado para criar um boto scripted:


<a href=javascript: pop()>Cadastre-se agora!</a>
E o cdigo da funo script propriamente:
<script language=JavaScript type=text/javascript>
function pop() { alert (Voc Ganhou o Primeiro Prmio!) }
</script>
<noscript>
Voc Ganhou o Primeiro Prmio! Siga para o cadastro do stio.
</noscript>

3.1.6 Casos em que utilizada multimdia


Recomendao 1.21 - Fornecer equivalentes textuais para sons (reproduzidos ou no com
interao do usurio), arquivos de udio independentes, trilhas udio de vdeo e trechos de
vdeo.
Se na aplicao utilizado um script (ou um programa) que causa um aviso sonoro, para ser
tocado se o visitante da pgina tentar enviar um formulrio antes dos campos requeridos
estarem preenchidos, deve-se incluir no programa, ou script, a capacidade de passar, pro
escrito, uma mensagem na tela, tal como:

Alerta: Voc tentou submeter um formulrio incompleto.


Por favor, preencha os campos necessrios.

Recomendao 1.22 - Em apresentaes multimdia baseadas em tempo (filme ou animao),


fornecer ou sincronizar alternativas textuais equivalentes (legendas ou descries sonoras dos
trechos visuais).
17

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

<H1>Bem-vindo ao Stio Web da Organizao!</H1>


Siga este link se pretende<br> <a href=path1/>um stio sem a preocupao com
acessibilidade</a><br><br> ou siga este link se pretende <br>
<a href=path2/>uma verso acessvel</a>.
Veja como o cdigo fica no navegador:

3.2 Nvel de Prioridade 2


Normas e Recomendaes de Acessibilidade cuja implementao garante o acesso s
informaes do documento. Se no cumpridas, grupos de usurios tero dificuldades para
navegar e acessar as informaes do documento.

3.2.1 Casos gerais


Recomendao 2.1 - Criar documentos passveis de validao por gramticas formais
publicadas. Declarando o tipo de documento (atributo doctype) no topo do cdigo fonte de
cada pgina do stio. Assim seu stio informar aos servidores, navegadores e validadores que

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.

Ao invs de usar: p {font-size: 14pt;}


Use: p {font-size: 1em;}
Ou ainda: p {font-size: 120%;}

Recomendao 2.3 - Marcar corretamente listas e pontos de enumerao em listas


ordenadas. Use corretamente a estrutura e os itens das listas. Evite o uso destes elementos
para formatar pargrafos.
A. Lista de instrumentos encontrados
numa banda de rock:
1. Guitarra
2. Baixo
3. Bateria

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>

Recomendao 2.4 - No criar pginas com atualizao automtica peridica, at que os


leitores de tela ou navegadores possibilitem o controle da atualizao para o usurio. No
utilize a tag meta refresh ou dispositivos semelhantes para atualizao da pgina. Caso a
pgina seja continuamente atualizada, informe ao usurio que ele deve recarregar a pgina
de tempos em tempos.
Exemplo do que no deve ser usado:
<meta http-equiv=refresh content=60> <body> <p>...informao... </body>

Este cdigo fora a atualizao da pgina a cada 60 segundos.

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>

Aqui vai um texto introdutrio.

<h3>Uma subdiviso do captulo</h3>


<p>O resto do texto...</p>

Uma subdiviso do captulo


O resto do texto...

Recomendao 2.11 Sempre que necessrio, divida grandes blocos de informao em


grupos mais fceis de gerenciar. As opes de menu devem ser dispostas de forma
consistente na mesma ordem relativa no grupo de opes. Se as opes num painel de menu
esto ordenadas arquivo, editar, inserir, imprimir, essas opes devem aparecer naquela
mesma ordem quando aquele grupo for apresentado novamente (ou quando um outro painel
contendo aquele mesmo grupo de opes seja apresentado).
Em HTML, use optgroup para agrupar os elementos option dentro de um elemento de lista
select; agrupe os controles de formulrio com fieldset e legend. Use listas sempre que seja
apropriado. Use cabealhos para estruturar documentos, etc.
Uma lista do tipo form select com sete elementos ter o seguinte aspecto (i.e, uma lista
estruturada simples):

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>

O elemento fieldset utilizado para agrupar controles de formulrio relacionados de maneira


lgica. Os dispositivos de apoio ou agentes devem fornecer sentido aos formulrios complexos
atravs de navegao apropriada dentro do grupo ou grupos. Um navegador grfico deve
mostrar esta relao atravs de uma borda em volta dos elementos relacionados.
Ao associar o atributo legend de forma significante para cada grupo fieldset, o autor fornece
uma legenda que explica claramente do propsito ou natureza dos agrupamentos. Os agentes
25

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>

3.2.2 No caso de serem utilizadas tabelas


Recomendao 2.12 - No utilizar tabelas para efeitos de disposio em pgina, prefira o uso
de folhas de estilo para a diagramao das pginas. Sendo utilizadas tabelas construa de
forma que a disposio continue a fazer sentido depois de ser linearizada. Em ltimo caso,
fornea um equivalente alternativo (que pode ser uma verso linearizada).
Recomendao 2.13 - Se for utilizada uma tabela para efeitos de disposio em pgina, no
utilizar qualquer marcao estrutural para efeitos de formatao visual. No use comandos
destinados a indicar cabealhos de tabela como o th para formatar pargrafos ou fazer ttulos
em bold.

Correto:
<td><strong>D-me texto em negrito</strong></td>
Errado:
<th>D-me texto em negrito</th>

26

3.2.3 No caso de serem utilizados formulrios


Recomendao 2.14 - Incluir caracteres pr-definidos de preenchimento nas caixas de edio
e nas reas de texto, at que os navegadores tratem corretamente os controles vazios.
Alguns navegadores antigos no permitem que a tecla TAB seja usada para movimentao
dentro de formulrios. Para isso, coloque um texto no campo do formulrio para que o campo
seja localizado de forma mais fcil.
No cdigo html:
Insira seu nome: <input type=text
name=name size=50 value=|"><br><br>
Comentrio: <textarea name=textarea1
rows=4 cols=50>Introduza por favor os seus
comentrios aqui: </textarea><br><br>
<input type="submit" name="Submit"
value="Submeter este formulrio">

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>

Caso o formulrio seja em duas colunas, os rtulos de tamanhos significativamente diferentes


devem estar alinhados direita com os campos alinhados esquerda, em todos os formulrios
do sistema.
Recomendao 2.16 - Assegurar o correto posicionamento de todos os controles de
formulrios que tenham rtulos implicitamente associados, at que os leitores de tela ou
navegadores do suportem associaes explcitas entre rtulos e controles de formulrios.
Associe legendas aos controles dos formulrios de forma que a informao seja clara, a
legenda deve estar est imediatamente ao lado do controle e posicionada na mesma linha.

verde |

amarelo |

azul ] No cdigo html:


[<input type=radio id=verde><label for=verde>verde</label>
|<input type=radio id=amarelo><label for=amarelo>amarelo
</label>
|<input type=radio id=azul><label for=azul> azul </label>]

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>

3.2.4 No caso de serem utilizados applets e programas interpretveis


Recomendao 2.18 - Assegure a acessibilidade de objetos programados, tais como
programas interpretveis e applets, garantindo que a resposta a eventos seja independente do
dispositivo de entrada e que qualquer elemento dotado de interface prpria possa funcionar
com qualquer leitor de tela ou navegador que o usurio utilize. Evite colocar scripts que
estejam vinculados a links. Se isso no for possvel, fornea informaes equivalentes em uma
pgina alternativa acessvel.
Se um applet (geralmente criado por object, flash ou applet) requerer a interao do
usurio que no possa ser duplicada num formato alternativo, recomenda-se que faa o applet
acessvel diretamente.
A acessibilidade de objetos com a sua prpria interface independente da acessibilidade do
agente de usurio. A acessibilidade deve por isso ser construda nos objetos ou ser fornecida
de forma alternativa. Se voc programador, deve estar consciente dos recursos disponveis
que o ajudam a verificar se os seus programas so acessveis.
Mantenha-se informado sobre as ltimas atualizaes das linguagens utilizadas provavelmente
elas evoluiro de forma a contemplar a acessibilidade.
29

Exemplo com um objeto em Flash:


<object alt=Animao com o logo title=Animao com o logo>
<param name=movie value=abertura.swf> ...
<script language=javascript>
<!--...//--></script> <noscript>
<img src=abertura.jpg alt= Animao com o logo> </noscript> <noembed>
<img src=abertura.jpg alt= Animao com o logo> </noembed>
Animao com o logo</object>
<div id=Abertura style=visibility: hidden; title=Descrio da animao></div>

Nem todas os usurios tm computadores que disponham de mouse ou outros dispositivos


parecidos. Alguns usurios dependem do teclado comum, teclados alternativos ou microfone
para utilizar o computador. Por exemplo, o acesso via teclado a links e controles de formulrio
pode ser especificado de algumas maneiras, tais como:
Por atalhos de teclado: Atalhos de teclado permitem aos usurios combinar teclas de atalho
para navegar nos links e nos controles de formulrio numa pgina. As teclas de atalho podem
ser modificadas de acordo com os diferentes sistemas operacionais, residindo a diferena
essencialmente na seqncia de teclas a executar para ativar o atalho. Nas mquinas com
sistema Windows, as teclas alt e ctrl so vulgarmente as teclas eleitas; no Macintosh, as
teclas ma ou command.
Pela ordem dos Tabs: A ordem dos tabs descreve a (logicamente) ordem de navegao de
link para link ou de um campo de formulrio para outro campo, usualmente pressionando a
tecla tab. Teste o seu stio navegando somente com a tecla tab, para avanar de link em
link, para retornar utilize shift + tab.
Embutindo-se nas interfaces de software, controles independentes de dispositivos de
hardware: Alguns elementos existentes em objetos cujas interfaces no possam ser
controladas por nenhuma linguagem de notao. Por exemplo, em HTML: applets, leitores de
multimdia ou Flash. Os desenvolvedores devem certificar-se que os objetos importados (por si
s) forneam interfaces acessveis; ou que, pelo menos, exista uma alternativa que o faa.
Recomendao 2.19 - Em programas interpretveis, especificar respostas a eventos,
preferindo as rotinas dependentes de dispositivos (mouse, teclado, etc).
30

Use onmousedown com onkeydown.

Use onmouseup com onkeyup

Use onclick com onkeypress

Use onfocus com onmouseover

Use onblur com onmouseout

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

3.3 Nvel de Prioridade 3


Normas e Recomendaes de Acessibilidade que sendo implementadas facilitaro o acesso
aos documentos armazenados na Web. Se no cumpridas, grupos de usurios podero
encontrar dificuldades para acessar as informaes dos documentos armazenados na Web.

3.3.1 Casos Gerais


Recomendao 3.1 - No usar elementos considerados ultrapassados pelo W3C.
Evite usar comandos que caram em desuso pelo HTML 4.0 como blink , marquee , applet,
basefont, center, dir, align, font, isindex, menu, strike, u. Para as formataes d
preferncia ao uso de folhas de estilo. Os comandos listing, plaintext e xmp que podem
ser substitudos pelo comando pre.
Recomendao 3.2 - Especificar por extenso cada abreviatura ou sigla, quando da sua
primeira ocorrncia em um documento, utilizando os atributos abbr e acronym. Utilize o
atributo abbr dentro de um elemento th quando voc tiver cabealhos muito longos, para
que os leitores de tela lerem apenas o seu contedo e no o texto do cabealho na ntegra.
No cdigo html:
Quando estiver em Boston, no se esquea
de visitar o MFA, o MIT e, claro, o W3C. Pode
chegar facilmente a estes destinos atravs da
Av. Mass ou Mem. Dr.

Quando estiver em Boston, no se esquea de


visitar o <acronym title=Museum of Fine
Arts>MFA</acronym>, o <acronym
title=Massachusetts Institute of
Technology>MIT</acronym> e, claro, o
<acronym title=World Wide Web
Consortium>W3C</acronym>.
Pode chegar facilmente a estes destinos
atravs da <abbr title=Avenida
Massachusetts>Av. Mass.</abbr> ou <abbr
title=Memorial Drive>Mem. Dr.</abbr>

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.

Se no for possvel usar a negociao de contedos, use o hreflang" em HTML com os


elementos a ou link para identificar o idioma dos documentos alvo.
<a href=versao.htm hreflang=FR> verso em francs </a>

Recomendao 3.6 - Fornecer barras de navegao para auxiliar os menus de navegao.


Utilizar elemento que contextualizem a localizao do usurio, como barras de caminho e Sua
Localizao nas pginas do documento.
Home > Servios > Consultoria > Investimentos
Possuindo um layout consistente e uma vez familiarizado, torna-se extremamente fcil navegar
pelo conjunto dos links. Outro benefcio ser possvel saltar de forma rpida para outros
contedos do documento.
Recomendao 3.7 - Agrupar links relacionados entre si, identificando o grupo (em benefcio
do navegador ou leitor de tela do usurio) e, at que o navegador ou leitor de tela do usurio se
encarregue de tal funo, fornecer um modo de contornar determinado grupo.
Os usurios cegos saltam freqentemente de link em link quando percorrem uma pgina ou
visualizam informao. Quando fazem isto, o link text (texto do link - texto que se encontra
entre as instrues <a> e </a>) lido pelo leitor de tela. A barra de navegao , no raras
vezes, a primeira coisa a ser encontrada numa pgina.
34

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.

Recomendao 3.9 - Use palavras relevantes no incio de cabealhos, pargrafos, e listas


para identificar o assunto tratado.
Inicie cabealhos, pargrafos, listas, com uma informao distinta. Isto vulgarmente
referenciado por front-loading ( frente) e especialmente til para o acesso informao de
forma serial, reduzindo o esforo necessrio para compreenso e localizao de informaes
importantes para o usurio.
Uma lista que usa o mtodo front-load :

Starfish e Lobsters, e Crabs, Oh My! sem dvida o melhor stio.

Sea Cucumbers Galore outro dos stios sobre invertebrados com interesse para uma
visita.

Visite o maravilhoso mundo da esponja, se tiver um momento.

Uma lista que no usa o mtodo front-loaded:

Mas o melhor stio em termos absolutos o Starfish e Lobsters, e Crabs, Oh My!

Outro stio sobre invertebrados o Sea Cucumbers Galore.

Se tiver um momento, visite o Maravilhoso Mundo da Esponja, se estiver voltado para o


tema.

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

apresentaes em udio. As apresentaes pelo suporte de udio produzidas por


sintetizadores de fala, e com suporte ttil de Braille, so geralmente derivadas do texto, ou
descries.
Recomendao 3.12 - Identificar claramente o destino de cada link, boto ou elemento que
submeta uma ao. Prefira utilizar textos mais claros e objetivos, mostrando o verdadeiro
sentido e o destino do link. Evite usar frases como Clique aqui.
O texto do link deve ser facilmente compreensvel e conciso para que tenha sentido quando for
lido, mesmo fora do dispositivo padro. Como por exemplo, um leitor de tela.
Exemplo correto:
Ganhe um prmio fornecido pelo nosso patrocinador.
Exemplos incorretos:
Ganhe um prmio fornecido pelo nosso patrocinador.
Clique aqui para ganhar um prmio de nosso patrocinador.

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>

Recomendao 3.13 - Informar previamente ao usurio o destino e resultado da ao, quando


houver campos e elementos do formulrio, como, por exemplo, caixas de seleo, que
submetem automaticamente o contedo ao se efetuar uma determinada seleo. Nestes
casos, ao invs da seleo submeter automaticamente o formulrio, recomendvel que se
vincule ao elemento um boto para efetuar a ao;
No havendo a possibilidade de colocar-se um boto para ao posterior - antes de submeter o
formulrio, notificar o usurio que uma ao deste tipo acontecer, assim como o tempo
38

estimado para o processamento e a construo da nova pgina.


Ainda, quando da carga da nova pgina, utilizar um menu escondido/invisvel no incio da
mesma, possibilitando que o usurio receba uma mensagem de que a pgina foi recarregada e
que possa escolher uma opo que o leve diretamente para o contedo onde estava
anteriormente (como um atalho, por exemplo).
Recomendao 3.14 - Fornea metadados para acrescentar informaes semnticas e
descritivas do stio, que sejam teis para os mecanismos de busca.
Pode-se usar o comando link rel para criar relaes entre os documentos. Esse tipo de
associao interessante para usurios de LINX (navegador texto).
<head>
<link rel=anterior href=chk9-0.htm>
<link rel=ndice href=overchk.htm>
<link rel=prximo href=chk11-0.htm>
</head>

39

4 Relao entre as reas de Acessibilidade


compreendidas na Viso do Cidado e as
Recomendaes da Viso Tcnica
No documento Modelo de Acessibilidade descrito a viso do cidado, uma forma de entendimento do
modelo com foco no cidado, e no no desenvolvedor. A Viso do Cidado tem um pblico

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

rea da Operao: Preocupa-se com a manipulao da informao, do contedo. Ou


seja, a rea da Operao deve garantir formas alternativas ao acesso s informaes
atravs de maneiras diferenciadas de navegao ou tcnica similar. Percebe-se,
tambm, que de responsabilidade da Operao garantir sempre ao usurio o controle
da navegao e interao com o stio.
Recomendaes: 1.3, 1.4, 1.8, 1.10, 1.15, 1.16, 1.17, 1.20, 1.23, 1.24, 2.1, 2.4, 2.5, 2.6,
2.11, 2.14, 2.15, 2.16, 2.19, 3.1, 3.3, 3.4, 3.6, 3.7, 3.8, 3.10, 3.13.
rea do Entendimento: Essa, por sua vez, trata de questes relacionadas
compreenso do contedo publicado. Ela deve garantir que todo o contedo
apresentado seja de fcil compreenso para qualquer tipo de usurio.
Recomendaes: 1.11, 1.1, 1.2, 1.9, 2.7, 2.11, 2.15, 3.2, 3.5, 3.7, 3.9, 3.10, 3.11, 3.12.
rea da Compatibilidade: Aborda questes como a necessidade de utilizarmo-nos
sempre de tecnologias acessveis e compatveis com o modelo aqui proposto.
Recomendaes: 1.15, 1.16, 1.19, 1.20, 2.18, 3.1.

41

5 Detalhes da Avaliao e Validao


Baseando-nos no que foi preconizado em Detalhes da Avaliao e Validao no documento
eMAG, Acessibilidade de Governo Eletrnico Modelo, percebemos que o processo de
avaliao e validao da acessibilidade deve passar por trs (3) etapas distintas. Para facilitar
a realizao de tais etapas, abaixo citamos alguns tpicos de relacionados.
importante deixar claro que as diretrizes por si s no so capazes de garantir a acessibilidade. As
recomendaes apenas orientam para que os requisitos de acessibilidade sejam cumpridos.
importante que o stio seja avaliado e testado em avaliadores de acessibilidade e programas especficos
para pessoas portadoras de necessidades especiais.

5.1 Programas Avaliadores de Acessibilidade


Existem programas na Web que avaliam o nvel de acessibilidade em stios na Internet. Tais
programas produzem relatrios precisos com os problemas encontrados e que deveriam ser
corrigidos para que o stio se torne acessvel.
A maior parte dos programas aqui relacionados trabalha com base no W3C/WAI, sendo o Da
Silva, desenvolvido no Brasil que contempla, alm do W3C/WAI, o modelo de nveis conforme
proposto por este documento.
Em portugus:
Da Silva: http://www.acessobrasil.org.br;
Em ingls:
Bobby (empresa norte-americana Watchfire Corporation): http://bobby.watchfire.com;
Cynthia Says: http://www.cynthiasays.com;
Lift (empresa Usablenet): http://www.usablenet.com.
Em espanhol:
TAW: http://www.tawdis.net;

42

5.2 Programas Leitores de Tela


Os usurios com necessidades especiais utilizam-se de programas capazes de ler e interpretar
diretamente a tela do computador. No Brasil, so utilizados trs leitores de tela:
Dosvox/Webvox (desenvolvido no Brasil): http://intervox.nce.ufrj.br;
Virtual Vision (desenvolvido no Brasil): http://www.micropower.com.br;
Jaws for Windows: http://www.freedomscientific.com.
Todos estes leitores de tela foram desenvolvidos para o ambiente Windows, mas j existem
softwares anlogos para Unix, como o Emacspeak uma interface de udio para Linux e o
Gnopernicus.
Aconselha-se a utilizao de softwares leitores de tela para a realizao de testes finais de
acessibilidade. Sempre que possvel recomenda-se a utilizao de usurios com necessidades
especiais para efetuar testes nas pginas do stio.

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

You might also like