E MAGv 31

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
Projeto de Acessibilidade Virtual
Instituto Federal de Educao, Cincia e Tecnologia do Rio Grande do Sul
Instituto Federal de Educao, Cincia e Tecnologia do Cear
Instituto Federal de Educao, Cincia e Tecnologia Baiano
Verso 3.1
Modelo de Acessibilidade
em Governo Eletrnico
Abril de 2014
Brasil. Ministrio do Planejamento, Oramento e Gesto. Secretaria de Logstica

e Tecnologia da Informao
eMAG Modelo de Acessibilidade em Governo Eletrnico/ Ministrio do
Planejamento, Oramento e Gesto, Secretaria de Logstica e Tecnologia
da Informao - Braslia : MP, SLTI, 2014.
92 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 4.0
Internacional(CC BY 4.0)
http://creativecommons.org/licenses/by/4.0/deed.pt_BR
Voc tem a liberdade de:

Compartilhar copiar e distribuir o material em qualquer meio ou formato.
Adaptar remixar, transformar e desenvolver o material para qualquer finalidade,
mesmo comercialmente.
O concedente no pode revogar essas liberdades, contanto que voc siga os termos
da licena.
Sob as seguintes condies:
Atribuio Voc deve creditar a obra da forma especificada pelo autor ou
licenciante, e indicar as mudanas feitas (mas no de maneira que sugira que estes
concedem qualquer aval a voc ou ao seu uso da obra).
Sem restries adicionais Voc no pode aplicar termos jurdicos ou medidas de
carter tecnolgico que restrinjam legalmente outros de fazerem algo que a licena
permita.
Ficando claro que:

1. Renncia Qualquer das condies acima pode ser renunciada se voc
obtiver permisso do titular dos direitos autorais.
2. 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.
3. 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;

Modelo de Acessibilidade em Governo Eletrnico eMAG
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.
Agradecimentos
O Departamento de Governo Eletrnico (DGE) agradece :
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
Antnio de Queiroz (in memoriam), Marcus Vincius Bennett Ferreira, Maurcio Covolan
Rosito, Reinaldo Ferraz, Renato Busatto, Ricardo Moro, Ueslei Paterno e Woquiton
Fernandes, que tornaram a verso 3.0 do eMAG possvel. Por sua contribuio na
verso 3.1 agradecemos Anderson Lus Porto Costa, Everaldo Carniel, Lael Nervis,
Jason Pilotti e Lvio Siqueira Lima.
O DGE tambm agradece ao: Andr 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.
Pelas contribuies, via consulta pblica, com sugestes, esclarecimentos e correes
para o presente documento.
Equipe do DGE Departamento de Governo Eletrnico

Ana Elisa Dourado Salina Gabriel Analista em Tecnologia da Informao
Csar Gonalves do Bomfim Analista em Tecnologia da Informao
Edson Santos Martins Leite - Analista em Tecnologia da Informao
Fernanda Hoffmann Lobato Coordenadora Geral
Higo Gomes Mesquita - Analista em Tecnologia da Informao
Sumrio
1.Introduo......................................................................................................6
1.1 O acesso de pessoas com deficincia...........................................................6
1.2 Sobre as verses do eMAG.........................................................................7
1.3 Alteraes na verso 3.1............................................................................9
1.4 Legislao..............................................................................................10
2 . O processo para desenvolver um stio acessvel..............................................12
2.1 Primeiro passo: Padres Web....................................................................12
2.2 Segundo passo: Recomendaes de Acessibilidade......................................12
2.3 Terceiro passo: Avaliao de Acessibilidade.................................................13
2.4 Manuteno da acessibilidade...................................................................14
2.5 Recursos, ferramentas e leitura complementar............................................15
3 . Recomendaes de acessibilidade.................................................................16
3.1 Marcao................................................................................................16
Recomendao 1.1 Respeitar os Padres Web..............................................16
Recomendao 1.2 Organizar o cdigo HTML de forma lgica e semntica.......17
Recomendao 1.3 Utilizar corretamente os nveis de cabealho.....................19
Recomendao 1.4 Ordenar de forma lgica e intuitiva a leitura e tabulao....21
Recomendao 1.5 Fornecer ncoras para ir direto a um bloco de contedo.....22
Recomendao 1.6 No utilizar tabelas para diagramao.............................24
Recomendao 1.7 Separar links adjacentes................................................25
Recomendao 1.8 Dividir as reas de informao........................................27
Recomendao 1.9 No abrir novas instncias sem a solicitao do usurio.....32
3.2 Comportamento (Document Object Model DOM).......................................34
Recomendao
Recomendao
Recomendao
Recomendao
Recomendao
Recomendao
2.1 - Disponibilizar todas as funes da pgina via teclado.........34

2.2 Garantir que os objetos programveis sejam acessveis ....37
2.3- No criar pginas com atualizao automtica peridica......38
2.4 No utilizar redirecionamento automtico de pginas........39
2.5 Fornecer alternativa para modificar limite de tempo..........39
2.6 No incluir situaes com intermitncia de tela.................40
Recomendao 2.7 Assegurar o controle do usurio sobre as alteraes

temporais do contedo................................................................................40
3.3 Contedo / Informao............................................................................41
Recomendao
Recomendao
Recomendao
Recomendao
Recomendao
Recomendao
Recomendao
Recomendao
Recomendao
Recomendao
3.1 Identificar o idioma principal da pgina............................41

3.2 Informar mudana de idioma no contedo.......................42
3.3 Oferecer um ttulo descritivo e informativo pgina..........42
3.4 Informar o usurio sobre sua localizao na pgina..........43
3.5 Descrever links clara e sucintamente...............................43
3.6 Fornecer alternativa em texto para as imagens do stio......45
3.7 Utilizar mapas de imagem de forma acessvel...................50
3.8 Disponibilizar documentos em formatos acessveis............51
3.9 Em tabelas, utilizar ttulos e resumos de forma apropriada.51
3.10 Associar clulas de dados s clulas de cabealho...........52
Recomendao 3.11 Garantir a leitura e compreenso das informaes...........56

Recomendao 3.12 Disponibilizar uma explicao para siglas, abreviaturas e
palavras incomuns......................................................................................57
3.4 Apresentao / Design.............................................................................57
Recomendao 4.1 - Oferecer contraste mnimo entre plano de fundo e primeiro
plano.........................................................................................................57
Recomendao 4.2 No utilizar apenas cor ou outras caractersticas sensoriais
para diferenciar elementos...........................................................................58
Recomendao 4.3 Permitir redimensionamento sem perda de funcionalidade
................................................................................................................60
Recomendao 4.4 Possibilitar que o elemento com foco seja visualmente
evidente....................................................................................................65
3.5 Multimdia..............................................................................................66
Recomendao 5.1 Fornecer alternativa para vdeo.......................................66
Recomendao 5.2 Fornecer alternativa para udio......................................69
Recomendao 5.3 Oferecer audiodescrio para vdeo pr-gravado...............70
Recomendao 5.4 Fornecer controle de udio para som...............................70
Recomendao 5.5 Fornecer controle de animao.......................................71
3.6 Formulrios............................................................................................72
Recomendao 6.1 Fornecer alternativa em texto para os botes de imagem de
formulrios.................................................................................................72
Recomendao 6.2 Associar etiquetas aos seus campos................................72
Recomendao 6.3 Estabelecer uma ordem lgica de navegao....................73
Recomendao 6.4 No provocar automaticamente alterao no contexto.......73
Recomendao 6.5 Fornecer instrues para entrada de dados......................74
Recomendao 6.6 Identificar e descrever erros de entrada de dados e confirmar
o envio das informaes...............................................................................81
Recomendao 6.7 Agrupar campos de formulrio........................................84
Recomendao 6.8 Fornecer estratgias de segurana especficas ao invs de
CAPTCHA ..................................................................................................86
4 . Elementos padronizados de acessibilidade digital no Governo Federal................88
4.1 Atalhos de teclado...................................................................................88
4.2 Primeira folha de contraste.......................................................................88
4.3 Barra de acessibilidade.............................................................................89
4.4 Apresentao do mapa do stio..................................................................90
4.5 Pgina de descrio com os recursos de acessibilidade.................................91
5 . Prticas desaconselhadas.............................................................................93
6 . Glossrio....................................................................................................94
7 . Tabelas de Contraste de Cores......................................................................96
1. Introduo
Uma das principais atribuies do Governo Federal promover a incluso social, com
distribuio de renda e diminuio das desigualdades. Entre as diversas iniciativas que
visam atingir esse objetivo, o governo investe no uso adequado e coordenado da
tecnologia porque compreende a incluso digital como caminho para a incluso social.
Na ltima dcada, a expanso prodigiosa da Internet vem revolucionando as formas
de comunicao, de acesso informao e de realizao de negcios em todo o
mundo. Mas a que se deve este fenmeno? Basicamente, deve-se ao seu potencial
para atingir instantaneamente um grande nmero de pessoas, independentemente de
localizao geogrfica e de contexto scio-cultural.
Neste contexto, a inacessibilidade de stios eletrnicos exclui uma parcela significativa
da populao brasileira do acesso s informaes veiculadas na internet. O governo
brasileiro - tendo em vista suas atribuies - no pode aceitar tal situao na entrega
de informaes e servios sob sua responsabilidade.
O Modelo de Acessibilidade em Governo Eletrnico (eMAG) tem o compromisso de ser
o norteador no desenvolvimento e a adaptao de contedos digitais do governo
federal, garantindo o acesso a todos.
As recomendaes do eMAG permitem que a implementao da acessibilidade digital
seja conduzida de forma padronizada, de fcil implementao, coerente com as
necessidades brasileiras e em conformidade com os padres internacionais.
importante ressaltar que o eMAG trata de uma verso especializada do documento
internacional WCAG (Web Content Accessibility Guidelines: Recomendaes de
Acessibilidade para Contedo Web) voltado para o governo brasileiro, porm o eMAG
no exclui qualquer boa prtica de acessibilidade do WCAG.
1.1 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?
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.
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 barreiras de acessibilidade que dificultam
ou impossibilitam o acesso aos seus contedos.
Muitas pessoas tambm 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.
1.2 Sobre as verses do eMAG

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.
O eMAG foi desenvolvido em 2004 baseado no estudo de 14 normas existentes em
outros pases acerca de acessibilidade digital. Dentre as normas analisadas estavam a
Section 508 do governo dos Estados Unidos, os padres CLF do Canad, as diretrizes
irlandesas de acessibilidade e documentos de outros pases como 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.
Assim, a primeira verso do eMAG, a 1.4, 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, com as alteraes
propostas, foi disponibilizada em 14 de dezembro do mesmo ano.
Em 2007, a Portaria n 3, de 7 de maio, institucionalizou o eMAG no mbito do
sistema de Administrao dos Recursos de Informao e Informtica SISP, tornando
sua observncia obrigatria nos stios e portais do governo brasileiro.
As verses 1.4 e 2.0 eram divididas em dois documentos:
a viso do cidado, voltada a todos os cidado brasileiros e gestores,

