e-MAG V3

Ministrio do Planejamento, Oramento e Gesto
Secretaria de Logstica e Tecnologia da Informao

Departamento de Governo Eletrnico
www.governoeletronico.gov.br
Ministrio da Educao
Secretaria de Educao Profissional e Tecnolgica
Rede Nacional de Pesquisa e Inovao em Tecnologias Digitais
Projeto de Acessibilidade Virtual
Verso 3.0
Modelo de Acessibilidade em Governo Eletrnico

Agosto de 2011
Brasil. Ministrio do Planejamento, Oramento e Gesto. Secretaria

de Logstica e Tecnologia da Informao
e-MAG Modelo de Acessibilidade em Governo Eletrnico/ Ministrio
do
Planejamento, Oramento e Gesto, Secretaria de Logstica e
Tecnologia da Informao; Ministrio da Educao, Secretaria de
Educao Profissional e Tecnolgica - Braslia : MP, SLTI, 2011.
69 p.: color.
1. Acessibilidade 2. Sites da Web Projetos. 3. Sites na Web Desenvolvimento 4. Programao para Internet 5. Informtica Servio Pblico I. Ttulo.
CDU
004.5:35
CDD 004.678
Esta obra est licenciada por uma Licena Creative Commons - Atribuio Partilha nos Mesmos Termos 3.0 No Adaptada
http://creativecommons.org/licenses/by-sa/3.0/br/
Voc tem a liberdade de:
Compartilhar copiar, distribuir e transmitir a obra.
Remixar criar obras derivadas.
Sob as seguintes condies:
Atribuio Voc deve creditar a obra da forma especificada pelo autor ou licenciante (mas no
de maneira que sugira que estes concedem qualquer aval a voc ou ao seu uso da obra).
Compartilhamento pela mesma licena Se voc alterar, transformar ou criar em cima desta
obra, voc poder distribuir a obra resultante apenas sob a mesma licena, ou sob uma licena
similar presente.
Ficando claro que:
Renncia Qualquer das condies acima pode ser renunciada se voc obtiver permisso do
titular dos direitos autorais.
Domnio Pblico Onde a obra ou qualquer de seus elementos estiver em domnio pblico sob o
direito aplicvel, esta condio no , de maneira alguma, afetada pela licena.
Outros Direitos Os seguintes direitos no so, de maneira alguma, afetados pela licena:
Limitaes e excees aos direitos autorais ou quaisquer usos livres aplicveis;
Os direitos morais do autor;
Direitos que outras pessoas podem ter sobre a obra ou sobre a utilizao da obra, tais como
direitos de imagem ou privacidade.
Aviso Para qualquer reutilizao ou distribuio, voc deve deixar claro a terceiros os termos da
licena a que se encontra submetida esta obra
Modelo de Acessibilidade em Governo Eletrnico e-MAG
Agradecimentos
O Departamento de Governo Eletrnico agradece a: Bruna Poletto Salton, Juclia
Poletto Almeida, Agebson Rocha Faanha, Andr Luiz Rezende, Andra Poletto Sonza,
ngela Guimares, Felipe Zap, Gleison Samuel do Nascimento, Jorge Fiore de Oliveira
Junior,
Jlia Marques Carvalho da Silva, Marco Antonio de Queiroz, Marcus Vinicius Bennett
Ferreira,
Maurcio Covolan Rosito, Reinaldo Ferraz, Renato Busatto, Ricardo Moro, Ueslei
Paterno e
Woquiton Fernandes, que tornaram a verso 3.0 do e-MAG possvel.
O DGE tambm agradece a:
Andre Pimenta Freire
Carol Scarton
Diego Roger Ramos Freitas
Edercio Marques Bento
Jorge Fernandes
Leonelo Dell Anhol Almeida
Maria Ceclia Calani Baranauskas
Thiago Prado de Campos
Vagner Figueredo de Santana
Pela sua contribuio, via Consulta Pblica, com sugestes, esclarecimentos e

correes para o presente documento.
Equipe do DGE Departamento de Governo Eletrnico
ndice
1. Introduo...................................................................................................5
1.1 Sobre a verso 3.0...................................................................................5
1.2 Legislao...............................................................................................6
1.3 O acesso de pessoas com deficincia.......................................................... 7
1.4 O processo para desenvolver um stio acessvel........................................... 8
2. Recomendaes de acessibilidade................................................................. 12
2.1 Marcao...............................................................................................13
2.2 Comportamento (DOM)...........................................................................21
2.3 Contedo / Informao........................................................................... 24
2.4 Apresentao / Design............................................................................38
2.5 Multimdia............................................................................................. 44
2.6 Formulrios........................................................................................... 47
3. Padres de acessibilidade digital no Governo Federal.......................................56
3.1 Pgina de descrio com os recursos de acessibilidade................................56
3.2 Atalhos de teclado..................................................................................57
3.3 Barra de acessibilidade............................................................................58
3.4 Apresentao do mapa do stio.................................................................59
3.5 Apresentao de formulrio.....................................................................60
3.6 Contedo alternativo para imagens...........................................................63
3.7 Apresentao de documentos...................................................................63
3.8 Elementos que no devem ser utilizados................................................... 63
4. Recursos e ferramentas para acessibilidade....................................................64
5. Leitura complementar..................................................................................66
6. Glossrio....................................................................................................67
7. Anexo 1 Tabela de Contraste de Cores .......................................................69
1. Introduo
O governo brasileiro, comprometido com a incluso, buscou, atravs da elaborao do
modelo de acessibilidade do governo eletrnico, facilitar o acesso para todas as
pessoas s informaes e servios disponibilizados nos stios e portais do governo.
Assim, a primeira verso do e-MAG, elaborada pelo Departamento de Governo
Eletrnico em parceria com a ONG Acessibilidade Brasil, foi disponibilizada para
consulta pblica em 18 de janeiro de 2005, e a verso 2.0 j com as alteraes
propostas, em 14 de dezembro do mesmo ano. Em 2007, a Portaria n 3, de 7 de
maio, institucionalizou o e-MAG no mbito do sistema de Administrao dos Recursos
de Informao e Informtica SISP, tornando sua observncia obrigatria nos stios e
portais do governo brasileiro.
1.1 Sobre a verso 3.0

Para a elaborao da verso 2.0 do e-MAG foi realizado um estudo das regras de
acessibilidade atravs de um mtodo comparativo entre as normas adotadas por
diversos pases, como a Section 508 do governo dos Estados Unidos, os padres CLF
do Canad, as diretrizes irlandesas de acessibilidade e documentos de outros pases,
entre eles Portugal e Espanha. Tambm foi realizada uma anlise detalhada das
regras e pontos de verificao do rgo internacional WAI/W3C, presentes na WCAG
1.0.
A verso 2.0 do e-MAG dividia-se em duas partes:
1. a cartilha tcnica, voltada a desenvolvedores de stios, apresentando
detalhadamente a proposta de implementao das recomendaes de
acessibilidade em stios do governo;
2. a viso do cidado, voltada a todos os cidado brasileiros, apresentando o
modelo de acessibilidade de forma simples e de fcil compreenso.
A diviso do e-MAG apresentou alguns inconvenientes durante o processo de
disseminao do Modelo, como a dificuldade das pessoas entenderem as reas da
Viso do Cidado e seu relacionamento com a aplicao efetiva da acessibilidade. O
aprendizado durante os seis anos da verso 2.0 do e-MAG e o lanamento da verso
2.0 do WCAG marcaram o caminho para a reviso do Modelo.
A reviso do modelo e a nova verso foi desenvolvida atravs da parceria entre o

Departamento de Governo Eletrnico e o Projeto de Acessibilidade Virtual da RENAPI
(Rede de Pesquisa e Inovao em Tecnologias Digitais). Tambm, para a elaborao
dessa nova verso, foram consideradas as contribuies de especialistas na rea da
acessibilidade.
A elaborao da verso 3.0 foi embasada na verso anterior do e-MAG, apoiando-se
na WCAG 2.0, lanada em dezembro de 2008, e considerando as novas pesquisas na
rea de acessibilidade Web. Apesar de utilizar a WCAG como referncia, o e-MAG
3.0 foi desenvolvido e pensado para as necessidades locais, visando atender as
prioridades brasileiras e mantendo-se alinhado ao que existe de mais atual neste
segmento.
Seguindo a diretriz do programa de Governo Eletrnico de promover a Cidadania, o
documento-proposta passou por Consulta Pblica no perodo de novembro de 2010 a
janeiro de 2011, recebendo contribuies tanto pelo sistema de Consulta Pblica do
Portal do Programa , quanto por e-mail. O nmero de contribuies superou as
expectativas e a avaliao criteriosa destas impactou na data de entrega do modelo,
que teve seu cronograma estendido.
Assim, aps um longo perodo de maturao e estudo, entregue sociedade
brasileira a terceira verso do Modelo de Acessibilidade em Governo Eletrnico, o eMAG verso 3.0, atualizado e mais abrangente no que diz respeito a tornar acessvel
o contedo do governo brasileiro na Web.
A verso 3.0 do e-MAG apresentada em apenas um documento, no havendo
separao entre viso tcnica e viso do cidado. Outra deciso foi o abandono dos
nveis de prioridade A, AA e AAA, visto que o padro voltado as pginas do
Governo, no sendo permitido excees com relao ao cumprimento das
recomendaes. Alm disso, no e-MAG 3.0 foi includa a seo chamada Padronizao
de acessibilidade nas pginas do governo federal, com o intuito de padronizar
elementos de acessibilidade que devem existir em todos os stios e portais do
governo.
1.2 Legislao
Esto listados abaixo alguns dos principais documentos, que fazem parte da legislao
que norteia o processo de promoo da acessibilidade e a implementao do e-MAG:
1. Decreto nmero 5296, de 2 de dezembro de 2004, que regulamenta as leis n

10.048, de 8 de novembro de 2000, que d prioridade de atendimento s
pessoas que especifica, e 10.098, de 19 de dezembro de 2000, que estabelece
normas gerais e critrios bsicos para a promoo da acessibilidade das
pessoas com deficincia, e d outras providncias;
2. Comit CB-40 da ABNT, que se dedica normatizao no campo de
acessibilidade, atendendo aos preceitos de desenho universal. O Comit possui
diversas comisses, definindo normas de acessibilidade em todos os nveis,
desde o espao fsico at o virtual;
3. Decreto n 6949, de 25 de agosto de 2009, que promulga a Conveno
Internacional sobre os Direitos das Pessoas com Deficincia elaborada pelas
Naes Unidas em 30 de maro de 2007, definindo, em seu artigo 9, a
obrigatoriedade de promoo do acesso de pessoas com deficincia a novos
sistemas e tecnologias da informao e comunicao, inclusive Internet.
4. Portaria n 3, de 7 de maio de 2007, que institucionalizou o e-MAG no mbito
do sistema de Administrao dos Recursos de Informao e Informtica
SISP, tornando sua observncia obrigatria nos stios e portais do governo
brasileiro.
1.3 O acesso de pessoas com deficincia

O computador e a Internet representam um enorme passo para a incluso de pessoas
com deficincia, promovendo autonomia e independncia. Mas como pessoas com
deficincia utilizam o computador? Muitas vezes, a deficincia no severa o
suficiente a ponto de tornar-se uma barreira utilizao do computador. Entretanto,
na maioria das pginas da Web, as pessoas cegas ou com baixa viso, pessoas com
deficincia auditiva, com dificuldade em utilizar o mouse, por exemplo, encontram
inmeras barreiras de acessibilidade que dificultam ou impossibilitam o acesso aos
seus contedos.
No que se refere a acesso ao computador, as quatro principais situaes vivenciadas
por usurios com deficincia so:
Acesso ao computador sem mouse: no caso de pessoas com deficincia visual,

dificuldade de controle dos movimentos, paralisia ou amputao de um
membro superior;
Acesso ao computador sem teclado: no caso de pessoas com amputaes,

grandes limitaes de movimentos ou falta de fora nos membros superiores;
Acesso ao computador sem monitor: no caso de pessoas com cegueira;
Acesso ao computador sem udio: no caso de pessoas com deficincia auditiva.
No entanto, esses no so os nicos casos que devem ser considerados quando se

pensa em acessibilidade na Web. Muitas pessoas apresentam outras limitaes
relacionadas memria, resoluo de problemas, ateno, compreenso verbal,
leitura e lingustica, compreenso matemtica e compreenso visual. Uma pessoa com
dislexia, por exemplo, pode apresentar dificuldade de leitura de uma pgina devido a
um desenho inadequado. Por isso, um stio desenvolvido considerando a acessibilidade
deve englobar diferentes nveis de escolaridade, faixa etria e pouca experincia na
utilizao do computador, bem como ser compatvel com as diversas tecnologias
utilizadas para acessar uma pgina da Web.
Um dos aliados das pessoas com deficincia para o uso do computador so os
recursos de tecnologia assistiva, que auxiliam na realizao de tarefas antes muito
difceis ou impossveis de realizar, promovendo, desta maneira, a autonomia,
independncia, qualidade de vida e incluso social de pessoas com deficincia.
Existe atualmente uma enorme gama de recursos de tecnologia assistiva, desde
artefatos simples at objetos ou softwares mais sofisticados e especficos, de acordo
com a necessidade de cada pessoa. Uma pessoa com limitado movimento das mos,
por exemplo, pode utilizar um teclado adaptado que contm teclas maiores ou um
mouse especial para operar o computador. J as pessoas com baixa viso podem
recorrer a recursos como ampliadores de tela, enquanto usurios cegos podem utilizar
softwares leitores de tela para fazer uso do computador.
Apesar de sua enorme importncia na promoo da acessibilidade s pessoas com
deficincia, os recursos de tecnologia assistiva, por si s, no garantem o acesso ao
contedo de uma pgina da Web. Para tal, necessrio que a pgina tenha sido
desenvolvida de acordo com os padres Web (Web Standards) e as recomendaes de
acessibilidade, os quais sero abordados ao longo deste documento.
Dentro desse contexto, este documento objetiva garantir que o processo de
acessibilidade dos stios do governo brasileiro seja conduzido de forma padronizada,
de fcil implementao, coerente com as necessidades brasileiras e em conformidade
com os padres internacionais.
1.4 O processo para desenvolver um stio acessvel

