E MAGv 31

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

Departamento de Goerno !letr"nico
###$goernoeletronico$go$%r
Ministrio da !d&cao
Secretaria de !d&cao Profissional e Tecnol'gica
Projeto de (cessi%ilidade )irt&al
Instit&to *ederal de !d&cao, +i,ncia e Tecnologia do -io Grande do S&l
Instit&to *ederal de !d&cao, +i,ncia e Tecnologia do +ear.
Instit&to *ederal de !d&cao, +i,ncia e Tecnologia /aiano
)erso 0$1
Modelo de (cessi%ilidade
em Goerno !letr"nico
(%ril de 2314
!sta o%ra est. licenciada por &ma Licena +reatie +ommons 5 (tri%&io 5
Partil6a nos Mesmos Termos 0$3 7o (daptada
http://creativecommons.org/licenses/by-sa/3.0/br/
)oc, tem a li%erdade de8
Compartilhar copiar, distribuir e transmitir a obra.
Remixar criar obras derivadas.
So% as seg&intes condi9es8
Atribuio Voc deve creditar a obra da forma especificada pelo autor ou
licenciante (mas no de maneira que sugira que estes concedem qualquer aval a voc
ou ao seu uso da obra).
Compartilhamento pela mesma licena Se voc alterar, transformar ou criar em
cima desta obra, voc poder distribuir a obra resultante apenas sob a mesma licena,
ou sob uma licena similar presente.
*icando claro :&e8
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;
Direitos que outras pessoas podem ter sobre a obra ou sobre a
utilizao da obra, tais como direitos de imagem ou privacidade.
(iso Para qualquer reutilizao ou distribuio, voc deve deixar claro a terceiros
os termos da licena a que se encontra submetida esta obra.
Modelo de (cessi%ilidade em Goerno !letr"nico eM(G 2
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
(gradecimentos
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.

!:&ipe do DG! ; Departamento de Goerno !letr"nico
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 2.1 - Disponibilizar todas as funes da pgina via teclado.........34
Recomendao 2.2 - Garantir que os objetos programveis sejam acessveis ....37
Recomendao 2.3- No criar pginas com atualizao automtica peridica......38
Recomendao 2.4 - No utilizar redirecionamento automtico de pginas........39
Recomendao 2.5 - Fornecer alternativa para modificar limite de tempo..........39
Recomendao 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 3.1 - Identificar o idioma principal da pgina............................41
Recomendao 3.2 - Informar mudana de idioma no contedo.......................42
Recomendao 3.3 - Oferecer um ttulo descritivo e informativo pgina..........42
Recomendao 3.4 - Informar o usurio sobre sua localizao na pgina..........43
Recomendao 3.5 - Descrever links clara e sucintamente...............................43
Recomendao 3.6 - Fornecer alternativa em texto para as imagens do stio......45
Recomendao 3.7 - Utilizar mapas de imagem de forma acessvel...................50
Recomendao 3.8 - Disponibilizar documentos em formatos acessveis............51
Recomendao 3.9 - Em tabelas, utilizar ttulos e resumos de forma apropriada.51
Recomendao 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
Modelo de (cessi%ilidade em Goerno !letr"nico eM(G <
1$ Introd&o
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: ecomenda!"es de
Acessibilidade para Conte#do 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 defici,ncia
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:
(cesso ao comp&tador sem mo&se8 no caso de pessoas com deficincia
visual, dificuldade de controle dos movimentos, paralisia ou amputao de um
membro superior;
(cesso ao comp&tador sem teclado8 no caso de pessoas com amputaes,
grandes limitaes de movimentos ou falta de fora nos membros superiores;
(cesso ao comp&tador sem monitor8 no caso de pessoas com cegueira;
Modelo de (cessi%ilidade em Goerno !letr"nico eM(G =
(cesso ao comp&tador sem .&dio: 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 So%re as ers9es do eM(G
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.
Modelo de (cessi%ilidade em Goerno !letr"nico eM(G >
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 iso 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 cartil6a 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
Modelo de (cessi%ilidade em Goerno !letr"nico eM(G ?
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$0 (ltera9es na erso 0$1
A erso 0$1 do eM(G apresenta melhorias no contedo do texto para torn-lo mais
compreensvel.
O subitem % processo para desenvolver um s&tio acess&vel, 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.
Modelo de (cessi%ilidade em Goerno !letr"nico eM(G @
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/acoes-
e-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
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, (...).
2 $ O processo para desenoler &m stio acessel
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 passo8 Padr9es Ae%
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/cartilha-
de-codificacao, lista uma srie de boas prticas.
2$2 Seg&ndo passo8 -ecomenda9es de (cessi%ilidade
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
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 ich 'nternet
Applications ( http://)3.org/standards/techs/aria*)3c+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$0 Terceiro passo8 (aliao de (cessi%ilidade
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 c'digos do conteBdo CTML e das fol6as de estilo;
2. Verificar o fl&Do de leit&ra da p.gina. 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 -escri!.o dos /eitores de 0ela, disponvel
em: http://www.governoeletronico.gov.br/acoes-e-projetos/eMAG/material-de-
apoio.
3. Realizar a validao automtica de acessibilidade utilizando o ASES e outros
avaliadores automticos sugeridos no Captulo 4;
4. Realizar a alidao man&al$ 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-de-
apoio.
5. Teste com &s&.rios 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 Man&teno da acessi%ilidade
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 .
2$< -ec&rsos, ferramentas e leit&ra 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.
Modelo de (cessi%ilidade em Goerno !letr"nico eM(G 1<
0 $ -ecomenda9es de acessi%ilidade
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.
0$1 Marcao
-ecomendao 1$1 ; -espeitar os Padr9es Ae%
1er WCAG 2.0 Crit3rios de 4ucesso 5.6.6 e 5.6.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).
Modelo de (cessi%ilidade em Goerno !letr"nico eM(G 1=
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).
Para mais detalhes a respeito dos padres de desenvolvimento web, ver a Cartilha de
Codi7ica!.o 8adr"es Web e-G%1 do padro e-PWG, disponvel em:
http://www.governoeletronico.gov.br/acoes-e-projetos/padroes-brasil-e-gov/cartilha-
de-codificacao.
-ecomendao 1$2 ; OrganiEar o c'digo CTML de forma l'gica e
semFntica
1er WCAG 2.0 Crit3rio de 4ucesso 6.3.6
O cdigo HTML deve ser organizado de forma lgica e semntica, ou seja,
apresentando os elementos em uma ordem compreensvel e correspondendo ao
Modelo de (cessi%ilidade em Goerno !letr"nico eM(G 1>
Figura 1: Camadas de um documento Web
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.
!Demplo 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 deici!ncia, "
um aspecto essencial.
</p>
<p>#im $erners %ee</p>
!Demplo correto
<h1>Padres Web</h1>
<ul>
<li><a href="menu1.html">Menu 1</a></li>
</ul>
<bloc&'uote>
O poder da web est em sua uni!ersalidade. Ser
acessada por todos" independente de defici#ncia" $
um aspecto essencial.
</bloc&'uote>
<cite %ml&lan'="en"()im *erners +ee</cite>
!Demplo correto em CTML< G&tiliEando (-I(H
<header role="banner">
<h1>Padres Web</h1>
</header>
<nav role="na!i'ation">
<ul>
</ul>
</nav>
<div role="main">
<bloc&'uote>
O poder da web est em sua uni!ersalidade. Ser acessada por todos"
Modelo de (cessi%ilidade em Goerno !letr"nico eM(G 1?
independente de defici#ncia" $ um aspecto essencial.
</bloc&'uote>
<cite %ml&lan'="en">)im *erners +ee</cite>
</div>
-ecomendao 1$0 ; ItiliEar corretamente os neis de
ca%eal6o
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.
!Demplo
Modelo de (cessi%ilidade em Goerno !letr"nico eM(G 1@
CTML
<h1>)$cnicas culinrias</h1>
<p>, se'uir os se'redos -ue facilitam a !ida na co.inha.</p>
<h2>+e'umes" folhas e !e'etais</h2>
<h(>*aba do -uiabo</h(>
<p>Para eliminar a baba do -uiabo" la!e/o ainda inteiro" se-ue/o e colo-ue/o numa
ti'ela com um pouco de suco de lim0o" dei%ando repousar durante 11 minutos. 2epois la!e
li'eiramente" corte e co.inhe.</p>
<h(>3ei40o</h(>
<p>1 %5cara de fei40o cru ser!e trs pessoas depois de pronto.</p>
<h(>6enouras e aipos</h(>
<p>Para resol!er o problema de cenouras e aipos meio murchos" mer'ulhe/os em 'ua
'elada misturada com uma colher de ch de mel por uma hora. 7scorra e se-ue le!emente
depois.</p>
<h2>6on'elamento e descon'elamento</h2>
<h(>6arne em peda8os</h(>
<p>Para descon'elar carne em peda8os inteiros colo-ue9a embrulhada" numa !asilha com
'ua. 6olo-ue sal na 'ua e no pacote e tampe por uma hora.</p>
<h(>6arne mo5da</h(>
<p>Para apressar o descon'elamento da carne mo5da" sal'ue a -uantidade -ue ir usar. O
sal apressa o descon'elamento.</p>
Figura 2: Exemplo de utilizao de cabealhos
!Demplo de marcao ade:&ada de ca%eal6os
-ecomendao 1$4 ; Ordenar de forma l'gica e int&itia a
leit&ra e ta%&lao
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.
!Demplo8 %loco de conteBdo antes do %loco de men&

Figura 3: Portal Brasil - Ordem de cabeahos e outros elementos semnticos.
<bod)>
<div id*+cabecalho+>
...
<div id*+conteudo+>
<div id*+menu+>
<div id*+rodape+>
</bod)>
O/S8 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.
-ecomendao 1$< ; *ornecer Fncoras para ir direto a &m %loco
de conteBdo
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 access9ey nos links relevantes. No pode haver repetio do
mesmo access9ey 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 cap&tulo 3 ( :lementos de acessibilidade nas
p;ginas do Governo <ederal.
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:
CSS Efeito na tela Efeito na acessibilidade
visibility:hidden;
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
text-indent: -999em;
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
position: absolute;
left: -999em;
O contedo removido de
sua posio, no
ocupando espao e
movido para "fora da
tela, ficando oculto
Os leitores de tela acessam o
contedo
Tabela 1: Atributos em CSS para ocultar elementos de acessibilidade
!Demplo
Topo da Pgina (na barra de acessibilidade)
<ul id="atalhos">
<li><a href=":irconteudo" access;e<*"1">=r 6onteudo>1?</a></li>
<li><a href=":irmenu" access;e<="2">=r para menu principal>2?</a></li>
<li><a href=":irbusca">=r para busca >@?</a></li>
</ul>
Contedo da Pgina
<div>
<a href=":" id="irconteudo" class="oculto">=n5cio do conteAdo</a>
BC// 6onteAdo
</div>
Menu Principal da Pgina
<div>
<a href=":" id="irmenu" class="oculto">=n5cio do menu</a>
BC//itens de menu //(
</div>
Formulrio de pesquisa do stio (pode estar em qualquer lugar no stio)
<orm action=":"method="post">
<ieldset>
<le,end>*uscar</le,end>
<label for="busca">Pes-uise a-ui</label>
<input t<pe="te%t" href=":" id="irbusca" !alue="Pes-uise a-ui" />
<input t<pe="submit" !alue="*uscar" class="buscar" name="buscar" />
</ieldset>
JKformL
-ecomendao 1$= ; 7o &tiliEar ta%elas para diagramao
1er WCAG 2.0 Crit3rio de 4ucesso 6.3.6 (03cnica =>6$
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.
!Demplo incorreto 5 ItiliEao de ta%ela para leia&te
-
</head>
<bod)>
<table border*.1.>
<tr id*.topo.>
<td colspan*.2.>
BC//barra de acessibilidade//(
</td>
<td colspan*.(.>
<h1>7%emplo com tabela</h1>
</td>
</tr>
<tr id*.menu.>
<td><a hre*.menu1.html.>Menu 1</a></td>
<td><a hre*.menu2.html.>Menu 2</a></td>
<td><a hre*.menu(.html.>Menu @</a></td>
<td><a hre*.menu/.html.>Menu D</a></td>
</tr>
<tr id*.conteudo.>
<td colspan*./. id*.central.>
BC//conteAdo principal da p'ina//(
</td>
<td id*.lateral.>
BC//conteAdo da lateral da p'ina//(
</td>
</tr>
<tr id*.rodape.>
<td colspan*.2.>
BC//direitos autorais//(
</td>
<td colspan*.(.>
BC//e/mail de contato//(
</td>
</tr>
</table>
</bod)>
</html>
!Demplo correto ; ItiliEao de tableless para diagramao
...
</head>
<bod)>
<div id*.topo. role*+banner+>
<div>
BC//barra de acessibilidade//(
</div>
<h1>7%emplo sem tabelasC</h1>
</div>
<div id*.menu. role*+navi,ation+>
<ul>
<li><a hre*.menu1.html.>Menu 1</a></li>
<li><a hre*.menu(.html.>Menu @</a></li>
<li><a hre*.menu/.html.>Menu D</a></li>
</ul>
</div>
<div id*.conteudo. role*.main.>
BC//conteAdo principal da p'ina//(
<div id*.lateral.>
BC//conteAdo da lateral da p'ina//(
</div>
<div id*.rodape. role*.contentino.>
BC//direitos autorais//(
<address>
BC//e/mail de contato//(
</address>
</div></div>
</bod)>
</html>
-ecomendao 1$> ; Separar linMs adjacentes
1er WCAG 2.0 Crit3rio de 4ucesso 6.3.6 (03cnica =5?$
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.
!Demplo incorreto
<p id*.menu.>
<a hre*.0menu.>Pular o menu</a><br />
<a hre*.home.html.>Eome</a><br />
<a hre*.pes'uisa.html.>Pes-uisa</a><br />
<a hre*.mapasite.html.>Mapa do Site</a>
</p>
<122 3onteudo do Site 22>
!Demplo correto
<ul id*.menu.>
<li> <a hre*.home.html.>Eome</a></li>
<li> <a hre*.pes'uisa.html.>Pes-uisa</a></li>
<li> <a hre*.mapasite.html.>Mapa do Site</a></li>
</ul>
<122 3onteudo do Site 22>
!m CTML< e (-I(
<div id*.menu. role*.menu.>
<div role*.menuitem.> <a hre*.home.html.>Eome</a></div>
<div role*.menuitem.> <a hre*.pes'uisa.html.>Pes-uisa</a></div>
<div role*.menuitem.> <a hre*.mapasite.html.>Mapa do Site</a></div>
</div>
Men&s em CTML< e (-I(
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>
<bod)>
<header id*.topo. role*.banner.>
<div>
<122barra de acessibilidade22>
</div>
<h1>7%emplo com tabela</h1>
</header>
<nav id*.menu. role*.navi,ation.>
<ul>
<li><a hre*.menu(.html.>Menu @</a></li>
<li><a hre*.menu/.html.>Menu D</a></li>
<ul>
</nav>
<div role*.main.>
<div id*.central.>
<122conte5do principal da p,ina22>
</div>
<div id*.lateral.>
<122conte5do da lateral da p,ina22>
</div>
</div>
<ooter id*.rodape. role*.contentino.>
<p><122direitos autorais22></p>
<p><122e2mail de contato22></p>
</ooter>
</bod)>
</html>
-ecomendao 1$? ; Diidir as .reas de informao
1er WCAG 2.0 Crit3rio de 4ucesso 3.2.3 (03cnica G@6$
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.
!Demplo
<div id="topo">
<a href=":inicio)opo" id="inicio)opo">)opo</a>
Figura 4: Exemplo de diviso de blocos de contedo
<h1>FOM7 2, =FS)=)G=HIO</h1>

<div id="barra,cessibilidade">
<p>*arra de ,cessibilidade</p>
<ul>
<li><a href=":inicio6onteudo">=r para conteAdo >1?</a></li>
<li><a href=":inicioMenu">=r para menu principal >2?</a></li>
<li><a href=":busca">=r para *usca >@?</a></li>
</ul>
</div>
</div>
<div id="menu">
<a href=":inicioMenu" id="inicioMenu" access;e<="2">Menu</a>
<ul>
<li>=tens de menu</li>
<li>...</li>
</ul>
</div>
<div id="conteudo">
<a href=":inicio6onteudo" id="inicio6onteudo" access;e<="1">6onteAdo</a>
<orm action=":" method="post">
<ieldset>
<input t<pe="te%t" id="busca" name="busca" access;e<="@" !alue="Pes-uise a-ui" />
</ieldset>
</orm>
<h2>*7M J=F2O</h2>
<p>Se4a bem !indo ao nosso site.</p>
</div>
<div id="rodape">
<a href=":inicioKodape" id="inicioKodape">Kodap$</a>
<address> Kua LLL</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.
!Demplo
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.
!m CTML< e (-I(
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 landmar9s 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
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 landmar9 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.
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 contentin7o 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 landmar9s, 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).
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
Figura 5: Estrutura com HTML5 e ARIA
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=":inicio)opo" id="inicio)opo">)opo</a>
<h1>FOM7 2, =FS)=)G=HIO</h1>

<div id="barra,cessibilidade">
<p>*arra de ,cessibilidade</p>
<ul>
<li><a href=":inicio6onteudo">=r para conteAdo >1?</a></li>
<li><a href=":inicioMenu">=r para menu principal >2?</a></li>
<li><a href=":busca">=r para *usca >@?</a></li>
</ul>
</div>
</header>
<nav role="na!i'ation">
<a href=":inicioMenu" id="inicioMenu" access;e<="2">Menu</a>
<ul>
<li>=tens de menu</li>
<li>...</li>
</ul>
</nav>
<div id="conteudo" role="main">
<a href=":inicio6onteudo" id="inicio6onteudo" access;e<="1">6onteAdo</a>
<section role="section" aria/label="3ormulrio de busca">
<ieldset>
<input t<pe="te%t" id="busca" name="busca" access;e<="@"
!alue="Pes-uise a-ui" />
</ieldset>
</orm>
</section>
<section role="section" aria/label="6onteAdo Principal">
<header role="headin'">
<h2>*7M J=F2O</h2>
</header>
<p>Se4a bem !indo ao nosso site.</p>
</section>
</div>
<ooter role="contentinfo">
<a href=":inicioKodape" id="inicioKodape">Kodap$</a>
<address> Kua LLL</address>
</ooter>
-ecomendao 1$@ ; 7o a%rir noas instFncias sem a
solicitao do &s&.rio
1er WCAG 2.0 Crit3rio de 4ucesso 3.2.>
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.
!Demplo
<a hre*6universal.html+> 2esenho Gni!ersal Mabre em no!a 4anelaN </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.
!Demplo
Um exemplo simples para criao de uma janela modal foi colocado abaixo contendo
apenas HTML e CSS3.
CTML
<div id*.conteudo. role*.main.>
<a hre*.0open7odal.>,brir Oanela Modal</a>
<div id*.open7odal. class*.modal8ialo,.>
<div>
<a hre*.0close. class*.close.>3echar</a>
<h2>Oanela Modal</h2>
<p>
7sta $ uma 4anela modal acess5!el e foi criada utili.ando apenas E)M+ e 6SS@.
</p>
<p>P importante disponibili.ar o lin; abai%o para sinali.ar o final da 4anela modal.<
/p>
<a hre*.0close.>3im do conteAdo modal" cli-ue a-ui para retornar</a>
</div>
</div>
</div>
+SS0
.modal2ialo' Q
position& fi%edR
ont2amil)& ,rial" Eel!etica" sans/serifR
top& SR
ri'ht& SR
bottom& SR
left& SR
bac&,round& r'baMS"S"S"S.TNR
92inde:& UUUUUR
displa)&noneR
/web;it/transition& opacit< DSSms ease/inR
/mo./transition& opacit< DSSms ease/inR
transition& opacit< DSSms ease/inR
pointer/e!ents& noneR
V
.modal2ialo'&tar'et Q
displa)& bloc;R
pointer/e!ents& autoR
V
.modal2ialo' ( di! Q
Figura 6: Exemplo de janela modal
width& DSSp%R
position& relati!eR
mar,in& 1SW autoR
paddin,& 1p% 2Sp% 1@p% 2Sp%R
border/radius& 1Sp%R
bac&,round& :fffR
bac&,round& /mo./linear/'radientM:fff" :UUUNR
bac&,round& /web;it/linear/'radientM:fff" :UUUNR
bac&,round& /o/linear/'radientM:fff" :UUUNR
V
.close Q
bac&,round& :XSXSX1R
color& :333333R
line2hei,ht& 21p%R
position& absoluteR
ri'ht& /12p%R
te:t2ali,n& centerR
top& /1Sp%R
width& 1SDp%R
te:t2decoration& noneR
ont2wei,ht& boldR
/web;it/border/radius& 12p%R
/mo./border/radius& 12p%R
border/radius& 12p%R
/mo./bo%/shadow& 1p% 1p% @p% :SSSR
/web;it/bo%/shadow& 1p% 1p% @p% :SSSR
bo%/shadow& 1p% 1p% @p% :SSSR
V
0$2 +omportamento GDoc&ment O%ject Model ; DOMH
-ecomendao 2$1 5 Disponi%iliEar todas as f&n9es da p.gina
ia 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:
!ento do teclado !ento correspondente do mo&se
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:
!Demplo8
HTML
<script src*.;s/e:emplo.;s. t)pe*.te:t/;avascript.></script>
<noscript>Seu na!e'ador n0o tem suporte a Oa!aScript ou est desati!adoC</noscript>
...
<p><a href=":"id="lin;">Portal *rasil</a></p>
Arquivo JavaScript (exemplo.js)
var%=document.'et7lement*<=dM"lin;"N
%.on;e<down=unctionMeNQ
varpressed;e<
iMt)peoe!entC=YundefinedYNQ ZZna!e'ador =nternet 7%plorer
pressed;e<=window.e!ent.;e<6ode
VelseQZZoutros na!e'adores
pressed;e<=e.;e<6odeZZidentifica tecla pressionada
V
iMpressed;e<==Y1@YNQ ZZteste se a tecla $ o [enter\
window.openMYhttp&ZZwww.brasil.'o!.brZYN ZZabre a GK+
V
V
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.
!m CTML< e (-I(
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.
CTML<
<nav role="na!i'ation" aria/label="Menu principal" class="topna!" id="menu">
<ul>
<li><a href="inde%.php">P'ina inicial</a></li>
<li><a href="noticias.php">Fot5cias</a></li>
<li><a href="e!entos.php">7!entos</a></li>
<li>
<a href="acessibilidade/web.php">,cessibilidade Web</a>
<p><a href=":" class="e%pandir">7%pandir menu ,cessibilidade Web</a></p>
<ul class="subna!" role="menu">
<li role="menuitem"><a href=":">Pro4etos acessibilidade web</a></li>
<li role="menuitem"><a href=":">Fot5cias acessibilidade web</a></li>
<li role="menuitem"><a href=":">2icas acessibilidade web</a></li>
<li role="menuitem"><a href=":">Manuais acessibilidade web</a></li>
</ul>
</li>
</ul>
</nav>
+SS
Z] utili.ado para o menu ficar na !ertica+ ]Z
:menu liQ
displa)& inline/bloc;R
V

Z]utili.ado para o lin; ficar no mesmo tamanho -ue a li ]Z
:menu li aQ
displa)& bloc;R
paddin,&11p%R Z] apenas para apresenta80o !isual" n0o influencia conteudo ]Z
V

Z] bloco de codi'os utili.ado apenas para apresenta80o !isual do lin; e%pandirZocultar
]Z
:menu li .e%pandirQ
loat& ri'htR
width& 1@p%R
hei,ht& 1@p%R
te:t2indent& /1SSSp%R
mar,in2top& /DTp%R
paddin,& SR
bac&,round2color&:SSSR
V
Z] cria a cai%a de sub/menu com posi80o absoluta sobre os demais elementos do site ]Z
.topna! li .subna! Q
position&absoluteR
width& 2@Sp%R
displa)& noneR
V
Naascript8
O Javascript abaixo adiciona as funes do link mostrar/ocultar, porm deve ser
utilizado junto com a biblioteca do jQuery (http://jquery.com/).
ZZ4a!ascript para mostrarZocultar submenu
^MdocumentN.read<MunctionMNQ
^MY.leitor/de/telas di!" .e!entos .lista" .dicas .m<hideYN.hideMNR

^M".e%pandir"N.clic;MunctionMN Q
^MthisN.parentMN.ne%tMN.slide)o''leMYslowYNR

var te%t = ^MthisN.te%tMNR

iM te%t.searchM"7%pandir"N C= /1 NQ ZZ /1 $ -uando n0o encontra a strin'
^MthisN.te%tMte%t.replaceM"7%pandir"" "Ocultar"NNR
VelseQ
^MthisN.te%tMte%t.replaceM"Ocultar"" "7%pandir"NNR
V

return alseR
VNR
VNR
-ecomendao 2$2 ; Garantir :&e os o%jetos program.eis
sejam acesseis
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.
!Demplo incorreto
Pgina HTML
<a hre*.;avascript<pop=>.>6adastre/se a'oraC</a>
<script lan,ua,e*.;avascript. t)pe*.te:t/;avascript.>
unction pop=> ?
alert=.@oc! vai a9er um novo cadastro1.>A
B
</script>
Nesse caso, se o navegador no tiver suporte a scripts, o usurio ficar impossibilitado
de acessar o link.
!Demplo correto
Pgina HTML
<script src*.;s/e:emplo.;s. t)pe*.te:t/;avascript.></script>
<noscript>Seu na!e'ador n0o tem suporte a Oa!aScript ou est desati!adoC</noscript>
_
<a hre*.cadastro.html.id*.cadastro.>6adastre/se a'oraC</a>
Arquivo JavaScript (exemplo.js)
unction popMN Q
alertM"Joc# !ai fa.er um no!o cadastroC"NR
V
var element = document.'et7lement*<=dM"cadastro"NR
element.onclic; = popR
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.
-ecomendao 2$05 7o criar p.ginas com at&aliEao
a&tom.tica peri'dica
1er WCAG 2.0 Crit3rio de 4ucesso 3.2.> (03cnicas 416 e =A@$
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/e-ui!="refresh" content="@S"
/>, onde a pgina seria recarregada a cada 30 segundos). O problema dessa
atualizao que ela tira do usurio sua autonomia em relao escolha (semelhante
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.
!Demplo8
-ecomendao 2$4 ; 7o &tiliEar redirecionamento a&tom.tico
de p.ginas
1er WCAG 2.0 Crit3rio de 4ucesso 3.2.> (03cnicas 416 e =A@$
No devem ser utilizadas marcaes para redirecionar a uma nova pgina, como o uso
do atributo http-eBuiv com contedo Cre7reshD 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).
-ecomendao 2$< ; *ornecer alternatia 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.
Figura 7: O Webmail Expresso possui um boto de atualizar para carregamento de novas mensagens
!Demplo8 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.
-ecomendao 2$= ; 7o incl&ir sit&a9es com intermit,ncia 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.
!Demplo8 A imagem abaixo representa um elemento piscante, onde as intermitncias
ocorrem a cada 0,2 segundos.
-ecomendao 2$> ; (sseg&rar o controle do &s&.rio so%re as
altera9es temporais do conteBdo
Contedos como slidesho)s, 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.
Figura 8: Exemplo de intermitncia de imagem
desejvel que o usurio tenha tambm o controle da velocidade desses contedos.
0$0 +onteBdo K Informao
-ecomendao 0$1 ; Identificar o idioma principal da p.gina
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.
!Demplos8
Em HTML 4.01
<html lan'="pt/*K">
<head>
<title>documento escrito em portu'u#s do *rasil</title>
Em XHTML 1.1
<html %mlns="http&ZZwww.w@.or'Z1UUUZ%html" %ml&lan'="pt/*K" lan'="pt/*K">
<head>
Em HTML5
<html lan'="pt/br">
Figura 9: exemplo de slideshow, com mecanismos de parada e navegao entre os slides.
<head>
-ecomendao 0$2 ; Informar m&dana de idioma no conteBdo
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.
!Demplo
XHTML
<p %ml&lan'="de">
2a dachte der Eerr daran" ihn aus dem 3utter .u schaffen"
aber der 7sel mer;te" da` ;ein 'uter Wind wehte" lief fort
und machte sich auf den We' nach *remen& dort" meinte er"
;annte er 4a Stadtmusi;ant werden.
</p>
HTML
<p lan'="de">
2a dachte der Eerr daran" ihn aus dem 3utter .u schaffen"
aber der 7sel mer;te" da` ;ein 'uter Wind wehte" lief fort
und machte sich auf den We' nach *remen& dort" meinte er"
;annte er 4a Stadtmusi;ant werden.
</p>
<p>
O leitor de tela Bspan lan'="en"(O,WSBZspan( Macrbnimo para Bspan lan'="en"(Oob
,ccess With SpeechBZspan(N $ um software desen!ol!ido pela empresa americana Bspan
lan'="en"(3reedomScientificBZspan( e $" atualmente" um dos mais populares no mundo.
)rata/se de um Bspan lan'="en"(software pa'oBZspan(" desen!ol!ido para o sistema
operacional Bspan lan'="en"(Microsoft WindowsBZspan(.
</p>
-ecomendao 0$0 ; Oferecer &m tt&lo descritio e informatio
O p.gina
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].
!Demplo 1
A pgina inicial do Projeto de Acessibilidade Virtual apresenta o seguinte ttulo:
<title>
Pro4eto ,cessibilidade Jirtual
</title>
!Demplo 2
A pgina secundria "Contato do Projeto de Acessibilidade Virtual apresenta o
seguinte ttulo:
<title>
6ontato / Pro4eto ,cessibilidade Jirtual
</title>
!Demplo 0
A pgina interna "Publicaes do stio do Ministrio da Educao apresenta o seguinte
ttulo:
<title>
Publica8es 9 Minist$rio da 7duca80o
</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)
-ecomendao 0$4 ; Informar o &s&.rio so%re s&a localiEao
na p.gina
1er WCAG 2.0 Crit3rio de 4ucesso 2.5.?
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.
!Demplo
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:
)oc, est. em8 P.gina inicial L !nsino L !ditais
O/S8 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.
-ecomendao 0$< ; Descreer linMs clara e s&cintamente
Ver WCAG 2.0 Critrios de Sucesso 2.4.4 e 2.4.9
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.
!Demplo Incorreto
<h2>7duca80o Superior</h2>
<p>)omam posse os reitores das federais da *ahia e )rin'ulo</p>
<p> <a hre*.notici4124.html. title*+%eia mais notCcias sobre DducaEFo
Superior+>%eia mais notCcias sobre DducaEFo Superior</a> </p>
!Demplo correto
<h2>7duca80o Superior</h2>
<p>)omam posse os reitores das federais da *ahia e )rin'ulo</p>
<p> <a hre*.notici4124.html.>%eia mais notCcias sobre DducaEFo 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.
!Demplo incorreto8
Clique aqui para saber mais a respeito de acessibilidade.
!Demplo correto8
Saiba mais a respeito de acessibilidade
O/S8 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.
!Demplo
<a href=\cartilha.odt\>6artilha de ,cessibilidade do W@6 M.odt 11ScbN</a>
-ecomendao 0$= ; *ornecer alternatia em teDto para as
imagens do stio
1er WCAG 2.0 Crit3rio de 4ucesso 6.6.6 (03cnica GE>$
Deve ser fornecida uma descrio para as imagens da pgina, utilizando-se, para
tanto o atributo alt.
!Demplo 1
No cdigo:
<im, src*.oto2porto2ale,re.;p,. alt*.Goto de uma bicicleta de car,a verde com cai:as
laran;as encostada numa parede. />
No caso de banners e outras imagens que reproduzam textos, o ideal reproduzir o
texto escrito.
!Demplo 2
Figura 11: exemplo de banner
No cdigo:
<a hre*.http<//www.dominiopublico.,ov.br/.>
<im, src*.,uia.pn,. alt*.Huia de ServiEos I 3onsulte serviEos p5blicos de orma
cil. />
</a>
Descrever qualquer imagem, em geral, algo bastante subjetivo e a descrio deve
Figura 10: Exemplo de descrio de imagem.
ser adaptada ao contexto em que a imagem se encontra. Para mais detalhes de como
escrever um texto alternativo, veja o tutorial % uso correto do teFto 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.
!Demplo 0
No cdigo da pgina do infogrfico:
<im, src*.,raico.;p,. alt*.Jno,rico sobre selos e certiicaEKes conscientes. />
<p><a hre*.selos2e2certiicacoes.html.>6onteAdo te%to do =nfor'rfico</a> 2
dispon5!el</p>
Figura 12: Exemplo de descrio de infogrfico - A
descrio textual est disponvel em outra pgina
Cdigo em selos-e-certificacoes.html
<h1>Selos e certifica8es conscientes</h1>
<p>6onhe8as os selos e certifica8es -ue atestam a -ualidade e responsabilidade das
empresas na produ80o</p>
<dl>
<dt>Or'nico *rasil</dt>
<dd>Selo do Sistema *rasileiro de ,!alia80o de 6onformidade Or'nica MS=SOr'N
identifica e controla a produ80o nacional de alimentos or'nicos" caracteri.ada por
processo sustent!ele em rela80o ao uso da 'ua" solo" ar e recursos naturais" e sem uso
de a'rotd%icos ou adubos -u5micos. Para saber mais !isite& <a
hre*.http<//www.a,ricultura.,ov.br/desenvolvimentosustentavel/or,anicos.>
Or'nico *rasil</a></dd>
<dt>=nmetro</dt>
<dd>O selo do =nstituto Facional de Metrolo'ia" eualidade e )ecnolo'ia" certifica
-ue o produto foi submetido a testes e medi8es -ue 'arantem a conformidade com os
padres das unidades de medida e%istentes. Para saber mais !isite& <a
hre*.http<//www.inmetro.,ov.br.>Jnmetro</a></dd>
<dt>Procel</dt>
<dd>Selo Procel de 7conomia de 7ner'ia indica os produtos com os melhores n5!eis de
efici#ncia ener'$tica dentro de cada cate'oria" proporcionando economia na conta de lu..
O selo tamb$m incenti!a o desen!ol!imento de produtos ino!adores -ue contribuam para
preser!a80o do meio ambiente. Para saber mais !isite& <a
hre*.http<//www.eletrobras.com/procel.>Procel</a></dd>
<dt>3onselho de 7ane;o Glorestal</dt>
<dd>O selo do <span lan,*+en+>3orest Stewardship 6ouncil</span>" -ue nacionalmente $
chamado de 3S6 *rasil Mconselho de M,ne4o 3lorestalN" 'arante -ue a madeira utili.ada na
fabrica80o de um produto se4a pro!eniente de procedimento ecolo'icamente ade-uado -ue
n0o de'rada o meio ambiente e contribui para o desen!ol!imento econbmico e social das
comunidade florestais ade-uadas. Para saber mais !isite& <a
hre*.http<//br.sc.or,/.>3S6.or'</a></dd>
<dt><span lan,*+en+>3airtrade</span></dt>
<dd>, certifica80o <span lan,*+en+>3airtrade</span>" -ue na tradu80o si'nifica
"comercio Ousto"" $ um dos pilares do com$rcio sustent!el" 4 -ue seus produtos e
ser!i8os de!em estar de acordo com princ5pios como a 'arantia de pa'amento de pre8os
4ustos a pe-uenos produtores" a preser!a80o da saAde das pessoas e do meio ambiente e a
elimina80o da intermedia80o comercial especulati!a. Para saber mais !isite& <a
hre*.http<//www.airtrade.net/.><span lan,*+en+>3airtrade</span></a></dd>
<dt><abbr*+LssociaEFo $rasileira de Mormas #"cnicas+>L$M#</abbr></dt>
<dd>, certifica80o Kotula'em ,mbiental da ,ssocia80o *rasileira de Formas )$cnicas
M,*F)N !isa atestar -uais produtos s0o menos pre4udiciais ao meio ambiente" incenti!ando
a redu80o de uso de ener'ia" de mat$rias primas e da polui80o durante os processos de
produ80o e comerciali.a80o. Para saber mais !isite& <a
hre*.http<//www.abntonline.com.br/rotulo/.>,*F)</span></a></dd>
<dt>+ista su4a do trabalho escra!o </dt>
<dd>Para e!itar consumir produtos de empresas -ue tenham em sua cadeia produti!a
fornecedores fla'rados pela prtica do trabalho escra!o" as empresas t m acesso a lista
su4a do trabalho escra!o" di!ul'adas pelo 'o!erno federal" por meio do sistema de busca
feito pela Or'ani.a80o =nternacional do )rabalho" o =nstituto 7thos e a OFf Kepdrter
*rasil" o -ue torna mais rpida a decis0o de suspender fornecedores irre'ulares. Para
saber mais !isite& <a hre*.http<//www.reporterbrasil.or,.br/pacto/si,natarios.>Pacto
Facional para a 7rradica80o do )rabalho 7scra!o</a></dd>
</dl>
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.
!m CTML<
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.
!Demplo
Figura 13: Dados simples podem ser representados tanto graficamente
quanto em forma de tabelas.
E)M+
<i,ure>
<im, src*.paubrasil.;p,. alt*.Goto de uma rvore pau2brasil. />
<i,caption>
3i'ura 1& =ma'em da r!ore -ue deu ori'em ao nome do nosso pa5s& Pau/brasil
</i,caption>
</i,ure>
Que seria traduzido visualmente na pgina da seguinte forma:
O/S8
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.
!Demplo
HTML
<h(>Acessibilidade web</h(>
CSS
h@ Q
color& :XDTXS*R
ont2si9e& 1.DemR
Figura 15: Ttulo em texto com imagem decorativa de separador pontilhado
Figura 14: Uso dos elemento figure e figcaption
ont2wei,ht& li'hterR
paddin,& 1p% S 1Sp%R
hei,ht& @Sp%R
border2bottom& 1p% dotted :XXXR
V

-ecomendao 0$> ; ItiliEar mapas de imagem de forma
acessel
1er WCAG 2.0 Crit3rio de 4ucesso 6.6.6 (03cnica =25$
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.
!Demplo Gmapa de imagem do lado do clienteH
<im, src*.mapaJm,.;p,. alt*.Jma,em com alternativas L e $. usemap*.07ap. />
<map name*.7ap. id*.7ap.>
<area shape*.rect. coords*.N,1O,P(,4Q. hre*.a.html. alt*.%in& para a seEFo L. />
<area shape*.rect. coords*.RR,Q,12P,P1. hre*.b.html. alt*.%in& para a seEFo $. />
</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.
!Demplo Gmapa de imagem do lado do seridorH
Modelo de (cessi%ilidade em Goerno !letr"nico eM(G <3
<a hre*.novaSa,ina.;p,.><im, src*.bandeira$rasil.;p,. ismap*.ismap. alt*.$andeira
do $rasil =%in&s a se,uir>./></a> <p><a hre*.area@erde.html.>Trea @erde</a> 2
</p>
<p><a hre*.areaLmarela.html.>Trea Lmarela</a> 2 </p>
<p><a hre*.areaL9ul.html.>Trea L9ul</a></p>
-ecomendao 0$? ; Disponi%iliEar doc&mentos em formatos
acesseis
4em crit3rios 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.
O/S8 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.
-ecomendao 0$@ ; !m ta%elas, &tiliEar tt&los e res&mos de
forma apropriada
1er WCAG 2.0 Crit3rio de 4ucesso 6.3.6 (03cnicas =3E e =A3$
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.
!Demplo
<table summar)*.Dsta tabela e:ibe os copos de ca" consumidos por cada senador, o tipo
de ca" =descaeinado ou normal>, com aE5car ou sem aE5car..>
<caption>6opos de caf$ por Senador</caption>
...
Para mais detalhes veja o tutorial 0abelas Acess&veis
(http://governoeletronico.gov.br/acoes-e-projetos/e-MAG/material-de-apoio), na
seo do eMAG no Portal do Programa de Governo Eletrnico.
-ecomendao 0$13 ; (ssociar cl&las de dados Os cl&las de
ca%eal6o
1er WCAG 2.0 Crit3rio de 4ucesso 6.3.6 (03cnicas =53 e =@3$
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.
!Demplo 1
<table>
<caption>2emonstrati!o do Patrimbnio</caption>
<thead>
<tr>
<th>)ipos</th>
<th>Jalores MK^N</th>
<th>Percentual</th>
</tr>
</thead>
<toot>
<tr>
<td>)otal</td>
<td>11S.gDS"22</td>
<td>1SSW</td>
</tr>
</toot>
<tbod)>
<tr>
<td>Kecursos 3inanceiro</td>
<td>1X.TgU"X@</td>
<td>11"@XW</td>
</tr>
<tr>
<td>*ens Md!eis</td>
<td>21.XU1"2@</td>
<td>2@"2SW</td>
</tr>
<tr>
<td>*ens =md!eis</td>
<td>2T.1XU"@X</td>
<td>21"DDW</td>
</tr>
</tbod)>
</table>
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.
!Demplo 2
<table summar<="...">
<caption>Kesultado do 6oncurso</caption>
<tr>
<th id="!a'a">Ja'a</th>
<th id="candidato">Fome do candidato</th>
<th id="basico">Pro!a de 6onhecimento *sico</th>
<th id="especifico">Pro!a de 6onhecimento 7spec5fico</th>
</tr>
<tr>
<td id="adm" rowspan="2">)$cnico ,dministrati!o</td>
<td id="PaulodaSil!a">Paulo da Sil!a</td>
<td headers="adm basico PaulodaSil!a">T</td>
<td headers="adm especifico PaulodaSil!a">1X</td>
</tr>
<tr>
<td id="PedroPontes">Pedro Pontes</td>
<td headers="adm basico PedroPontes">g</td>
<td headers="adm especifico PedroPontes">11</td>
</tr>
<tr>
<td id="inf">)$cnico em =nformtica</td>
<td id="OoaoPereira">Oo0o Pereira</td>
<td headers="inf basico OoaoPereira">U</td>
<td headers="inf especifico OoaoPereira">1g</td>
</tr>
</table>
!Demplo 0
<table summar<=")abela de !endas de ma80 e banana efetuadas no ano de 2S1S">
<caption>Jendas 2S1S</caption>
<tr>
<th scope="col">M#s</th>
<th scope="col'roup" colspan="2">Kio frande do Sul</th>
<th scope="col'roup" colspan="2">Santa 6atarina</th>
</tr>
<tr>
<td>Oaneiro</td>
<td scope="col">Ma80</td>
<td scope="col">*anana</td>
<td scope="col">Ma80</td>
<td scope="col">*anana</td>
</tr>
<tr>
<td>3e!eiro</td>
<td>1SSS</td>
<td>11SS</td>
<td>@SSS</td>
<td>1SSS</td>
</tr>
<tr>
<td>Mar8o</td>
<td>2SSS</td>
<td>11SS</td>
<td>@1SS</td>
<td>1SS</td>
</tr>
</table>
!Demplo 4
<table summar<=")abela com resumo das despesas de transporte durante o m#s de ,'osto
nas cidades de Porto ,le're e 3loriandpolis">
<caption>Kelatdrio de despesa de !ia'em</caption>
<tr>
<th></th>
<th id="alimentacao" a%is="despesas">,limenta80o</th>
<th id="hotel" a%is="despesas">Eotel</th>
<th id="transporte" a%is="despesas">)ransporte</th>
</tr>
<tr>
<th id="poa" a%is="locali.a80o" colspan="D">Porto ,le're</th>
</tr>
<tr>
<td id="data1" a%is="data">21 de a'osto de 2S1S</td>
<td headers="poa data1 alimentacao">K^ @g"gD</td>
<td headers="poa data1 hotel">K^ 112"SS</td>
<td headers="poa data1 transporte">K^ D1"SS</td>
</tr>
<tr>
<td id="data2" a%is="data">2X de a'osto de 2S1S</td>
<td headers="poa data2 alimentacao">K^ 2g"2T</td>
<td headers="poa data2 hotel">K^ 112"SS</td>
<td headers="poa data2 transporte">K^ D1"SS</td>
</tr>
<tr>
<th id="subPoa">Subtotal</th>
<td headers="poa subPoa alimentacao">K^ X1"S2</td>
<td headers="poa subPoa hotel">K^ 22D"SS</td>
<td headers="poa subPoa transporte">K^ US"SS</td>
</tr>
<tr>
<th id="floripa" a%is="locali.a80o" colspan="D">3loriandpolis</th>
</tr>
<tr>
<td id="data@" a%is="data">2g de a'osto de 2S1S</td>
<td headers="floripa data@ alimentacao">K^ UX"21</td>
<td headers="floripa data@ hotel">K^ 1SU"SS</td>
<td headers="floripa data@ transporte">K^ @X"SS</td>
</tr>
<tr>
<td id="dataD" a%is="data">2T de a'osto de 2S1S</td>
<td headers="floripa dataD alimentacao">K^ @1"SS</td>
<td headers="floripa dataD hotel">K^ 1SU"SS</td>
<td headers="floripa dataD transporte">K^ @X"SS</td>
</tr>
Modelo de (cessi%ilidade em Goerno !letr"nico eM(G <<
<tr>
<th id="sub3loripa">Subtotal</th>
<td headers="floripa sub3loripa alimentacao">K^ 1@1"21</td>
<td headers="floripa sub3loripa hotel">K^ 21T"SS</td>
<td headers="floripa sub3loripa transporte">K^ g2"SS</td>
</tr>
<tr>
<th id="total">)otal</th>
<td headers="total alimentacao">K^ 1UX"2g</td>
<td headers="total hotel">K^ DD2"SS</td>
<td headers="total transporte">K^ 1X2"SS</td>
</tr>
</table>
Figura 19: Exemplo da tabela do exemplo 4 com o uso do atributo
axis
-ecomendao 0$11 ; Garantir a leit&ra e compreenso das
informa9es
1er WCAG 2.0 Crit3rio de 4ucesso 3.6.>
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;
Modelo de (cessi%ilidade em Goerno !letr"nico eM(G <=
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
-ecomendao 0$12 ; Disponi%iliEar &ma eDplicao para siglas,
a%reiat&ras e palaras incom&ns
Ver WCAG 2.0 Critrios de Sucesso 3.1.3 e 3.1.4
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.
!Demplo 1 ; !Dplicao no pr'prio teDto
<p>, OFG MOr'ani.a80o das Fa8es GnidasN $ um dr'0o internacional criado em 1UD1.</p>
!Demplo 2 ; ItiliEao de gloss.rio
Um site sobre desenvolvimento Web fornece um link de menu para o Glossrio, que
contm explicaes para termos como HTML, CSS, Tag, atributo, etc.
!Demplo 0 ; ItiliEao do elementos a%%r
<p>*em/!indo h <abbr title="World Wide Web" lan'="en">WWW</abbr>C</p>
0$4 (presentao K Design
-ecomendao 4$1 5 Oferecer contraste mnimo entre plano de
f&ndo 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 (bac9ground), pois acabam por
dificultar a leitura e desviar a ateno do usurio.
Modelo de (cessi%ilidade em Goerno !letr"nico eM(G <>
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.
!Demplos de rela9es de contraste8
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)
-ecomendao 4$2 ; 7o &tiliEar apenas cor o& o&tras
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.
Modelo de (cessi%ilidade em Goerno !letr"nico eM(G <?
!Demplo incorreto
HTML
<p>7%istem tr#s procedimentos para e%ecutar a tarefa&</p>
<ul>
<li><a href=":">Procedimento ,</a></li>
<li><a href=":" class="recomendado">Procedimento *</a></li>
<li><a href=":">Procedimento 6</a></li>
</ul>
CSS
a.recomendadoQ
color& :33SSSSR
V
!Demplo correto
HTML
<p>7%istem tr#s procedimentos para e%ecutar a tarefa&</p>
<ul>
<li><a href=":">Procedimento ,</a></li>
<li><a href=":" class="recomendado">Procedimento * MKecomendadoN</a></li>
<li><a href=":">Procedimento 6</a></li>
</ul>
CSS
a.recomendadoQ
color& :33SSSSR
V
Modelo de (cessi%ilidade em Goerno !letr"nico eM(G <@
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.
Figura 21: Exemplo correto de utilizao
de cores nos elementos
-ecomendao 4$0 ; Permitir redimensionamento sem perda de
f&ncionalidade
Ver WCAG 2.0 Critrio de Sucesso 1.4.4
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.
!Demplo
Exemplo de stio no qual, medida que ocorre o redimensionamento, o leiaute se
ajusta para que no ocorram "quebras.
Modelo de (cessi%ilidade em Goerno !letr"nico eM(G =3
Figura 22: Exemplo de pgina em seu tamanho padro
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
responsio, 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 Gedia
Hueries contendo a resoluo mxima de apresentao e as alteraes desejadas logo
depois.
Figura 23: Exemplo de pgina redimensionada em 200% sem perda de funcionalidade
-ecomendao 4$4 ; Possi%ilitar :&e o elemento com foco seja
is&almente eidente
1er WCAG 2.0 Crit3rio de 4ucesso 2.5.A
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.
!Demplo
CSS
a&focus" a&ho!er Q
border& 2p% solid :3SSR
V
HTML
<ul>
<li><a href="ZacessibilidadeZinde%.php">P'ina =nicial</a></li>
<li><a href="ZacessibilidadeZe!entos.php">7!entos</a></li>
<li><a href="ZacessibilidadeZ-uemsomos.php">euem Somos</a></li>
<li><a href="ZacessibilidadeZead.php">7nsino a 2istncia M7a2N</a></li>
<li><a href="ZacessibilidadeZ!ideoaulas.php">J5deoaulas</a></li>
<li><a href="ZacessibilidadeZ!ideo.php">J5deo em +ibras</a></li>
<li><a href="ZacessibilidadeZoa.php">Ob4etos de ,prendi.a'em</a></li>
<li><a href="ZacessibilidadeZtrabalhos.php">)rabalhos Keali.ados</a></li>
<li><a href="ZacessibilidadeZmapa.php">Mapa do Site</a></li>
</ul>
Figura 24: Exemplo de leiaute responsivo, que se adapta conforme a resoluo da tela

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.
0$< M&ltimdia
-ecomendao <$1 ; *ornecer alternatia para deo
1er WCAG 2.0 Crit3rios de 4ucesso 6.2.6, 6.2.2, 6.2.@ e 6.2.?
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.
!Demplo 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.
!Demplo 2
Uma universidade oferece a opo de visualizar suas videoaulas com ou sem
legendas.
Figura 27: Vdeo com legenda
O%serao8 Alm de alternativa em texto e legenda, importante que os vdeos
com udio possam apresentar alternativa na Lngua Brasileira de Sinais (Libras).
Figura 26: Vdeo contendo arquivo com alternativa em texto
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.
!lemento )ID!O em CTML<
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:
CTML
<button onclic;="pla<PauseMN">Pla<ZPause</button>
<button onclic;="'randeMN">frande</button>
Modelo de (cessi%ilidade em Goerno !letr"nico eM(G =<
Figura 28: Vdeo com alternativa em libras - interprete humano
Figura 29: Vdeo com alternativa em libras - interprete avatar 3D
<button onclic;="pe-uenoMN">Pe-ueno</button>
<button onclic;="normalMN">Formal</button>
<video id="!ideo" width="@2S" hei'ht="2DS" controls>
<source src="e%emplo.mpD" t<pe="!ideoZmpD">
<source src="e%emplo.o''" t<pe="!ideoZo''">
Seu na!e'ador n0o suporta a elemento !ideo.
</video>
Naascript
var meuJideo=document.'et7lement*<=dM"!ideo"NR
unction pla<PauseMN
Q
i MmeuJideo.pausedN
meuJideo.pla<MNR
else
meuJideo.pauseMNR
V
unction 'randeMN
Q
meuJideo.width=1SSR
V
unction pe-uenoMN
Q
meuJideo.width=@SSR
V
unction normalMN
Q
meuJideo.width=D2SR
V
-ecomendao <$2 ; *ornecer alternatia para .&dio
1er WCAG 2.0 Crit3rios de 4ucesso 6.2.6, 6.2.2 e 6.2.@
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.
!Demplo
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.
Modelo de (cessi%ilidade em Goerno !letr"nico eM(G ==
Figura 30: Player de audio com descrio do podcast.
Uma apresentao prvia do contedo dos dois tipos de arquivo e de sua durao
tambm desejvel.
-ecomendao <$0 ; Oferecer a&diodescrio para deo pr5
graado
1er WCAG 2.0 Crit3rio de 4ucesso 6.2.3, 6.2.> e 6.2.A
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.
!Demplo
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.
-ecomendao <$4 ; *ornecer controle de .&dio para som
Deve ser fornecido um mecanismo para parar, pausar, silenciar ou ajustar o volume de
qualquer som que se reproduza na pgina.
Modelo de (cessi%ilidade em Goerno !letr"nico eM(G =>
Figura 31: Vdeo com audiodescrio
!lemento a&dio do CTML<
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 onclic;="pla<PauseMN">Pla<ZPause</button>
<audio controls id="audio">
<source src="horse.o''" t<pe="audioZo''">
<source src="horse.mp@" t<pe="audioZmpe'">
Seu na!e'ador n0o suporta a elemento audio.
</audio>
Javascript
var meu,udio=document.'et7lement*<=dM"audio"NR
unction pla<PauseMN
Q
i Mmeu,udio.pausedN
meu,udio.pla<MNR
else
meu,udio.pauseMNR
V
-ecomendao <$< ; *ornecer 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.
Modelo de (cessi%ilidade em Goerno !letr"nico eM(G =?
Ilustrao 1: Gif animado de pessoas num ponto de nibus com controle de
animao
0$= *orm&l.rios
-ecomendao =$1 ; *ornecer alternatia em teDto para os
%ot9es de imagem de form&l.rios
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.
!Demplo 1
Cdigo:
<input t<pe="ima'e" name="en!iar" src="en!iar.4p'" 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.
!Demplo 2
HTML
<input t<pe="reset" name="limpar" !alue="+impar" class="bt+impar" />
CSS
input.bt%imparQ
bac&,round&transparent urlMbt+impar.4p'N no/repeat left topR
width&1SSp%R
hei,ht&Dgp%R
te:t2indent&/2SSSSp%R
border&SR
V
-ecomendao =$2 ; (ssociar eti:&etas aos se&s campos
1er WCAG 2.0 Crit3rio de 4ucesso 6.3.6 (03cnica =55$
As etiquetas de texto (elemento LABEL) devem estar associadas aos seus campos
(elementos INPUT, SELECT e TEXTAREA, exceo do elemento BUTTON)
Modelo de (cessi%ilidade em Goerno !letr"nico eM(G =@
Figura 32: Imagem de boto Enviar
Figura 33: Imagem de boto
Limpar
correspondentes no formulrio, atravs dos atributos for do label e id do input, os
quais devero ter o mesmo valor.
!Demplo
<label for="nome">Fome& </label>
<input t<pe="te%t" name="nome" id="nome" />
<ieldset>
<le,end>Se%o&</le,end>
<input t<pe="radio" id="fem" name="se%o" />
<label for="fem">3eminino</label>
<input t<pe="radio" id="mas" name="se%o" />
<label for="mas">Masculino</label>
</ieldset>
<label for="ms'">Mensa'em& </label>
<te:tarea name="ms'" id="ms'">2i'ite sua mensa'em</te:tarea>
<input t<pe="chec;bo%" id="receber" name="receber" />
<label for="receber">2ese4a receber nossa newsletteri</label>
-ecomendao =$0 ; !sta%elecer &ma ordem l'gica de
naegao
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.
O%serao8 O atributo tabindeF (ver recomendao 4) somente dever ser utilizado
quando existir real necessidade.
-ecomendao =$4 ; 7o proocar a&tomaticamente alterao
no conteDto
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.
!Demplo Incorreto
<label or*.cidade.>Dscolha a cidade<</label>
<select name="cidade" id="cidade" onchan'e="location =
this.options>this.selected=nde%?.!alueR">
<option !alue="PO,">Porto ,le're</option>
<option !alue="*E">*elo Eori.onte</option>
<option !alue="KO">Kio de Oaneiro</option>
<option !alue="SP">S0o Paulo</option>
Modelo de (cessi%ilidade em Goerno !letr"nico eM(G >3
</select>
!Demplo +orreto
<label or*.cidade.>Dscolha a cidade<</label>
<select id="cidade" name="cidade">

<option !alue="PO,">Porto ,le're</option>
<option !alue="*E">*elo Eori.onte</option>
<option !alue="KO">Kio de Oaneiro</option>
<option !alue="SP">S0o Paulo</option>
</select>
<input t<pe="submit" id="submit" !alue="7n!iar" />
-ecomendao =$< ; *ornecer instr&9es 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).
Figura 34: Acionamento automtico - forma incorreta
Figura 35: Acionamento por meio do boto enviar- forma correta
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.
!Demplo 1
O seguinte exemplo indica que a data precisa ser inserida no formato dia (dd) - ms
(mm) - ano (aaaa).
<label for="data">2ata Mdd/mm/aaaaN</label>
<input t)pe*.te:t. id*.data. name*.data. />
!Demplo 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">Fome&
<im, src="ima'esZiconjasteris;.'if" alt="obri'atdrio"/>
</label>
<input t)pe*te:t 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.
!Demplo 0
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">Fome&
<span>Obri'atdrio<span/>
</label>
<input t<pe=te%t name="nome" id="nome" />
CSS
label span?
bac&,round2ima,e< ima,es/iconUasteris&.,iA
te:t2indent< 22OOOOp:A
ont2si9e< OA
width< O.1 emA
hei,ht< O.2emA
B
!m CTML<
O HTML5 traz um novo atributo, o reBuired, 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">Fome&</label>
<input t<pe=te%t name="nome" id="nome" re-uired />
<input t<pe="submit" !alue="7n!iar" />
Alm do atributo reBuired, 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 t<pe="email" placeholder=\2i'ite seu e/mail\>
<input t<pe="submit" !alue="=nscre!er/se">
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;
Figura 36: Uso do atributo "required"
Figura 37: Uso do atributo placeholder
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.
!Demplo
<label>Fome&
<input name="nome" re-uired placeholder="2i'ite seu nome" autofocus >
</label>
<label>7/mail&
<input name="email" t<pe="email" placeholder="2i'ite seu e/mail" re-uired>
</label>
<label>2ata&
<input t<pe="date" name="data" min="2SSS/S1/S2">
</label>
<label for="67P">67P&
<input name="67P" id="67P" re-uired placeholder="2i'ite seu 67P" pattern="kdQ1V/ikd
Q@V" />
</label>
<label>Mensa'em&
<te:tarea name="mensa'em" re-uired><te:tarea />
</label>
<input t<pe="submit" name="action" !alue="Sal!ar rascunho" formno!alidate>
<input t<pe="submit" name="action" !alue="7n!iar">
</orm>
-enderiEao
Modelo de (cessi%ilidade em Goerno !letr"nico eM(G ><
Figura 38: Renderizao de formulrio acessvel
-ecomendao =$= ; Identificar e descreer erros de entrada de
dados e confirmar o enio das informa9es
Quando um erro de entrada de dados for automaticamente detectado, o item que
apresenta erro deve ser identificado e descrito ao usurio por texto.
!Demplo
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.
Modelo de (cessi%ilidade em Goerno !letr"nico eM(G >=
Figura 39: 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.
!m CTML<
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.
!Demplo
<input t<pe="email">
<input t<pe="submit" !alue="=nscre!er/se">

O HTML5 acrescentou os seguintes valores para o atributo type:
email: Indica a entrada de um endereo de e-mail;
Modelo de (cessi%ilidade em Goerno !letr"nico eM(G >>
Figura 40: Pgina de Confirmao
Figura 41: Uso de novos valores type no INPUT
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;
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.
-ecomendao =$> ; (gr&par campos de form&l.rio
Ver WCAG 2.0 Critrio de Sucesso 1.3.1 (Tcnicas H71 e H85)
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.
!Demplo
<orm method="post" action="...">
<ieldset>
<le,end>2ados Pessoais</le,end>
<label for="nome">O seu Fome& </label>
<input t<pe="te%t" name="nome" id="nome" />
...
</ieldset>
<ieldset>
<le,end>2ados Profissionais</le,end>
<label for="profissao">Sua profiss0o&</label>
<input t<pe="te%t" id="profissao" name="profissao" />
...
</ieldset>
<ieldset>
<le,end>=nforma8es de 6ontato</le,end>
<label for="email">7/mail& </label>
<input t<pe="te%t" id="email" name="email" />
...
</ieldset>
</orm>
Modelo de (cessi%ilidade em Goerno !letr"nico eM(G >?
Figura 42: Uso do FIELDSET
No caso do elemento SELECT, pode ser utilizado o elemento OPTGROUP para agrupar
os itens da lista de seleo.
!Demplo 2
<label for="instituto">eual a sua institui80oi</label>

<select id="instituto" name="instituto">

<opt,roup label="Kio frande do Sul">
<option !alue="ifrs">=3KS</option>
<option !alue="ifsul">=3SG+</option>
<option !alue="iffarroupilha">=33arroupilha</option>
</opt,roup>

<opt,roup label="Santa 6atarina">
<option !alue="ifsc">=3S6</option>
<option !alue="ifc">=36</option>
</opt,roup>
<opt,roup label="Paran">
<option !alue="ifpr">=3PK</option>
</opt,roup>
</select>

Figura 43: Imagem da caixa de seleo
Modelo de (cessi%ilidade em Goerno !letr"nico eM(G >@
-ecomendao =$? ; *ornecer estratgias de seg&rana
especficas ao ins de +(PT+C(
1er WCAG 2.0 Crit3rio de 4ucesso 6.6.6 (03cnicas G653 e G655$
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.
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:
Modelo de (cessi%ilidade em Goerno !letr"nico eM(G ?3
Figura 44: exemplo de CAPTCHA com letras distorcidas
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.
!Demplo
<orm action="action.php" method="post">
<ieldset>
<le,end>6,P)6E,</le,end>
<label for="per'unta">7scre!a por e%tenso -uanto $ dois mais tr#s.</label>
<input t<pe="te%t" id="per'unta" name="per'unta" />
<input t<pe="submit" name="en!iar" !alue="7n!iarC" />
</ieldset>
</orm>
*ig&ra 4< ; !Demplo de +(PT+C( com teste matem.tico
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.
4 $ !lementos padroniEados de acessi%ilidade digital
no Goerno *ederal
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 (tal6os 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 fol6a 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:
+or de f&ndo 8 independente da cor utilizada, ela deve ser alterada para preto
(#000000) ;
+or de teDto 8 independente da cor utilizada, ela deve ser alterada para
branco (#FFFFFF) ;
LinMs 8 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) ;
Pcones 8 Todos os cones devem ser brancos;
Lin6as e +ontornos 8 As linhas e os contornos de elementos devem ser
alterados para branco.
facultativo a alterao de fotos ou ilustraes complexas como infogrficos. Para
mais detalhes ver Recomendao 28.
4$0 /arra de acessi%ilidade
O stio dever conter uma barra de acessibilidade no topo de cada pgina contendo os
seguintes itens:
Alto contraste
Figura 45: Identidade digital - aplicao da folha de alto-contraste
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">6onteAdo >1?</a></li>
<li><a href=":iniciodomenu">Menu >2?</a></li>
<li><a href=":busca">*usca >@?</a></li>
</ul>
<ul id="botoes">

<li><a href=":" id="btjcontraste">alto contraste</a></li>
<li><a href="acessibilidade.html"> P'ina de acessibilidade </a></li>
</ul>
</div>
4$4 (presentao 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 46: Cabealho da identidade digital de governo (verso verde) com barra de acessibilidade no topo.
Figura 47: Detalhe do mapa do stio da Identidade Digital de Governo
4$< P.gina de descrio com os rec&rsos de acessi%ilidade
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:
(cessi%ilidade
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:
Modelo de (cessi%ilidade em Goerno !letr"nico eM(G ?<
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 so%re acessi%ilidade8
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
DBidas, s&gest9es e crticas8
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)
Modelo de (cessi%ilidade em Goerno !letr"nico eM(G ?=
< $ Pr.ticas desaconsel6adas
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.
Modelo de (cessi%ilidade em Goerno !letr"nico eM(G ?>
= $ Gloss.rio
(cessi%ilidade8 Significa permitir o acesso por todos, independente do tipo de
usurio, situao ou ferramenta.
(cessi%ilidade O Ae%8 Criar ou tornar as ferramentas e pginas Web acessveis a
um maior nmero de usurios, inclusive pessoas com deficincia.
(gente de Is&.rio8 Qualquer software que recupera e apresenta contedo Web para
seus usurios, possibilitando que o usurio interaja com o contedo Web.
(tri%&to8 Os atributos servem para definir uma propriedade de um elemento
(X)HTML.
+(PT+C( GCompletely Automated Public Turing test to tell Computers and
Humans ApartH8 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.
+SS G+ascading StQle S6eets ; *ol6as de estilo em cascataH8 Linguagem que
descreve a apresentao, visual ou sonora, de um documento.
Leitor de tela8 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.
7aegador8 Programa que permite ao usurio consultar e interagir com o material
publicado na Web.
7aegador teDt&al8 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.
Padr9es Ae% GAe% StandardsH8 Padres Web so regras de tecnologia definidas
pelo W3C e outros rgos da rea utilizados para criar e interpretar o contedo Web.
Podcast8 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).
!lemento8 Cdigo usado para marcar o incio e o fim de um elemento (X)HTML.
Modelo de (cessi%ilidade em Goerno !letr"nico eM(G ??
Tecnologia assistia8 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.
A0+ GAorld Aide Ae% +onsorti&mH8 Consrcio de mbito internacional com a
finalidade de desenvolver especificaes, guias e ferramentas para Web.
A(I8 G(ccessi%ilitQ Initiatie 5 Iniciatia de (cessi%ilidade na Ae%H8 Tem como
objetivo desenvolver protocolos que melhorem a interoperabilidade e promovam a
evoluo da WWW.
A+(G GAe% +ontent (ccessi%ilitQ G&idelines8 -ecomenda9es de
(cessi%ilidade para +onteBdo Ae%H8 Abrange diversas recomendaes com a
finalidade de tornar o contedo Web mais acessvel.
Ae%cast8 Transmisso de udio e vdeo por meio da Internet ou redes corporativas
para um grupo de pessoas, simultaneamente.
RCTML G!Dtensi%le CQperTeDt MarM&p Lang&ageH8 a linguagem HTML
reformulada para seguir as regras do XML.
RML G!Dtensi%le MarM&p Lang&ageH8 Uma linguagem de marcao semelhante
HTML, mas que permite a descrio de dados definidos por elementos de
programao.
Modelo de (cessi%ilidade em Goerno !letr"nico eM(G ?@
> $ Ta%elas de +ontraste de +ores
As tabelas a seguir mostram as cores que, em fundo preto ou branco, apresentam
uma relao de contraste de no mnimo 4,5:1.
+ores contrastantes com preto
S3@3 S3@0 S3@= S3@@ S3@+ S3@*
S3+3 S3+0 S3+= S3+@ S3++ S3+*
S3*3 S3*0 S3*= S3*@ S3*+ S3**
S0@3 S0@0 S0@= S0@@ S0@+ S0@*
S0+3 S0+0 S0+= S0+@ S0++ S0+*
S0*3 S0*0 S0*= S0*@ S0*+ S0**
S==*
S=@3 S=@0 S=@= S=@@ S=@+ S=@*
S=+3 S=+0 S=+= S=+@ S=++ S=+*
S=*3 S=*0 S=*= S=*@ S=*+ S=**
S@=@ S@=+ S@=*
S@@3 S@@0 S@@= S@@@ S@@+ S@@*
S@+3 S@+0 S@+= S@+@ S@++ S@+*
S@*3 S@*0 S@*= S@*@ S@*+ S@**
S+3*
S+0@ S+0+ S+0*
S+=3 S+=0 S+== S+=@ S+=+ S+=*
S+@3 S+@0 S+@= S+@@ S+@+ S+@*
S++3 S++0 S++= S++@ S+++ S++*
S+*3 S+*0 S+*= S+*@ S+*+ S+**
S*33 S*30 S*3= S*3@ S*3+ S*3*
S*03 S*00 S*0= S*0@ S*0+ S*0*
S*=3 S*=0 S*== S*=@ S*=+ S*=*
S*@3 S*@0 S*@= S*@@ S*@+ S*@*
S*+3 S*+0 S*+= S*+@ S*++ S*+*
S**3 S**0 S**= S**@ S**+ S***
Ta%ela 1 ; +ores contrastantes com a cor preta
+ores contrastantes com %ranco
S333 S330 S33= S33@ S33+ S33*
S303 S300 S30= S30@ S30+ S30*
S3=3 S3=0 S3== S3=@ S3=+ S3=*
S033 S030 S03= S03@ S03+ S03*
S003 S000 S00= S00@ S00+ S00*
S0=3 S0=0 S0== S0=@ S0=+ S0=*
S=33 S=30 S=3= S=3@ S=3+ S=3*
S=03 S=00 S=0= S=0@ S=0+ S=0*
S==3 S==0 S=== S==@ S==+ S==*
S@33 S@30 S@3= S@3@ S@3+ S@3*
S@03 S@00 S@0= S@0@ S@0+ S@0*
S@=3 S@=0 S@==
S+33 S+30 S+3= S+3@ S+3+
S+03 S+00 S+0= S+0@
Ta%ela 2 ; +ores contrastantes com a cor %ranca
Modelo de (cessi%ilidade em Goerno !letr"nico eM(G @3

E MAGv 31

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

E MAGv 31

Enviado por

Direitos autorais:

Formatos disponíveis

Ministrio do Planejamento, Oramento e Gesto

Secretaria de Logstica e Tecnologia da Informao

Você também pode gostar