apresentava o modelo de acessibilidade de forma simples e tinha cerca de 16
pginas.
a cartilha tcnica, voltada a desenvolvedores de stios, apresentava
detalhadamente a proposta de implementao das recomendaes de
acessibilidade em stios do governo, tinha 44 pginas com 57 recomendaes
de boas prticas e era voltada a rea tcnica. As recomendaes estavam
divididas em trs nveis de prioridades de acordo com o WCAG 1.0.
A diviso do eMAG em dois documentos 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 eMAG e o
lanamento da verso 2.0 do WCAG em 2008 marcaram o caminho para a reviso do
Modelo.
A reviso do modelo 2.0, que resultou na verso 3.0, 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).
A elaborao da verso 3.0 foi embasada na verso anterior do eMAG, apoiando-se na
WCAG 2.0, lanada em dezembro de 2008, e considerando as novas pesquisas na rea
de acessibilidade Web, sendo a minuta enviada para consulta de 30 especialistas nas
diversas reas da acessibilidade e tipos de deficincia. Apesar de utilizar a WCAG
como referncia, e estar alinhado a esta, o eMAG 3.0 foi desenvolvido e pensado para
as necessidades locais, visando atender as prioridades brasileiras.
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. Em 21 de setembro de 2011, a verso 3.0 do
eMAG foi lanada oficialmente no evento Acessibilidade Digital Um Direito de Todos.
A verso 3.0 do eMAG unificou em apenas um documento o Modelo, retirando a
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 eMAG 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.3 Alteraes na verso 3.1

A verso 3.1 do eMAG apresenta melhorias no contedo do texto para torn-lo mais
compreensvel.
O subitem O processo para desenvolver um stio acessvel, ganhou um captulo
prprio.
O captulo 4 teve sua terminologia alterada de Padres de acessibilidade digital no
Governo Federal para Elementos padronizados de acessibilidade digital no Governo
Federal. A quantidade de itens tambm foi alterada, eram 7 e agora so 5, incluindo
uma padronizao para a primeira folha de contraste e removendo as funcionalidades
aumentar e diminuir fonte da barra de acessibilidade, pois os navegadores de internet
j possuem estas funcionalidades nativas e so conhecidas pela maioria dos usurios.
Outros elementos foram removidos do captulo como Apresentao de formulrio,
Contedo alternativo para imagens e Apresentao de documentos, pois estes j
so contemplados pelas 45 recomendaes deste documento, o que causava
redundncia.
As recomendaes foram numeradas de acordo com as sees do eMAG, o que
facilitar a manuteno das recomendaes do modelo:
1. Marcao;
2. Comportamento (Document Object Model - DOM);
3. Contedo/Informao;
4. Apresentao/Design;
5. Multimdia;
6. Formulrio.
Outras modificaes nas recomendaes:
Algumas recomendaes tiveram seus enunciados refeitos com uma redao