A acessibilidade Web refere-se a garantir acesso facilitado a qualquer pessoa,
independente das condies fsicas, dos meios tcnicos ou dispositivos utilizados. No
entanto, ela depende de vrios fatores, tanto de desenvolvimento quanto de interao
com o contedo. O processo para desenvolver um stio acessvel realizado em trs
passos:
1. Seguir os padres Web;
2. Seguir as diretrizes ou recomendaes de acessibilidade;
3. Realizar a avaliao de acessibilidade.
PRIMEIRO
PASSO:
PADRES WEB
Para se criar um ambiente online efetivamente acessvel necessrio, primeiramente,

que o cdigo esteja dentro dos padres Web internacionais definidos pelo W3C.
Os padres de desenvolvimento Web do W3C, ou Web Standards, so um conjunto de
recomendaes que visa padronizar o contedo Web, possibilitando melhores prticas
no desenvolvimento de pginas da Web. Uma pgina desenvolvida de acordo com os
padres Web deve estar em conformidade com as normas HTML, XML, XHTML e CSS,
seguindo as regras de formatao sinttica. Alm disso, muito importante que o
cdigo seja semanticamente correto, ou seja, que cada elemento seja utilizado de
acordo com um significado apropriado, valor e propsito.
A conformidade com os padres Web permite que qualquer sistema de acesso
informao interprete a mesma adequadamente e da mesma forma, seja por meio de
navegadores, leitores de tela, dispositivos mveis (celulares, tablets, etc.) ou agentes
de software (mecanismos de busca ou ferramentas de captura de contedo). Pginas
que no possuem um cdigo de acordo com os padres do W3C apresentam
comportamento imprevisvel, e na maioria das vezes impedem ou pelo menos
dificultam o acesso.
Para conhecer as boas prticas em desenvolvimento de stios de acordo com os
padres, ver Cartilha de Codificao dos Padres Brasil e-GOV, disponvel em:
http://www.governoeletronico.gov.br/acoes-e-projetos/padroes-brasil-e-gov
SEGUNDO
PASSO:
DIRETRIZES
OU
RECOMENDAES
DE
ACESSIBILIDADE
As diretrizes ou recomendaes de acessibilidade explicam como tornar o contedo

Web acessvel a todas as pessoas, destinando-se aos criadores de contedo Web
(autores de pginas e criadores de stios) e aos programadores de ferramentas para
criao de contedo. Um dos principais documentos nessa rea a WCAG, atualmente
em sua verso 2.0, desenvolvida pelo consrcio W3C a partir da criao do WAI (Web
Accessibility Initiative), contendo as recomendaes de acessibilidade para contedo
Web. Em nvel nacional, o e-MAG o documento que contm as diretrizes ou
recomendaes que norteiam o desenvolvimento de stios e portais acessveis.
TERCEIRO
PASSO:
AVALIAO
DE
ACESSIBILIDADE
Aps a construo do ambiente online de acordo com os padres Web e as diretrizes

de acessibilidade, necessrio test-lo para garantir sua acessibilidade. No caso dos
padres Web, h um validador automtico disponibilizado pelo prprio W3C (ver seo
de Recursos). No que diz respeito s diretrizes de acessibilidade, necessrio realizar,
inicialmente, uma validao automtica atravs de validadores, que so softwares ou
servios online que ajudam a determinar se um stio respeitou ou no as
recomendaes de acessibilidade, gerando um relatrio de erros. Uma das
ferramentas que podem ser utilizadas o ASES, avaliador e simulador de
acessibilidade em stios, cujos instrumentos permitem avaliar, simular e corrigir a
acessibilidade de pginas, stios e portais, viabilizando a adoo da acessibilidade por
rgos do governo. Alm do ASES, existem outros validadores automticos (para mais
informaes, ver seo de Recursos deste documento).
preciso salientar que, apesar de tornarem a avaliao de acessibilidade mais rpida
e menos trabalhosa, os validadores automticos por si s no determinam se um stio
est ou no acessvel. Para uma avaliao efetiva, ser necessria uma posterior
validao manual.
A validao manual necessria porque nem todos os problemas de acessibilidade em
um stio so detectados mecanicamente pelos validadores. Para a validao manual,
so utilizados checklists de validao humana.
Assim, os passos sugeridos para a avaliao de acessibilidade em um stio so os
seguintes:
1. Validar os cdigos do contedo HTML e das folhas de estilo;
10
2. Verificar o fluxo de leitura da pgina para tal, utilizar um navegador textual,

como o Lynx, ou um leitor de tela (recomendamos o NVDA ou ORCA). Para
maiores detalhes, ver documento Descrio dos Leitores de Tela, disponvel
em: http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG/materialde-apoio.
3. Verificar o fluxo de leitura da pgina sem estilos, sem script e sem as imagens;
4. Verificar as funcionalidades da barra de acessibilidade, aumentando e
diminuindo a letra, modificando o contraste, etc.;
5. Realizar a validao automtica de acessibilidade utilizando o ASES e outros
avaliadores automticos sugeridos no Captulo 4;
6. Realizar a validao manual, utilizando os checklists de validao humana
disponveis em http://www.governoeletronico.gov.br/acoes-e-projetos/eMAG/material-de-apoio.
A validao manual uma etapa essencial na avaliao de acessibilidade de um stio,
j que os validadores automticos no so capazes de detectar todos os problemas de
acessibilidade em um stio, pois muitos aspectos requerem um julgamento humano.
Por exemplo, validadores automticos conseguem detectar se o atributo para
descrever imagens foi utilizado em todas as imagens do stio, mas somente uma
pessoa poder verificar se a descrio da imagem est adequada ao seu contedo.
Para realizar uma validao manual efetiva, o desenvolvedor dever ter conhecimento
sobre as diferentes tecnologias, as barreiras de acessibilidade enfrentadas por pessoas
com deficincia e as tcnicas ou recomendaes de acessibilidade.
Outra etapa essencial da validao de uma pgina a realizao de testes com
usurios reais (pessoas com deficincia ou limitaes tcnicas). Um usurio real
poder dizer se um stio est realmente acessvel, compreensvel e com boa
usabilidade e no simplesmente tecnicamente acessvel. Quanto maior e mais
diversificado o nmero de usurios reais participando da avaliao de acessibilidade,
mais eficaz e robusto ser o resultado.
11
2. Recomendaes de acessibilidade
Os padres de acessibilidade compreendem recomendaes ou diretrizes que visam
tornar o contedo Web acessvel a todas as pessoas, inclusive s pessoas com
deficincia, destinando-se aos autores de pginas, projetistas de stios e aos
desenvolvedores de ferramentas para criao de contedo. A observao destes
padres tambm facilita o acesso ao contedo da Web, independente da ferramenta
utilizada (navegadores Web para computadores de mesa, laptops, telefones celulares,
ou navegador por voz) e de certas limitaes tcnicas, como, por exemplo, uma
conexo lenta, a falta de recursos de mdia, etc.
As recomendaes de acessibilidade deste documento no esto dividas por nveis de
prioridade, j que todas elas so de grande importncia e devem ser seguidas. Dessa
forma, optou-se por classificar as recomendaes nas seguintes sees:
Marcao
Comportamento (DOM)
Contedo/Informao
Apresentao/Design
Multimdia
Formulrio
OBS: As recomendaes deste documento so baseadas em HTML 4.0 e XHTML 1.1.

A maioria dos exemplos apresentados nas recomendaes a seguir mostram o cdigo
(X)HTML que deve ser renderizado no navegador, j que esse cdigo que apresenta
importncia para garantir a acessibilidade. Assim, no foram apresentados exemplos
do lado do servidor, pois o desenvolvedor pode utilizar a linguagem do lado do
servidor que preferir, apenas tomando o cuidado com o cdigo que ser gerado.
12
2.1 Marcao
RECOMENDAO 1 RESPEITAR
OS PADRES DE DESENVOLVIMENTO WEB
Ver WCAG 2.0 Critrios de Sucesso 4.1.1 e 4.1.2

essencial seguir os padres de desenvolvimento Web, do W3C (World Wide Web
Consortium), com o intuito de maximizar a compatibilidade com atuais e futuros
agentes de usurio.
preciso declarar o DOCTYPE correto da pgina de qualquer documento HTML ou
XHTML. O DOCTYPE define qual verso do (X)HTML o documento est usando e esta
uma informao fundamental para que os agentes de usurio processem corretamente
o documento. Alm disso, por meio do DOCTYPE que as ferramentas de validao
analisam o cdigo da pgina e indicam correes. Poder ser utilizado qualquer
DOCTYPE para HTML ou XHTML, com exceo do Frameset. Alm disso, qualquer
cdigo HTML ou CSS inserido em uma pgina por script ou outro mtodo similar deve
produzir uma pgina vlida quando renderizada.
As camadas lgicas devero ser separadas, de acordo com o objetivo para o qual elas
foram desenvolvidas. Assim, para a camada de contedo devem ser utilizadas as
linguagens de marcao, como html e xhtml. Para a camada de apresentao visual
do contedo, utilizam-se as folhas de estilo css em qualquer uma de suas verses. J
para a camada que modifica o comportamento dos elementos, so utilizadas
linguagens javascript e modelos de objeto (dom).
Exemplos de DOCTYPE
Em HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="pt-BR">
<head>
<title>Exemplo de DOCTYPE em HTML 4.01</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
Em XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-BR">
<head>
13
<title> Exemplo de DOCTYPE em XHTML 1.1</title>

<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
</head>
Para mais detalhes a respeito dos padres de desenvolvimento web, ver a Cartilha de
Codificao Padres Web e-GOV do padro e-PWG, disponvel em:
RECOMENDAO 2 ORGANIZAR
O CDIGO
HTML
DE FORMA LGICA E SEMNTICA
Ver WCAG 2.0 Critrio de Sucesso 1.3.1

O cdigo HTML deve ser organizado de forma lgica e semntica, ou seja,
apresentando os elementos em uma ordem compreensvel e correspondendo ao
contedo desejado. Assim, marcao semntica adequada deve ser utilizada para
designar os cabealhos (h1, h2, h3), as listas (ul, ol, dl), texto enfatizado (strong),
marcao de cdigo (code), marcao de abreviaturas (abbr), marcao de citaes
longas (blockquote), etc. Dessa forma, as pginas podero ser apresentadas e
compreendidas sem recursos de estilizao, tal como as folhas de estilo. Alm disso, o
cdigo semanticamente correto muito importante para usurios com deficincia
visual, pois os leitores de telas descrevem primeiro o tipo de elemento e depois
realizam a leitura do contedo que est dentro desse elemento.
Exemplo correto
<h1>Padres Web</h1>
<ul>
<li><a href="menu1.html">Menu 1</a></li>
<li><a href="menu2.html">Menu 2</a></li>
</ul>
<h2>Web Semntica</h2>
<blockquote>
O poder da web est em sua universalidade. Ser
acessada por todos, independente de deficincia, um
aspecto essencial.
</blockquote>
<cite xml:lang="en">Tim Berners Lee</cite>
14
Exemplo Incorreto
<h1>Padres Web</h1>
<p><a href="menu1.html">Menu 1</a></p>
<p><a href="menu2.html">Menu 2</a></p>
<h2>Web Semntica</h2>
<p>
O poder da web est em sua universalidade. Ser
acessada por todos, independente de deficincia, um
aspecto essencial.
</p>
<p>Tim Berners Lee</p>
RECOMENDAO 3 UTILIZAR
CORRETAMENTE OS NVEIS DE CABEALHO

Os nveis de cabealho devem ser utilizados de forma lgica e semntica para facilitar
a leitura e compreenso. Alm disso, pessoas acessando uma pgina com leitor de
tela podem navegar atravs dos cabealhos, pulando de um para outro, agilizando,
assim, a navegao. Conceitualmente, existem seis nveis de ttulos, sendo o h1 o
mais alto, ou seja, dever corresponder ao ttulo principal da pgina. Dessa forma,
cada pgina dever ter apenas um h1, o qual poder ser substitudo por uma imagem,
mas dever permanecer com seu contedo, mesmo que no visualmente, permitindo
a leitura pelo leitor de tela. J os nveis do h2 ao h6 podero ser utilizados mais de
uma vez na pgina, mas sem excesso e com lgica textual. Para compreender melhor
os nveis de ttulo pode-se tomar como exemplo um stio de um livro, onde o nome do
livro o h1, os captulos so h2, os subcaptulos so h3 e assim por diante.
15
Exemplo
Figura 1 Exemplo de utilizao dos nveis de ttulo
HTML
<h1>Tcnicas culinrias</h1>
<p>A seguir os segredos que facilitam a vida na cozinha.</p>
<h2>Legumes, folhas e vegetais</h2>
<h3>Baba do quiabo</h3>
<p>Para eliminar a baba do quiabo, lave-o ainda inteiro, seque-o e coloque-o numa tigela
com um pouco de suco de limo, deixando repousar durante 15 minutos. Depois lave
ligeiramente, corte e cozinhe.</p>
<h3>Feijo</h3>
<p>1 xcara de feijo cru serve trs pessoas depois de pronto.</p>
<h3>Cenouras e aipos</h3>
<p>Para resolver o problema de cenouras e aipos meio murchos, mergulhe-os em gua
gelada misturada com uma colher de ch de mel por uma hora. Escorra e seque levemente
depois.</p>
16
<h2>Congelamento e descongelamento</h2>
<h3>Carne em pedaos</h3>
<p>Para descongelar carne em pedaos inteiros coloquea embrulhada, numa vasilha com
gua. Coloque sal na gua e no pacote e tampe por uma hora.</p>
<h3>Carne moda</h3>
<p>Para apressar o descongelamento da carne moda, salgue a quantidade que ir usar. O
sal apressa o descongelamento.</p>
RECOMENDAO 4 ORDENAR
DE FORMA LGICA E INTUITIVA A LEITURA E TABULAO

Deve-se criar o cdigo HTML com uma sequncia lgica de leitura para percorrer links,
controles de formulrios e objetos. Essa sequncia determinada pela ordem que se
encontra no cdigo HTML.
recomendvel disponibilizar o bloco de contedo no HTML antes do bloco de menu,
para que usurios, navegando pelo teclado, no precisem navegar por todos os itens
de menu antes de chegar ao contedo. Apesar de os atalhos auxiliarem nesse sentido,
alguns usurios no sabem utiliz-los. Os atalhos no funcionam em interfaces
especializadas, como o do Leitor de Tela DOSVOX e podem ser de difcil utilizao para
pessoas com deficincia motora.
OBS: O atributo tabindex somente dever ser utilizado quando existir real
necessidade. Com o uso de CSS para fins de leiaute, o cdigo HTML pode facilmente
ser desenvolvido de maneira que a ordem de tabulao seja a correta. No entanto, se
houver necessidade de utilizar o tabindex , o mesmo dever ser utilizado com a
semntica correta e dever ser verificado manualmente se o fluxo fornecido pelo
tabindex realmente o desejado, evitando, assim, que o uso do tabindex resulte

em uma ordem de tabulao inconsistente.
Exemplo correto (sem o uso do tabindex)
<ul>
<li><a
<li><a
<li><a
<li><a
</ul>
href="#">Pgina Inicial</a></li>
href="#">Captulo 1</a></li>
<!primeiro foco -->

<!segundo foco -->
<!terceiro foco -->
<!quarto foco -->
17
Exemplo incorreto do uso do tabindex

<ul>
<li><a
<li><a
<li><a
<li><a
</ul>
href="main.html" tabindex="1">Pgina Inicial</a></li>

href="capitulo1.html" tabindex="4">Captulo 1</a></li>
href="capitulo2.html" tabindex="3"> Captulo 2</a></li>
href="capitulo3.html" tabindex="2"> Captulo 3</a></li>
Ordem de tabulao errada, conferida pelo tabindex:
RECOMENDAO 5 - DISPONIBILIZAR
TODAS AS FUNES DA PGINA VIA TECLADO

Todas as funes da pgina desenvolvidas utilizando-se linguagens de script
(javascript) devero estar disponveis quando for utilizado apenas o teclado.
importante salientar que o foco no dever estar bloqueado ou fixado em um
elemento da pgina, para que o usurio possa mover-se pelo teclado por todos os
elementos.
Algumas funes especficas do mouse possuem uma funo lgica correspondente via
teclado, conforme mostrado na tabela a seguir:
Evento do mouse
Evento do teclado
onmousedown
onkeydown
onmouseup
onkeyup
onclick*
onkeypress
onmouseover
onfocus*
onmouseout
onblur*
OBS: * Alguns manipuladores de eventos so dispositivo-independentes, ou seja, se aplicam a qualquer

dispositivo (mouse, teclado ou outro), como o caso de: onFocus, onBlur, onSelect, onChange, e onClick
(quando o onClick for utilizado em um link ou elemento de formulrio).
18
Quando forem utilizados mltiplos manipuladores de eventos para uma ao, de

maneira que ela funcione tanto pelo mouse como pelo teclado, importante testar o
resultado final em diferentes navegadores e utilizando diferentes recursos de
tecnologia assistiva, para garantir que o evento seja, de fato, acessvel.
D preferncia por utilizar o onclick/onkeypress em vez de onmousedown/onkeydown
e onmouseup/onkeyup, pois estes ltimos fazem com que o evento seja disparado
automaticamente atravs do teclado. Se houver real necessidade de utilizao destes
eventos, dever ser feito um controle sobre qual tecla dever ser acionada para que o
evento ocorra, conforme o exemplo a seguir:
JavaScript
<script type="text/javascript">
var x=document.getElementById("link")
x.onkeydown=function(e){
var pressedkey
if(typeof event!='undefined'){ //navegador Internet Explorer
pressedkey=window.event.keyCode
}else{//outros navegadores
pressedkey=e.keyCode //identifica tecla pressionada
}
if(pressedkey=='13'){ //teste se a tecla o enter
window.open('http://www.brasil.gov.br/') //abre a URL
}
}
</script>
HTML
<p><a href="#" id="link">Portal Brasil</a></p>
Existem funes do mouse que no possuem uma funo correspondente via teclado,
como o caso de duplo clique (dblclick). Nesses casos, necessrio implementar a
funo de maneira alternativa, como, por exemplo, incluindo botes que executem,
pelo teclado, a funo de forma equivalente. O evento onclick j funciona pelo teclado
(tecla ENTER) na maioria dos navegadores.
RECOMENDAO 6 FORNECER
NCORAS PARA IR DIRETO A UM BLOCO DE CONTEDO

Devem ser fornecidas ncoras, disponveis na barra de acessibilidade, que apontem
para links relevantes presentes na mesma pgina. Assim, possvel ir ao bloco de
19
contedo desejado. Os links devem ser colocados em lugares estratgicos da pgina,

como por exemplo, no incio e final do menu, do contedo, etc.
Para facilitar a utilizao das ncoras, podem ser disponibilizados atalhos por teclado,
utilizando o atributo accesskey nos links relevantes. importante ressaltar que as
dicas de atalhos presentes na barra de acessibilidade no devem possuir o atributo
accesskey, j que no pode haver repetio do mesmo accesskey em uma pgina.
Recomenda-se fornecer atalhos para o menu principal, para o contedo e para a caixa
de pesquisa.
Exemplo
Topo da Pgina (na barra de acessibilidade)
<ul id="atalhos">
<li><a href="#conteudo">Ir para contedo [1]</a></li>
<li><a href="#menu">Ir para menu principal[2]</a></li>
<li><a href="#busca">Ir para busca [3]</a></li>
</ul>
Contedo da Pgina
<div>
<a name="conteudo" id="conteudo" class="oculto" accesskey="1">Incio do
contedo</a>

</div>
Formulrio de pesquisa do stio (pode estar em qualquer lugar no stio)

<form action="#"method="post">
<fieldset>
<legend>Buscar</legend>
<label for="busca">Pesquise aqui</label>
<input type="text" id="busca" name="busca" accesskey="3" value="Pesquise
aqui" />
<input type="submit" value="Buscar" class="buscar" name="buscar" />
</fieldset>
</form>
20
Foram utilizados ambos os atributos name e id para que as ncoras funcionem em

todos os navegadores, tanto textuais quanto grficos, j que h os que suportam
ambos os atributos e os que suportam apenas um deles.
As dicas dos principais atalhos do stio devem ser disponibilizadas na barra de
acessibilidade e na pgina sobre a acessibilidade do stio. Maiores detalhes a esse
respeito podem ser encontrados no captulo 3 Elementos de acessibilidade nas
pginas do Governo Federal.
RECOMENDAO 7 NO
UTILIZAR TABELAS PARA DIAGRAMAO
Ver WCAG 2.0 Critrio de Sucesso 1.3.1 (Tcnica H51)

As tabelas devem ser utilizadas apenas para dados tabulares e no para efeitos de
disposio dos elementos na pgina. Para este fim, utilize as folhas de estilo.
RECOMENDAO 8 SEPARAR
LINKS ADJACENTES

Links adjacentes devem ser separados por mais do que simples espaos, para que no
fiquem confusos, em especial para usurios que utilizam leitor de tela. Para isso,
recomendado o uso de listas, onde cada elemento dentro da lista um link. As listas
podem ser estilizadas visualmente com CSS para que os itens sejam mostrados da
maneira desejada, como um ao lado do outro, por exemplo.
Caso os links estejam no meio de um pargrafo, pode-se utilizar vrgulas, parnteses,
colchetes, etc., para fazer a separao.
Exemplo correto
<ul id="menu">
<li> <a href="home.html">Home</a></li>
<li> <a href="pesquisa.html">Pesquisa</a></li>
<li> <a href="mapasite.html">Mapa do Site</a></li>
</ul>

21
Exemplo incorreto
<p id="menu">
<a href="#menu">Pular o menu</a><br />
<a href="home.html">Home</a><br />
<a href="pesquisa.html">Pesquisa</a><br />
<a href="mapasite.html">Mapa do Site</a>
</p>

RECOMENDAO 9 NO
ABRIR NOVAS INSTNCIAS SEM A SOLICITAO DO USURIO

A deciso de se utilizar-se de novas instncias por exemplo abas ou janelas - para
acesso a pginas e servios ou qualquer informao do cidado. Assim, no devem
ser utilizados:
Pop-ups;
A abertura de novas abas ou janelas;
O uso do atributo target=_blank;
Mudanas no controle do foco do teclado;
Entre outras, que no tenham sido solicitadas pelo usurio.
2.2 Comportamento (DOM)

RECOMENDAO 10 GARANTIR
QUE OS OBJETOS PROGRAMVEIS SEJAM ACESSVEIS

Deve-se garantir que scripts, Flash, contedos dinmicos e outros elementos
programveis sejam acessveis. Se no for possvel que o elemento programvel seja
diretamente acessvel, deve ser fornecida uma alternativa em HTML para o contedo.
Assim, preciso garantir que o contedo e as funcionalidades de objetos
programveis sejam acessveis aos recursos de tecnologia assistiva e que seja possvel
a navegao por teclado.
Quando o script for utilizado em uma pgina da Web, uma forma de fornecer uma
alternativa para ele atravs do elemento <noscript>. Este elemento pode ser
22
utilizado para mostrar contedos em navegadores que no suportam scripts ou que

tenham o script desabilitado. No entanto, se o navegador tiver suporte a scripts e
estes estiverem habilitados, o elemento <noscript> ser ignorado. Dessa forma, a
utilizao do elemento <noscript> para um script inacessvel no garante que o objeto
seja acessvel. Assim, a recomendao que o prprio script seja desenvolvido
tomando-se o cuidado para que ele seja acessvel, e o elemento <noscript> deve ser
utilizado para abranger os casos em que scripts no so suportados.
Exemplo correto
Pgina HTML
<a href="cadastro.html" id="cadastro">Cadastre-se agora!</a>
Pgina JavaScript (.js)

function pop() {
alert("Voc vai fazer um novo cadastro!");
}
var element = document.getElementById("cadastro");
element.onclick = pop;
Exemplo incorreto
Pgina HTML
<a href="javascript:pop()">Cadastre-se agora!</a>
<script language="javascript" type="text/javascript">
function pop() {
alert("Voc vai fazer um novo cadastro!");
}
</script>
Nesse caso, se o navegador no tiver suporte a scripts, o usurio ficar impossibilitado

de acessar o link.
OBS: A funo alert do javascript no gera um pop-up e sim uma mensagem que
lida por todos os leitores de tela.
RECOMENDAO 11- NO
CRIAR PGINAS COM ATUALIZAO AUTOMTICA PERIDICA
Ver WCAG 2.0 Critrio de Sucesso 3.2.5 (Tcnicas SVR1 e H76)
23
No devem ser criadas pginas com atualizao automtica peridica. Assim, no

deve ser utilizada a meta tag refresh, nem outra forma de atualizao automtica.
Pginas que se atualizam automaticamente podem confundir e desorientar os
usurios, especialmente usurios que utilizam leitores de tela.
Exemplo1
Em uma interface Web para e-mail (Webmail), um desenvolvedor pode fornecer um
boto ou link para buscar novos e-mails recebidos em vez de atualizar
automaticamente.
Em pginas onde o limite de tempo absolutamente necessrio, o usurio dever ser
informado que a pgina atualizada automaticamente.
Exemplo2
Em uma pgina de leiles online, fornecido um banner contendo a informao de
que a pgina atualizada a cada 15 segundos.
RECOMENDAO 12 NO
UTILIZAR REDIRECIONAMENTO AUTOMTICO DE PGINAS
Ver WCAG 2.0 Critrio de Sucesso 3.2.5 (Tcnicas SVR1 e H76)

No devem ser utilizadas marcaes para redirecionar para uma nova pgina, como a
meta tag refresh. Ao invs disso, deve-se configurar o servidor para que o
redirecionamento seja transparente para o usurio.
Exemplo Incorreto
<head>
<title>Exemplo<title>
<meta http-equiv="refresh" content="20; url='http://www.exemplo.com/'" />
</head>
<body>
<p>Esta pgina mudou seu endereo para www.novoendereco.com.br</p>
</body>
ALTERNATIVA PARA MODIFICAR LIMITE DE TEMPO

Em uma pgina onde h limite de tempo para realizar uma tarefa deve haver a opo
de desligar, ajustar ou prolongar esse limite.
24
Essa recomendao no se aplica a eventos em que o limite de tempo

absolutamente necessrio.
Exemplo : Na insero de dados em um formulrio para obteno de um benefcio ou
consulta a processo, o cidado deve ter tanto tempo quanto for necessrio para o
preenchimento de seus dados.
RECOMENDAO 14 NO
INCLUIR SITUAES COM INTERMITNCIA DE TELA