mais clara.
A recomendao numero 5 foi movida para comportamento, sendo numerada
como 2.1;
A Recomendao 27 foi movida para sua sequencia lgica prxima sendo
numerada como 3.2;
A 31 mudou para marcao sendo numerada como 1.8.
10
Foram inseridos novos exemplos, inclusive com o uso de HTML5 e WAI-ARIA para
determinadas recomendaes.
Por fim, os links de Recursos e Leitura complementar foram retirados para permitir
alteraes mais dinmicas ao contedo, que pode ser consultado na pgina do eMAG
no Portal do Programa de Governo Eletrnico: http://governoeletronico.gov.br/acoese-projetos/eMAG
1.4 Legislao
Esto listados os principais documentos, que fazem parte da legislao que norteia o
processo de promoo da acessibilidade e a implementao do eMAG:
1. Comit Brasileiro (CB-40) da Associao Brasileira de Normas Tcnicas
(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;
2. Lei N 10.098, de 19 de dezembro de 2000, que estabelece normas gerais e
critrios bsicos para a promoo da acessibilidade das pessoas portadoras de
deficincia ou com mobilidade reduzida, e d outras providncias.
3. 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;
4. Portaria n 3, de 7 de maio de 2007, que institucionalizou o eMAG no mbito
do sistema de Administrao dos Recursos de Informao e Informtica (SISP),
tornando sua observncia obrigatria nos stios e portais do governo brasileiro.
5. Conveno Internacional sobre os Direitos das Pessoas com Deficincia (2007),
de 30 de maro de 2007, elaborada pela Naes Unidas, define, 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.
6. Decreto n 6949, de 25 de agosto de 2009, que promulga a Conveno
Internacional sobre os Direitos das Pessoas com Deficincia, tornando-a um
marco legal no Brasil.
7. Instruo Normativa MP/SLTI N04, de 12 de novembro de 2010, dispe sobre
o processo de contratao de Solues de Tecnologia da Informao pelos
rgos integrantes do Sistema de Administrao dos Recursos de Informao e
Informtica - SISP do Poder Executivo Federal.
8. Lei n 12.527, de 18 de novembro de 2011 (Lei de Acesso Informao), que
no seu artigo 8, pargrafo 3, inciso VIII preconiza que: Os stios de que
11
trata o 2 devero, na forma de regulamento, atender, entre outros, aos

seguintes requisitos: () adotar as medidas necessrias para garantir a
acessibilidade de contedo para pessoas com deficincia.
9. Decreto de n 7724, de 16 de maio de 2012, que regulamentou a lei de acesso
a informao, indica no seu artigo 8 pargrafo 3: Os stios na Internet dos
rgos e entidades devero, em cumprimento s normas estabelecidas pelo
Ministrio do Planejamento, Oramento e Gesto, (...).
12
2 . 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.
2.1 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 visam 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 veja a pgina do Escritrio Brasileiro do W3C http://w3c.br/. A Cartilha de
Codificao dos Padres Web em Governo Eletrnico (ePWG), disponvel em
http://www.governoeletronico.gov.br/acoes-e-projetos/padroes-brasil-e-gov/cartilhade-codificacao, lista uma srie de boas prticas.
2.2 Segundo passo: 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. A principal documentao nessa rea a WCAG (Web Content
13
Accessibility Guidelines - http://www.w3.org/TR/#tr_Accessibility__All em ingls)

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.
O WAI ainda desenvolveu especificaes para aplicaes web (Web Rica), ainda boa
parte em status de 'rascunho chamado WAI-ARIA (Accessible Rich Internet
Applications http://w3.org/standards/techs/aria#w3c_all), que busca resolver
muitos dos problemas da camada de comportamento (DOM), sendo parte j
implementada por alguns navegadores.
Por fim, o eMAG o documento que norteia o desenvolvimento de stios e portais
acessveis no mbito do governo federal.
2.3 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 validadores automticos. No que diz respeito s
diretrizes de acessibilidade, necessrio realizar, inicialmente, uma validao
automtica, que realizada atravs de 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.
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, 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.
Deve-se lembrar que aps cada teste, os ajustes devidos devem ser feitos e
novamente testados.
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;
2. Verificar o fluxo de leitura da pgina. A forma mais simples inibir o CSS,
imagens e scripts, lendo apenas o HTML da pgina. Boa parte dos navegadores
possuem ferramentas ou extenses que permitem essa visualizao. Outra
opo utilizar navegadores textuais, como o Lynx ou um leitor de tela. Para
maiores detalhes, ver documento Descrio dos Leitores de Tela, disponvel
14
em: http://www.governoeletronico.gov.br/acoes-e-projetos/eMAG/material-deapoio.
3. Realizar a validao automtica de acessibilidade utilizando o ASES e outros
avaliadores automticos sugeridos no Captulo 4;
4. Realizar a validao manual. 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. A validao manual deve ser feita preferencialmente com
dispositivos de tecnologia assistiva como leitores de tela. Deve-se percorrer
toda pgina apenas utilizando teclado, verificando comportamentos, atalhos,
folhas alternativas de contraste, se os textos alternativos esto descritos de
acordo com a imagem e seu contexto, entre outros. Listas com os itens a
serem testados (checklists) na validao humana podem ser encontradas em
http://www.governoeletronico.gov.br/acoes-e-projetos/eMAG/material-deapoio.
5. Teste com usurios reais. 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.
2.4 Manuteno da acessibilidade

A promoo da acessibilidade um processo contnuo, recomenda-se que testes
sejam realizados, de forma pontual, a cada alterao de contedo e validaes globais
em espaos determinados de tempo. O intervalo depende de diversos fatores, mas
altamente recomendvel que se valide o stio todo quando for feita a atualizao do
Sistema de Gesto de Contedo ou mudana de desenho.
Recomenda-se, tambm, que constem informaes sobre a acessibilidade do stio (ver
Captulo 4 - Elementos padronizados de acessibilidade digital no Governo Federal),
incluindo formas de contato em caso de dificuldade de acesso .
15
2.5 Recursos, ferramentas e leitura complementar

Na pgina http://www.governoeletronico.gov.br/acoes-e-projetos/eMAG possvel
encontrar ferramentas, aplicativos, cursos, tutoriais e links para outros sites que
auxiliam a implementao da acessibilidade.
16
3 . 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 de ordem tcnicas, como, por exemplo,
uma conexo lenta, a falta de recursos de mdia, etc.
Para facilitar a implementao das recomendaes, no eMAG elas so separadas por
sees de acordo com as necessidades de implementao:
1. Marcao;
2. Comportamento (Document Object Model - DOM);
3. Contedo/Informao;
4. Apresentao/Design;
5. Multimdia;
6. Formulrio.
No eMAG, diferente da WCAG internacional, as recomendaes de acessibilidade deste
documento no esto divididas por nveis de prioridade e sim por rea. Por se tratar
de recomendaes para pginas de governo, todas as recomendaes necessrias
para determinada situao devem ser seguidas. Assim, se a pgina a rea de
contato, as recomendaes de formulrio (alm das de marcao, contedo, etc)
devem ser seguidas, se apresentar vdeo, ateno especial deve ser dada as
recomendaes de multimdia.
3.1 Marcao
Recomendao 1.1 Respeitar os Padres Web
Ver WCAG 2.0 Critrios de Sucesso 4.1.1 e 4.1.2
Os Padres Web so recomendaes do W3C (World Wide Web Consortium), as quais
so destinadas a orientar os desenvolvedores para o uso de boas prticas que tornam
a web acessvel para todos, permitindo assim que os desenvolvedores criem
experincias ricas, alimentadas por um vasto armazenamento de dados, os quais
esto disponveis para qualquer dispositivo e compatveis com atuais e futuros agentes
de usurio (ex: navegadores).
17
Quando tratamos de acessibilidade as principais recomendaes so as de Web Design

e Aplicaes (http://www.w3c.br/Padroes/WebDesignAplicacoes), que referem-se aos
padres para o desenvolvimento de pginas Web, incluindo HTML5 CSS, SVG, Ajax, e
outras tecnologias para Aplicaes Web (WebApps), assim como o padro
internacional de acessibilidade WCAG, internacionalizao e dispositivos mveis.
Outro ponto importante no respeito aos Padres Web a separao de camadas. 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).
Figura 1: Camadas de um documento Web
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:
http://www.governoeletronico.gov.br/acoes-e-projetos/padroes-brasil-e-gov/cartilhade-codificacao.
Recomendao 1.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
18
contedo desejado. Cada elemento HTML deve ser utilizado para o fim que ele foi
criado.
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 tela descrevem primeiro o tipo de elemento e depois realizam a leitura
do contedo que est dentro desse elemento.
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>
Exemplo correto
<h1>Padres Web</h1>
<ul>
<li><a href="menu1.html">Menu 1</a></li>
</ul>
<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>
Exemplo correto em HTML5 (utilizando ARIA)

<header role="banner">
<h1>Padres Web</h1>
</header>
<nav role="navigation">
<ul>
</ul>
</nav>
<div role="main">
<blockquote>
O poder da web est em sua universalidade. Ser acessada por todos,
19
independente de deficincia, um aspecto essencial.

</blockquote>
<cite xml:lang="en">Tim Berners Lee</cite>
</div>
Recomendao 1.3 Utilizar corretamente os nveis de

cabealho
Os nveis de cabealho (elementos HTML H1 a H6) devem ser utilizados de forma
hierrquica, pois organizam a ordem de importncia e subordinao dos contedos,
facilitando a leitura e compreenso. Alm disso, muitos leitores de tela utilizam a
hierarquia de cabealhos como uma forma de navegao na pgina, 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 contedo principal da
pgina, assim recomendvel que toda pgina tenha apenas um H1. J os nveis do
H2 ao H6 podero ser utilizados mais de uma vez na pgina, mas sem excesso e com
lgica textual, obedecendo uma hierarquia. 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.
Exemplo
20
Figura 2: Exemplo de utilizao de cabealhos
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>
<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>
21
Exemplo de marcao adequada de cabealhos
Figura 3: Portal Brasil - Ordem de cabeahos e outros elementos semnticos.
Recomendao 1.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 do contedo principal da pgina antes do bloco
de menu. Isso facilita o acesso por quem navega via teclado, permitindo um acesso
mais gil, sem a necessidade de navegar por todos os itens de menu antes de chegar
ao contedo. Apesar de atalhos (como links e teclas) auxiliarem nesse sentido, alguns
usurios no sabem e podem ser de difcil utilizao para pessoas com deficincia
motora. Algumas das formas no funcionam em interfaces mais simples, como o
WebVox do DOSVOX. Lembrando que ao utilizar CSS, visualmente, os blocos de menu
e contedo podem ser dispostos em qualquer local da pgina.
Exemplo: bloco de contedo antes do bloco de menu
22
<body>
<div id=cabecalho>
...
<div id=conteudo>
<div id=menu>
<div id=rodape>
</body>
OBS: Em alguns casos, pode-se forar a navegao via atributo tabindex. No

entanto, se houver a necessidade de utilizar o tabindex, o mesmo dever ser
utilizado com a semntica correta e ser verificado manualmente se o fluxo fornecido
realmente o desejado. O uso do tabindex pode resultar em uma ordem e tabulao
inconsistente.
Recomendao 1.5 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
contedo desejado. Os links devem ser colocados em lugares estratgicos da pgina,
como no incio e fim do contedo e incio de fim do menu. importante ressaltar
que o primeiro link da pgina deve ser o de ir para o contedo.
Para facilitar a utilizao das ncoras, podem ser disponibilizados atalhos por teclado,
utilizando o atributo accesskey nos links relevantes. No pode haver repetio do
mesmo accesskey em uma pgina. Para o governo federal so recomendados atalhos
para o menu principal, para o contedo e para a caixa de pesquisa. Maiores detalhes a
esse respeito podem ser encontrados no captulo 3 Elementos de acessibilidade nas
pginas do Governo Federal.
Devem ser utilizados ambos os atributos name e id para que as ncoras funcionem em
todos os navegadores e tecnologias assistivas, tanto textuais quanto grficos, j que
h os que suportam ambos os atributos e os que suportam apenas um deles.
Os links indicadores de incio e fim de contedo e incio e fim de menu podem estar
ocultos na pgina utilizando folhas de estilo. No entanto, necessrio tomar o cuidado
de ocult-los de forma que eles continuem acessveis aos leitores de tela. Os
mecanismos para ocultar elementos e seus efeitos na acessibilidade so os seguintes:
23
CSS
Efeito na tela
Efeito na acessibilidade
O elemento fica oculto,

mas continua a ocupar o
espao que normalmente
ocuparia
O contedo ignorado pelos

leitores de tela
display:none;
O elemento fica oculto e

no ocupa espao

leitores de tela
height: 0; width: 0;
overflow: hidden;
O elemento fica oculto e

no ocupa espao

leitores de tela
O contedo movido para

fora da tela, no sendo
mais visvel, mas links
podem ser focalizados de
maneira imprevisvel
Os leitores de tela acessam o

contedo, mas somente texto
e elementos inline
O contedo removido de
sua posio, no
ocupando espao e
movido para fora da
tela, ficando oculto
Os leitores de tela acessam o

contedo
visibility:hidden;
text-indent: -999em;
position: absolute;
left: -999em;
Tabela 1: Atributos em CSS para ocultar elementos de acessibilidade
Exemplo
Topo da Pgina (na barra de acessibilidade)
<ul id="atalhos">
<li><a href="#irconteudo" accesskey="1">Ir Conteudo[1]</a></li>
<li><a href="#irmenu" accesskey="2">Ir para menu principal[2]</a></li>
<li><a href="#irbusca">Ir para busca [3]</a></li>
</ul>
Contedo da Pgina
<div>
<a href="#" id="irconteudo" class="oculto">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" href="#" id="irbusca" value="Pesquise aqui" />
<input type="submit" value="Buscar" class="buscar" name="buscar" />
</fieldset>
</form>
Recomendao 1.6 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.
Exemplo incorreto - Utilizao de tabela para leiaute
</head>
<body>
<table border="1">
<tr id="topo">
<td colspan="2">

</td>
<td colspan="3">
<h1>Exemplo com tabela</h1>
</td>
</tr>
<tr id="menu">
<td><a href="menu1.html">Menu 1</a></td>
</tr>
<tr id="conteudo">
<td colspan="4" id="central">

</td>
<td id="lateral">

</td>
</tr>
<tr id="rodape">
<td colspan="2">

</td>
<td colspan="3">

</td>
</tr>
25
</table>
</body>
</html>
Exemplo correto Utilizao de tableless para diagramao

...
</head>
<body>
<div id="topo" role=banner>
<div>
</div>
<h1>Exemplo sem tabelas!</h1>
</div>
<div id="menu" role=navigation>
<ul>
</ul>
</div>
<div id="conteudo" role="main">
<div id="lateral">
</div>
<div id="rodape" role="contentinfo">

<address>

</address>
</div></div>
</body>
</html>
Recomendao 1.7 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.
Caso os links estejam no meio de um pargrafo de contedo texto, pode-se utilizar
vrgulas, parnteses, colchetes, pipe, entre outros, para fazer a separao.
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>
26
</p>

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>

Em HTML5 e ARIA
<div id="menu" role="menu">
<div role="menuitem"> <a href="home.html">Home</a></div>
<div role="menuitem"> <a href="pesquisa.html">Pesquisa</a></div>
<div role="menuitem"> <a href="mapasite.html">Mapa do Site</a></div>
</div>
Menus em HTML5 e ARIA

Existem trs roles da especificao ARIA que podem ser utilizados para as listas: o
role navigation, que indica o menu principal do site (esse role possui a mesma funo
que a elemento NAV do HTML5). O segundo e o terceiro roles so muito semelhantes,
o role menu e o role menubar. Os dois possuem a funo de indicar menus que no
so o principal da pgina. A diferena entre os dois que o role menu possui um
sentindo mais geral enquanto o menubar ideal para criaes de menu na horizontal.
Um exemplo de uso de menu pode ser a utilizao de sub-menus dentro do menu
principal. Os roles menu e menubar podem possuir filhos com role menuitem para
indicar que se trata de um item daquele menu.
...
</head>
<body>
<header id="topo" role="banner">
<div>
</div>
<h1>Exemplo com tabela</h1>
</header>
<nav id="menu" role="navigation">
<ul>
<ul>
</nav>
<div role="main">
<div id="central">
</div>
<div id="lateral">
27

</div>
</div>
<footer id="rodape" role="contentinfo">
<p></p>
<p></p>
</footer>
</body>
</html>
Recomendao 1.8 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 deve-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.
Figura 4: Exemplo de diviso de blocos de contedo
Exemplo
<div id="topo">
<a href="#inicioTopo" id="inicioTopo">Topo</a>
28
<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>
<input type="text" id="busca" name="busca" accesskey="3" value="Pesquise aqui" />
</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 captulo 4 Elementos padronizados
de acessibilidade digital no 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.
Em HTML5 e ARIA
As elementos estruturais do HTML HEADER, NAV, SECTION, ARTICLE, ASIDE e
FOOTER j so interpretadas pela maioria dos leitores de tela. No entanto,
importante utilizar os landmarks roles de ARIA associados a elas, para garantir que
todos os recursos de tecnologia assistiva realizem a interpretao da informao.
Apesar de a informao ficar duplicada, os leitores de tela que reconhecem o HTML5
29
daro preferncia ao HTML e, dessa forma, no iro ler duas vezes a mesma
informao.
Exemplos de elementos estruturais no HTML5:
<header>
Contm informaes introdutrias para uma pgina ou para uma seo dela.
<nav>
utilizada para sees da pgina que contenham links para outras pginas ou
sees, como o menu principal, por exemplo.
<section>
Representa uma seo genrica ou uma seo que contm uma aplicao.
Funciona de maneira parecida com a elemento <div>, separando sees do
documento.
<article>
Representa uma seo da pgina independente, como uma postagem em um
blog, um comentrio em um frum, entre outros.
<aside>
Contm contedo relacionado rea principal do documento.
<footer>
utilizada para demarcar o rodap da pgina ou de uma seo do contedo.
Exemplos de landmark roles em ARIA:
Banner
Contm informaes voltadas ao site como um todo e no somente pgina.
Representa as informaes normalmente contidas no topo das pginas, como o
ttulo e o logo do site e a barra de acessibilidade.
Complementary
Contedo adicional ou complementar ao contedo principal.
Contentinfo
Contm informaes gerais do site como um todo, que normalmente aparecem
no rodap, como copyright, contato, etc.
Main
Contm o contedo principal da pgina.
Navigation
Contm os links para navegar pelas partes do site ou da pgina, como o caso
do menu.
Search
Esta seo contm o formulrio de busca do site.
30
O elemento HEADER pode ser utilizado vrias vezes em uma mesma pgina sem
problemas de semntica, pois ele possui duas funes diferentes. A primeira a de
conter as informaes do topo da pgina e, para isso, dever ser utilizado o role
banner. A segunda funo para indicar um cabealho de seo e pode ser utilizada
vrias vezes no documento. Neste caso, deve ser utilizado o role heading e,
preferencialmente, dever conter algum nvel de ttulo.
O contedo principal do site no possui um elemento especfico no HTML5 como os
demais, ento a sua identificao feita com o valor main no role.
O elemento FOOTER, assim como o HEADER, pode ser utilizado mais que uma vez na
mesma pgina, pois ele pode ser utilizado para dois objetivos. O primeiro para o
rodap geral da pgina que deve receber o valor contentinfo para o role. O segundo
para indicar rodap em sees e, nesse caso, deve ser utilizado o role complementary.
O elemento SECTION do HTML5 indicado para separar sees dentro do documento,
podendo ser utilizado quantas vezes forem necessrias na mesma pgina. O ARIA role
que contm o mesmo papel do elemento possui o valor section.
Abaixo, temos um exemplo de estrutura de uma pgina utilizando as elementos
estruturais do HTML5 e ARIA roles. Alm dos landmarks, tambm foram utilizados
outros roles, como o caso do heading (utilizado para identificar ttulos) e do article
(identifica contedo que faz sentido isolado, que independente, como uma postagem
em um blog).
Figura 5: Estrutura com HTML5 e ARIA
Como podemos ver, o HTML5 ampliou consideravelmente a quantidade de elementos,

os quais, aliados aos roles do WAI ARIA, vm facilitar a aplicao de semntica em
31
reas estruturais. Porm, mesmo com a aplicao dessas novas ferramentas ainda
devem ser fornecidas ncoras para as reas relevantes da pgina (ver Recomendao
6), pois a marcao semntica ainda no suficiente para garantir que os leitores de
tela ou outros agentes de usurio que possuem funcionalidades especficas para
navegao pelo teclado, consigam listar esses novos elementos.
Toda diviso de contedo que possua um significado importante deve ser feita
utilizando o elemento SECTION no lugar do elemento DIV, pois o DIV no HTML5 possui
a funo de apenas agrupar elementos que precisam ser agrupados, mas no
possuem uma separao semntica dos demais elementos.
Exemplo de cdigo utilizando HTML5 e ARIA roles para as diferentes reas de
informao, alm de manter os atalhos para contedo, menu e busca:
<header role="banner">
<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>
</header>
<nav role="navigation">
<a href="#inicioMenu" id="inicioMenu" accesskey="2">Menu</a>
<ul>
<li>Itens de menu</li>
<li>...</li>
</ul>
</nav>
<a href="#inicioConteudo" id="inicioConteudo" accesskey="1">Contedo</a>
<section role="section" aria-label="Formulrio de busca">
<fieldset>
<input type="text" id="busca" name="busca" accesskey="3"
value="Pesquise aqui" />
</fieldset>
</form>
</section>
<section role="section" aria-label="Contedo Principal">
<header role="heading">
<h2>BEM VINDO</h2>
</header>
<p>Seja bem vindo ao nosso site.</p>
</section>
</div>
<footer role="contentinfo">
32
<a href="#inicioRodape" id="inicioRodape">Rodap</a>

<address> Rua XXX</address>
</footer>
Recomendao 1.9 No abrir novas instncias sem a

solicitao do usurio
A deciso de utilizar-se de novas instncias por exemplo abas ou janelas - para
acesso a pginas e servios ou qualquer informao deve ser de escolha do usurio.
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 outros elementos, que no tenham sido solicitadas pelo usurio.
muito importante que os links abram na guia ou janela atual de navegao, pois os
usurios com deficincia visual podem ter dificuldade em identificar que uma nova
janela foi aberta. Alm disso, estando em uma nova janela, no conseguiro retornar
pgina anterior utilizando a opo voltar do navegador. Quando for realmente
necessria a abertura de um link em nova janela, recomendado que tal ao seja
informada ao usurio no prprio texto do link. Isso permite ao usurio decidir se quer
ou no sair da janela ou aba em que se encontra e, caso decida acessar o link, ele
saber que se trata de uma nova aba ou janela.
Exemplo
<a href=universal.html> Desenho Universal (abre em nova janela) </a>
As janelas modais, como as lightbox, fazem com que o foco do teclado permanea
atrs da janela, ou seja, o usurio navegando pelo teclado no tem acesso ao
contedo dessas janelas. Alm disso, as janelas modais, em geral, no apresentam
um bom nvel de acessibilidade em dispositivos mveis. Assim, se houver real
necessidade de utilizar esse tipo de elemento, preciso garantir que o foco seja
remetido para o incio do contedo da janela modal, que o contedo dentro da mesma
seja acessvel e que seja possvel retornar facilmente para o site navegando pelo
teclado.
Exemplo
Um exemplo simples para criao de uma janela modal foi colocado abaixo contendo
apenas HTML e CSS3.
33
Figura 6: Exemplo de janela modal
HTML
<a href="#openModal">Abrir Janela Modal</a>
<div id="openModal" class="modalDialog">
<div>
<a href="#close" class="close">Fechar</a>
<h2>Janela Modal</h2>
<p>
Esta uma janela modal acessvel e foi criada utilizando apenas HTML e CSS3.
</p>
<p> importante disponibilizar o link abaixo para sinalizar o final da janela modal.<
/p>
<a href="#close">Fim do contedo modal, clique aqui para retornar</a>
</div>
</div>
</div>
CSS3
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
display:none;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
display: block;
pointer-events: auto;
}
.modalDialog > div {
34
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 104px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
3.2 Comportamento (Document Object Model DOM)

Recomendao 2.1 - Disponibilizar todas as funes da pgina
via teclado
Todas as funes da pgina desenvolvidas utilizando-se linguagens de script
(javascript) devem ser programadas, primeiramente, para o uso com teclado. 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:
35
Evento do teclado
Evento correspondente do mouse
onkeydown
onmousedown
onkeyup
onmouseup
onkeypress
onclick*
onfocus*
onmouseover
onblur*
onmouseout
Tabela 2: Eventos de teclado e seus correspondentes aos de mouse.
OBS: * Alguns manipuladores de eventos so dispositivos-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).
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:
Exemplo:
HTML
<script src="js/exemplo.js" type="text/javascript"></script>
<noscript>Seu navegador no tem suporte a JavaScript ou est desativado!</noscript>
...
<p><a href="#"id="link">Portal Brasil</a></p>
Arquivo JavaScript (exemplo.js)

varx=document.getElementById("link")
x.onkeydown=function(e){
varpressedkey
if(typeofevent!='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
}
}
36
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. Os menus do tipo dropdown e outros que
contiverem subitens devem ser acessveis pelo teclado.
Em HTML5 e ARIA
Menus suspensos so timos para organizar sites muito grandes, porm esses menus
podem acarretar problemas na acessibilidade, especialmente no que diz respeito ao
acesso aos subitens. Esses menus, em muitos casos, so desenvolvidos de forma que
funcionam apenas com eventos do mouse, o que se torna um grande problema de
acessibilidade. Abaixo, apresentado um exemplo que utiliza HTML5 e ARIA, alm de
implementao de javascript, pensando-se na acessibilidade nos subitens.
HTML5
<nav role="navigation" aria-label="Menu principal" class="topnav" id="menu">
<ul>
<li><a href="index.php">Pgina inicial</a></li>
<li><a href="noticias.php">Notcias</a></li>
<li><a href="eventos.php">Eventos</a></li>
<li>
<a href="acessibilidade-web.php">Acessibilidade Web</a>
<p><a href="#" class="expandir">Expandir menu Acessibilidade Web</a></p>
<ul class="subnav" role="menu">
<li role="menuitem"><a href="#">Projetos acessibilidade web</a></li>
<li role="menuitem"><a href="#">Notcias acessibilidade web</a></li>
<li role="menuitem"><a href="#">Dicas acessibilidade web</a></li>
<li role="menuitem"><a href="#">Manuais acessibilidade web</a></li>
</ul>
</li>
</ul>
</nav>
CSS
/* utilizado para o menu ficar na verticaL */
#menu li{
display: inline-block;
}
/*utilizado para o link ficar no mesmo tamanho que a li */
#menu li a{
display: block;
padding:15px; /* apenas para apresentao visual, no influencia conteudo */
}
/* bloco de codigos utilizado apenas para apresentao visual do link expandir/ocultar
*/
#menu li .expandir{
float: right;
width: 13px;
37
height: 13px;
text-indent: -5000px;
margin-top: -48px;
padding: 0;
background-color:#000;
}
/* cria a caixa de sub-menu com posio absoluta sobre os demais elementos do site */
.topnav li .subnav {
position:absolute;
width: 230px;
display: none;
}
Javascript:
O Javascript abaixo adiciona as funes do link mostrar/ocultar, porm deve ser
utilizado junto com a biblioteca do jQuery (http://jquery.com/).
//javascript para mostrar/ocultar submenu
$(document).ready(function(){
$('.leitor-de-telas div, .eventos .lista, .dicas .myhide').hide();
$(".expandir").click(function() {
$(this).parent().next().slideToggle('slow');
var text = $(this).text();
if( text.search("Expandir") != -1 ){ // -1 quando no encontra a string
$(this).text(text.replace("Expandir", "Ocultar"));
}else{
$(this).text(text.replace("Ocultar", "Expandir"));
}
return false;
});
});
Recomendao 2.2 Garantir que os objetos programveis

sejam acessveis
Deve-se garantir que scripts e contedos dinmicos e outros elementos programveis
sejam acessveis e que seja possvel sua execuo via navegao. Alm de
proporcionar o uso por teclado, estratgias devem ser adotadas para proporcionar o
acesso a todos independente de seu dispositivo. A funcionalidade drag-an-drop pode
ter como alternativa o uso dos atalhos de recortar e colar.
Exemplo incorreto
Pgina HTML
38
<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.
Exemplo correto
Pgina HTML
<script src="js/exemplo.js" type="text/javascript"></script>
<noscript>Seu navegador no tem suporte a JavaScript ou est desativado!</noscript>
<a href="cadastro.html"id="cadastro">Cadastre-se agora!</a>
Arquivo JavaScript (exemplo.js)

function pop() {
alert("Voc vai fazer um novo cadastro!");
}
var element = document.getElementById("cadastro");
element.onclick = pop;
A funo alert do javascript no gera um pop-up e sim uma mensagem que lida
por todos os leitores de tela.
Quando no for possvel que o elemento programvel seja diretamente acessvel, deve
ser fornecida uma alternativa em HTML para o contedo.
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
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.
Recomendao 2.3- No criar pginas com atualizao

automtica peridica
Ver WCAG 2.0 Critrio de Sucesso 3.2.5 (Tcnicas SVR1 e H76)
A atualizao automtica peridica muito utilizada por canais de notcias -
comumente realizada atravs do uso do o atributo http-equiv com contedo refresh
da elemento meta no HEAD do documento (ex: <meta http-equiv="refresh" content="30"
/>, onde a pgina seria recarregada a cada 30 segundos). O problema dessa
atualizao que ela tira do usurio sua autonomia em relao escolha (semelhante
39
a abertura de novas instncias em navegadores) e podem confundir e desorientar os

usurios, especialmente usurios que utilizam leitores de tela.
Como exemplo de uma boa prtica, 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.
Figura 7: O Webmail Expresso possui um boto de atualizar para carregamento de novas mensagens
Exemplo:
Recomendao 2.4 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 a uma nova pgina, como o uso
do atributo http-equiv com contedo refresh do elemento META. Ao invs disso,
deve-se configurar o servidor para que o redirecionamento seja transparente para o
usurio (ver ePWG - Cartilha de Codificao em
http://epwg.governoeletronico.gov.br/cartilha-codificacao).
Recomendao 2.5 Fornecer 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. Essa recomendao no se aplica a
eventos em que o limite de tempo absolutamente necessrio.
Deve-se lembrar que, em ambos os casos, o limite de tempo deve ser informado.
40
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. O site deve possuir um mecanismo que permita ao
cidado aumentar o limite de tempo, disponibilizando por exemplo um boto para
aumentar o tempo em 5 minutos.
Recomendao 2.6 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.
Exemplo: A imagem abaixo representa um elemento piscante, onde as intermitncias
ocorrem a cada 0,2 segundos.
Figura 8: Exemplo de intermitncia de imagem
Recomendao 2.7 Assegurar o controle do usurio sobre as

alteraes temporais do contedo
Contedos como slideshows, 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.
41
desejvel que o usurio tenha tambm o controle da velocidade desses contedos.
Figura 9: exemplo de slideshow, com mecanismos de parada e navegao entre os slides.
3.3 Contedo / Informao

Recomendao 3.1 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.
Ele deve ser declarado em todas as pginas, pois alm de auxiliar na acessibilidade do
contedo, tambm permite melhor indexao pelos motores de busca.
Exemplos:
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" lang="pt-BR">
<head>
Em HTML5
<html lang="pt-br">
42
<head>
Recomendao 3.2 Informar mudana de idioma no contedo

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>
<p>
O leitor de tela <span lang="en">JAWS</span> (acrnimo para <span lang="en">Job

Access With Speech</span>) um software desenvolvido pela empresa americana <span
lang="en">FreedomScientific</span> e , atualmente, um dos mais populares no mundo.
Trata-se de um <span lang="en">software pago</span>, desenvolvido para o sistema
operacional <span lang="en">Microsoft Windows</span>.
</p>
Recomendao 3.3 Oferecer um ttulo descritivo e informativo

pgina
O ttulo da pgina deve ser descritivo e informativo, devendo representar o contedo
principal da pgina, j que essa informao ser a primeira lida pelo leitor de tela,
quando o usurio acessar a pgina. O ttulo informado pelo elemento TITLE e deve
preferencialmente seguir a estrutura recomendada pelo ePWG, que [assunto
principal da pgina] [nome do stio ou sistema] sem palavras extras, ou recursos
estilsticos. Na pgina inicial do sistema ou portal, basta seguir a estrutura [nome do
stio ou sistema].
Exemplo 1
A pgina inicial do Projeto de Acessibilidade Virtual apresenta o seguinte ttulo:
<title>
43
Projeto Acessibilidade Virtual

</title>
Exemplo 2
A pgina secundria Contato do Projeto de Acessibilidade Virtual apresenta o
seguinte ttulo:
<title>
Contato - Projeto Acessibilidade Virtual
</title>
Exemplo 3
A pgina interna Publicaes do stio do Ministrio da Educao apresenta o seguinte
ttulo:
<title>
Publicaes Ministrio da Educao

</title>
Para mais detalhes a respeito do ttulo descritivo, ver ePWG - Cartilha de Codificao
do ePWG (disponvel em: http://epwg.governoeletronico.gov.br/cartilha-codificacao)
Recomendao 3.4 Informar o usurio sobre sua localizao

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 os quais 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, disponibilizada a
seguinte Migalha de po:
Voc est em: Pgina inicial > Ensino > Editais

OBS: Na migalha de po, todas as pginas do caminho, com exceo da qual est o
usurio (posio atual), devero estar implementadas como links e contidas dentro de
uma lista.
Recomendao 3.5 Descrever links clara e sucintamente

44
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 a mesma descrio para dois ou mais links
que apontem para destinos diferentes. Da mesma forma, links que remetem ao
mesmo destino devem ter a mesma descrio.
Exemplo Incorreto
<h2>Educao Superior</h2>
<p>Tomam posse os reitores das federais da Bahia e Tringulo</p>
<p> <a href="notici5125.html" title=Leia mais notcias sobre Educao
Superior>Leia mais notcias sobre Educao Superior</a> </p>
Exemplo correto
<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>
Repare no exemplo incorreto acima 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, e jamais repita o contedo do link no atributo
title.
Exemplo incorreto:
Clique aqui para saber mais a respeito de acessibilidade.
Exemplo correto:
Saiba mais a respeito de acessibilidade
OBS: No se deve fazer a utilizao de links do tipo clique aqui, leia mais, mais,
saiba mais, veja mais, acesse a lista, pois estas expresses no fazem 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.
Em links de arquivos para download, necessrio informar a extenso e o tamanho do
arquivo no prprio texto do link, conforme exemplo a seguir.
Exemplo
<a href=cartilha.odt>Cartilha de Acessibilidade do W3C (.odt 150Kb)</a>
45
Recomendao 3.6 Fornecer 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, para
tanto o atributo alt.
Exemplo 1
Figura 10: Exemplo de descrio de imagem.
No cdigo:
<img src="foto-porto-alegre.jpg" alt="Foto de uma bicicleta de carga verde com caixas
laranjas encostada numa parede" />
No caso de banners e outras imagens que reproduzam textos, o ideal reproduzir o

texto escrito.
Exemplo 2
Figura 11: exemplo de banner
No cdigo:
<a href="http://www.dominiopublico.gov.br/">
<img src="guia.png" alt="Guia de Servios Consulte servios pblicos de forma
fcil" />
</a>
Descrever qualquer imagem, em geral, algo bastante subjetivo e a descrio deve

46
ser adaptada ao contexto em que a imagem se encontra. Para mais detalhes de como
escrever um texto alternativo, veja o tutorial O uso correto do texto alternativo na
seo do eMAG no portal de Governo Eletrnico
(http://governoeletronico.gov.br/acoes-e-projetos/e-MAG/material-de-apoio).
Apesar de no haver um limite de caracteres para o 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 infogrficos, 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.
Exemplo 3
Figura 12: Exemplo de descrio de infogrfico - A

descrio textual est disponvel em outra pgina
No cdigo da pgina do infogrfico:

<img src="grafico.jpg" alt="Infogrfico sobre selos e certificaes conscientes"
/>
<p><a href="selos-e-certificacoes.html">Contedo texto do Inforgrfico</a> disponvel</p>
47
Cdigo em selos-e-certificacoes.html
<h1>Selos e certificaes conscientes</h1>
<p>Conheas os selos e certificaes que atestam a qualidade e responsabilidade das
empresas na produo</p>
<dl>
<dt>Orgnico Brasil</dt>
<dd>Selo do Sistema Brasileiro de Avaliao de Conformidade Orgnica (SISOrg)
identifica e controla a produo nacional de alimentos orgnicos, caracterizada por
processo sustentvele em relao ao uso da gua, solo, ar e recursos naturais, e sem uso
de agrotxicos ou adubos qumicos. Para saber mais visite: <a
href="http://www.agricultura.gov.br/desenvolvimentosustentavel/organicos">
Orgnico Brasil</a></dd>
<dt>Inmetro</dt>
<dd>O selo do Instituto Nacional de Metrologia, Qualidade e Tecnologia, certifica
que o produto foi submetido a testes e medies que garantem a conformidade com os
padres das unidades de medida existentes. Para saber mais visite: <a
href="http://www.inmetro.gov.br">Inmetro</a></dd>
<dt>Procel</dt>
<dd>Selo Procel de Economia de Energia indica os produtos com os melhores nveis de
eficincia energtica dentro de cada categoria, proporcionando economia na conta de luz.
O selo tambm incentiva o desenvolvimento de produtos inovadores que contribuam para
preservao do meio ambiente. Para saber mais visite: <a
href="http://www.eletrobras.com/procel">Procel</a></dd>
<dt>Conselho de Manejo Florestal</dt>
<dd>O selo do <span lang=en>Forest Stewardship Council</span>, que nacionalmente
chamado de FSC Brasil (conselho de MAnejo Florestal), garante que a madeira utilizada na
fabricao de um produto seja proveniente de procedimento ecologicamente adequado que
no degrada o meio ambiente e contribui para o desenvolvimento econmico e social das
comunidade florestais adequadas. Para saber mais visite: <a
href="http://br.fsc.org/">FSC.org</a></dd>
<dt><span lang=en>Fairtrade</span></dt>
<dd>A certificao <span lang=en>Fairtrade</span>, que na traduo significa
"comercio Justo", um dos pilares do comrcio sustentvel, j que seus produtos e
servios devem estar de acordo com princpios como a garantia de pagamento de preos
justos a pequenos produtores, a preservao da sade das pessoas e do meio ambiente e a
eliminao da intermediao comercial especulativa. Para saber mais visite: <a
href="http://www.fairtrade.net/"><span lang=en>Fairtrade</span></a></dd>
<dt><abbr=Associao Brasileira de Normas Tcnicas>ABNT</abbr></dt>
<dd>A certificao Rotulagem Ambiental da Associao Brasileira de Normas Tcnicas
(ABNT) visa atestar quais produtos so menos prejudiciais ao meio ambiente, incentivando
a reduo de uso de energia, de matrias primas e da poluio durante os processos de
produo e comercializao. Para saber mais visite: <a
href="http://www.abntonline.com.br/rotulo/">ABNT</span></a></dd>
<dt>Lista suja do trabalho escravo </dt>
<dd>Para evitar consumir produtos de empresas que tenham em sua cadeia produtiva
fornecedores flagrados pela prtica do trabalho escravo, as empresas t m acesso a lista
suja do trabalho escravo, divulgadas pelo governo federal, por meio do sistema de busca
feito pela Organizao Internacional do Trabalho, o Instituto Ethos e a ONG Reprter
Brasil, o que torna mais rpida a deciso de suspender fornecedores irregulares. Para
saber mais visite: <a href="http://www.reporterbrasil.org.br/pacto/signatarios">Pacto
Nacional para a Erradicao do Trabalho Escravo</a></dd>
</dl>
48
Lembrando que em grficos simples, as informaes podem estar contidas na prpria

pgina ajudando o entendimento, inclusive, de pessoas que tem dificuldade com
visualizaes de grficos ou queiram utilizar as informaes para outros fins, como
pesquisas.
Figura 13: Dados simples podem ser representados tanto graficamente

quanto em forma de tabelas.
Em HTML5
Foram incorporados ao HTML5 os elementos FIGURE e FIGCAPTION, que so utilizados
em conjunto com o objetivo de agrupar uma imagem IMG com a sua legenda, a qual
aparecer visualmente.
O elemento FIGURE no usado apenas para marcao de imagens, ele define um
bloco de contedo independente que normalmente contm linhas de cdigos,
imagens, grficos, diagramas e vdeos que fazem referncia ao contedo principal do
documento. O elemento FIGCAPTION opcional e exibe uma legenda para o elemento
FIGURE. Esse novo elemento age como subttulo opcional ou legenda para qualquer
contedo contido dentro do elemento FIGURE e no substitui o atributo alt nas
descries das imagens. Pode-se ter vrias imagens, vdeos, grficos, dentro de um
nico elemento FIGURE. Caso haja um elemento FIGCAPTION este deve ser o primeiro
ou o ltimo filho do elemento FIGURE e s um FIGCAPTION ir representar a legenda.
Exemplo
49
HTML
<figure>
<img src="paubrasil.jpg" alt="Foto de uma rvore pau-brasil" />
<figcaption>
Figura 1: Imagem da rvore que deu origem ao nome do nosso pas: Pau-brasil
</figcaption>
</figure>
Que seria traduzido visualmente na pgina da seguinte forma:
Figura 14: Uso dos elemento figure e figcaption
OBS:
Imagens que no transmitem contedo, ou seja, imagens decorativas, devem ser
inseridas por CSS. No exemplo a seguir, o separador pontilhado logo abaixo do ttulo
de nvel 3 Acessibilidade web uma imagem decorativa cuja funo foi inserida
atravs das folhas de estilo. Note que em alguns casos a imagem pode ser substituda
por um cdigo CSS.
Exemplo
Figura 15: Ttulo em texto com imagem decorativa de separador pontilhado
HTML
<h3>Acessibilidade web</h3>
CSS
h3 {
color: #64860B;
font-size: 1.4em;
50
font-weight: lighter;
padding: 5px 0 10px;
height: 30px;
border-bottom: 1px dotted #666;
}
Recomendao 3.7 Utilizar mapas de imagem de forma

acessvel
Um mapa de imagens uma imagem dividida em reas selecionveis definidas por
elemento AREA . Cada rea um link para outra pgina Web ou outra seo da pgina
atual. um recurso em desuso, mas pode ser til na acessibilidade de infogrficos,
por exemplo.
Esse recurso no deve ser utilizado para menus ou seleo de regies para servios.
Existem dois tipos de mapas de imagem: mapas do lado do cliente.
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)
<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 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)
51
<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>
Recomendao 3.8 Disponibilizar documentos em formatos

acessveis
Sem critrios de sucesso correspondentes no 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.
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 (Open Data
Text) para documentos de texto, ODS (Open Data Sheet) para planilhas eletrnicas,
ODP (Open Data Presentation) 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 3.9 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

(http://governoeletronico.gov.br/acoes-e-projetos/e-MAG/material-de-apoio), na
seo do eMAG no Portal do Programa de Governo Eletrnico.
52
Recomendao 3.10 Associar clulas de dados s clulas de

cabealho
Em tabelas de dados simples, o 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 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>
53
Figura 16: Imagem da tabela descrita no cdigo do exemplo 1
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 atributos 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 header. No segundo caso, a associao
automtica, sendo mais utilizado em tabelas de associao direta, nas quais dado o
valor col para o atributo scope nos cabealhos. Nos exemplos a seguir, possvel
verificar a utilizao do id/headers e do scope/col.
Exemplo 2
<table summary="...">
<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>
54
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>
55
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>
56
<tr>
<th
<td
<td
<td
</tr>
<tr>
<th
<td
<td
<td
</tr>
</table>
id="subFloripa">Subtotal</th>
headers="floripa subFloripa alimentacao">R$ 131,25</td>
headers="floripa subFloripa hotel">R$ 218,00</td>
headers="floripa subFloripa transporte">R$ 72,00</td>
id="total">Total</th>
headers="total alimentacao">R$ 196,27</td>
headers="total hotel">R$ 442,00</td>
headers="total transporte">R$ 162,00</td>
Figura 19: Exemplo da tabela do exemplo 4 com o uso do atributo

axis
Recomendao 3.11 Garantir a 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, devem ser disponibilizadas
informaes suplementares que expliquem ou ilustrem o contedo principal. Outra
alternativa uma 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;

Utilizar sentenas organizadas de modo simplificado para o propsito do
contedo (sujeito, verbo e objeto, preferencialmente);
Dividir sentenas longas em sentenas mais curtas;
57
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 ePWG Cartilha de
Redao Web (http://epwg.governoeletronico.gov.br/cartilha-redacao) e o manual
Recomendao 3.12 Disponibilizar uma explicao para siglas,

abreviaturas e palavras incomuns
Recomenda-se que na primeira ocorrncia de siglas, abreviaturas ou palavras
incomuns (ambguas, desconhecidas ou utilizadas de forma muito especfica), deve ser
disponibilizada sua explicao ou forma completa. Essa explicao pode estar expressa
no prprio texto, pode estar presente em um glossrio ou, ento, atravs da utilizao
do elemento abbr, conforme exemplos a seguir.
Exemplo 1 Explicao no prprio texto
<p>A ONU (Organizao das Naes Unidas) um rgo internacional criado em 1945.</p>
Exemplo 2 Utilizao de glossrio

Um site sobre desenvolvimento Web fornece um link de menu para o Glossrio, que
contm explicaes para termos como HTML, CSS, Tag, atributo, etc.
Exemplo 3 Utilizao do elementos abbr
<p>Bem-vindo <abbr title="World Wide Web" lang="en">WWW</abbr>!</p>
3.4 Apresentao / Design

Recomendao 4.1 - 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.
58
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
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 uma tabela de cores no anexo 01.
Exemplos de relaes de contraste:
Contraste de 3:1 (abaixo do recomendado)
Primeiro plano: #3c3cff (RGB 60, 60, 255)

Plano de fundo: #b2b2b2 (RGB 178, 178, 178)
Contraste de 4,5:1 (mnimo recomendado pelo eMAG)
Primeiro plano: #0000a2 (RGB 0, 0, 162)

Plano de fundo: #939393 (RGB 147, 147, 147)
Contraste de 7:1 (mnimo recomendado para alto contraste)
Primeiro plano: #000065 (RGB 0, 0, 101)

Plano de fundo: #a3a3a3 (RGB 163, 163, 163)
Recomendao 4.2 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.
59
Figura 20: A cor no deve ser o unico elemento de diferenciao. A esquerda sinais
com a viso normal, direita os mesmo sinais vistos por quem tem daltonismo.
Exemplo incorreto
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</a></li>
<li><a href="#">Procedimento C</a></li>
</ul>
CSS
a.recomendado{
color: #FF0000;
}
Exemplo correto
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;
}
60
Figura 21: Exemplo correto de utilizao

de cores nos elementos
Recomendao 4.3 Permitir redimensionamento sem perda de

funcionalidade
A pgina deve continuar legvel e funcional mesmo quando redimensionada para at
200%. Assim, preciso garantir que, quando a pgina for redimensionada, no
ocorram sobreposies nem o aparecimento de uma barra horizontal.
Exemplo
Exemplo de stio no qual, medida que ocorre o redimensionamento, o leiaute se
ajusta para que no ocorram quebras.
Figura 22: Exemplo de pgina em seu tamanho padro
61
Figura 23: Exemplo de pgina redimensionada em 200% sem perda de funcionalidade
Alm de permitir o redimensionamento sem perda de funcionalidade, o leiaute do stio

deve adequar-se resoluo de tela do dispositivo pelo qual est sendo acessado, j
que, atualmente, no existe mais um padro de resoluo de tela para os
computadores e h uma crescente utilizao de dispositivos mveis.
A melhor maneira de tratar as diferentes resolues de tela atravs do design
responsivo, que trata especificamente da forma que o site ser renderizado
dependendo do tamanho em pixels da tela que o dispositivo possui e seu objetivo. O
design responsivo trata a resoluo de tela considerando faixas de resoluo, atravs
de diferentes folhas de estilo para tratamento das faixas de resoluo de tela. Para
tratar a folha de estilo, basta inserir no mesmo documento comandos de Media
Queries contendo a resoluo mxima de apresentao e as alteraes desejadas logo
depois.
62
Figura 24: Exemplo de leiaute responsivo, que se adapta conforme a resoluo da tela
Recomendao 4.4 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 para melhorar o
destaque, mas no dever ser removida. Recomenda-se que a espessura mnima da
borda seja de 2px.
Exemplo
CSS
a:focus, a:hover {
border: 2px 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>
63
Figura 25: 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.
3.5 Multimdia
Recomendao 5.1 Fornecer alternativa para vdeo
Ver WCAG 2.0 Critrios de Sucesso 1.2.1, 1.2.2, 1.2.6 e 1.2.8
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.
Exemplo 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.
64
Figura 26: Vdeo contendo arquivo com alternativa em texto
Exemplo 2
Uma universidade oferece a opo de visualizar suas videoaulas com ou sem
legendas.
Figura 27: Vdeo com legenda
Observao: Alm de alternativa em texto e legenda, importante que os vdeos

com udio possam apresentar alternativa na Lngua Brasileira de Sinais (Libras).
65
Figura 28: Vdeo com alternativa em libras - interprete humano
Figura 29: Vdeo com alternativa em libras interprete avatar 3D
importante salientar que o player de vdeo deve ser acessvel. Deve ser possvel
acessar os controles via teclado e os mesmos devem estar devidamente descritos,
para serem interpretados pelos leitores de tela.
Elemento VIDEO em HTML5
Vdeos disponibilizados no site devem possuir botes de controles, especialmente para
os controles de play, pause e stop. O HTML5 traz uma grande novidade para esta
funcionalidade que a elemento VIDEO, um padro para reproduo de vdeo onde se
tornou muito mais fcil controlar as funcionalidades do vdeo:
HTML
<button onclick="playPause()">Play/Pause</button>
<button onclick="grande()">Grande</button>
66
<button onclick="pequeno()">Pequeno</button>
<button onclick="normal()">Normal</button>
<video id="video" width="320" height="240" controls>
<source src="exemplo.mp4" type="video/mp4">
<source src="exemplo.ogg" type="video/ogg">
Seu navegador no suporta a elemento video.
</video>
Javascript
var meuVideo=document.getElementById("video");
function playPause()
{
if (meuVideo.paused)
meuVideo.play();
else
meuVideo.pause();
}
function grande()
{
meuVideo.width=500;
}
function pequeno()
{
meuVideo.width=300;
}
function normal()
{
meuVideo.width=420;
}
Recomendao 5.2 Fornecer 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.
Exemplo
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.
Figura 30: Player de audio com descrio do podcast.
67
Uma apresentao prvia do contedo dos dois tipos de arquivo e de sua durao
tambm desejvel.
Recomendao 5.3 Oferecer audiodescrio para vdeo prgravado

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.
Figura 31: Vdeo com audiodescrio
Recomendao 5.4 Fornecer 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.
68
Elemento audio do HTML5

Foi criado, no HTML5, o elemento AUDIO que um padro para reproduo de udio e
tambm deve receber controles de play, pause e stop.
HTML5
<button onclick="playPause()">Play/Pause</button>
<audio controls id="audio">
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Seu navegador no suporta a elemento audio.
</audio>
Javascript
var meuAudio=document.getElementById("audio");
function playPause()
{
if (meuAudio.paused)
meuAudio.play();
else
meuAudio.pause();
}
Recomendao 5.5 Fornecer 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.
Figura 32: Gif animado de pessoas num ponto de nibus com controle de animao
69
3.6 Formulrios
Recomendao 6.1 Fornecer 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 33: Imagem de boto 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 34: 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;
}
Recomendao 6.2 Associar etiquetas aos seus campos

As etiquetas de texto (elemento LABEL) devem estar associadas aos seus campos
(elementos INPUT, SELECT e TEXTAREA, exceo do elemento BUTTON)
70
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" />
<fieldset>
<legend>Sexo:</legend>
<input type="radio" id="fem" name="sexo" />
<label for="fem">Feminino</label>
<input type="radio" id="mas" name="sexo" />
<label for="mas">Masculino</label>
</fieldset>
<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 6.3 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.
Observao: O atributo tabindex (ver recomendao 4) somente dever ser utilizado
quando existir real necessidade.
Recomendao 6.4 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 Incorreto
<label for="cidade">Escolha a cidade:</label>
<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>
71
</select>
Figura 35: Acionamento automtico - forma incorreta
Exemplo Correto
<label for="cidade">Escolha a cidade:</label>
<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 36: Acionamento por meio do boto enviar- forma correta
Recomendao 6.5 Fornecer 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
(elemento 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).
72
Recomenda-se que a entrada de dados seja facilitada, como a excluso de caracteres

especiais em campos numricos (Ex: nmero de documentos como CPF, datas,
moeda), e a simplificao de campos.
Exemplo 1
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" />
Exemplo 2
Campos de preenchimento obrigatrio devem ser claramente indicados. Uma soluo
para o caso de campos obrigatrios em formulrios inserir um asterisco em forma de
imagem ao lado de cada campo obrigatrio, fornecendo uma descrio no atributo alt
para esta imagem, que poderia ser campo obrigatrio ou, simplesmente,
obrigatrio.
<label for="nome">Nome:
<img src="images/icon_asterisk.gif" alt="obrigatrio"/>
</label>
<input type=text name="nome" id="nome" />
Para quem enxerga, basta visualizar o asterisco para distinguir os campos

obrigatrios. Com o leitor de tela, a informao do alt lida para o usurio. No caso
do exemplo de cdigo acima, o leitor iria informar algo do tipo: Campo de edio,
nome, obrigatrio.
Exemplo 3
Outra soluo utilizar um elemento SPAN contendo a informao obrigatrio, que
ser ocultada por CSS (ver Recomendao 6 tabela com mecanismos para ocultar
elementos e seus efeitos na acessibilidade) e, em seu lugar, inserimos a imagem de
um asterisco.
HTML
<label for="nome">Nome:
<span>Obrigatrio<span/>
</label>
<input type=text name="nome" id="nome" />
CSS
label span{
background-image: images/icon_asterisk.gif;
text-indent: -20000px;
font-size: 0;
width: 0.1 em;
height: 0.2em;
}
73
Em HTML5
O HTML5 traz um novo atributo, o required, que especifica que um campo
obrigatrio. Essa informao lida pelo leitor de tela. Alm disso, caso o usurio tente
enviar o formulrio sem preencher o campo obrigatrio, uma informao do tipo por
favor, preencha esse campo aparecer na tela, alm de ser interpretada pelo leitor de
tela.
<label for="nome">Nome:</label>
<input type=text name="nome" id="nome" required />
<input type="submit" value="Enviar" />
Figura 37: Uso do atributo "required"
Alm do atributo required, o HTML5 apresenta, tambm, o placeholder. Ele utilizado

com os elementos INPUT e TEXTAREA para definir uma dica de preenchimento do
campo. Quando o campo recebe o foco, a dica desaparece, mas lida pelo leitor de
tela.
<input type="email" placeholder=Digite seu e-mail>
<input type="submit" value="Inscrever-se">
Figura 38: Uso do atributo placeholder
Outros atributos do HTML5 bastante importantes para acrescentar informaes aos

campos do formulrio so:
autofocus: Utilizado para o foco do teclado ir diretamente ao campo que possua

esse atributo quando a pgina com o formulrio for carregada;
maxlength: Determina um nmero mximo de caracteres que o campo pode
ter;
min e max: Determina o valor mnimo e mximo para o campo. Podem ser
utilizados separadamente;
pattern: Permite que sejam definidas expresses para validao do campo;
74
novalidate: Para desativar a validao do formulrio (utilizado com o elemento

FORM);
formnovalidate: Para desativar a validao dos dados de um formulrio
(utilizado com os elementos INPUT e BUTTON);
draggable: Torna o campo arrastvel (Drag and Drop);
Alm de melhorar a semntica, os novos atributos e valores do HTML5 tornam o

desenvolvimento mais fcil e o resultado mais acessvel.
Exemplo
<label>Nome:
<input name="nome" required placeholder="Digite seu nome" autofocus >
</label>
<label>E-mail:
<input name="email" type="email" placeholder="Digite seu e-mail" required>
</label>
<label>Data:
<input type="date" name="data" min="2000-01-02">
</label>
<label for="CEP">CEP:
<input name="CEP" id="CEP" required placeholder="Digite seu CEP" pattern="\d{5}-?\d
{3}" />
</label>
<label>Mensagem:
<textarea name="mensagem" required><textarea />
</label>
<input type="submit" name="action" value="Salvar rascunho" formnovalidate>
<input type="submit" name="action" value="Enviar">
</form>
Renderizao
75
Figura 39: Renderizao de formulrio acessvel
Recomendao 6.6 Identificar e descrever erros de entrada de

dados e confirmar o envio das informaes
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
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.
Abaixo dos avisos, encontram-se os campos de formulrio que contiveram erro de
preenchimento e, tambm, um link que permite ao usurio expandir os demais
campos do formulrio.
76
Figura 40: Informao de erro em formulrio
Aps a validao dos dados, antes de enviar o formulrio, 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.
77
Figura 41: Pgina de Confirmao
Em HTML5
No HTML5 existem novos valores para o atributo type do elemento INPUT e, de acordo
com a definio do input type, a validao do lado do cliente ocorre atravs do prprio
HTML, j que esses valores basicamente definem o tipo de dado esperado pelo campo.
Por exemplo, no cdigo abaixo, temos um INPUT do tipo e-mail. Ao tentar enviar o
formulrio, se o tipo de texto inserido no for um endereo de e-mail, o navegador ir
retornar uma mensagem no prprio campo, solicitando que o campo seja preenchido
corretamente.
Exemplo
<input type="email">
<input type="submit" value="Inscrever-se">
Figura 42: Uso de novos valores type no INPUT
O HTML5 acrescentou os seguintes valores para o atributo type:
email: Indica a entrada de um endereo de e-mail;

tel: Indica a entrada de um nmero de telefone;
search: Indica um controle input do tipo busca;
url: Indica a entrada de endereo URL;
datatime: Indica a entrada de data e hora;
datatime-local: Indica a entrada de data e hora local;
78
date: Indica a entrada de apenas uma data;

month: Indica a entrada de ano e ms apenas;
week: Indica a entrada de ano e dia da semana;
time: Indica a entrada de um horrio com hora, minuto, segundos e frao de
segundos;
number: Indica uma entrada numrica;
range: Indica a entrada de um nmero contido dentro de um intervalo;
color: Indica a entrada do cdigo de uma cor.
Recomendao 6.7 Agrupar campos de formulrio

recomendado que os campos com informaes relacionadas sejam agrupadas
utilizando o elemento FIELDSET, principalmente em formulrios longos. O
agrupamento dever ser feito de maneira lgica, associando o elemento LEGEND
explicando claramente o propsito ou natureza dos agrupamentos.
Exemplo
<form method="post" action="...">
<fieldset>
<legend>Dados Pessoais</legend>
<label for="nome">O seu Nome: </label>
<input type="text" name="nome" id="nome" />
...
</fieldset>
<fieldset>
<legend>Dados Profissionais</legend>
<label for="profissao">Sua profisso:</label>
<input type="text" id="profissao" name="profissao" />
...
</fieldset>
<fieldset>
<legend>Informaes de Contato</legend>
<label for="email">E-mail: </label>
<input type="text" id="email" name="email" />
...
</fieldset>
</form>
79
Figura 43: Uso do FIELDSET
No caso do elemento SELECT, pode ser utilizado o elemento OPTGROUP para agrupar
os itens da lista de seleo.
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>
Figura 44: Imagem da caixa de seleo
80
Recomendao 6.8 Fornecer estratgias de segurana

especficas ao invs de CAPTCHA
Ver WCAG 2.0 Critrio de Sucesso 1.1.1 (Tcnicas G143 e G144)
CAPTCHAs so utilizados para impedir que softwares automatizados, conhecidos como
bots, executem aes que degradem a qualidade do servio de um sistema,
provocando danos em reas e e-servios de stios em um curto espao de tempo,
podendo sobrecarregar servidores e deixar stios indisponveis por um dado perodo.
Figura 45: exemplo de CAPTCHA com letras distorcidas
Recomenda-se uma combinao de diferentes estratgias para servios mais seguros

e acessveis para substituir o uso de CAPTCHA, como por exemplo:
Limites de conexo;
Monitoramento;
Consistncia nas polticas de segurana;
Uso de tcnicas de desenvolvimento de servios e formulrios seguros.
Tal recomendao se deve ao fato de que o uso de CAPTCHA pode ocasionar
problemas significativos a stios e formulrios:
Usabilidade: O nus de deteco de problemas e invases delegado a

pessoa, ao invs do sistema. Como CAPTCHAs so projetados para
serem difceis de ler e entender, tornam os servios que os utilizam
muito mais difceis de usar.
Acessibilidade: Os CAPTCHAS so inacessveis por sua natureza, no so
lidos, nem interpretados por leitores de tela. Isso efetivamente torna o
servio inutilizvel por alguns grupos de pessoas. Mesmo CAPTCHAs que
oferecem verses em udio no resolvem completamente o problema,
pois muitas pessoas podem possuir deficincia auditiva e visual.
Segurana: Desenvolver um CAPTCHA internamente costuma gerar
CAPTCHAS inseguros, com falhas j mapeadas por spammers. No
entanto, ao utilizar CAPTCHAS de terceiros h outros problemas a serem
considerados:
81
1. Privacidade: O servio de CAPTCHA pode incluir cookies, coletar

estatsticas e mapear o comportamento de navegao das
pessoas que acessam o servio. Isto introduz preocupaes com
a privacidade significativas.
2. Performance: O uso de um servio CAPTCHA incorre no
desempenho do stio. Se o servio ficar indisponvel, o mesmo
acontece com o acesso ao servio da pgina que utiliza o
CAPTCHA.
Caso o uso de CAPTCHA seja estritamente necessrio, o mesmo dever ser fornecido
em forma de pergunta simples de interpretao (CAPTCHA Humano), e este
preferencialmente s dever ser apresentado aps pelo menos 2 tentativas de envio
do formulrio, por exemplo. 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.
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>
Figura 45 Exemplo de CAPTCHA com teste matemtico
Para mais detalhes sobre CAPTCHA, verificar o documento Orientaes para o uso do
CAPTCHA no Governo Federal na seo do eMAG
http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG/material-de-apoio.
82
4 . Elementos padronizados de acessibilidade digital

no Governo Federal
Este captulo demonstra os elementos padronizados de acessibilidade digital que
devem estar presentes em todos os stios do governo federal para facilitar o acesso ao
cidado.
Os elementos padronizados de acessibilidade so:
1. Teclas de atalho
2. Primeira follha de contraste
3.
Barra de acessibilidade
4.
Apresentao do mapa do sitio
5.
Pgina com a descrio dos recursos de acessibilidade
Esses elementos j fazem parte da identidade digital de governo para mais detalhes
dessa iniciativa visite: http://portalpadrao.plone.org.br/manuais
4.1 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.
As dicas dos atalhos devero ser disponibilizadas na barra de acessibilidade e na

pgina sobre a acessibilidade do stio, j comentada anteriormente. Para mais
detalhes ver Recomendao 6.
4.2 Primeira folha de contraste

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
otimizado). Desta forma, a folha principal de autocontraste deve obedecer a seguinte
configurao de cores:
83
Cor de fundo : independente da cor utilizada, ela deve ser alterada para preto
(#000000) ;
Cor de texto : independente da cor utilizada, ela deve ser alterada para
branco (#FFFFFF) ;
Links : O modo normal do link deve ser sublinhado (para que ele se diferencie
do texto normal), assim como o modo hover e o modo active. O link deve ser
alterado para amarelo (#FFF333) ;
cones : Todos os cones devem ser brancos;
Linhas e Contornos : As linhas e os contornos de elementos devem ser
alterados para branco.
Figura 46: Identidade digital - aplicao da folha de alto-contraste
facultativo a alterao de fotos ou ilustraes complexas como infogrficos. Para

mais detalhes ver Recomendao 28.
4.3 Barra de acessibilidade

O stio dever conter uma barra de acessibilidade no topo de cada pgina contendo os
seguintes itens:
Alto contraste
84
Atalhos (para Contedo, Menu e Busca)

Acessibilidade (link para a pgina contendo os recursos de acessibilidade do
stio)
Exemplo:
<div id="acessibilidade">
<ul id="atalhos">
<li><a href="#iniciodoconteudo">Contedo [1]</a></li>
<li><a href="#iniciodomenu">Menu [2]</a></li>
<li><a href="#busca">Busca [3]</a></li>
</ul>
<ul id="botoes">
<li><a href="#" id="bt_contraste">alto contraste</a></li>
<li><a href="acessibilidade.html"> Pgina de acessibilidade </a></li>
</ul>
</div>
Figura 47: Cabealho da identidade digital de governo (verso verde) com barra de acessibilidade no topo.
4.4 Apresentao do mapa do stio

O mapa do stio deve ser disponibilizado em forma de lista hierrquica (utilizando os
elementos de lista do HTML), podendo conter quantos nveis forem necessrios.
Figura 48: Detalhe do mapa do stio da Identidade Digital de Governo
85
4.5 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 alto contraste, detalhes sobre testes de
acessibilidade realizados (validadores automticos, leitores de tela e validao
humana) 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.
Um modelo funcional da pgina pode ser visto em:
http://portalpadrao.plone.org.br/acessibilidade
O texto e links considerados na Identidade Digital de Governo:
Acessibilidade
Este portal segue as diretrizes do eMAG (Modelo de Acessibilidade em Governo
Eletrnico), conforme as normas do Governo Federal, em obedincia ao Decreto
5.296, de 2.12.2004 .
O termo acessibilidade significa incluir a pessoa com deficincia na participao de
atividades como o uso de produtos, servios e informaes. Alguns exemplos so os
prdios com rampas de acesso para cadeira de rodas e banheiros adaptados para
deficientes.
Na internet, acessibilidade refere-se principalmente s recomendaes do WCAG
(World Content Accessibility Guide) do W3C e no caso do Governo Brasileiro ao eMAG
(Modelo de Acessibilidade em Governo Eletrnico). O eMAG est alinhado as
recomendaes internacionais, mas estabelece padres de comportamento acessvel
para sites governamentais.
Na parte superior do portal existe uma barra de acessibilidade onde se encontra
atalhos de navegao padronizados e a opo para alterar o contraste. Essas
ferramentas esto disponveis em todas as pginas do portal.
Os atalhos padres do governo federal so:
Teclando-se Alt + 1 em qualquer pgina do portal, chega-se diretamente ao

comeo do contedo principal da pgina.
incio do menu principal.
Teclando-se Alt + 3 em qualquer pgina do portal, chega-se diretamente em
sua busca interna.
rodap do site.
Esses atalhos valem para o navegador Chrome, mas existem algumas variaes para
outros navegadores:
86
Quem prefere utilizar o Internet Explorer preciso apertar o boto Enter do

seu teclado aps uma das combinaes acima. Portanto, para chegar ao campo
de busca de interna preciso pressionar Alt+3 e depois Enter.
No caso do Firefox, em vez de Alt + nmero, tecle simultaneamente Alt + Shift

+ nmero.
Sendo Firefox no Mac OS, em vez de Alt + Shift + nmero, tecle

simultaneamente Ctrl + Alt + nmero.
No Opera, as teclas so Shift + Escape + nmero. Ao teclar apenas Shift +

Escape, o usurio encontrar uma janela com todas as alternativas de
ACCESSKEY da pgina.
Ao final desse texto, voc poder baixar alguns arquivos que explicam melhor o termo
acessibilidade e como deve ser implementado nos sites da Internet.
Leis e decretos sobre acessibilidade:
Decreto n 5.296 de 02 de dezembro de 2004 (link externo)
Decreto n 6.949, de 25 de agosto de 2009 (link externo) - Promulga a

Conveno Internacional sobre os Direitos das Pessoas com Deficincia e seu
Protocolo Facultativo, assinados em Nova York, em 30 de maro de 2007
Decreto n 7.724, de 16 de Maio de 2012 (link externo) - Regulamenta a Lei N

12.527, que dispe sobre o acesso a informaes.
Modelo de Acessibilidade de Governo Eletrnico (link externo)
Portaria n 03, de 07 de Maio de 2007 - formato .pdf (35,5Kb) (link externo) Institucionaliza o Modelo de Acessibilidade em Governo Eletrnico e-MAG
Dvidas, sugestes e crticas:

No caso de problemas com a acessibilidade do portal, favor acessar a Pgina de
contato.
Dicas, links e recursos teis:
Acessibilidade Legal (link externo)
Acesso Digital (link externo)
87
5 . Prticas desaconselhadas
Listamos aqui algumas prticas que devem ser desencorajadas no desenvolvimento de
stios e servios eletrnicos no governo federal.
Algumas prticas, apesar de comuns, configuram-se no s como empecilhos para o
acesso de pessoas com deficincia, mas tambm, o acesso por dispositivos mveis.
Uso de animaes e aplicaes FLASH;
Uso de CAPTCHAS em formulrios;
Tabelas para fins de diagramao;
Atualizaes automticas peridicas;
Elementos e atributos considerados depreciados pelo W3C. Exemplos: frame,

applet, blink, marquee, basefont, center, dir, align, font, isindex, menu, strike,
u, b, etc.
O uso de qualquer uma dessas prticas tem um impacto negativo significativo na

experincia de uso do usurio.
88
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.
CAPTCHA (Completely Automated Public Turing test to tell Computers and
Humans Apart): consiste em um meio automatizado de gerar desafios que,
hipoteticamente, apenas seres humanos possam resolver. O tipo mais comum requer
que o usurio identifique letras distorcidas em um arquivo de imagem.
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
podcasting (forma de publicao de arquivos de mdia digital pela Internet, atravs de
um feed RSS).
Elemento: Cdigo usado para marcar o incio e o fim de um elemento (X)HTML.
89
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.
90
7 . Tabelas 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
#096
#099
#09C
#0C6
#0C9
#0CC
#0F6
#0F9
#0FC
#396
#399
#39C
#3C6
#3C9
#3CC
#3F6
#3F9
#3FC
#090
#0C0
#0F0
#390
#3C0
#3F0
#093
#0C3
#0F3
#393
#3C3
#3F3
#690
#6C0
#6F0
#693
#6C3
#6F3
#696
#6C6
#6F6
#990
#9C0
#9F0
#993
#9C3
#9F3
#C60
#C90
#CC0
#CF0
#F00
#F30
#F60
#F90
#FC0
#FF0
#C63
#C93
#CC3
#CF3
#F03
#F33
#F63
#F93
#FC3
#FF3
#996
#9C6
#9F6
#699
#6C9
#6F9
#969
#999
#9C9
#9F9
#69C
#6CC
#6FC
#96C
#99C
#9CC
#9FC
#C66
#C96
#CC6
#CF6
#F06
#F36
#F66
#F96
#FC6
#FF6
#C39
#C69
#C99
#CC9
#CF9
#F09
#F39
#F69
#F99
#FC9
#FF9
#C3C
#C6C
#C9C
#CCC
#CFC
#F0C
#F3C
#F6C
#F9C
#FCC
#FFC
#09F
#0CF
#0FF
#39F
#3CF
#3FF
#66F
#69F
#6CF
#6FF
#96F
#99F
#9CF
#9FF
#C0F
#C3F
#C6F
#C9F
#CCF
#CFF
#F0F
#F3F
#F6F
#F9F
#FCF
#FFF
Tabela 1 Cores contrastantes com a cor preta
#000
#030
#060
#300
#330
#360
#600
#630
#660
#900
#930
#960
#003
#033
#063
#303
#333
#363
#603
#633
#663
#903
#933
#963
#C00
#C30
#C03
#C33
Cores contrastantes com branco

#006
#009
#00C
#036
#039
#03C
#066
#069
#06C
#306
#309
#30C
#336
#339
#33C
#366
#369
#36C
#606
#609
#60C
#636
#639
#63C
#666
#669
#66C
#906
#909
#90C
#936
#939
#93C
#966
#C06
#C36
#C09
#C39
#00F
#03F
#06F
#30F
#33F
#36F
#60F
#63F
#66F
#90F
#93F
#C0C
Tabela 2 Cores contrastantes com a cor branca
91

E MAGv 31

Uploaded by

Document Information

Original Title

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

Uploaded by

Copyright:

Available Formats

Ministrio do Planejamento, Oramento e Gesto

Secretaria de Logstica e Tecnologia da Informao

Brasil. Ministrio do Planejamento, Oramento e Gesto. Secretaria de Logstica

Voc tem a liberdade de:

Ficando claro que:

Limitaes e excees aos direitos autorais ou quaisquer usos livres

Os direitos morais do autor;

Direitos que outras pessoas podem ter sobre a obra ou sobre a

Modelo de Acessibilidade em Governo Eletrnico eMAG

Equipe do DGE Departamento de Governo Eletrnico

Modelo de Acessibilidade em Governo Eletrnico eMAG

2.1 - Disponibilizar todas as funes da pgina via teclado.........34

Recomendao 2.7 Assegurar o controle do usurio sobre as alteraes

3.1 Identificar o idioma principal da pgina............................41

Modelo de Acessibilidade em Governo Eletrnico eMAG

Recomendao 3.11 Garantir a leitura e compreenso das informaes...........56

Modelo de Acessibilidade em Governo Eletrnico eMAG

1.1 O acesso de pessoas com deficincia

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

Modelo de Acessibilidade em Governo Eletrnico eMAG

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

Muitas vezes, a deficincia no severa o suficiente a ponto de tornar-se uma barreira

1.2 Sobre as verses do eMAG

Modelo de Acessibilidade em Governo Eletrnico eMAG

a viso do cidado, voltada a todos os cidado brasileiros e gestores,

A diviso do eMAG em dois documentos apresentou alguns inconvenientes durante o

nveis de prioridade A, AA e AAA, visto que o padro voltado as pginas do Governo,

1.3 Alteraes na verso 3.1

Outras modificaes nas recomendaes:

Algumas recomendaes tiveram seus enunciados refeitos com uma redao

Modelo de Acessibilidade em Governo Eletrnico eMAG

trata o 2 devero, na forma de regulamento, atender, entre outros, aos

Modelo de Acessibilidade em Governo Eletrnico eMAG

2 . O processo para desenvolver um stio acessvel

2.1 Primeiro passo: Padres Web

2.2 Segundo passo: Recomendaes de Acessibilidade

Accessibility Guidelines - http://www.w3.org/TR/#tr_Accessibility__All em ingls)

2.3 Terceiro passo: Avaliao de Acessibilidade

Modelo de Acessibilidade em Governo Eletrnico eMAG

2.4 Manuteno da acessibilidade

Modelo de Acessibilidade em Governo Eletrnico eMAG

2.5 Recursos, ferramentas e leitura complementar

Modelo de Acessibilidade em Governo Eletrnico eMAG

Modelo de Acessibilidade em Governo Eletrnico eMAG

Quando tratamos de acessibilidade as principais recomendaes so as de Web Design

Figura 1: Camadas de um documento Web

Recomendao 1.2 Organizar o cdigo HTML de forma lgica e

Exemplo correto em HTML5 (utilizando ARIA)

independente de deficincia, um aspecto essencial.

Recomendao 1.3 Utilizar corretamente os nveis de

Modelo de Acessibilidade em Governo Eletrnico eMAG

Figura 2: Exemplo de utilizao de cabealhos

Modelo de Acessibilidade em Governo Eletrnico eMAG

Exemplo de marcao adequada de cabealhos

Figura 3: Portal Brasil - Ordem de cabeahos e outros elementos semnticos.

Recomendao 1.4 Ordenar de forma lgica e intuitiva a

Modelo de Acessibilidade em Governo Eletrnico eMAG

OBS: Em alguns casos, pode-se forar a navegao via atributo tabindex. No

Recomendao 1.5 Fornecer ncoras para ir direto a um bloco

Modelo de Acessibilidade em Governo Eletrnico eMAG

O elemento fica oculto,

O contedo ignorado pelos

O elemento fica oculto e