No devem ser utilizados efeitos visuais piscantes, intermitentes ou cintilantes. Em
pessoas com epilepsia fotosensitiva, o cintilar ou piscar pode desencadear um ataque
epiltico. A exigncia dessa diretriz aplica-se tambm para propaganda de terceiros
inserida na pgina.
RECOMENDAO 15 ASSEGURAR
O CONTROLE DO USURIO SOBRE AS ALTERAES
TEMPORAIS DO CONTEDO

Contedos que se movem, rolagens, movimentaes em geral ou animaes no
devem ser disparadas automaticamente sem o controle do usurio, mesmo em
propagandas na pgina. Ao usurio deve ser repassado o controle sobre essas
movimentaes (quer seja por escolha de preferncia de visualizao da pgina, quer
por outro mtodo qualquer acessvel a usurio com deficincia). Alm disso, o usurio
deve ser capaz de parar e reiniciar contedos que se movem, sem exceo.
A velocidade desses contedos tambm deve ser passvel de controle pelo usurio, a
menos que a implementao de mecanismo para alterar a velocidade seja uma tarefa
de difcil execuo (se for necessrio realizar uma escolha baseando-se nas limitaes,
prefira implementar mecanismos para reduzir a velocidade dos contedos no lugar de
aumentar).
25
2.3 Contedo / Informao

RECOMENDAO 16 IDENTIFICAR
O IDIOMA PRINCIPAL DA PGINA

Deve-se identificar o principal idioma utilizado nos documentos. A identificao feita
por meio do atributo lang do HTML e, para documentos XHTML, utilizado o xml:lang.
Exemplo
Em HTML 4.01
...
<html lang="pt-BR">
<head>
<title>documento escrito em portugus do Brasil</title>
...
Em XHTML 1.1
...
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-BR">
<head>
<title>documento escrito em portugus do Brasil</title>
...
RECOMENDAO 17 OFERECER
UM TTULO DESCRITIVO E INFORMATIVO PGINA

O ttulo da pgina deve ser descritivo e informativo, j que essa informao ser a
primeira lida pelo leitor de tela, quando o usurio acessar a pgina. O ttulo
informado pela tag <title>.
Exemplo
O stio sobre o Projeto Acessibilidade Virtual da RENAPI (Rede Nacional de Pesquisa e
Inovao em Tecnologias Digitais) apresenta o seguinte ttulo:
<title>
Projeto Acessibilidade Virtual - Portal RENAPI Pgina Inicial
</title>
26
RECOMENDAO 18 DISPONIBILIZAR
INFORMAO SOBRE A LOCALIZAO DO USURIO
NA PGINA

Dever ser fornecido um mecanismo que permita ao usurio orientar-se dentro de um
conjunto de pginas, permitindo que ele saiba onde est no momento. Assim, poder
ser utilizado o recurso de migalha de po (breadcrumbs), que so links navegveis
em forma de lista hierrquica e permitem que o usurio saiba qual o caminho
percorrido at chegar pgina em que se encontra no momento.
Exemplo
Um usurio navegando por um stio de uma universidade encontra-se na seo de
editais, que est dentro do menu Ensino. Acima do contedo, disponibilizado a
seguinte Migalha de po:
Voc est em: Pgina inicial > Ensino > Editais

OBS: Na migalha de po, todos as pginas do caminho, com exceo da qual est o
usurio (posio atual), devero estar implementadas como links.
RECOMENDAO 19 DESCREVER
LINKS CLARA E SUCINTAMENTE

Deve-se identificar claramente o destino de cada link, informando, inclusive, se o link
remete a outro stio. Alm disso, preciso que o texto do link faa sentido mesmo
quando isolado do contexto da pgina.
preciso tomar cuidado para no utilizar o mesmo ttulo para dois ou mais links que
apontem para destinos diferentes.
Exemplo 1
<h2>Educao Superior</h2>
<p>Tomam posse os reitores das federais da Bahia e Tringulo</p>
<p> <a href="notici5125.html">Leia mais notcias sobre Educao Superior</a>
</p>
27
Repare que no h necessidade de utilizar o atributo title em links, j que esse

atributo no bem suportado por recursos de tecnologia assistiva, como leitores de
tela, no tem utilidade para quem navega apenas pelo teclado e no tem bom suporte
em dispositivos mveis, como celulares, entre outros problemas. Assim, se voc
quiser fornecer informaes adicionais para um link, faa-o no prprio texto do link ou
no contexto.
Exemplo 2
Correto:
Ganhe um prmio fornecido pelo nosso patrocinador
Ganhe um prmio fornecido pelo nosso patrocinador
Incorreto:
Clique aqui para ganhar um prmio fornecido pelo nosso patrocinador
OBS: No recomendada a utilizao de links do tipo clique aqui pois esta
expresso no faz sentido fora do contexto. Muitos usurios de leitores de tela
navegam por links, tornando descries como Clique aqui, Veja mais insuficientes
para o usurio saber o destino do link, ou localiz-lo na pgina. Evitar essas
expresses para evitar verborragia, ou seja, evitar que o leitor de tela leia para o
usurio palavras ou frases desnecessrias.
ALTERNATIVA EM TEXTO PARA AS IMAGENS DO STIO
Ver WCAG 2.0 Critrio de Sucesso 1.1.1 (Tcnica G95)

Deve ser fornecida uma descrio para as imagens da pgina, utilizando-se o atributo
alt. Imagens que no transmitem contedo, ou seja, imagens decorativas, devem ser
inseridas por CSS.
No entanto, descrever qualquer imagem, em geral, algo bastante subjetivo e a
descrio deve ser adaptada ao contexto em que a imagem se encontra. Para maiores
detalhes de como escrever um texto alternativo veja o tutorial O uso correto do texto
alternativo na seo do e-MAG no portal de Governo Eletrnico.
Exemplo 1
28
Figura 2 Exemplo de descrio de imagem. Foto de Jnatas

Cunha em licena Creative Commons Fonte:
http://www.flickr.com/photos/jonycunha/4019704214/in/photostream
/
No cdigo:
<img src="crianca.jpg" alt="Foto de uma criana cheirando uma flor" />
Exemplo 2
Figura 3 Exemplo de descrio de banner
No cdigo:
<a href="http://www.dominiopublico.gov.br/">
<img src="dominioPublico.jpg" alt="Portal Domnio Pblico" />
</a>
Apesar de no haver um limite de caracteres no atributo alt, ele utilizado para

descries sintticas, em poucas palavras ou em uma frase curta. Para imagens mais
complexas que exigem uma descrio mais detalhada, como grficos, por exemplo,
deve-se fornecer, alm do alt, a descrio no prprio contexto ou um link para a
descrio longa logo aps a imagem. Deve ficar claro para o usurio que esse link
remete para a descrio longa da imagem, conforme o exemplo a seguir.
29
Exemplo 3
Figura 4 Exemplo de descrio de grfico

A descrio textual do grfico est disponvel em outra pgina
No cdigo:
<img src="grafico.jpg" alt="Grfico de pizza demonstrando os resultado da pesquisa sobre a
distribuio de espao em pginas" />
<p><a href="graficoPesquisa.html">A descrio textual do grfico</a> est disponvel em
outra pgina</p>
Para grficos, poder ser disponibilizada tanto a descrio textual quanto a tabela de
dados que lhe deu origem, desde que a tabela seja fornecida em HTML, tomando-se
os devidos cuidados relativos acessibilidade.
Alm de fornecer a descrio longa no contexto ou em um link prximo, pode-se
utilizar o atributo longdesc na imagem, o qual recomendado pela WCAG para
descries longas, mas no suportado por alguns recursos de tecnologia assistiva. A
utilizao do longdesc pode ser vista no exemplo a seguir.
Exemplo 4
<img src="grafico.jpg" alt="Grfico de pizza demonstrando os resultado da pesquisa sobre a
distribuio de espao em pginas" longdesc="graficoPesquisa.html" />
<p><a href="graficoPesquisa.html">A descrio textual do grfico</a> est disponvel em
outra pgina</p>
graficoPesquisa.html
<h2> Distribuio de espao em pginas</h2>
<ul>
<li>Propaganda - 60%</li>
<li>Sem Uso - 10%</li>
<li>Navegao - 10%</li>
30
<li>Contedo de Interesse - 20%</li>

</ul>
Exemplo de imagem decorativa:
Figura 5 Imagem decorativa em link Volta ao topo da pgina
HTML
<a href="#id_de_destino">Topo da pgina</a>
CSS
a{
background:transparent url(img/topo_pagina.jpg)no-repeat right top; /*insero da imagem decorativa
do link */
padding:4px 27px 0 0; /* espao colocado para a imagem ficar ao lado do link */
height:23px; /*ajuste na altura do link para que aparea toda a imagem */
}
ALTERNATIVA EM TEXTO PARA AS ZONAS ATIVAS DE
MAPA DE IMAGEM

Para mapas de imagem do lado do cliente, devem ser fornecidas descries atravs do
atributo alt para cada uma das zonas ativas, ou seja, para cada um dos links que
receber o foco.
Exemplo (mapa de imagem do lado do cliente)
Figura 6 Mapa de imagem exemplo 1
<img src="mapaImg.jpg" alt="Imagem com alternativas [A] e [B]" usemap="#Map" />

<map name="Map" id="Map">
<area shape="rect" coords="8,10,63,59" href="a.html" alt="Link para a seo [A]"
/>
<area shape="rect" coords="77,9,126,61" href="b.html" alt="Link para a seo [B]"
/>
</map>
Alm dos mapas de imagem do lado do cliente, existem os do lado do servidor. No

31
entanto, recomendada a utilizao de mapas de imagem do lado do cliente, j que

para mapas de imagem do lado do servidor no possvel fornecer um alt para cada
uma das zonas ativas, somente para o mapa como um todo, no sendo possvel,
portanto, torn-lo acessvel. No entanto, se for realmente necessria sua utilizao,
devem ser fornecidos links redundantes relativos a cada regio ativa do mapa de
imagem, conforme o exemplo a seguir, para que, desta forma, usurios com leitores
de tela possam ter acesso ao seu contedo.
Exemplo (mapa de imagem do lado do servidor)
<a href="novaPagina.jpg"><img
src="bandeiraBrasil.jpg" ismap="ismap"
alt="Bandeira do Brasil (Links a seguir)"/></a>
<p><a href="areaVerde.html">rea Verde</a> </p>
<p><a href="areaAmarela.html">rea
Amarela</a> - </p>
<p><a href="areaAzul.html">rea Azul</a></p>
Figura 7 Mapa de imagem exemplo 2
OBS: No devem ser utilizados mapas de imagem para menus ou seleo de regies
para servios.
DOCUMENTOS EM FORMATOS ACESSVEIS
Sem correspondncia a critrios da WCAG 2.0

Os documentos devem ser disponibilizados preferencialmente em HTML. Tambm
podem ser utilizados arquivos para download no formato ODF, tomando-se os
cuidados para que sejam acessveis. Se um arquivo for disponibilizado em PDF,
dever ser fornecida uma alternativa em HTML ou ODF. necessrio, tambm,
informar a extenso e o tamanho do arquivo no prprio texto do link.
Exemplo
<a href=manual.odt> Manual do W3C (formato .odt, tamanho 150Kb) </a>
32
OBS: O ODF (Open Document Format) um formato aberto de documento adotado

pela e-PING (Arquitetura de Interoperabilidade em Governo Eletrnico) que pode ser
implementado em qualquer sistema. O ODF engloba formatos como: ODT para
documentos de texto, ODS para planilhas eletrnicas, ODP para apresentaes de
slides, entre outros.
Muitos softwares j utilizam esses formatos, como o caso do OpenOffice, BrOffice,
Google Docs, Abiword e StarOffice. O Microsoft Office 2010 tambm inclui suporte
para ODF. Para verses anteriores do Microsoft Office, pode ser instalado um Add-in
gratuito para suporte aos formatos ODF.
RECOMENDAO 23 EM
TABELAS, UTILIZAR TTULOS E RESUMOS DE FORMA
APROPRIADA
Ver WCAG 2.0 Critrio de Sucesso 1.3.1 (Tcnicas H39 e H73)

O ttulo da tabela deve ser definido pelo elemento caption e deve ser o primeiro
elemento utilizado aps a declarao do elemento table. Em casos de tabelas
extensas, deve ser fornecido um resumo de seus dados atravs do atributo summary
que deve ser declarado no elemento table.
Exemplo
<table summary="Esta tabela exibe os copos de caf consumidos por cada senador, o tipo de
caf (descafeinado ou normal), com acar ou sem acar.">
<caption>Copos de caf por Senador</caption>
...
Para mais detalhes veja o tutorial tabelas acessveis (documento pdf - 154 KB), na
seo do
e-MAG no Portal do Programa de Governo Eletrnico.
RECOMENDAO 24 ASSOCIAR
CLULAS DE DADOS S CLULAS DE CABEALHO EM UMA
TABELA

Em tabelas de dados simples, a uso apropriado do elemento th para os cabealhos e
do elemento td para as clulas de dados essencial para torn-las acessveis. Para
incrementar a acessibilidade, deve-se utilizar os elementos thead, tbody e tfoot, para
33
agrupar as linhas de cabealho, do corpo da tabela e do final, respectivamente, com

exceo de quando a tabela possuir apenas o corpo, sem ter sees de cabealho e
rodap. O W3C sugere utilizar o tfoot antes do tbody dentro da definio table para
que o agente de usurio possa renderizar o rodap antes de receber todas
(potencialmente numerosas) linha de dados.
Exemplo 1
<table>
<caption>Demonstrativo do Patrimnio</caption>
<thead>
<tr>
<th>Tipos</th>
<th>Valores (R$)</th>
<th>Percentual</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Total</td>
<td>110.740,22</td>
<td>100%</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Recursos Financeiro</td>
<td>56.879,63</td>
<td>51,36%</td>
</tr>
<tr>
<td>Bens Mveis</td>
<td>25.691,23</td>
<td>23,20%</td>
</tr>
<tr>
<td>Bens Imveis</td>
<td>28.169,36</td>
<td>25,44%</td>
</tr>
</tbody>
</table>
Figura 8 Imagem da tabela descrita no cdigo do exemplo 1

34
Para tabelas mais complexas, necessrio utilizar marcaes para associar as clulas
de dados com as clulas de cabealho. A maneira mais adequada de realizar esse
procedimento utilizar os elementos id/headers ou scope/col. No primeiro, pode-se
associar qualquer clula de contedo a qualquer clula de cabealho, utilizando o
mesmo valor para o atributo id e para o headers. No segundo caso, a associao
automtica, sendo mais utilizado em tabelas de associao direta, onde dado o valor
col para o atributo scope nos cabealhos. Nos exemplo a seguir, possvel verificar
a utilizao do id/headers e do scope/col.
Exemplo 2
<table summary="...">
<table>
<caption>Resultado do Concurso</caption>
<tr>
<th id="vaga">Vaga</th>
<th id="candidato">Nome do candidato</th>
<th id="basico">Prova de Conhecimento Bsico</th>
<th id="especifico">Prova de Conhecimento Especfico</th>
</tr>
<tr>
<td id="adm" rowspan="2">Tcnico Administrativo</td>
<td id="PaulodaSilva">Paulo da Silva</td>
<td headers="adm basico PaulodaSilva">8</td>
<td headers="adm especifico PaulodaSilva">16</td>
</tr>
<tr>
<td id="PedroPontes">Pedro Pontes</td>
<td headers="adm basico PedroPontes">7</td>
<td headers="adm especifico PedroPontes">15</td>
</tr>
<tr>
<td id="inf">Tcnico em Informtica</td>
<td id="JoaoPereira">Joo Pereira</td>
<td headers="inf basico JoaoPereira">9</td>
<td headers="inf especifico JoaoPereira">17</td>
</tr>
</table>
35
Exemplo 3
<table summary="Tabela de vendas de ma e banana efetuadas no ano de 2010">
<caption>Vendas 2010</caption>
<tr>
<th scope="col">Ms</th>
<th scope="colgroup" colspan="2">Rio Grande do Sul</th>
<th scope="colgroup" colspan="2">Santa Catarina</th>
</tr>
<tr>
<td>Janeiro</td>
<td scope="col">Ma</td>
<td scope="col">Banana</td>
<td scope="col">Ma</td>
<td scope="col">Banana</td>
</tr>
<tr>
<td>Feveiro</td>
<td>1000</td>
<td>1500</td>
<td>3000</td>
<td>1000</td>
</tr>
<tr>
<td>Maro</td>
<td>2000</td>
<td>1500</td>
<td>3500</td>
<td>500</td>
</tr>
</table>
36
Exemplo 4
<table summary="Tabela com resumo das despesas de transporte durante o ms de
Agosto nas cidades de Porto Alegre e Florianpolis">
<caption>Relatrio de despesa de viagem</caption>
<tr>
<th></th>
<th id="alimentacao" axis="despesas">Alimentao</th>
<th id="hotel" axis="despesas">Hotel</th>
<th id="transporte" axis="despesas">Transporte</th>
</tr>
<tr>
<th id="poa" axis="localizao" colspan="4">Porto Alegre</th>
</tr>
<tr>
<td id="data1" axis="data">25 de agosto de 2010</td>
<td headers="poa data1 alimentacao">R$ 37,74</td>
<td headers="poa data1 hotel">R$ 112,00</td>
<td headers="poa data1 transporte">R$ 45,00</td>
</tr>
<tr>
<td headers="poa data2 alimentacao">R$ 27,28</td>
<td headers="poa data2 hotel">R$ 112,00</td>
<td headers="poa data2 transporte">R$ 45,00</td>
</tr>
<tr>
<th id="subPoa">Subtotal</th>
<td headers="poa subPoa alimentacao">R$ 65,02</td>
<td headers="poa subPoa hotel">R$ 224,00</td>
<td headers="poa subPoa transporte">R$ 90,00</td>
</tr>
<tr>
<th id="floripa" axis="localizao" colspan="4">Florianpolis</th>
</tr>
<tr>
<td headers="floripa data3 alimentacao">R$ 96,25</td>
<td headers="floripa data3 hotel">R$ 109,00</td>
<td headers="floripa data3 transporte">R$ 36,00</td>
</tr>
<tr>
<td headers="floripa data4 alimentacao">R$ 35,00</td>
<td headers="floripa data4 hotel">R$ 109,00</td>
<td headers="floripa data4 transporte">R$ 36,00</td>
</tr>
<tr>
37
<th id="subFloripa">Subtotal</th>
<td headers="floripa subFloripa alimentacao">R$ 131,25</td>
<td headers="floripa subFloripa hotel">R$ 218,00</td>
<td headers="floripa subFloripa transporte">R$ 72,00</td>
</tr>
<tr>
<th id="total">Total</th>
<td headers="total alimentacao">R$ 196,27</td>
<td headers="total hotel">R$ 442,00</td>
<td headers="total transporte">R$ 162,00</td>
</tr>
</table>
Figura 11 Exemplo da tabela do exemplo 4 com o uso do atributo axis
Para mais detalhes veja o tutorial Tabelas Acessveis (documento pdf - 154 KB) na
seo do e-MAG no Portal do Programa de Governo Eletrnico.
RECOMENDAO 25 GARANTIR
LEITURA E COMPREENSO DAS INFORMAES

O texto de um stio deve ser de fcil leitura e compreenso, no exigindo do usurio
um nvel de instruo mais avanado do que o ensino fundamental completo. Quando
o texto exigir uma capacidade de leitura mais avanada, deve ser disponibilizado
informaes suplementares que expliquem ou ilustrem contedo principal. Outra
alternativa verso simplificada do contedo em texto.
Existem algumas tcnicas que auxiliam na melhora da inteligibilidade de textos, como,
por exemplo:
Desenvolver apenas um tpico por pargrafo;
38
Utilizar sentenas organizadas de modo simplificado para o propsito do

contedo (sujeito, verbo e objeto, preferencialmente);
Dividir sentenas longas em sentenas mais curtas;
Evitar o uso de jargo, expresses regionais ou termos especializados que

possam no ser claros para todos;
Utilizar palavras comuns no lugar de outras pouco familiares;
Utilizar listas de itens ao invs de uma longa srie de palavras ou frases

separadas por vrgulas;
Fazer referncias claras a pronomes e outras partes do documento;
Utilizar, preferencialmente, a voz ativa.
Para mais informaes sobre como escrever textos para web, acesse a Cartilha de
Redao Web na Seo do e-PWG (Padres Web em Governo Eletrnico) no Portal de
Governo Eletrnico.
UMA EXPLICAO PARA SIGLAS, ABREVIATURAS E
PALAVRAS INCOMUNS

Deve estar disponvel uma explicao que identifique a forma completa ou o
significado das abreviaturas e siglas. Para isso, pode ser utilizada a tag abbr.
Exemplo
<p>Bem-vindo <abbr title="World Wide Web" lang="en">WWW</abbr>!</p>
J as palavras que podem ser ambguas, desconhecidas ou utilizadas de forma muito

especfica, devero ser definidas atravs de um texto adjacente, uma lista de
definies ou estarem contidas num glossrio.
RECOMENDAO 27 INFORMAR
MUDANA DE IDIOMA NO CONTEDO
39
Se algum elemento de uma pgina possuir contedo em um idioma diferente do

principal, este dever estar identificado pelo atributo lang. Essa recomendao no se
aplica para nomes prprios ou termos tcnicos que sejam compreendidos no contexto.
Exemplo
XHTML
<p xml:lang="de">
Da dachte der Herr daran, ihn aus dem Futter zu schaffen,
aber der Esel merkte, da kein guter Wind wehte, lief fort
und machte sich auf den Weg nach Bremen: dort, meinte er,
knnte er ja Stadtmusikant werden.
</p>
HTML
<p lang="de">
Da dachte der Herr daran, ihn aus dem Futter zu schaffen,
aber der Esel merkte, da kein guter Wind wehte, lief fort
und machte sich auf den Weg nach Bremen: dort, meinte er,
knnte er ja Stadtmusikant werden.
</p>
2.4 Apresentao / Design

RECOMENDAO 28 - OFERECER
CONTRASTE MNIMO ENTRE PLANO DE FUNDO E
PRIMEIRO PLANO

As cores do plano de fundo e do primeiro plano devero ser suficientemente
contrastantes para que possam ser visualizadas, tambm, por pessoas com baixa
viso, com cromodeficincias ou que utilizam monitores de vdeo monocromtico.
No devero ser utilizadas imagens atrs do texto (background), pois acabam por
dificultar a leitura e desviar a ateno do usurio.
A relao de contraste pode ser encontrada dividindo-se o valor da luminosidade
relativa da cor mais clara de um dos planos pelo valor da luminosidade relativa da cor
mais escura do outro plano. A relao de contraste entre plano de fundo e primeiro
plano de 3:1 o nvel mnimo de contraste recomendado pela ISO-9241-3. No
entanto, levando-se em considerao a perda de percepo do contraste resultante da
baixa acuidade visual, cromodeficincia ou perda de sensibilidade ao contraste devido
40
ao envelhecimento, recomendada aqui uma maior relao de contraste, de, no

mnimo, 4,5:1. Existem ferramentas gratuitas disponveis na Web que verificam a
relao de contraste entre as cores do plano de fundo e do primeiro plano,
referenciadas no captulo 4 deste documento e para uma tabela de cores no anexo 1.
RECOMENDAO 29 NO
UTILIZAR APENAS COR OU OUTRAS CARACTERSTICAS
SENSORIAIS PARA DIFERENCIAR ELEMENTOS

A cor ou outras caractersticas sensoriais, como forma, tamanho, localizao visual,
orientao ou som no devem ser utilizadas como o nico meio para transmitir
informaes, indicar uma ao, pedir uma resposta ao usurio ou distinguir um
elemento visual.
Exemplo
HTML
<p>Existem trs procedimentos para executar a tarefa:</p>
<ul>
<li><a href="#">Procedimento A</a></li>
<li><a href="#" class="recomendado">Procedimento B (Recomendado)</a></li>
<li><a href="#">Procedimento C</a></li>
</ul>
CSS
a.recomendado{
color: #FF0000;
}
Figura 12 Exemplo correto de utilizao de cores nos elementos
41
RECOMENDAO 30 PERMITIR
REDIMENSIONAMENTO DE TEXTO SEM PERDA DE
FUNCIONALIDADE

A pgina deve continuar legvel e funcional quando redimensionada para at 200%.
Assim, preciso garantir que, quando a pgina for redimensionada, no ocorram
sobreposies de texto nem o aparecimento de uma barra horizontal.
Exemplo
Um stio possui uma ferramenta que permite o redimensionamento do tamanho da
fonte. Para isso existe um boto que aumenta a fonte de dois em dois pixels. Da
mesma forma, existe um boto que diminui a fonte de dois em dois pixels e outro que
retorna ao tamanho padro da fonte. O stio utiliza um leiaute flexvel, isto ,
medida que a fonte aumenta ou diminui, o leiaute se ajusta automaticamente para
que no ocorram quebras.
<title>Exemplo Bsico de Leiaute Lquido</title>
<style type="text/css">
.coluna {
border-left: 1px solid green;
padding-left:1%;
float: left;
width: 32%;
}
#rodape {
border-top: 1px solid green;
clear: both;
}
</style>
</head>
<body>
<h1>Exemplo de Redimensionamento</h1>
<form action="#">
<fieldset>
<legend>Redimensionamento do texto</legend>
<input type="button" id="mais" value="Aumentar" />
<input type="button" id="mais" value="Diminuir" />
<input type="button" id="mais" value="Tamanho padro" />
</fieldset>
</form>
<h2>Este texto est dividido em trs blocos...</h2>
<div class="coluna">
<h3>Bloco 1</h3>
<p>O objetivo desta tcnica apresentar o contedo sem que ocorra a introduo de uma barra
horizontal.</p> </div>
<h3>Bloco 2</h3>
<p>Este um exemplo simples de leiaute de pgina que se adapta ao redimensionamento de
texto.</p>
</div>
42
<h3>Bloco 3</h3>
<p>Esta uma tcnica simples mas que pode ser implementada para leiautes mais complexos.</p>
</div>
<p id="rodape">Texto do Rodap</p>
</body>
</html>
Figura 13 Exemplo de pgina em seu tamanho padro
Figura 14 Exemplo de pgina redimensionada em 200% sem perda de funcionalidade
RECOMENDAO 31 DIVIDIR
AS REAS DE INFORMAO
Ver WCAG 2.0 Critrio de Sucesso 3.2.3 (Tcnica G61)

reas de informao devem ser divididas em grupos fceis de gerenciar. As divises
mais comuns so topo, contedo, menu e rodap. Nas pginas internas deveModelo de Acessibilidade em Governo Eletrnico e-MAG
43
se manter uma mesma diviso para que o usurio se familiarize mais rapidamente
com a estrutura do stio. importante destacar, entretanto, que a pgina inicial pode
ter uma diviso diferente das pginas internas, pois normalmente ela contm mais
elementos. O exemplo a seguir mostra a diviso da pgina inicial de um stio contendo
os blocos topo, menu, contedo e rodap, alm da barra de acessibilidade
contendo os atalhos.
Exemplo
Figura 15 Exemplo de diviso de blocos de contedo

<div id="topo">
<a href="#inicioTopo" id="inicioTopo">Topo</a>
<h1>NOME DA INSTITUIO</h1>
<div id="barraAcessibilidade">
<p>Barra de Acessibilidade</p>
<ul>
<li><a href="#inicioConteudo">Ir para contedo [1]</a></li>
<li><a href="#inicioMenu">Ir para menu principal [2]</a></li>
<li><a href="#busca">Ir para Busca [3]</a></li>
</ul>
</div>
</div>
<div id="menu">
<a href="#inicioMenu" id="inicioMenu" accesskey="2">Menu</a>
<ul>
<li>Itens de menu</li>
<li>...</li>
</ul>
</div>
<div id="conteudo">
<a href="#inicioConteudo" id="inicioConteudo" accesskey="1">Contedo</a>
<form action="#" method="post">
<fieldset>
<legend>Buscar</legend>
<label for="busca">Pesquise aqui</label>
44
<input type="text" id="busca" name="busca" accesskey="3" value="Pesquise aqui" />

<input type="submit" value="Buscar" class="buscar" name="buscar" />
</fieldset>
</form>
<h2>BEM VINDO</h2>
<p>Seja bem vindo ao nosso site.</p>
</div>
<div id="rodape">
<a href="#inicioRodape" id="inicioRodape">Rodap</a>
<address> Rua XXX</address>
</div>
A diviso em blocos de contedo representa a base para a utilizao dos atalhos,

permitindo que o usurio tenha rpido acesso rea desejada. Para mais detalhes
sobre a barra de acessibilidade e os atalhos, ver o captulo 3 Padronizao de
acessibilidade nas pginas do Governo Federal.
importante que as diversas pginas de um stio possuam um estilo de apresentao
coerente e sistemtico, mantendo-se um padro de estrutura. Assim, elementos
principais de navegao devero ser mantidos na mesma posio em todas as
pginas, com exceo da pgina inicial que, muitas vezes, apresenta uma estrutura
diferenciada.
Exemplo
Um stio possui um logotipo, um ttulo, um formulrio de pesquisa e uma barra de
navegao. Esses elementos aparecem na mesma ordem relativa em cada pgina do
stio em que se repetem. Em uma das pginas, no h o formulrio de pesquisa, mas
o restante dos itens continua na mesma ordem.
RECOMENDAO 32 POSSIBILITAR
QUE O ELEMENTO COM FOCO SEJA VISUALMENTE
EVIDENTE

A rea que recebe o foco pelo teclado deve ser claramente marcada, devendo a rea
de seleo ser passvel de ser clicada.
Por padro, links e elementos de formulrio j apresentam a borda destacada ao
receberem o foco do teclado. Essa borda pode ser modificada via CSS, mas no
dever ser removida.
Exemplo
CSS
45
a:active, a:focus, a:hover {

border: 1px solid #F00;
}
HTML
<ul>
<li><a
<li><a
<li><a
<li><a
<li><a
<li><a
<li><a
<li><a
<li><a
</ul>
href="/acessibilidade/index.php">Pgina Inicial</a></li>
href="/acessibilidade/eventos.php">Eventos</a></li>
href="/acessibilidade/quemsomos.php">Quem Somos</a></li>
href="/acessibilidade/ead.php">Ensino a Distncia (EaD)</a></li>
href="/acessibilidade/videoaulas.php">Vdeoaulas</a></li>
href="/acessibilidade/video.php">Vdeo em Libras</a></li>
href="/acessibilidade/oa.php">Objetos de Aprendizagem</a></li>
href="/acessibilidade/trabalhos.php">Trabalhos Realizados</a></li>
href="/acessibilidade/mapa.php">Mapa do Site</a></li>
Figura 16 Exemplo de foco visvel em menu
A pseudo-classe :focus utilizada para definir o estilo de qualquer elemento HTML

que receber o foco do teclado, como links e elementos de formulrio. A pseudo-classe
:hover utilizada para definir o estilo de um elemento quando passa-se o mouse
sobre ele. J a pseudo-classe :active define o estilo de link ativo. No caso do
exemplo acima, a pseudo-classe :active foi utilizada para definir o estilo do link com
foco para navegadores Internet Explorer 7 e anteriores, que ainda no tinham suporte
pseudo-classe :focus.
2.5 Multimdia
ALTERNATIVA PARA VDEO
Ver WCAG 2.0 Critrios de Sucesso 1.2.1, 1.2.2, 1.2.6 e 1.2.8
46
Deve haver uma alternativa sonora ou textual para vdeos que no incluem faixas de
udio. Para vdeos que contm udio falado e no idioma natural da pgina, devem ser
fornecidas legendas. Alm de essencial para pessoas com deficincia visual, a
alternativa em texto tambm importante para usurios que no possuem
equipamento de som, que desejam apenas realizar a leitura do material ou no
dispem de tempo para ouvir um arquivo multimdia. Para tanto, podem ser
fornecidos:
Situao 1
Um vdeo mostra como produzir uma tecnologia assistiva de baixo custo. No h
udio, mas o vdeo inclui uma srie de nmeros para representar cada etapa do
processo. Nesse caso, junto ao vdeo, deve ser disponibilizado um arquivo com a
alternativa de texto que indica o contedo do vdeo e a descrio de cada uma das
etapas.
Figura 17 Vdeo contendo arquivo com alternativa em texto
Situao 2
Uma universidade oferece a opo de visualizar suas videoaulas com ou sem
legendas.
47
Figura 18 Vdeo com legenda
Alm de alternativa em texto e legenda, desejvel que os vdeos com udio

apresentem alternativa na Lngua Brasileira de Sinais (Libras).
ALTERNATIVA PARA UDIO
Ver WCAG 2.0 Critrios de Sucesso 1.2.1, 1.2.2 e 1.2.6

udio gravado deve possuir uma transcrio descritiva. Alm de essencial para
pessoas com deficincia auditiva, a alternativa em texto tambm importante para
usurios que no possuem equipamento de som, que desejam apenas realizar a
leitura do material ou no dispem de tempo para ouvir um arquivo multimdia. Neste
caso, tambm desejvel a alternativa em Libras.
Situao 1
Em um podcast o entrevistador faz perguntas a um especialista de sade. Como essas
informaes so disponibilizadas ao usurio do stio em um arquivo de udio, deve ser
fornecido um link para um arquivo com alternativa em texto, logo aps o contedo em
udio.
Uma apresentao prvia do contedo dos dois tipos de arquivo e de sua durao
tambm desejvel.
48
RECOMENDAO 35 OFERECER
AUDIODESCRIO PARA VDEO PR-GRAVADO
Ver WCAG 2.0 Critrio de Sucesso 1.2.3, 1.2.5 e 1.2.7

Vdeos que transmitem contedo visual que no est disponvel na faixa de udio
devem possuir uma audiodescrio.
A audiodescrio consiste na descrio clara e objetiva de todas as informaes
apresentadas de forma visual e que no fazem parte dos dilogos. Essas descries
so apresentadas nos espaos entre os dilogos e nas pausas entre as informaes
sonoras.
Exemplo
Um vdeo de um malabarista se apresentando para um grupo de crianas inclui uma
verso com audiodescrio. O narrador da audiodescrio descreve o nmero e o tipo
de instrumentos que o malabarista utiliza, bem como as reaes que as crianas tm
durante a performance.
CONTROLE DE UDIO PARA SOM

Deve ser fornecido um mecanismo para parar, pausar, silenciar ou ajustar o volume
de qualquer som que se reproduza na pgina.
CONTROLE DE ANIMAO

Para qualquer animao que inicie automaticamente na pgina devem ser fornecidos
mecanismos para que o usurio possa pausar, parar ou ocultar tal animao.
49
2.6 Formulrios
ALTERNATIVA EM TEXTO PARA OS BOTES DE IMAGEM
DE FORMULRIOS

Ao serem utilizados botes do tipo imagem (input type=image), que servem para o
mesmo propsito do boto do tipo submit, deve ser fornecida uma descrio textual
para o boto atravs do atributo alt, conforme o exemplo a seguir.
Exemplo 1
Figura 19 Imagem deBoto enviar

Cdigo:
<input type="image" name="enviar" src="enviar.jpg" alt="enviar" />
J para outros tipos de botes (reset e button), preciso substituir o boto pela
imagem que se deseja utilizar atravs do CSS. Nesse caso, para que o boto seja
acessvel, ele deve possuir um value descritivo, conforme o exemplo a seguir.
Exemplo 2
Figura 20 Imagem de Boto Limpar

HTML
<input type="reset" name="limpar" value="Limpar" class="btLimpar" />
CSS
input.btLimpar{
background:transparent url(btLimpar.jpg) no-repeat left top;
width:100px;
height:47px;
text-indent:-20000px;
border:0;
}
50
RECOMENDAO 39 ASSOCIAR
ETIQUETAS AOS SEUS CAMPOS

As etiquetas de texto (label) devem estar associadas aos seus campos (input)
correspondentes no formulrio, atravs dos atributos for do label e id do input, os
quais devero ter o mesmo valor.
Exemplo
<label for="nome">Nome: </label>
<input type="text" name="nome" id="nome" />
<label>Sexo:</label>
<input type="radio" id="fem" name="sexo" />
<label for="fem">Feminino</label>
<input type="radio" id="mas" name="sexo" />
<label for="mas">Masculino</label>
<label for="msg">Mensagem: </label>
<textarea name="msg" id="msg">Digite sua mensagem</textarea>
<input type="checkbox" id="receber" name="receber" />
<label for="receber">Deseja receber nossa newsletter?</label>
RECOMENDAO 40 ESTABELECER
UMA ORDEM LGICA DE NAVEGAO

Os elementos do formulrio devem ser distribudos corretamente atravs do cdigo
HTML, criando, assim, uma sequncia lgica de navegao. Assim, os formulrios
devem primeiro ser codificados considerando a ordem lgica de navegao para
depois serem organizados visualmente via CSS.
OBS: O atributo tabindex somente dever ser utilizado quando existir real
necessidade. importante ressaltar que este atributo dever ser utilizado com a
semntica correta e dever ser verificado manualmente se o fluxo fornecido pelo
tabindex realmente o desejado.
51
RECOMENDAO 41 NO
PROVOCAR AUTOMATICAMENTE ALTERAO NO CONTEXTO

Quando um elemento de formulrio receber o foco, no deve ser iniciada uma
mudana automtica na pgina que confunda ou desoriente o usurio. Assim, as
mudanas devem ocorrer atravs do acionamento de um boto.
Exemplo Correto
<select id="cidade" name="cidade">
<option value="POA">Porto Alegre</option>
<option value="BH">Belo Horizonte</option>
<option value="RJ">Rio de Janeiro</option>
<option value="SP">So Paulo</option>
</select>
<input type="submit" id="submit" value="Enviar" />
Figura 21 Acionamento - forma correta
Exemplo Incorreto
<select name="cidade" id="cidade" onchange="location =
this.options[this.selectedIndex].value;">
<option value="POA">Porto Alegre</option>
<option value="BH">Belo Horizonte</option>
<option value="RJ">Rio de Janeiro</option>
<option value="SP">So Paulo</option>
</select>
Figura 22 Acionamento - forma incorreta
52
INSTRUES PARA ENTRADA DE DADOS

Para contedo que exigir entrada de dados por parte do usurio, devem ser fornecidas
, quando necessrio, instrues de preenchimento juntamente com as etiquetas
(label). A utilizao de caracteres pr-definidos em reas de entrada de texto s deve
ocorrer se:
O texto for includo aps a entrada de dados pelo usurio (por exemplo, sugerir
um novo nome de usurio caso o escolhido j exista);
A semntica do documento justifique a incluso de texto pr-definido (por

exemplo, uma loja virtual que s vende para determinado pas j vem com o
campo pas preenchido);
Os caracteres tenham sido fornecidos previamente pelo usurio (por exemplo,

refinamento de busca).
Exemplo
O seguinte exemplo indica que a data precisa ser inserida no formato dia (dd) ms
(mm) ano (aaaa).
<label for="data">Data (dd-mm-aaaa)</label>
<input type="text" id="data" name="data" />
RECOMENDAO 43 IDENTIFICAR
E DESCREVER ERROS DE ENTRADA DE DADOS

Quando um erro de entrada de dados for automaticamente detectado, o item que
apresenta erro deve ser identificado e descrito ao usurio por texto.
Exemplo 1
Um usurio tenta submeter um formulrio, mas esquece de preencher campos
obrigatrios. Utilizando validao client-side (do lado do cliente), a omisso
detectada e um alerta aparece informando ao usurio que campos obrigatrios no
foram preenchidos. Para a identificao destes campos, as etiquetas so modificas
tornando-se avisos e tambm o foco do teclado remetido para o primeiro campo
sem preenchimento.
53
Figura 23 Alerta sobre o no preenchimento de campos obrigatrios
Figura 24 Indicao do erro no formulrio aps a mensagem de alerta
54
Exemplo 2
Quando o usurio enviar o formulrio e esquecer-se de preencher um campo
obrigatrio ou preencher um campo de maneira incorreta, o foco remetido
novamente ao formulrio, mas que estar contendo apenas os campos com erro, para
que o usurio no precise navegar por todos os outros campos novamente. Abaixo dos
campos com erro que devero ser novamente preenchidos, haver o boto de envio e
um boto para o usurio retornar ao formulrio completo, caso ele deseje verificar
todos os campos.
Exemplo 3
O usurio envia o formulrio e deixa de preencher campos obrigatrios ou preenche
algum campo de maneira incorreta. O foco retorna ao incio do formulrio contendo o
aviso de erro e links (ncoras) para os campos do formulrio que apresentaram erro.
RECOMENDAO 44 AGRUPAR
CAMPOS DE FORMULRIO

Devero ser agrupados os controles de formulrio relacionados de maneira lgica,
utilizando-se o elemento fieldset, associando o elemento legend de forma significativa
(o elemento fieldset til para agrupar, de forma lgica, elementos do formulrio).
Para cada fieldset, possvel fornecer uma legenda que explica claramente o
propsito ou natureza dos agrupamentos.
Exemplo
<form method="post" action="...">
<fieldset>
<legend>Dados Pessoais</legend>
<label for="nome">O seu Nome: </label>
...
</fieldset>
<fieldset>
<legend>Dados Profissionais</legend>
<label for="profissao">Sua profio:</label>
<input type="text" id="profissao" name="profissao" />
...
</fieldset>
<fieldset>
<legend>Informaes de Contato</legend>
<label for="email">E-mail: </label>
55
<input type="text" id="email" name="email" />

...
</fieldset>
</form>
Figura 25 Imagem do Formulrio
Para agrupar elementos option dentro de um elemento de lista select, deve ser
utilizado o elemento optgroup.
Exemplo 2
<label for="instituto">Qual a sua instituio?</label>
<select id="instituto" name="instituto">
<optgroup label="Rio Grande do Sul">
<option value="ifrs">IFRS</option>
<option value="ifsul">IFSUL</option>
<option value="iffarroupilha">IFFarroupilha</option>
</optgroup>
<optgroup label="Santa Catarina">
<option value="ifsc">IFSC</option>
<option value="ifc">IFC</option>
</optgroup>
<optgroup label="Paran">
<option value="ifpr">IFPR</option>
</optgroup>
</select>
56
Figura 26 Imagem da caixa de seleo
RECOMENDAO 45 FORNECER CAPTCHA
HUMANO
Ver WCAG 2.0 Critrio de Sucesso 1.1.1 (Tcnicas G143 e G144)

O CAPTCHA (teste interativo humano, completamente automatizado, para distinguir
computadores de seres humanos), quando utilizado, dever ser fornecido em forma
de pergunta de interpretao. Tais perguntas podero ser respondidas apenas por um
ser humano. No entanto, preciso garantir que a pergunta no seja de difcil
resoluo, permitindo que a mesma possa ser respondida por pessoas de variadas
culturas e nveis de instruo. Para tal, podem ser utilizadas perguntas de senso
comum, como por exemplo, qual a cor do cu? ou o fogo quente ou frio?.
Tambm podem ser utilizados testes matemticos. No entanto, preciso tomar
cuidado para que esses testes no sejam facilmente quebrados por determinados
programas. Uma alternativa solicitar que o usurio escreva o resultado do teste
matemtico por extenso, como escreva por extenso quanto 2 + 3, ou ainda
responda por extenso quanto dois mais trs.
OBS: O CAPTCHA dever ser utilizado apenas quando estritamente necessrio.
Exemplo
<form action="action.php" method="post">
<fieldset>
<legend>CAPTCHA</legend>
<label for="pergunta">Escreva por extenso quanto dois mais trs.</label>
<input type="text" id="pergunta" name="pergunta" />
<input type="submit" name="enviar" value="Enviar!" />
</fieldset>
</form>
57
Figura 27 Exemplo de CAPTCHA
Para mais detalhes sobre o desenvolvimento de formulrios acessveis, veja o tutorial

Formulrios Acessveis (arquivo pdf 160 KB) na seo e-MAG no Portal do Programa
de Governo Eletrnico.
58
3. Padres de acessibilidade digital no Governo

Federal
Esta seo pretende padronizar elementos de acessibilidade que devem ter
caractersticas em comum em todas as pginas do governo federal, para fins de
facilitar o acesso por pessoas com deficincia. Este conjunto de elementos busca
garantir o desenvolvimento de stios acessveis a todas as pessoas.
Os elementos a serem padronizados, que devem estar presentes em todas as pginas
do Governo Federal so:
1. Pgina com a descrio dos recursos de acessibilidade
2. Teclas de atalho
3. Barra de acessibilidade
4. Apresentao do mapa do sitio
5. Apresentao de formulrio
6. Contedo alternativo para imagens
7. Apresentao de documentos
Ao final deste captulo tambm sero apresentados elementos que no sero

permitidos nas pginas do governo federal.
3.1 Pgina de descrio com os recursos de acessibilidade

Esta pgina apresenta os recursos de acessibilidade presentes no stio, como as teclas
de atalho disponveis, as opes de redimensionamento de texto e alto contraste,
detalhes sobre testes de acessibilidade realizados no stio e outras informaes
pertinentes a respeito de sua acessibilidade. O link para a pgina contendo os recursos
de acessibilidade deve ser disponibilizado na barra de acessibilidade, a qual ser
abordada no terceiro item desta seo.
59
Figura 28 Exemplo de pgina sobre acessibilidade do stio
3.2 Atalhos de teclado

Devero ser disponibilizados atalhos por teclado para pontos estratgicos da pgina,
permitindo que o usurio possa ir diretamente a esses pontos. Os atalhos devero
funcionar atravs de nmeros precedidos da tecla padro de cada navegador (Alt no
Internet Explorer, Shift + Alt no Firefox, Shift + Esc no Opera, etc.). Os atalhos que
devero existir nas pginas do Governo Federal so os seguintes:
1: para ir ao contedo;
2: para ir ao menu principal;
3: para ir caixa de pesquisa;
60
As dicas dos atalhos devero ser disponibilizadas na barra de acessibilidade, abordada

a seguir e, tambm, na pgina sobre a acessibilidade do stio, j comentada
anteriormente. Para mais detalhes ver Recomendao 6.
3.3 Barra de acessibilidade

O stio dever conter uma barra de acessibilidade no topo de cada pgina contendo os
seguintes itens:
Aumentar fonte
Diminuir fonte
Fonte normal
Alto contraste
Atalhos (para Menu, Contedo e Busca)
Acessibilidade (link para a pgina contendo os recursos de acessibilidade do

stio)
Exemplo de Barra de Acessibilidade

<div id="acessibilidade">
<ul id="atalhos">
<li><a href="#iniciodoconteudo">Ir para Contedo [1]</a></li>
<li><a href="#iniciodomenu">Ir para Menu [2]</a></li>
<li><a href="#busca">Ir para busca [3]</a></li>
</ul>
<ul id="botoes">
<li><a href="#" id="btnAumentarFonte">aumentar letra</a></li>
<li><a href="#" id="btnDiminuirFonte">diminuir letra</a></li>
<li><a href="#" id="btnTamanhoFonte">tamanho normal</a></li>
<li><a href="#" id="bt_contraste">alto contraste</a></li>
<li><a href="acessibilidade.html"> Pgina de acessibilidade </a></li>
</ul>
</div>
Figura 29 Exemplo de pgina sobre acessibilidade do stio
Quando uma das ferramentas aumentar fonte, diminuir fonte e fonte normal for
utilizada, o bloco como um todo deve ser modificado, no apenas a fonte do texto.
A opo alto contraste deve gerar uma pgina em que a relao de contraste entre o
plano de fundo e os elementos do primeiro plano seja de, no mnimo 7:1 (contraste
61
otimizado). As ferramentas utilizadas para verificar a relao de contraste entre as

cores esto listadas no captulo 4 Recursos e Ferramentas para Acessibilidade.
Figura 30 Exemplo de pgina com alto contraste
Para mais detalhes ver Recomendaes 28 e 30.
3.4 Apresentao do mapa do stio

Dever ser fornecido um mapa do stio para stios que contenham pginas internas
que no esto presentes no menu. O mapa do stio deve ser disponibilizado em forma
de lista, podendo conter quantos nveis forem necessrios.
62
Figura 31 Exemplo de mapa do stio
3.5 Apresentao de formulrio

Os formulrios devero estar de acordo com os seguintes itens:
Sempre utilizar a tag form, mesmo que o formulrio possua apenas um

elemento, como o caso de uma caixa para pesquisa.
63
Disponibilizar os elementos do formulrio no HTML na ordem correta de

navegao, sem utilizar o tabindex.
Associar as etiquetas (label) aos seus campos (input) correspondentes.
No deve ocorrer mudana no contexto quando um elemento receber o foco.
Deve ser fornecido um boto de envio (submit) para enviar os dados. No

entanto, necessrio fornecer uma maneira de o usurio poder verificar as
informaes antes que elas sejam enviadas.
Os erros de entrada de dados devem ser identificados e descritos ao usurio.
Para cada conjunto de informaes, com dois ou mais elementos de entrada de

dados, os mesmo devero ser agrupados atravs do elemento fieldset/legend.
Em um formulrio de busca simples, por exemplo, no h a necessidade de
utilizar o elemento fieldset/legend, pois apresenta apenas um campo de
entrada de dados.
Exemplo de formulrio de Fale Conosco

<form method="post" action="act/contato.php">
<fieldset>
<legend>Formulrio de Contato</legend>
<label for="nome">Nome:</label>
<label for="nome">E-mail:</label >
<input type="text" name="email" id="email" />
<label for="assunto">Assunto:</label>
<select name="assunto" id="assunto">
<option
<option
<option
<option
</select>
value="0" selected="selected">Selecione o assunto desejado</option>

value="informacoes">Informaes</option>
value="sugestoes">Sugestes</option>
value="duvidas">Dvidas</option>
<label for="msg">Mensagem:</label>
<textarea name="msg" id="msg"></textarea>
<input type="submit" name="enviar" id="enviar" value="Enviar" class="bnt" />
</fieldset>
</form>
64
Figura 32 Formulrio de contato
Aps clicar no boto enviar, uma tela de confirmao dever aparecer, conforme no
exemplo a seguir, permitindo que o usurio verifique e, se necessrio, edite as
informaes antes de envi-las.
Figura 33 Pgina de Confirmao
65
Para mais detalhes ver recomendaes 38 a 45.
3.6 Contedo alternativo para imagens

Dever ser fornecida uma alternativa textual, pelo atributo alt, para imagens, fotos,
grficos, banners, botes de imagem, reas ativas de mapa de imagem, CAPTCHA,
etc. Alm do alt, para imagens mais complexas, que necessitem de uma descrio
mais detalhada, dever ser fornecida uma descrio longa no prprio contexto ou em
um link (claramente identificado como descrio da imagem) logo aps a imagem.
Para mais detalhes ver recomendaes 20 e 21.
3.7 Apresentao de documentos

Os documentos em texto devero ser disponibilizados preferencialmente em HTML.
Tambm podem ser disponibilizados arquivos para download no formato ODF,
tomando-se os cuidados para que sejam acessveis. Se houver necessidade de
disponibilizar arquivos em PDF, dever ser fornecida uma alternativa em HTML ou
ODF. necessrio, tambm, informar a extenso e o tamanho do arquivo no prprio
texto do link.
Para mais detalhes ver Recomendao 22.
3.8 Elementos que no devem ser utilizados
Tabelas para fins de diagramao, conforme Recomendao 7;
Atualizaes automticas peridicas, conforme Recomendao 11;
Situaes com intermitncia de tela, conforme Recomendao 14;
Elementos considerados depreciados pelo W3C, como frame, applet, blink,

marquee, basefont, center, dir, align, font, isindex, menu, strike, u, etc.
66
4. Recursos e ferramentas para acessibilidade

Organizaes e especificaes
World Wide Web Consortium (W3C): http://www.w3.org
WCAG 2.0: http://www.w3.org/TR/WCAG20
WCAG 2.0 (portugus): http://www.ilearn.com.br/TR/WCAG20
Especificao HTML 5: http://www.w3.org/TR/html5
Especificao HTML 4.01: http://www.w3.org/TR/html401
Especificao XHTML 1.0: http://www.w3.org/TR/xhtml1
Especificao XHTML 1.1: http://www.w3.org/TR/xhtml11
Especificao CSS 1.0: http://www.w3.org/TR/CSS1
Especificao CSS 2.1: http://www.w3.org/TR/CSS21
Especificao CSS 3.0 (em construo): http://www.w3.org/Style/CSS/current-work
Codificao de caracteres: http://www.w3.org/International/O-charset.pt-br.php
Tutoriais W3C: http://www.w3.org/2002/03/tutorials
CSS Paged media: http://www.w3.org/TR/REC-CSS2/page.html
The Web Standards Project: http://www.webstandards.org/
Validadores de cdigo
Validador (X)HTML: http://validator.w3.org
Validador CSS: http://jigsaw.w3.org/css-validator
Validador de links: http://validator.w3.org/checklink
Validadores automticos de acessibilidade
ASES (WCAG e e-MAG):
http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG/material-de-apoio
Da Silva (WAI e e-MAG): http://www.acessobrasil.org.br
Cynthia Says (WAI): http://www.cynthiasays.com
Hera (WAI): http://www.sidar.org/hera/
Lift (WAI): http://www.usablenet.com
TAW (WAI): http://www.tawdis.net
eExaminator (WCAG 1.0): http://www.acesso.umic.pt/examinator.php
Functional Accessibility Evaluator 1.1: http://fae.cita.uiuc.edu/
Checklists para validao humana
Checklist Manual de Acessibilidade - Desenvolvedores (documento pdf - 552 KB)
Checklist Manual de Acessibilidade Pessoas com deficincia visual (documento pdf Modelo de Acessibilidade em Governo Eletrnico e-MAG
67
333 KB)
Ferramentas para anlise de relao de contraste
Luminosity Colour Contrast Ratio Analyser (online):
http://juicystudio.com/services/luminositycontrastratio.php
Color Contrast Analyser (online): http://www.colorsontheweb.com/colorcontrast.asp
Check mu colours (online): http://www.checkmycolours.com/
Contrast Analyser 2.2: http://www.paciellogroup.com/resources/contrastanalyser.html
Simulador de Navegador
Browsershots: http://browsershots.org
Leitores de Tela
Jaws for Windows - Leitor de tela americano produzido pela Freedom Scientific:
http://www.freedomscientific.com
NVDA - Leitor de tela gratuito e de cdigo aberto para Windows: http://www.nvdaproject.org
Orca - Leitor de tela gratuito e de cdigo aberto para Linux:
http://live.gnome.org/Orca
Virtual Vision - Leitor de tela nacional fabricado pela Micropower:
http://www.micropower.com.br
VoiceOver - Leitor de tela para MAC OS:
http://www.apple.com/br/accessibility/voiceover
Windows Eyes - Leitor de tela
canadense fabricado pela GW Micro: http://www.gwmicro.com/Window-Eyes

DOSVOX: Interface especializada desenvolvida pela UFRJ: http://intervox.nce.ufrj.br
Descrio dos Leitores de Tela (documento pdf - 2.71 MB)
Avaliao dos Pontos de Fragilidades em Leitores de Tela (documento pdf - 1.47 MB)
Navegadores Textuais
Lynx: http://lynx.browser.org
Lynx Viewer (simulador): http://www.delorie.com/web/lynxview.html
Simulador para Cegueira Cromtica (Daltonismo)
Vischeck: http://www.vischeck.com/
68
Tutoriais
O uso correto do texto alternativo (documento pdf - 239 KB)
Tabelas Acessveis (documento pdf - 153 KB)
Formulrios Acessveis (documento pdf - 159 KB)
69
5. Leitura complementar
Padres Brasil e-Gov
WCAG 2.0
http://www.ilearn.com.br/TR/WCAG20
Tcnicas para as WCAG 2.0
http://www.acesso.umic.pt/w3/TR/WCAG20-TECHS/
CSS e Web Standards
http://maujor.com/
RENAPI Projeto de Acessibilidade Virtual
http://bento.ifrs.edu.br/acessibilidade/
Acessibilidade Web: (X)HTML, CSS, Scripts e Usabilidade para Todos
http://www.acessibilidadelegal.com/
Acesso Digital
http://www.acessodigital.net
Web Accessibility in Mind
http://webaim.org
W3C Brasil
http://w3c.br
CLF Standards (Canad)
http://www.tbs-sct.gc.ca/clf2-nsi2/index-eng.asp
Section 508 (Estados Unidos)
http://www.section508.gov/
NDA (Irlanda)
http://www.nda.ie/cntmgmtnew.nsf
70
6. Glossrio
Acessibilidade: Significa permitir o acesso por todos, independente do tipo de
usurio, situao ou ferramenta.
Acessibilidade Web: Criar ou tornar as ferramentas e pginas Web acessveis a
um maior nmero de usurios, inclusive pessoas com deficincia.
Agente de Usurio: Qualquer software que recupera e apresenta contedo Web para
seus usurios, possibilitando que o usurio interaja com o contedo Web.
Atributo: Os atributos servem para definir uma propriedade de um elemento
(X)HTML.
CSS (Cascading Style Sheets Folhas de estilo em cascata): Linguagem que
descreve a apresentao, visual ou sonora, de um documento.
Leitor de tela: Software que fornece informaes atravs de sntese de voz sobre os
elementos exibidos na tela do computador. Esses softwares interagem com o sistema
operacional, capturando as informaes apresentadas na forma de texto e
transformando-as em resposta falada atravs de um sintetizador de voz. Para navegar
utilizando um leitor de tela, o usurio faz uso de comandos pelo teclado. O leitor de
tela tambm pode transformar o contedo em informao ttil, exibida dinamicamente
em Braille por um hardware chamado de linha ou display Braille, servindo, em
especial, a usurios com surdocegueira.
Navegador: Programa que permite ao usurio consultar e interagir com o material
publicado na Web.
Navegador textual: Tipo de navegador baseado em texto, diferente dos
navegadores com interface grfica, onde as imagens so carregadas. O navegador
textual pode ser utilizado com leitores de tela por pessoas com deficincia visual e,
tambm, por pessoas que acessam a Internet com conexo lenta.
Padres Web (Web Standards): Padres Web so regras de tecnologia definidas
pelo W3C e outros rgos da rea utilizados para criar e interpretar o contedo Web.
Podcast: Arquivo ou uma srie de arquivos de udio digital, geralmente em formato
MP3 ou AAC (este pode conter imagens estticas e links), publicada atravs de
71
podcasting (forma de publicao de arquivos de mdia digital pela Internet, atravs de

um feed RSS).
Tag: Cdigo usado para marcar o incio e o fim de um elemento (X)HTML.
Tecnologia assistiva: refere-se ao conjunto de artefatos disponibilizados s pessoas
com deficincia, que contribui para prover-lhes uma vida mais independente, com
mais qualidade e possibilidades de incluso social. O propsito das tecnologias
assistivas reside em ampliar a comunicao, a mobilidade, o controle do ambiente, as
possibilidades de aprendizado, trabalho e integrao na vida familiar, com os amigos e
na sociedade em geral.
W3C (World Wide Web Consortium): Consrcio de mbito internacional com a
finalidade de desenvolver especificaes, guias e ferramentas para Web.
WAI: (Accessibility Initiative - Iniciativa de Acessibilidade na Web): Tem como
objetivo desenvolver protocolos que melhorem a interoperabilidade e promovam a
evoluo da WWW.
WCAG (Web Content Accessibility Guidelines: Recomendaes de
Acessibilidade para Contedo Web): Abrange diversas recomendaes com a
finalidade de tornar o contedo Web mais acessvel.
Webcast: Transmisso de udio e vdeo por meio da Internet ou redes corporativas
para um grupo de pessoas, simultaneamente.
XHTML (Extensible HyperText Markup Language): a linguagem HTML
reformulada para seguir as regras do XML.
XML (Extensible Markup Language): Uma linguagem de marcao semelhante
HTML, mas que permite a descrio de dados definidos por elementos de
programao.
72
7. Anexo 1 Tabela de Contraste de Cores

As tabelas a seguir mostram as cores que, em fundo preto ou branco, apresentam
uma relao de contraste de no mnimo 4,5:1.
Cores contrastantes com preto
#09
0
#0C
0
#0F0
#39
0
#3C
0
#3F0
#09
3
#0C
3
#0F3
#39
3
#3C
3
#3F3
#09
6
#0C
6
#0F6
#39
6
#3C
6
#3F6
#09
9
#0C
9
#0F9
#39
9
#3C
9
#3F9
#69
0
#6C
0
#6F0
#69
3
#6C
3
#6F3
#69
6
#6C
6
#6F6
#99
0
#9C
0
#9F0
#99
3
#9C
3
#9F3
#99
6
#9C
6
#9F6
#69
9
#6C
9
#6F9
#96
9
#99
9
#9C
9
#9F9
#C6
6
#C9
6
#CC
6
#CF6
#F06
#F36
#F66
#F96
#FC6
#FF6
#C3
9
#C6
9
#C9
9
#CC
9
#CF9
#F09
#F39
#F69
#F99
#FC9
#FF9
#C6
0
#C9
0
#CC
0
#CF0
#F00
#F30
#F60
#F90
#FC0
#FF0
#C6
3
#C9
3
#CC
3
#CF3
#F03
#F33
#F63
#F93
#FC3
#FF3
#09C
#09F
#0CC
#0CF
#0FC
#39C
#0FF
#39F
#3CC
#3CF
#3FC
#69C
#3FF
#66F
#69F
#6CC
#6CF
#6FC
#96C
#6FF
#96F
#99C
#99F
#9CC
#9CF
#9FC
#C3C
#9FF
#C0F
#C3F
#C6C
#C6F
#C9C
#C9F
#CCC
#CCF
#CFC
#F0C
#F3C
#F6C
#F9C
#FCC
#FFC
#CFF
#F0F
#F3F
#F6F
#F9F
#FCF
#FFF
Tabela 1 Cores contrastantes com a cor preta
73
#00
0
#03
0
#06
0
#30
0
#33
0
#36
0
#60
0
#63
0
#66
0
#90
0
#93
0
#96
0
#C0
0
#C3
0
Cores contrastantes com branco

#00 #00 #00 #00C
#00F
3
6
9
#03 #03 #03 #03C
#03F
3
6
9
#06 #06 #06 #06C
#06F
3
6
9
#30 #30 #30 #30C
#30F
3
6
9
#33 #33 #33 #33C
#33F
3
6
9
#36 #36 #36 #36C
#36F
3
6
9
#60 #60 #60 #60C
#60F
3
6
9
#63 #63 #63 #63C
#63F
3
6
9
#66 #66 #66 #66C
#66F
3
6
9
#90 #90 #90 #90C
#90F
3
6
9
#93 #93 #93 #93C
#93F
3
6
9
#96 #96
3
6
#C0
3
#C3
3
#C0
6
#C3
6
#C0
9
#C3
9
#C0C
Tabela 2 Cores contrastantes com a cor branca
74

e-MAG V3

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

e-MAG V3

Uploaded by

Copyright:

Available Formats

Ministrio do Planejamento, Oramento e Gesto

Secretaria de Logstica e Tecnologia da Informao

Modelo de Acessibilidade em Governo Eletrnico

Brasil. Ministrio do Planejamento, Oramento e Gesto. Secretaria

Compartilhar copiar, distribuir e transmitir a obra.

Remixar criar obras derivadas.

Sob as seguintes condies:

Ficando claro que:

Limitaes e excees aos direitos autorais ou quaisquer usos livres aplicveis;

Os direitos morais do autor;

Modelo de Acessibilidade em Governo Eletrnico e-MAG

Pela sua contribuio, via Consulta Pblica, com sugestes, esclarecimentos e

Equipe do DGE Departamento de Governo Eletrnico

Modelo de Acessibilidade em Governo Eletrnico e-MAG

Modelo de Acessibilidade em Governo Eletrnico e-MAG

1.1 Sobre a verso 3.0

Modelo de Acessibilidade em Governo Eletrnico e-MAG

A reviso do modelo e a nova verso foi desenvolvida atravs da parceria entre o

Modelo de Acessibilidade em Governo Eletrnico e-MAG

1. Decreto nmero 5296, de 2 de dezembro de 2004, que regulamenta as leis n

1.3 O acesso de pessoas com deficincia

Acesso ao computador sem mouse: no caso de pessoas com deficincia visual,

Modelo de Acessibilidade em Governo Eletrnico e-MAG

Acesso ao computador sem teclado: no caso de pessoas com amputaes,

Acesso ao computador sem monitor: no caso de pessoas com cegueira;

Acesso ao computador sem udio: no caso de pessoas com deficincia auditiva.

No entanto, esses no so os nicos casos que devem ser considerados quando se

1.4 O processo para desenvolver um stio acessvel

Para se criar um ambiente online efetivamente acessvel necessrio, primeiramente,

Modelo de Acessibilidade em Governo Eletrnico e-MAG

As diretrizes ou recomendaes de acessibilidade explicam como tornar o contedo

Aps a construo do ambiente online de acordo com os padres Web e as diretrizes

Modelo de Acessibilidade em Governo Eletrnico e-MAG

2. Verificar o fluxo de leitura da pgina para tal, utilizar um navegador textual,

Modelo de Acessibilidade em Governo Eletrnico e-MAG

OBS: As recomendaes deste documento so baseadas em HTML 4.0 e XHTML 1.1.

Modelo de Acessibilidade em Governo Eletrnico e-MAG

OS PADRES DE DESENVOLVIMENTO WEB

Ver WCAG 2.0 Critrios de Sucesso 4.1.1 e 4.1.2

<title> Exemplo de DOCTYPE em XHTML 1.1</title>

DE FORMA LGICA E SEMNTICA

Ver WCAG 2.0 Critrio de Sucesso 1.3.1

Modelo de Acessibilidade em Governo Eletrnico e-MAG

CORRETAMENTE OS NVEIS DE CABEALHO

Ver WCAG 2.0 Critrios de Sucesso 1.3.1 e 2.4.10

Modelo de Acessibilidade em Governo Eletrnico e-MAG

Figura 1 Exemplo de utilizao dos nveis de ttulo

Modelo de Acessibilidade em Governo Eletrnico e-MAG

DE FORMA LGICA E INTUITIVA A LEITURA E TABULAO

Ver WCAG 2.0 Critrios de Sucesso 1.3.2 e 2.4.3

tabindex realmente o desejado, evitando, assim, que o uso do tabindex resulte

<!primeiro foco -->

Modelo de Acessibilidade em Governo Eletrnico e-MAG

Exemplo incorreto do uso do tabindex

href="main.html" tabindex="1">Pgina Inicial</a></li>

Ordem de tabulao errada, conferida pelo tabindex:

TODAS AS FUNES DA PGINA VIA TECLADO

Ver WCAG 2.0 Critrios de Sucesso 2.1.1 e 2.1.2

OBS: * Alguns manipuladores de eventos so dispositivo-independentes, ou seja, se aplicam a qualquer

Modelo de Acessibilidade em Governo Eletrnico e-MAG

Quando forem utilizados mltiplos manipuladores de eventos para uma ao, de

NCORAS PARA IR DIRETO A UM BLOCO DE CONTEDO

Ver WCAG 2.0 Critrio de Sucesso 2.4.1

contedo desejado. Os links devem ser colocados em lugares estratgicos da pgina,