Modelo de Acessibilidade em Governo Eletrônico: Versão 3.0

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
(ede )acional de Pes*&isa e Inoao em Tecnologias Digitais
Projeto de +cessi%ilidade ,irt&al
,erso -$.
Modelo de +cessi%ilidade em Goerno !letr"nico
+gosto de /.00
!sta o%ra est1 licenciada por &ma Licena 2reatie 2ommons 3 +tri%&io 3
Partil4a nos Mesmos Termos -$. )o +daptada
http://creativecommons.org/licenses/by-sa/3.0/br/
,oc5 tem a li%erdade de6
Compartilhar copiar, distribuir e transmitir a obra.
Remixar criar obras derivadas.
So% as seg&intes condi7es6
Atribuio Voc deve creditar a obra da forma especificada pelo autor ou licenciante (mas no
de maneira ue su!ira ue estes concedem ualuer aval a voc ou ao seu uso da obra".
Compartilhamento pela mesma licena #e 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.
8icando claro *&e6
Ren&ncia 'ualuer das condi(es acima pode ser renunciada se voc obtiver permisso do
titular dos direitos autorais.
)om*nio +&blico ,nde a obra ou ualuer de seus elementos estiver em dom*nio p&blico sob o
direito aplic$vel, esta condio no -, de maneira al!uma, afetada pela licena.
,utros )ireitos ,s se!uintes direitos no so, de maneira al!uma, afetados pela licena.
/imita(es e exce(es aos direitos autorais ou uaisuer usos livres aplic$veis0
,s direitos morais do autor0
)ireitos ue outras pessoas podem ter sobre a obra ou sobre a utili1ao da obra, tais como
direitos de ima!em ou privacidade.
Aviso +ara ualuer reutili1ao ou distribuio, voc deve deixar claro a terceiros os termos da
licena a ue se encontra submetida esta obra
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G
2rasil. 3inist-rio do +lane4amento, ,ramento e 5esto. #ecretaria
de /o!*stica e 6ecnolo!ia da 7nformao
e83A5 3odelo de Acessibilidade em 5overno 9letr:nico; 3inist-rio
do
+lane4amento, ,ramento e 5esto, #ecretaria de /o!*stica e
6ecnolo!ia da 7nformao0 3inist-rio da 9ducao, #ecretaria de
9ducao +rofissional e 6ecnol<!ica 8 2ras*lia . 3+, #/67, =>??.
@A p.. color.
?. Acessibilidade =. #ites da Beb C +ro4etos. D. #ites na Beb 8
)esenvolvimento E. +ro!ramao para 7nternet F. 7nform$tica 8
#ervio +&blico 7. 6*tulo.
C)G
>>E.F.DF
C)) >>E.@HI
/
+gradecimentos
, )epartamento de 5overno 9letr:nico a!radece a. 2runa +oletto #alton, Juc-lia
+oletto Almeida, A!ebson Rocha Kaanha, Andr- /ui1 Re1ende, Andr-a +oletto #on1a,
Ln!ela 5uimares, Kelipe Map, 5leison #amuel do Nascimento, Jor!e Kiore de ,liveira
Junior,
J&lia 3arues Carvalho da #ilva, 3arco Antonio de 'ueiro1, 3arcus Vinicius 2ennett
Kerreira,
3aur*cio Covolan Rosito, Reinaldo Kerra1, Renato 2usatto, Ricardo 3oro, Geslei
+aterno e
Bouiton Kernandes, ue tornaram a verso D.> do e83A5 poss*vel.
, )59 tamb-m a!radece a.
Andre +imenta Kreire
Carol #carton
)ie!o Ro!er Ramos Kreitas
9dercio 3arues 2ento
Jor!e Kernandes
/eonelo )ell Anhol Almeida
3aria Cec*lia Calani 2aranausOas
6hia!o +rado de Campos
Va!ner Ki!ueredo de #antana
+ela sua contribuio, via Consulta +&blica, com su!est(es, esclarecimentos e
corre(es para o presente documento.
!*&ipe do DG! 9 Departamento de Goerno !letr"nico
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G -
:ndice
?. 7ntroduo ................................................................................................... F
?.? #obre a verso D.> ................................................................................... F
?.= /e!islao ............................................................................................... @
?.D , acesso de pessoas com deficincia .......................................................... H
?.E , processo para desenvolver um s*tio acess*vel ........................................... I
=. Recomenda(es de acessibilidade ................................................................. ?=
=.? 3arcao ............................................................................................... ?D
=.= Comportamento (),3" ........................................................................... =?
=.D Conte&do ; 7nformao ........................................................................... =E
=.E Apresentao ; )esi!n ............................................................................ DI
=.F 3ultim*dia ............................................................................................. EE
=.@ Kormul$rios ........................................................................................... EH
D. +adr(es de acessibilidade di!ital no 5overno Kederal ....................................... F@
D.? +$!ina de descrio com os recursos de acessibilidade ................................ F@
D.= Atalhos de teclado .................................................................................. FH
D.D 2arra de acessibilidade ............................................................................ FI
D.E Apresentao do mapa do s*tio ................................................................. FA
D.F Apresentao de formul$rio ..................................................................... @>
D.@ Conte&do alternativo para ima!ens ........................................................... @D
D.H Apresentao de documentos ................................................................... @D
D.I 9lementos ue no devem ser utili1ados ................................................... @D
E. Recursos e ferramentas para acessibilidade .................................................... @E
F. /eitura complementar .................................................................................. @@
@. 5loss$rio .................................................................................................... @H
H. Anexo ? C 6abela de Contraste de Cores ....................................................... @A
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G ;
0$ Introd&o
, !overno brasileiro, comprometido com a incluso, buscou, atrav-s da elaborao do
modelo de acessibilidade do !overno eletr:nico, facilitar o acesso para todas as
pessoas %s informa(es e servios disponibili1ados nos s*tios e portais do !overno.
Assim, a primeira verso do e83A5, elaborada pelo )epartamento de 5overno
9letr:nico em parceria com a ,N5 Acessibilidade 2rasil, foi disponibili1ada para
consulta p&blica em ?I de 4aneiro de =>>F, e a verso =.> 4$ com as altera(es
propostas, em ?E de de1embro do mesmo ano. 9m =>>H, a +ortaria nP D, de H de
maio, institucionali1ou o e83A5 no Qmbito do sistema de Administrao dos Recursos
de 7nformao e 7nform$tica C #7#+, tornando sua observQncia obri!at<ria nos s*tios e
portais do !overno brasileiro.
0$0 So%re a erso -$.
+ara a elaborao da verso =.> do e83A5 foi reali1ado um estudo das re!ras de
acessibilidade atrav-s de um m-todo comparativo entre as normas adotadas por
diversos pa*ses, como a #ection F>I do !overno dos 9stados Gnidos, os padr(es C/K
do Canad$, as diretri1es irlandesas de acessibilidade e documentos de outros pa*ses,
entre eles +ortu!al e 9spanha. 6amb-m foi reali1ada uma an$lise detalhada das
re!ras e pontos de verificao do <r!o internacional BA7;BDC, presentes na BCA5
?.>.
A verso =.> do e83A5 dividia8se em duas partes.
?. a cartilha t-cnica, voltada a desenvolvedores de s*tios, apresentando
detalhadamente a proposta de implementao das recomenda(es de
acessibilidade em s*tios do !overno0
=. a viso do cidado, voltada a todos os cidado brasileiros, apresentando o
modelo de acessibilidade de forma simples e de f$cil compreenso.
A diviso do e83A5 apresentou al!uns inconvenientes durante o processo de
disseminao do 3odelo, como a dificuldade das pessoas entenderem as $reas da
Viso do Cidado e seu relacionamento com a aplicao efetiva da acessibilidade. ,
aprendi1ado durante os seis anos da verso =.> do e83A5 e o lanamento da verso
=.> do BCA5 marcaram o caminho para a reviso do 3odelo.
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G <
A reviso do modelo e a nova verso foi desenvolvida atrav-s da parceria entre o
)epartamento de 5overno 9letr:nico e o +ro4eto de Acessibilidade Virtual da R9NA+7
(Rede de +esuisa e 7novao em 6ecnolo!ias )i!itais". 6amb-m, para a elaborao
dessa nova verso, foram consideradas as contribui(es de especialistas na $rea da
acessibilidade.
A elaborao da verso D.> foi embasada na verso anterior do e83A5, apoiando8se
na BCA5 =.>, lanada em de1embro de =>>I, e considerando as novas pesuisas na
$rea de acessibilidade % Beb. Apesar de utili1ar a BCA5 como referncia, o e83A5
D.> foi desenvolvido e pensado para as necessidades locais, visando atender as
prioridades brasileiras e mantendo8se alinhado ao ue existe de mais atual neste
se!mento.
#e!uindo a diretri1 do pro!rama de 5overno 9letr:nico de promover a Cidadania, o
documento8proposta passou por Consulta +&blica no per*odo de novembro de =>?> a
4aneiro de =>??, recebendo contribui(es tanto pelo sistema de Consulta +&blica do
+ortal do +ro!rama , uanto por e8mail. , n&mero de contribui(es superou as
expectativas e a avaliao criteriosa destas impactou na data de entre!a do modelo,
ue teve seu crono!rama estendido.
Assim, ap<s um lon!o per*odo de maturao e estudo, - entre!ue % sociedade
brasileira a terceira verso do 3odelo de Acessibilidade em 5overno 9letr:nico, o e8
3A5 erso -$., atuali1ado e mais abran!ente no ue di1 respeito a tornar acess*vel
o conte&do do !overno brasileiro na Beb.
A verso D.> do e83A5 - apresentada em apenas um documento, no havendo
separao entre viso t-cnica e viso do cidado. ,utra deciso foi o abandono dos
n*veis de prioridade A, AA e AAA, visto ue o padro - voltado as p$!inas do
5overno, no sendo permitido exce(es com relao ao cumprimento das
recomenda(es. Al-m disso, no e83A5 D.> foi inclu*da a seo chamada R+adroni1ao
de acessibilidade nas p$!inas do !overno federalS, com o intuito de padroni1ar
elementos de acessibilidade ue devem existir em todos os s*tios e portais do
!overno.
0$/ Legislao
9sto listados abaixo al!uns dos principais documentos, ue fa1em parte da le!islao
ue norteia o processo de promoo da acessibilidade e a implementao do e83A5.
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G =
?. )ecreto n&mero F=A@, de = de de1embro de =>>E, ue re!ulamenta as leis nT
?>.>EI, de I de novembro de =>>>, ue d$ prioridade de atendimento %s
pessoas ue especifica, e ?>.>AI, de ?A de de1embro de =>>>, ue estabelece
normas !erais e crit-rios b$sicos para a promoo da acessibilidade das
pessoas com deficincia, e d$ outras providncias0
=. Comit C28E> da A2N6, ue se dedica % normati1ao no campo de
acessibilidade, atendendo aos preceitos de desenho universal. , Comit possui
diversas comiss(es, definindo normas de acessibilidade em todos os n*veis,
desde o espao f*sico at- o virtual0
D. )ecreto nT @AEA, de =F de a!osto de =>>A, ue promul!a a Conveno
7nternacional sobre os )ireitos das +essoas com )eficincia elaborada pelas
Na(es Gnidas em D> de maro de =>>H, definindo, em seu arti!o AT, a
obri!atoriedade de promoo do acesso de pessoas com deficincia a novos
sistemas e tecnolo!ias da informao e comunicao, inclusive % 7nternet.
E. +ortaria nP D, de H de maio de =>>H, ue institucionali1ou o e83A5 no Qmbito
do sistema de Administrao dos Recursos de 7nformao e 7nform$tica C
#7#+, tornando sua observQncia obri!at<ria nos s*tios e portais do !overno
brasileiro.
0$- O acesso de pessoas com defici5ncia
, computador e a 7nternet representam um enorme passo para a incluso de pessoas
com deficincia, promovendo autonomia e independncia. 3as como pessoas com
deficincia utili1am o computadorU 3uitas ve1es, a deficincia no - severa o
suficiente a ponto de tornar8se uma barreira % utili1ao do computador. 9ntretanto,
na maioria das p$!inas da Beb, as pessoas ce!as ou com baixa viso, pessoas com
deficincia auditiva, com dificuldade em utili1ar o mouse, por exemplo, encontram
in&meras barreiras de acessibilidade ue dificultam ou impossibilitam o acesso aos
seus conte&dos.
No ue se refere a acesso ao computador, as uatro principais situa(es vivenciadas
por usu$rios com deficincia so.
Acesso ao computador sem mouse. no caso de pessoas com deficincia visual,
dificuldade de controle dos movimentos, paralisia ou amputao de um
membro superior0
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G >
Acesso ao computador sem teclado. no caso de pessoas com amputa(es,
!randes limita(es de movimentos ou falta de fora nos membros superiores0
Acesso ao computador sem monitor. no caso de pessoas com ce!ueira0
Acesso ao computador sem $udio. no caso de pessoas com deficincia auditiva.
No entanto, esses no so os &nicos casos ue devem ser considerados uando se
pensa em acessibilidade na Beb. 3uitas pessoas apresentam outras limita(es
relacionadas % mem<ria, resoluo de problemas, ateno, compreenso verbal,
leitura e lin!u*stica, compreenso matem$tica e compreenso visual. Gma pessoa com
dislexia, por exemplo, pode apresentar dificuldade de leitura de uma p$!ina devido a
um desenho inadeuado. +or isso, um s*tio desenvolvido considerando a acessibilidade
deve en!lobar diferentes n*veis de escolaridade, faixa et$ria e pouca experincia na
utili1ao do computador, bem como ser compat*vel com as diversas tecnolo!ias
utili1adas para acessar uma p$!ina da Beb.
Gm dos aliados das pessoas com deficincia para o uso do computador so os
recursos de tecnolo!ia assistiva, ue auxiliam na reali1ao de tarefas antes muito
dif*ceis ou imposs*veis de reali1ar, promovendo, desta maneira, a autonomia,
independncia, ualidade de vida e incluso social de pessoas com deficincia.
9xiste atualmente uma enorme !ama de recursos de tecnolo!ia assistiva, desde
artefatos simples at- ob4etos ou softVares mais sofisticados e espec*ficos, de acordo
com a necessidade de cada pessoa. Gma pessoa com limitado movimento das mos,
por exemplo, pode utili1ar um teclado adaptado ue cont-m teclas maiores ou um
mouse especial para operar o computador. J$ as pessoas com baixa viso podem
recorrer a recursos como ampliadores de tela, enuanto usu$rios ce!os podem utili1ar
softVares leitores de tela para fa1er uso do computador.
Apesar de sua enorme importQncia na promoo da acessibilidade %s pessoas com
deficincia, os recursos de tecnolo!ia assistiva, por si s<, no !arantem o acesso ao
conte&do de uma p$!ina da Beb. +ara tal, - necess$rio ue a p$!ina tenha sido
desenvolvida de acordo com os padr(es Beb (Beb #tandards" e as recomenda(es de
acessibilidade, os uais sero abordados ao lon!o deste documento.
)entro desse contexto, este documento ob4etiva !arantir ue o processo de
acessibilidade dos s*tios do !overno brasileiro se4a condu1ido de forma padroni1ada,
de f$cil implementao, coerente com as necessidades brasileiras e em conformidade
com os padr(es internacionais.
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G ?
0$; O processo para desenoler &m stio acessel
A acessibilidade % Beb refere8se a !arantir acesso facilitado a ualuer pessoa,
independente das condi(es f*sicas, dos meios t-cnicos ou dispositivos utili1ados. No
entanto, ela depende de v$rios fatores, tanto de desenvolvimento uanto de interao
com o conte&do. , processo para desenvolver um s*tio acess*vel - reali1ado em trs
passos.
?. #e!uir os padr(es Beb0
=. #e!uir as diretri1es ou recomenda(es de acessibilidade0
D. Reali1ar a avaliao de acessibilidade.
P(IM!I(O P+SSO6 P+D(@!S A!B
+ara se criar um ambiente online efetivamente acess*vel - necess$rio, primeiramente,
ue o c<di!o este4a dentro dos padr(es Beb internacionais definidos pelo BDC.
,s padr(es de desenvolvimento Beb do BDC, ou Beb #tandards, so um con4unto de
recomenda(es ue visa padroni1ar o conte&do Beb, possibilitando melhores pr$ticas
no desenvolvimento de p$!inas da Beb. Gma p$!ina desenvolvida de acordo com os
padr(es Beb deve estar em conformidade com as normas W63/, X3/, XW63/ e C##,
se!uindo as re!ras de formatao sint$tica. Al-m disso, - muito importante ue o
c<di!o se4a semanticamente correto, ou se4a, ue cada elemento se4a utili1ado de
acordo com um si!nificado apropriado, valor e prop<sito.
A conformidade com os padr(es Beb permite ue ualuer sistema de acesso %
informao interprete a mesma adeuadamente e da mesma forma, se4a por meio de
nave!adores, leitores de tela, dispositivos m<veis (celulares, tablets, etc." ou a!entes
de softVare (mecanismos de busca ou ferramentas de captura de conte&do". +$!inas
ue no possuem um c<di!o de acordo com os padr(es do BDC apresentam
comportamento imprevis*vel, e na maioria das ve1es impedem ou pelo menos
dificultam o acesso.
+ara conhecer as boas pr$ticas em desenvolvimento de s*tios de acordo com os
padr(es, ver Cartilha de Codificao dos +adr(es 2rasil e85,V, dispon*vel em.
http.;;VVV.!overnoeletronico.!ov.br;acoes8e8pro4etos;padroes8brasil8e8!ov
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G C
S!GD)DO P+SSO6 DI(!T(IE!S OD (!2OM!)D+F@!S D! +2!SSIBILID+D!
As diretri1es ou recomenda(es de acessibilidade explicam como tornar o conte&do
Beb acess*vel a todas as pessoas, destinando8se aos criadores de conte&do Beb
(autores de p$!inas e criadores de s*tios" e aos pro!ramadores de ferramentas para
criao de conte&do. Gm dos principais documentos nessa $rea - a BCA5, atualmente
em sua verso =.>, desenvolvida pelo cons<rcio BDC a partir da criao do BA7 (Beb
AccessibilitY 7nitiative", contendo as recomenda(es de acessibilidade para conte&do
Beb. 9m n*vel nacional, o e83A5 - o documento ue cont-m as diretri1es ou
recomenda(es ue norteiam o desenvolvimento de s*tios e portais acess*veis.
T!(2!I(O P+SSO6 +,+LI+FGO D! +2!SSIBILID+D!
Ap<s a construo do ambiente online de acordo com os padr(es Beb e as diretri1es
de acessibilidade, - necess$rio test$8lo para !arantir sua acessibilidade. No caso dos
padr(es Beb, h$ um validador autom$tico disponibili1ado pelo pr<prio BDC (ver seo
de Recursos". No ue di1 respeito %s diretri1es de acessibilidade, - necess$rio reali1ar,
inicialmente, uma validao autom$tica atrav-s de validadores, ue so softVares ou
servios online ue a4udam a determinar se um s*tio respeitou ou no as
recomenda(es de acessibilidade, !erando um relat<rio de erros. Gma das
ferramentas ue podem ser utili1adas - o A#9#, avaliador e simulador de
acessibilidade em s*tios, cu4os instrumentos permitem avaliar, simular e corri!ir a
acessibilidade de p$!inas, s*tios e portais, viabili1ando a adoo da acessibilidade por
<r!os do !overno. Al-m do A#9#, existem outros validadores autom$ticos (para mais
informa(es, ver seo de Recursos deste documento".
Z preciso salientar ue, apesar de tornarem a avaliao de acessibilidade mais r$pida
e menos trabalhosa, os validadores autom$ticos por si s< no determinam se um s*tio
est$ ou no acess*vel. +ara uma avaliao efetiva, ser$ necess$ria uma posterior
validao manual.
A validao manual - necess$ria porue nem todos os problemas de acessibilidade em
um s*tio so detectados mecanicamente pelos validadores. +ara a validao manual,
so utili1ados checOlists de validao humana.
Assim, os passos su!eridos para a avaliao de acessibilidade em um s*tio so os
se!uintes.
?. Validar os c<di!os do conte&do W63/ e das folhas de estilo0
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G 0.
=. Verificar o fluxo de leitura da p$!ina C para tal, utili1ar um nave!ador textual,
como o /Ynx, ou um leitor de tela (recomendamos o NV)A ou ,RCA". +ara
maiores detalhes, ver documento )escrio dos /eitores de 6ela, dispon*vel
em. http.;;VVV.!overnoeletronico.!ov.br;acoes8e8pro4etos;e83A5;material8
de8apoio.
D. Verificar o fluxo de leitura da p$!ina sem estilos, sem script e sem as ima!ens0
E. Verificar as funcionalidades da barra de acessibilidade, aumentando e
diminuindo a letra, modificando o contraste, etc.0
F. Reali1ar a validao autom$tica de acessibilidade utili1ando o A#9# e outros
avaliadores autom$ticos su!eridos no Cap*tulo E0
@. Reali1ar a alidao man&al, utili1ando os checOlists de validao humana
dispon*veis em http.;;VVV.!overnoeletronico.!ov.br;acoes8e8pro4etos;e8
3A5;material8de8apoio.
A validao manual - uma etapa essencial na avaliao de acessibilidade de um s*tio,
4$ ue os validadores autom$ticos no so capa1es de detectar todos os problemas de
acessibilidade em um s*tio, pois muitos aspectos reuerem um 4ul!amento humano.
+or exemplo, validadores autom$ticos conse!uem detectar se o atributo para
descrever ima!ens foi utili1ado em todas as ima!ens do s*tio, mas somente uma
pessoa poder$ verificar se a descrio da ima!em est$ adeuada ao seu conte&do.
+ara reali1ar uma validao manual efetiva, o desenvolvedor dever$ ter conhecimento
sobre as diferentes tecnolo!ias, as barreiras de acessibilidade enfrentadas por pessoas
com deficincia e as t-cnicas ou recomenda(es de acessibilidade.
,utra etapa essencial da validao de uma p$!ina - a reali1ao de testes com
usu$rios reais (pessoas com deficincia ou limita(es t-cnicas". Gm usu$rio real
poder$ di1er se um s*tio est$ realmente acess*vel, compreens*vel e com boa
usabilidade e no simplesmente tecnicamente acess*vel. 'uanto maior e mais
diversificado o n&mero de usu$rios reais participando da avaliao de acessibilidade,
mais efica1 e robusto ser$ o resultado.
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G 00
/$ (ecomenda7es de acessi%ilidade
,s padr(es de acessibilidade compreendem recomenda(es ou diretri1es ue visam
tornar o conte&do Beb acess*vel a todas as pessoas, inclusive %s pessoas com
deficincia, destinando8se aos autores de p$!inas, pro4etistas de s*tios e aos
desenvolvedores de ferramentas para criao de conte&do. A observao destes
padr(es tamb-m facilita o acesso ao conte&do da Beb, independente da ferramenta
utili1ada (nave!adores Beb para computadores de mesa, laptops, telefones celulares,
ou nave!ador por vo1" e de certas limita(es t-cnicas, como, por exemplo, uma
conexo lenta, a falta de recursos de m*dia, etc.
As recomenda(es de acessibilidade deste documento no esto dividas por n*veis de
prioridade, 4$ ue todas elas so de !rande importQncia e devem ser se!uidas. )essa
forma, optou8se por classificar as recomenda(es nas se!uintes se(es.
3arcao
Comportamento (),3"
Conte&do;7nformao
Apresentao;)esi!n
3ultim*dia
Kormul$rio
OBS6 As recomenda(es deste documento so baseadas em W63/ E.> e XW63/ ?.?.
A maioria dos exemplos apresentados nas recomenda(es a se!uir mostram o c<di!o
(X"W63/ ue deve ser renderi1ado no nave!ador, 4$ ue - esse c<di!o ue apresenta
importQncia para !arantir a acessibilidade. Assim, no foram apresentados exemplos
do lado do servidor, pois o desenvolvedor pode utili1ar a lin!ua!em do lado do
servidor ue preferir, apenas tomando o cuidado com o c<di!o ue ser$ !erado.
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G 0/
/$0 Marcao
(!2OM!)D+FGO 0 9 (!SP!IT+( OS P+D(@!S D! D!S!),OL,IM!)TO A!B
Ver WCAG 2.0 Critrios e !"cesso #.$.$ e #.$.2
Z essencial se!uir os padr(es de desenvolvimento Beb, do BDC (Borld Bide Beb
Consortium", com o intuito de maximi1ar a compatibilidade com atuais e futuros
a!entes de usu$rio.
Z preciso declarar o ),C6[+9 correto da p$!ina de ualuer documento W63/ ou
XW63/. , ),C6[+9 define ual verso do (X"W63/ o documento est$ usando e esta -
uma informao fundamental para ue os a!entes de usu$rio processem corretamente
o documento. Al-m disso, - por meio do ),C6[+9 ue as ferramentas de validao
analisam o c<di!o da p$!ina e indicam corre(es. +oder$ ser utili1ado ualuer
),C6[+9 para W63/ ou XW63/, com exceo do Krameset. Al-m disso, ualuer
c<di!o W63/ ou C## inserido em uma p$!ina por script ou outro m-todo similar deve
produ1ir uma p$!ina v$lida uando renderi1ada.
As camadas l<!icas devero ser separadas, de acordo com o ob4etivo para o ual elas
foram desenvolvidas. Assim, para a camada de conte&do devem ser utili1adas as
lin!ua!ens de marcao, como html e xhtml. +ara a camada de apresentao visual
do conte&do, utili1am8se as folhas de estilo css em ualuer uma de suas vers(es. J$
para a camada ue modifica o comportamento dos elementos, so utili1adas
lin!ua!ens 4avascript e modelos de ob4eto (dom".
!Hemplos de DO2TIP!
9m W63/ E.>? #trict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://.3.!"#/T$/ht%&4/'t"()t.*t*">
<html &+,#-"pt-B$">
<head>
<title>E./%p&! */ DOCTYPE /% HTML 4.01</title>
<meta http-/01(2-")!,t/,t-t3p/" )!,t/,t-"t/.t/ht%&4 )h+"'/t-1t5-6" />
</head>
9m XW63/ ?.?
<!DOCTYPE ht%& PUBLIC "-//W3C//DTD 7HTML 1.1//EN"
"http://.3.!"#/T$/.ht%&11/DTD/.ht%&11.*t*">
<html .%&,'-"http://.3.!"#/1888/.ht%&" .%&:&+,#-"pt-B$">
<head>
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G 0-
<title> E./%p&! */ DOCTYPE /% 7HTML 1.1</title>
<meta http-/01(2-")!,t/,t-t3p/" )!,t/,t-"+pp&()+t(!,/.ht%&9.%&4 )h+"'/t-1t5-6" />
</head>
+ara mais detalhes a respeito dos padr(es de desenvolvimento Veb, ver a Cartilha e
Coi%ica&'o (ar)es Web e-G*V do padro e8+B5, dispon*vel em.
(!2OM!)D+FGO / 9 O(G+)IE+( O 2JDIGO KTML D! 8O(M+ LJGI2+ ! S!ML)TI2+
Ver WCAG 2.0 Critrio e !"cesso $.3.$
, c<di!o W63/ deve ser or!ani1ado de forma l<!ica e semQntica, ou se4a,
apresentando os elementos em uma ordem compreens*vel e correspondendo ao
conte&do dese4ado. Assim, marcao semQntica adeuada deve ser utili1ada para
desi!nar os cabealhos (h?, h=, hD", as listas (ul, ol, dl", texto enfati1ado (stron!",
marcao de c<di!o (code", marcao de abreviaturas (abbr", marcao de cita(es
lon!as (blocOuote", etc. )essa forma, as p$!inas podero ser apresentadas e
compreendidas sem recursos de estili1ao, tal como as folhas de estilo. Al-m disso, o
c<di!o semanticamente correto - muito importante para usu$rios com deficincia
visual, pois os leitores de telas descrevem primeiro o tipo de elemento e depois
reali1am a leitura do conte&do ue est$ dentro desse elemento.
!Hemplo correto
<h1>P+*":/' W/;</h1>
<ul>
<li><a h"/5-"%/,11.ht%&">M/,1 1</a></li>
<li><a h"/5-"%/,1<.ht%&">M/,1 <</a></li>
</ul>
<h2>W/; =/%>,t()+</h2>
<blockquote>
O p!*/" *+ /; /'t? /% '1+ 1,(2/"'+&(*+*/. =/"
+)/''+*+ p!" t!*!'@ (,*/p/,*/,t/ */ */5()(A,)(+@ B 1%
+'p/)t! /''/,)(+&.
</blockquote>
<cite .%&:&+,#-"/,"CT(% B/",/"' L//</cite>
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G 0;
!Hemplo Incorreto
<h1>P+*":/' W/;</h1>
<p><a h"/5-"%/,11.ht%&">M/,1 1</a></p>
<p><a h"/5-"%/,1<.ht%&">M/,1 <</a></p>
<h2>W/; =/%>,t()+</h2>
<p>
O p!*/" *+ /; /'t? /% '1+ 1,(2/"'+&(*+*/. =/"
+)/''+*+ p!" t!*!'@ (,*/p/,*/,t/ */ */5()(A,)(+@ B 1%
+'p/)t! /''/,)(+&.
</p>
<p>T(% B/",/"' L//</p>
(!2OM!)D+FGO - 9 DTILIE+( 2O((!T+M!)T! OS ):,!IS D! 2+B!F+LKO
Ver WCAG 2.0 Critrios e !"cesso $.3.$ e 2.#.$0
,s n*veis de cabealho devem ser utili1ados de forma l<!ica e semQntica para facilitar
a leitura e compreenso. Al-m disso, pessoas acessando uma p$!ina com leitor de
tela podem nave!ar atrav-s dos cabealhos, pulando de um para outro, a!ili1ando,
assim, a nave!ao. Conceitualmente, existem seis n*veis de t*tulos, sendo o h? o
mais alto, ou se4a, dever$ corresponder ao t*tulo principal da p$!ina. )essa forma,
cada p$!ina dever$ ter apenas um h?, o ual poder$ ser substitu*do por uma ima!em,
mas dever$ permanecer com seu conte&do, mesmo ue no visualmente, permitindo
a leitura pelo leitor de tela. J$ os n*veis do h= ao h@ podero ser utili1ados mais de
uma ve1 na p$!ina, mas sem excesso e com l<!ica textual. +ara compreender melhor
os n*veis de t*tulo pode8se tomar como exemplo um s*tio de um livro, onde o nome do
livro - o h?, os cap*tulos so h=, os subcap*tulos so hD e assim por diante.
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G 0<
!Hemplo
8ig&ra 0 9 !Hemplo de &tiliMao dos neis de tt&lo
KTML
<h1>TB),()+' )1&(,?"(+'</h1>
<p>D '/#1(" !' '/#"/*!' 01/ 5+)(&(t+% + 2(*+ ,+ )!E(,h+.</p>
<h2>L/#1%/'@ 5!&h+' / 2/#/t+('</h2>
<h3>B+;+ *! 01(+;!</h3>
<p>P+"+ /&(%(,+" + ;+;+ *! 01(+;!@ &+2/-! +(,*+ (,t/("!@ '/01/-! / )!&!01/-! ,1%+ t(#/&+
)!% 1% p!1)! */ '1)! */ &(%F!@ */(.+,*! "/p!1'+" *1"+,t/ 1G %(,1t!'. D/p!(' &+2/
&(#/("+%/,t/@ )!"t/ / )!E(,h/.</p>
<h3>H/(IF!</h3>
<p>1 .J)+"+ */ 5/(IF! )"1 '/"2/ t"?' p/''!+' */p!(' */ p"!,t!.</p>
<h3>C/,!1"+' / +(p!'</h3>
<p>P+"+ "/'!&2/" ! p"!;&/%+ */ )/,!1"+' / +(p!' %/(! %1")h!'@ %/"#1&h/-!' /% ?#1+
#/&+*+ %('t1"+*+ )!% 1%+ )!&h/" */ )h? */ %/& p!" 1%+ h!"+. E')!""+ / '/01/ &/2/%/,t/
*/p!('.</p>
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G 0=
<h2>C!,#/&+%/,t! / */')!,#/&+%/,t!</h2>
<h3>C+",/ /% p/*+K!'</h3>
<p>P+"+ */')!,#/&+" )+",/ /% p/*+K!' (,t/("!' )!&!01/L+ /%;"1&h+*+@ ,1%+ 2+'(&h+ )!%
?#1+. C!&!01/ '+& ,+ ?#1+ / ,! p+)!t/ / t+%p/ p!" 1%+ h!"+.</p>
<h3>C+",/ %!J*+</h3>
<p>P+"+ +p"/''+" ! */')!,#/&+%/,t! *+ )+",/ %!J*+@ '+&#1/ + 01+,t(*+*/ 01/ ("? 1'+". O
'+& +p"/''+ ! */')!,#/&+%/,t!.</p>
(!2OM!)D+FGO ; 9 O(D!)+( D! 8O(M+ LJGI2+ ! I)TDITI,+ + L!ITD(+ ! T+BDL+FGO
Ver WCAG 2.0 Critrios e !"cesso $.3.2 e 2.#.3
)eve8se criar o c<di!o W63/ com uma seuncia l<!ica de leitura para percorrer linOs,
controles de formul$rios e ob4etos. 9ssa seuncia - determinada pela ordem ue se
encontra no c<di!o W63/.
Z recomend$vel disponibili1ar o bloco de conte&do no W63/ antes do bloco de menu,
para ue usu$rios, nave!ando pelo teclado, no precisem nave!ar por todos os itens
de menu antes de che!ar ao conte&do. Apesar de os atalhos auxiliarem nesse sentido,
al!uns usu$rios no sabem utili1$8los. ,s atalhos no funcionam em interfaces
especiali1adas, como o do /eitor de 6ela ),#V,X e podem ser de dif*cil utili1ao para
pessoas com deficincia motora.
OBS6 , atributo tabindex somente dever$ ser utili1ado uando existir real
necessidade. Com o uso de C## para fins de leiaute, o c<di!o W63/ pode facilmente
ser desenvolvido de maneira ue a ordem de tabulao se4a a correta. No entanto, se
houver necessidade de utili1ar o tabindex , o mesmo dever$ ser utili1ado com a
semQntica correta e dever$ ser verificado manualmente se o fluxo fornecido pelo
tabindex - realmente o dese4ado, evitando, assim, ue o uso do tabindex resulte
em uma ordem de tabulao inconsistente.
!Hemplo correto Nsem o &so do tabindexO
<ul>
<li><a h"/5-"M">P?#(,+ I,()(+&</a></li> <!Np"(%/("! 5!)! --C
<li><a h"/5-"M">C+pJt1&! 1</a></li> <!N'/#1,*! 5!)! --C
<li><a h"/5-"M">C+pJt1&! <</a></li> <!Nt/")/("! 5!)! --C
<li><a h"/5-"M">C+pJt1&! 3</a></li> <!N01+"t! 5!)! --C
</ul>
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G 0>
!Hemplo incorreto do &so do tabindex
<ul>
<li><a h"/5-"%+(,.ht%&" t+;(,*/.-"1">P?#(,+ I,()(+&</a></li>
<li><a h"/5-")+p(t1&!1.ht%&" t+;(,*/.-"4">C+pJt1&! 1</a></li>
<li><a h"/5-")+p(t1&!<.ht%&" t+;(,*/.-"3"> C+pJt1&! <</a></li>
<li><a h"/5-")+p(t1&!3.ht%&" t+;(,*/.-"<"> C+pJt1&! 3</a></li>
</ul>
,rdem de tabulao errada, conferida pelo tabindex.
(!2OM!)D+FGO < 3 DISPO)IBILIE+( TOD+S +S 8D)F@!S D+ PPGI)+ ,I+ T!2L+DO
Ver WCAG 2.0 Critrios e !"cesso 2.$.$ e 2.$.2
6odas as fun(es da p$!ina desenvolvidas utili1ando8se lin!ua!ens de script
(4avascript" devero estar dispon*veis uando for utili1ado apenas o teclado. Z
importante salientar ue o foco no dever$ estar bloueado ou fixado em um
elemento da p$!ina, para ue o usu$rio possa mover8se pelo teclado por todos os
elementos.
Al!umas fun(es espec*ficas do mouse possuem uma funo l<!ica correspondente via
teclado, conforme mostrado na tabela a se!uir.
!ento do mo&se !ento do teclado
onmousedown onkeydown
onmouseup onkeyup
onclick* onkeypress
onmouseover onfocus*
onmouseout onblur*
,2#. \ Al!uns manipuladores de eventos so dispositivo8independentes, ou se4a, se aplicam a ualuer
dispositivo (mouse, teclado ou outro", como - o caso de. onKocus, on2lur, on#elect, onChan!e, e onClicO
(uando o onClicO for utili1ado em um linO ou elemento de formul$rio".
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G 0?
'uando forem utili1ados m&ltiplos manipuladores de eventos para uma ao, de
maneira ue ela funcione tanto pelo mouse como pelo teclado, - importante testar o
resultado final em diferentes nave!adores e utili1ando diferentes recursos de
tecnolo!ia assistiva, para !arantir ue o evento se4a, de fato, acess*vel.
) preferncia por utili1ar o onclicO;onOeYpress em ve1 de onmousedoVn;onOeYdoVn
e onmouseup;onOeYup, pois estes &ltimos fa1em com ue o evento se4a disparado
automaticamente atrav-s do teclado. #e houver real necessidade de utili1ao destes
eventos, dever$ ser feito um controle sobre ual tecla dever$ ser acionada para ue o
evento ocorra, conforme o exemplo a se!uir.
QaaScript
<')"(pt t3p/-"t/.t/I+2+')"(pt"C
var .-*!)1%/,t.#/tE&/%/,tB3I*O"&(,P"Q
..!,P/3*!,-functionO/QR
var p"/''/*P/3
ifOtypeof /2/,t!-S1,*/5(,/*SQR //,+2/#+*!" I,t/",/t E.p&!"/"
p"/''/*P/3-(,*!./2/,t.P/3C!*/
TelseR//!1t"!' ,+2/#+*!"/'
p"/''/*P/3-/.P/3C!*/ //(*/,t(5()+ t/)&+ p"/''(!,+*+
T
ifOp"/''/*P/3--S13SQR //t/'t/ '/ + t/)&+ B ! U/,t/"V
(,*!.!p/,OShttp://.;"+'(&.#!2.;"/SQ //+;"/ + U$L
T
T
</')"(ptC
KTML
<p><a h"/5-"M" (*-"&(,P">P!"t+& B"+'(&</a></p>
9xistem fun(es do mouse ue no possuem uma funo correspondente via teclado,
como - o caso de duplo cliue (dblclicO". Nesses casos, - necess$rio implementar a
funo de maneira alternativa, como, por exemplo, incluindo bot(es ue executem,
pelo teclado, a funo de forma euivalente. , evento onclicO 4$ funciona pelo teclado
(tecla 9N69R" na maioria dos nave!adores.
(!2OM!)D+FGO = 9 8O()!2!( L)2O(+S P+(+ I( DI(!TO + DM BLO2O D! 2O)T!RDO
Ver WCAG 2.0 Critrio e !"cesso 2.#.$
)evem ser fornecidas Qncoras, dispon*veis na barra de acessibilidade, ue apontem
para linOs relevantes presentes na mesma p$!ina. Assim, - poss*vel ir ao bloco de
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G 0C
conte&do dese4ado. ,s linOs devem ser colocados em lu!ares estrat-!icos da p$!ina,
como por exemplo, no in*cio e final do menu, do conte&do, etc.
+ara facilitar a utili1ao das Qncoras, podem ser disponibili1ados atalhos por teclado,
utili1ando o atributo accessOeY nos linOs relevantes. Z importante ressaltar ue as
dicas de atalhos presentes na barra de acessibilidade no devem possuir o atributo
accessOeY, 4$ ue no pode haver repetio do mesmo accessOeY em uma p$!ina.
Recomenda8se fornecer atalhos para o menu principal, para o conte&do e para a caixa
de pesuisa.
!Hemplo
6opo da +$!ina (na barra de acessibilidade"
<ul (*-"+t+&h!'">
<li><a h"/5-"M)!,t/1*!">I" p+"+ )!,t/W*! X1Y</a></li>
<li><a h"/5-"M%/,1">I" p+"+ %/,1 p"(,)(p+&X<Y</a></li>
<li><a h"/5-"M;1')+">I" p+"+ ;1')+ X3Y</a></li>
</ul>
Conte&do da +$!ina
<div>
<a ,+%/-")!,t/1*!" (*-")!,t/1*!" )&+''-"!)1&t!" +))/''P/3-"1">I,J)(! *!
)!,t/W*!</a>
<!-- C!,t/W*! Z
</div>
3enu +rincipal da +$!ina
<div>
<a ,+%/-"%/,1" (*-"%/,1" )&+''-"!)1&t!" +))/''P/3-"<">I,J)(! *! %/,1</a>
<!--(t/,' */ %/,1 --C
</div>
Kormul$rio de pesuisa do s*tio (pode estar em ualuer lu!ar no s*tio"
<form +)t(!,-"M"%/th!*-"p!'t">
<fieldset>
<legend>B1')+"</legend>
<label 5!"-";1')+">P/'01('/ +01(</label>
<input type="tet" id="busca" name="busca" accesskey="3" value="!esquise
aqui" />
<input t3p/-"'1;%(t" 2+&1/-"B1')+"" )&+''-";1')+"" ,+%/-";1')+"" />
</fieldset>
</form>
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G /.
Koram utili1ados ambos os atributos name e id para ue as Qncoras funcionem em
todos os nave!adores, tanto textuais uanto !r$ficos, 4$ ue h$ os ue suportam
ambos os atributos e os ue suportam apenas um deles.
As dicas dos principais atalhos do s*tio devem ser disponibili1adas na barra de
acessibilidade e na p$!ina sobre a acessibilidade do s*tio. 3aiores detalhes a esse
respeito podem ser encontrados no cap+t"lo 3 , -lementos e acessibiliae nas
p.ginas o Governo /eeral.
(!2OM!)D+FGO > 9 )GO DTILIE+( T+B!L+S P+(+ DI+G(+M+FGO
Ver WCAG 2.0 Critrio e !"cesso $.3.$ 01cnica 23$4
As tabelas devem ser utili1adas apenas para dados tabulares e no para efeitos de
disposio dos elementos na p$!ina. +ara este fim, utili1e as folhas de estilo.
(!2OM!)D+FGO ? 9 S!P+(+( LI)SS +DQ+2!)T!S
Ver WCAG 2.0 Critrio e !"cesso $.3.$ 01cnica 2#54
/inOs ad4acentes devem ser separados por mais do ue simples espaos, para ue no
fiuem confusos, em especial para usu$rios ue utili1am leitor de tela. +ara isso, -
recomendado o uso de listas, onde cada elemento dentro da lista - um linO. As listas
podem ser estili1adas visualmente com C## para ue os itens se4am mostrados da
maneira dese4ada, como um ao lado do outro, por exemplo.
Caso os linOs este4am no meio de um par$!rafo, pode8se utili1ar v*r!ulas, parnteses,
colchetes, etc., para fa1er a separao.
!Hemplo correto
<ul (*-"%/,1">
<li> <a h"/5-"h!%/.ht%&">H!%/</a></li>
<li> <a h"/5-"p/'01('+.ht%&">P/'01('+</a></li>
<li> <a h"/5-"%+p+'(t/.ht%&">M+p+ *! =(t/</a></li>
</ul>
<!-- C!,t/1*! *! =(t/ --C
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G /0
!Hemplo incorreto
<p (*-"%/,1">
<a h"/5-"M%/,1">P1&+" ! %/,1</a><br />
<a h"/5-"h!%/.ht%&">H!%/</a><br />
<a h"/5-"p/'01('+.ht%&">P/'01('+</a><br />
<a h"/5-"%+p+'(t/.ht%&">M+p+ *! =(t/</a>
</p>
<!-- C!,t/1*! *! =(t/ --C
(!2OM!)D+FGO C 9 )GO +B(I( )O,+S I)STL)2I+S S!M + SOLI2IT+FGO DO DSDP(IO
Ver WCAG 2.0 Critrio e !"cesso 3.2.3
A deciso de se utili1ar8se de novas instQncias C por exemplo abas ou 4anelas 8 para
acesso a p$!inas e servios ou ualuer informao - do cidado. Assim, no devem
ser utili1ados.
+op8ups0
A abertura de novas abas ou 4anelas0
, uso do atributo tar!et]R^blanOS0
3udanas no controle do foco do teclado0
9ntre outras, ue no tenham sido solicitadas pelo usu$rio.
/$/ 2omportamento NDOMO
(!2OM!)D+FGO 0. 9 G+(+)TI( TD! OS OBQ!TOS P(OG(+MP,!IS S!Q+M +2!SS:,!IS
Ver WCAG 2.0 Critrios e !"cesso 2.$.$ e 2.$.2
)eve8se !arantir ue scripts, Klash, conte&dos dinQmicos e outros elementos
pro!ram$veis se4am acess*veis. #e no for poss*vel ue o elemento pro!ram$vel se4a
diretamente acess*vel, deve ser fornecida uma alternativa em W63/ para o conte&do.
Assim, - preciso !arantir ue o conte&do e as funcionalidades de ob4etos
pro!ram$veis se4am acess*veis aos recursos de tecnolo!ia assistiva e ue se4a poss*vel
a nave!ao por teclado.
'uando o script for utili1ado em uma p$!ina da Beb, uma forma de fornecer uma
alternativa para ele - atrav-s do elemento _noscript`. 9ste elemento pode ser
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G //
utili1ado para mostrar conte&dos em nave!adores ue no suportam scripts ou ue
tenham o script desabilitado. No entanto, se o nave!ador tiver suporte a scripts e
estes estiverem habilitados, o elemento _noscript` ser$ i!norado. )essa forma, a
"tili6a&'o o elemento 7noscript8 para "m script inacess+vel n'o garante 9"e o ob:eto
se:a acess+vel. Assim, a recomendao - ue o pr<prio script se4a desenvolvido
tomando8se o cuidado para ue ele se4a acess*vel, e o elemento _noscript` deve ser
utili1ado para abran!er os casos em ue scripts no so suportados.
!Hemplo correto
+$!ina W63/
<a h"/5-")+*+'t"!.ht%&" (*-"cadastro">C+*+'t"/-'/ +#!"+!</a>
+$!ina Java#cript (.4s"
function p!pOQ R
+&/"tO"[!)A 2+( 5+E/" 1% ,!2! )+*+'t"!!"Q4
T
var /&/%/,t - *!)1%/,t.#/tE&/%/,tB3I*O")+*+'t"!"Q4
/&/%/,t.!,)&()P - p!p4
!Hemplo incorreto
+$!ina W63/
<a h"/5-"I+2+')"(pt:p!pOQ">C+*+'t"/-'/ +#!"+!</a>
<script &+,#1+#/-"I+2+')"(pt" t3p/-"t/.t/I+2+')"(pt">
function p!pOQ R
+&/"tO"[!)A 2+( 5+E/" 1% ,!2! )+*+'t"!!"Q4
T
</script>
Nesse caso, se o nave!ador no tiver suporte a scripts, o usu$rio ficar$ impossibilitado
de acessar o linO.
OBS6 A funo RalertS do 4avascript no !era um pop8up e sim uma mensa!em ue -
lida por todos os leitores de tela.
(!2OM!)D+FGO 003 )GO 2(I+( PPGI)+S 2OM +TD+LIE+FGO +DTOMPTI2+ P!(IJDI2+
Ver WCAG 2.0 Critrio e !"cesso 3.2.3 01cnicas !V;$ e 2<=4
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G /-
No devem ser criadas p$!inas com atuali1ao autom$tica peri<dica. Assim, no
deve ser utili1ada a meta ta! refresh, nem outra forma de atuali1ao autom$tica.
+$!inas ue se atuali1am automaticamente podem confundir e desorientar os
usu$rios, especialmente usu$rios ue utili1am leitores de tela.
!Hemplo0
9m uma interface Beb para e8mail (Bebmail", um desenvolvedor pode fornecer um
boto ou linO para buscar novos e8mails recebidos em ve1 de atuali1ar
automaticamente.
9m p$!inas onde o limite de tempo - absolutamente necess$rio, o usu$rio dever$ ser
informado ue a p$!ina - atuali1ada automaticamente.
!Hemplo/
9m uma p$!ina de leil(es online, - fornecido um banner contendo a informao de
ue a p$!ina - atuali1ada a cada ?F se!undos.
(!2OM!)D+FGO 0/ 9 )GO DTILIE+( (!DI(!2IO)+M!)TO +DTOMPTI2O D! PPGI)+S
Ver WCAG 2.0 Critrio e !"cesso 3.2.3 01cnicas !V;$ e 2<=4
No devem ser utili1adas marca(es para redirecionar para uma nova p$!ina, como a
meta ta! re%resh. Ao inv-s disso, deve8se confi!urar o servidor para ue o
redirecionamento se4a transparente para o usu$rio.
!Hemplo Incorreto
<head>
<title>E./%p&!<title>
<meta http-/01(2-""/5"/'h" )!,t/,t-"<04 1"&-Shttp://././%p&!.)!%/S" />
</head>
<body>
<p>E't+ p?#(,+ %1*!1 '/1 /,*/"/K! p+"+ .,!2!/,*/"/)!.)!%.;"</p>
</body>
(!2OM!)D+FGO 0- 9 8O()!2!( +LT!()+TI,+ P+(+ MODI8I2+( LIMIT! D! T!MPO
Ver WCAG 2.0 Critrio e !"cesso 2.2.$
9m uma p$!ina onde h$ limite de tempo para reali1ar uma tarefa deve haver a opo
de desli!ar, a4ustar ou prolon!ar esse limite.
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G /;
9ssa recomendao no se aplica a eventos em ue o limite de tempo -
absolutamente necess$rio.
9xemplo . Na insero de dados em um formul$rio para obteno de um benef*cio ou
consulta a processo, o cidado deve ter tanto tempo uanto for necess$rio para o
preenchimento de seus dados.
(!2OM!)D+FGO 0; 9 )GO I)2LDI( SITD+F@!S 2OM I)T!(MITU)2I+ D! T!L+
No devem ser utili1ados efeitos visuais piscantes, intermitentes ou cintilantes. 9m
pessoas com epilepsia fotosensitiva, o cintilar ou piscar pode desencadear um ataue
epil-tico. A exi!ncia dessa diretri1 aplica8se tamb-m para propa!anda de terceiros
inserida na p$!ina.
(!2OM!)D+FGO 0< 9 +SS!GD(+( O 2O)T(OL! DO DSDP(IO SOB(! +S +LT!(+F@!S
T!MPO(+IS DO 2O)T!RDO
Conte&dos ue Rse movemS, rola!ens, movimenta(es em !eral ou anima(es no
devem ser disparadas automaticamente sem o controle do usu$rio, mesmo em
propa!andas na p$!ina. Ao usu$rio deve ser repassado o controle sobre essas
movimenta(es (uer se4a por escolha de preferncia de visuali1ao da p$!ina, uer
por outro m-todo ualuer acess*vel a usu$rio com deficincia". Al-m disso, o usu$rio
deve ser capa1 de parar e reiniciar conte&dos ue se movem, sem exceo.
A velocidade desses conte&dos tamb-m deve ser pass*vel de controle pelo usu$rio, a
menos ue a implementao de mecanismo para alterar a velocidade se4a uma tarefa
de dif*cil execuo (se for necess$rio reali1ar uma escolha baseando8se nas limita(es,
prefira implementar mecanismos para redu1ir a velocidade dos conte&dos no lu!ar de
aumentar".
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G /<
/$- 2onteVdo W Informao
(!2OM!)D+FGO 0= 9 ID!)TI8I2+( O IDIOM+ P(I)2IP+L D+ PPGI)+
Ver WCAG 2.0 Critrio e !"cesso 3.$.$
)eve8se identificar o principal idioma utili1ado nos documentos. A identificao - feita
por meio do atributo lan! do W63/ e, para documentos XW63/, - utili1ado o xml.lan!.
!Hemplo
9m W63/ E.>?
...
<html &+,#-"pt-B$">
<head>
<title>*!)1%/,t! /')"(t! /% p!"t1#1A' *! B"+'(&</title>
...
9m XW63/ ?.?
...
<html .%&,'-"http://.3.!"#/1888/.ht%&" .%&:&+,#-"pt-B$">
<head>
<title>*!)1%/,t! /')"(t! /% p!"t1#1A' *! B"+'(&</title>
...
(!2OM!)D+FGO 0> 9 O8!(!2!( DM T:TDLO D!S2(ITI,O ! I)8O(M+TI,O X PPGI)+
Ver WCAG 2.0 Critrio e !"cesso 2.#.2
, t*tulo da p$!ina deve ser descritivo e informativo, 4$ ue essa informao ser$ a
primeira lida pelo leitor de tela, uando o usu$rio acessar a p$!ina. , t*tulo -
informado pela ta! _title`.
!Hemplo
, s*tio sobre o +ro4eto Acessibilidade Virtual da R9NA+7 (Rede Nacional de +esuisa e
7novao em 6ecnolo!ias )i!itais" apresenta o se!uinte t*tulo.
<title>
P"!I/t! D)/''(;(&(*+*/ [("t1+& - P!"t+& $ENDPI L P?#(,+ I,()(+&
</title>
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G /=
(!2OM!)D+FGO 0?9 DISPO)IBILIE+( I)8O(M+FGO SOB(! + LO2+LIE+FGO DO DSDP(IO
)+ PPGI)+
)ever$ ser fornecido um mecanismo ue permita ao usu$rio orientar8se dentro de um
con4unto de p$!inas, permitindo ue ele saiba onde est$ no momento. Assim, poder$
ser utili1ado o recurso de Rmi!alha de poS (breacr"mbs", ue so linOs nave!$veis
em forma de lista hier$ruica e permitem ue o usu$rio saiba ual o caminho
percorrido at- che!ar % p$!ina em ue se encontra no momento.
!Hemplo
Gm usu$rio nave!ando por um s*tio de uma universidade encontra8se na seo de
editais, ue est$ dentro do menu R9nsinoS. Acima do conte&do, - disponibili1ado a
se!uinte 3i!alha de po.
,oc5 est1 em6 P1gina inicial Y !nsino Y !ditais
OBS6 Na mi!alha de po, todos as p$!inas do caminho, com exceo da ual est$ o
usu$rio (posio atual", devero estar implementadas como linOs.
(!2OM!)D+FGO 0C 9 D!S2(!,!( LI)SS 2L+(+ ! SD2I)T+M!)T!
Ver BCA5 =.> Crit-rios de #ucesso =.E.E e =.E.A
)eve8se identificar claramente o destino de cada linO, informando, inclusive, se o linO
remete a outro s*tio. Al-m disso, - preciso ue o texto do linO faa sentido mesmo
uando isolado do contexto da p$!ina.
Z preciso tomar cuidado para no utili1ar o mesmo t*tulo para dois ou mais linOs ue
apontem para destinos diferentes.
!Hemplo 0
<h2>E*1)+KF! =1p/"(!"</h2>
<p>T!%+% p!''/ !' "/(t!"/' *+' 5/*/"+(' *+ B+h(+ / T"(>,#1&!</p>
<p> <a href="notici"12"#html">$eia mais not%cias sobre &duca'(o )uperior</a>
</p>
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G />
Repare ue no h$ necessidade de utili1ar o atributo title em linOs, 4$ ue esse
atributo no - bem suportado por recursos de tecnolo!ia assistiva, como leitores de
tela, no tem utilidade para uem nave!a apenas pelo teclado e no tem bom suporte
em dispositivos m<veis, como celulares, entre outros problemas. Assim, se voc
uiser fornecer informa(es adicionais para um linO, faa8o no pr<prio texto do linO ou
no contexto.
!Hemplo /
2orreto6
5anhe um prmio fornecido pelo nosso patrocinador
5anhe um prmio fornecido pelo nosso patrocinador
Incorreto6
Cliue aui para !anhar um prmio fornecido pelo nosso patrocinador
OBS6 No - recomendada a utili1ao de linOs do tipo Rcliue auiS pois esta
expresso no fa1 sentido fora do contexto. 3uitos usu$rios de leitores de tela
nave!am por linOs, tornando descri(es como RCliue auiS, RVe4a maisS insuficientes
para o usu$rio saber o destino do linO, ou locali1$8lo na p$!ina. 9vitar essas
express(es para evitar verborra!ia, ou se4a, evitar ue o leitor de tela RleiaS para o
usu$rio palavras ou frases desnecess$rias.
(!2OM!)D+FGO /. 9 8O()!2!( +LT!()+TI,+ !M T!ZTO P+(+ +S IM+G!)S DO S:TIO
Ver WCAG 2.0 Critrio e !"cesso $.$.$ 01cnica G>34
)eve ser fornecida uma descrio para as ima!ens da p$!ina, utili1ando8se o atributo
alt. 7ma!ens ue no transmitem conte&do, ou se4a, ima!ens decorativas, devem ser
inseridas por C##.
No entanto, descrever ualuer ima!em, em !eral, - al!o bastante sub4etivo e a
descrio deve ser adaptada ao contexto em ue a ima!em se encontra. +ara maiores
detalhes de como escrever um texto alternativo ve4a o tutorial * "so correto o te?to
alternativo na seo do e83A5 no portal de 5overno 9letr:nico.
!Hemplo 0
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G /?
8ig&ra / 9 !Hemplo de descrio de imagem$ Koto de J:natas
Cunha em licena Creative Commons Konte.
http.;;VVV.flicOr.com;photos;4onYcunha;E>?AH>E=?E;in;photostream
;
No c<di!o.
<img src="crianca#*pg" alt="+oto de uma crian'a cheirando uma flor" />
!Hemplo /
8ig&ra - 9 !Hemplo de descrio de %anner
No c<di!o.
<a h"/5-"http://.*!%(,(!p1;&()!.#!2.;"/">
<img src="dominio!ublico#*pg" alt="!ortal ,om%nio !-blico" />
</a>
Apesar de no haver um limite de caracteres no atributo alt, ele - utili1ado para
descri(es sint-ticas, em poucas palavras ou em uma frase curta. +ara ima!ens mais
complexas ue exi!em uma descrio mais detalhada, como !r$ficos, por exemplo,
deve8se fornecer, al-m do alt, a descrio no pr<prio contexto ou um linO para a
descrio lon!a lo!o ap<s a ima!em. )eve ficar claro para o usu$rio ue esse linO
remete para a descrio lon!a da ima!em, conforme o exemplo a se!uir.
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G /C
!Hemplo -
8ig&ra ; 9 !Hemplo de descrio de gr1fico
+ descrio teHt&al do gr1fico est1 disponel em o&tra p1gina
No c<di!o.
<img '")-"#"+5()!.Ip#" +&t-"\"?5()! */ p(EE+ */%!,'t"+,*! !' "/'1&t+*! *+ p/'01('+ '!;"/ +
*('t"(;1(KF! */ /'p+K! /% p?#(,+'" />
<p><a h"/5-"#"+5()!P/'01('+.ht%&">D */')"(KF! t/.t1+& *! #"?5()!</a> /'t? *('p!,J2/& /%
!1t"+ p?#(,+</p>
+ara !r$ficos, poder$ ser disponibili1ada tanto a descrio textual uanto a tabela de
dados ue lhe deu ori!em, desde ue a tabela se4a fornecida em W63/, tomando8se
os devidos cuidados relativos % acessibilidade.
Al-m de fornecer a descrio lon!a no contexto ou em um linO pr<ximo, pode8se
utili1ar o atributo lon!desc na ima!em, o ual - recomendado pela BCA5 para
descri(es lon!as, mas no - suportado por al!uns recursos de tecnolo!ia assistiva. A
utili1ao do lon!desc pode ser vista no exemplo a se!uir.
!Hemplo ;
<img '")-"#"+5()!.Ip#" +&t-"\"?5()! */ p(EE+ */%!,'t"+,*! !' "/'1&t+*! *+ p/'01('+ '!;"/ +
*('t"(;1(KF! */ /'p+K! /% p?#(,+'" &!,#*/')-"#"+5()!P/'01('+.ht%&" />
<p><a h"/5-"#"+5()!P/'01('+.ht%&">D */')"(KF! t/.t1+& *! #"?5()!</a> /'t? *('p!,J2/& /%
!1t"+ p?#(,+</p>
!rafico+esuisa.html
<h2> D('t"(;1(KF! */ /'p+K! /% p?#(,+'</h2>
<ul>
<li>P"!p+#+,*+ - ]0^</li>
<li>=/% U'! - 10^</li>
<li>N+2/#+KF! - 10^</li>
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G -.
<li>C!,t/W*! */ I,t/"/''/ - <0^</li>
</ul>
!Hemplo de imagem decoratia6
8ig&ra < 9 Imagem decoratia em lin[ \,olta ao topo da p1gina]
W63/
<a h"/5-"M(*_*/_*/'t(,!">T!p! *+ p?#(,+</a>
C##
+R
background:t"+,'p+"/,t 1"&O(%#/t!p!_p+#(,+.Ip#Q,!-"/p/+t "(#ht t!p4 /`(,'/"KF! *+ (%+#/% */)!"+t(2+
*! &(,P `/
padding:4p. <ap. 0 04 /` /'p+K! )!&!)+*! p+"+ + (%+#/% 5()+" +! &+*! *! &(,P `/
height:<3p.4 /`+I1't/ ,+ +&t1"+ *! &(,P p+"+ 01/ +p+"/K+ t!*+ + (%+#/% `/
T
(!2OM!)D+FGO /0 9 8O()!2!( +LT!()+TI,+ !M T!ZTO P+(+ +S EO)+S +TI,+S D!
M+P+ D! IM+G!M
Ver WCAG 2.0 Critrio e !"cesso $.$.$ 01cnica 22#4
+ara mapas de ima!em do lado do cliente, devem ser fornecidas descri(es atrav-s do
atributo alt para cada uma das 1onas ativas, ou se4a, para cada um dos linOs ue
receber$ o foco.
!Hemplo Nmapa de imagem do lado do clienteO
8ig&ra = 9 Mapa de imagem eHemplo 0
<img '")-"%+p+I%#.Ip#" +&t-"I%+#/% )!% +&t/",+t(2+' XDY / XBY" 1'/%+p-"MM+p" />
<map ,+%/-"M+p" (*-"M+p">
<area 'h+p/-""/)t" )!!"*'-"6@10@]3@G8" h"/5-"+.ht%&" +&t-"L(,P p+"+ + '/KF! XDY"
/>
<area 'h+p/-""/)t" )!!"*'-"aa@8@1<]@]1" h"/5-";.ht%&" +&t-"L(,P p+"+ + '/KF! XBY"
/>
</map>
Al-m dos mapas de ima!em do lado do cliente, existem os do lado do servidor. No
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G -0
entanto, - recomendada a utili1ao de mapas de ima!em do lado do cliente, 4$ ue
para mapas de ima!em do lado do servidor no - poss*vel fornecer um alt para cada
uma das 1onas ativas, somente para o mapa como um todo, no sendo poss*vel,
portanto, torn$8lo acess*vel. No entanto, se for realmente necess$ria sua utili1ao,
devem ser fornecidos linOs redundantes relativos a cada re!io ativa do mapa de
ima!em, conforme o exemplo a se!uir, para ue, desta forma, usu$rios com leitores
de tela possam ter acesso ao seu conte&do.
!Hemplo Nmapa de imagem do lado do seridorO
<a h"/5-",!2+P+#(,+.Ip#"><img
'")-";+,*/("+B"+'(&.Ip#" ('%+p-"('%+p"
+&t-"B+,*/("+ *! B"+'(& OL(,P' + '/#1("Q"/></a>
<p><a h"/5-"+"/+[/"*/.ht%&">b"/+ [/"*/</a> -
</p>
<p><a h"/5-"+"/+D%+"/&+.ht%&">b"/+
D%+"/&+</a> - </p>
<p><a h"/5-"+"/+DE1&.ht%&">b"/+ DE1&</a></p>
8ig&ra > 9 Mapa de imagem eHemplo /
OBS6 No devem ser utili1ados mapas de ima!em para menus ou seleo de re!i(es
para servios.
(!2OM!)D+FGO // 9 DISPO)IBILIE+( DO2DM!)TOS !M 8O(M+TOS +2!SS:,!IS
!em correspon@ncia a critrios a WCAG 2.0
,s documentos devem ser disponibili1ados preferencialmente em W63/. 6amb-m
podem ser utili1ados aruivos para doVnload no formato ,)K, tomando8se os
cuidados para ue se4am acess*veis. #e um aruivo for disponibili1ado em +)K,
dever$ ser fornecida uma alternativa em W63/ ou ,)K. Z necess$rio, tamb-m,
informar a extenso e o tamanho do aruivo no pr<prio texto do linO.
!Hemplo
<a h"/5-V%+,1+&.!*tV> M+,1+& *! W3C O5!"%+t! .!*t@ t+%+,h! 1G0c;Q </a>
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G -/
OBS6 , ,)K (,pen )ocument Kormat" - um formato aberto de documento adotado
pela e8+7N5 (Aruitetura de 7nteroperabilidade em 5overno 9letr:nico" ue pode ser
implementado em ualuer sistema. , ,)K en!loba formatos como. ,)6 para
documentos de texto, ,)# para planilhas eletr:nicas, ,)+ para apresenta(es de
slides, entre outros.
3uitos softVares 4$ utili1am esses formatos, como - o caso do ,pen,ffice, 2r,ffice,
5oo!le )ocs, AbiVord e #tar,ffice. , 3icrosoft ,ffice =>?> tamb-m inclui suporte
para ,)K. +ara vers(es anteriores do 3icrosoft ,ffice, pode ser instalado um Add8in
!ratuito para suporte aos formatos ,)K.
(!2OM!)D+FGO /- 9 !M T+B!L+S, DTILIE+( T:TDLOS ! (!SDMOS D! 8O(M+
+P(OP(I+D+
Ver WCAG 2.0 Critrio e !"cesso $.3.$ 01cnicas 23> e 2<34
, t*tulo da tabela deve ser definido pelo elemento caption e deve ser o primeiro
elemento utili1ado ap<s a declarao do elemento table. 9m casos de tabelas
extensas, deve ser fornecido um resumo de seus dados atrav-s do atributo summarY
ue deve ser declarado no elemento table.
!Hemplo
<table '1%%+"3-"E't+ t+;/&+ /.(;/ !' )!p!' */ )+5B )!,'1%(*!' p!" )+*+ '/,+*!"@ ! t(p! */
)+5B O*/')+5/(,+*! !1 ,!"%+&Q@ )!% +KW)+" !1 '/% +KW)+".">
<caption>C!p!' */ )+5B p!" =/,+*!"</caption>
###
+ara mais detalhes ve4a o tutorial tabelas acess*veis (documento pdf 8 ?FE a2", na
seo do
e83A5 no +ortal do +ro!rama de 5overno 9letr:nico.
(!2OM!)D+FGO /; 9 +SSO2I+( 2^LDL+S D! D+DOS XS 2^LDL+S D! 2+B!F+LKO !M DM+
T+B!L+
Ver WCAG 2.0 Critrio e !"cesso $.3.$ 01cnicas 2#3 e 2=34
9m tabelas de dados simples, a uso apropriado do elemento th para os cabealhos e
do elemento td para as c-lulas de dados - essencial para torn$8las acess*veis. +ara
incrementar a acessibilidade, deve8se utili1ar os elementos thead, tbodY e tfoot, para
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G --
a!rupar as linhas de cabealho, do corpo da tabela e do final, respectivamente, com
exceo de uando a tabela possuir apenas o corpo, sem ter se(es de cabealho e
rodap-. , BDC su!ere utili1ar o tfoot antes do tbodY dentro da definio table para
ue o a!ente de usu$rio possa renderi1ar o rodap- antes de receber todas
(potencialmente numerosas" linha de dados.
!Hemplo 0
<table>
<caption>D/%!,'t"+t(2! *! P+t"(%d,(!</caption>
<thead>
<tr>
<th>T(p!'</th>
<th>[+&!"/' O$eQ</th>
<th>P/")/,t1+&</th>
</tr>
</thead>
<tfoot>
<tr>
<td>T!t+&</td>
<td>110.a40@<<</td>
<td>100^</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>$/)1"'!' H(,+,)/("!</td>
<td>G].6a8@]3</td>
<td>G1@3]^</td>
</tr>
<tr>
<td>B/,' Mf2/('</td>
<td><G.]81@<3</td>
<td><3@<0^</td>
</tr>
<tr>
<td>B/,' I%f2/('</td>
<td><6.1]8@3]</td>
<td><G@44^</td>
</tr>
</tbody>
</table>
8ig&ra ? 9 Imagem da ta%ela descrita no c'digo do eHemplo 0
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G -;
+ara tabelas mais complexas, - necess$rio utili1ar marca(es para associar as c-lulas
de dados com as c-lulas de cabealho. A maneira mais adeuada de reali1ar esse
procedimento - utili1ar os elementos id;headers ou scope;col. No primeiro, pode8se
associar ualuer c-lula de conte&do a ualuer c-lula de cabealho, utili1ando o
mesmo valor para o atributo id e para o headers. No se!undo caso, a associao -
autom$tica, sendo mais utili1ado em tabelas de associao direta, onde - dado o valor
RcolS para o atributo scope nos cabealhos. Nos exemplo a se!uir, - poss*vel verificar
a utili1ao do id;headers e do scope;col.
!Hemplo /
<table '1%%+"3-"...">
<table>
<caption>$/'1&t+*! *! C!,)1"'!</caption>
<tr>
<th (*-"2+#+">[+#+</th>
<th (*-")+,*(*+t!">N!%/ *! )+,*(*+t!</th>
<th (*-";+'()!">P"!2+ */ C!,h/)(%/,t! B?'()!</th>
<th (*-"/'p/)(5()!">P"!2+ */ C!,h/)(%/,t! E'p/)J5()!</th>
</tr>
<tr>
<td (*-"+*%" "!'p+,-"<">TB),()! D*%(,('t"+t(2!</td>
<td (*-"P+1&!*+=(&2+">P+1&! *+ =(&2+</td>
<td h/+*/"'-"+*% ;+'()! P+1&!*+=(&2+">6</td>
<td h/+*/"'-"+*% /'p/)(5()! P+1&!*+=(&2+">1]</td>
</tr>
<tr>
<td (*-"P/*"!P!,t/'">P/*"! P!,t/'</td>
<td h/+*/"'-"+*% ;+'()! P/*"!P!,t/'">a</td>
<td h/+*/"'-"+*% /'p/)(5()! P/*"!P!,t/'">1G</td>
</tr>
<tr>
<td (*-"(,5">TB),()! /% I,5!"%?t()+</td>
<td (*-"g!+!P/"/("+">g!F! P/"/("+</td>
<td h/+*/"'-"(,5 ;+'()! g!+!P/"/("+">8</td>
<td h/+*/"'-"(,5 /'p/)(5()! g!+!P/"/("+">1a</td>
</tr>
</table>
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G -<
8ig&ra C 9 Imagem da ta%ela descrita no c'digo do eHemplo /
!Hemplo -
<table '1%%+"3-"T+;/&+ */ 2/,*+' */ %+KF / ;+,+,+ /5/t1+*+' ,! +,! */ <010">
<caption>[/,*+' <010</caption>
<tr>
<th ')!p/-")!&">MA'</th>
<th ')!p/-")!&#"!1p" )!&'p+,-"<">$(! \"+,*/ *! =1&</th>
<th ')!p/-")!&#"!1p" )!&'p+,-"<">=+,t+ C+t+"(,+</th>
</tr>
<tr>
<td>g+,/("!</td>
<td ')!p/-")!&">M+KF</td>
<td ')!p/-")!&">B+,+,+</td>
<td ')!p/-")!&">M+KF</td>
<td ')!p/-")!&">B+,+,+</td>
</tr>
<tr>
<td>H/2/("!</td>
<td>1000</td>
<td>1G00</td>
<td>3000</td>
<td>1000</td>
</tr>
<tr>
<td>M+"K!</td>
<td><000</td>
<td>1G00</td>
<td>3G00</td>
<td>G00</td>
</tr>
</table>
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G -=
8ig&ra 0. 9 Imagem da ta%ela descrita no c'digo do eHemplo -
!Hemplo ;
<table '1%%+"3-"T+;/&+ )!% "/'1%! *+' */'p/'+' */ t"+,'p!"t/ *1"+,t/ ! %A' */
D#!'t! ,+' )(*+*/' */ P!"t! D&/#"/ / H&!"(+,fp!&('">
<caption>$/&+tf"(! */ */'p/'+ */ 2(+#/%</caption>
<tr>
<th></th>
<th (*-"+&(%/,t+)+!" +.('-"*/'p/'+'">D&(%/,t+KF!</th>
<th (*-"h!t/&" +.('-"*/'p/'+'">H!t/&</th>
<th (*-"t"+,'p!"t/" +.('-"*/'p/'+'">T"+,'p!"t/</th>
</tr>
<tr>
<th (*-"p!+" +.('-"&!)+&(E+KF!" )!&'p+,-"4">P!"t! D&/#"/</th>
</tr>
<tr>
<td (*-"*+t+1" +.('-"*+t+"><G */ +#!'t! */ <010</td>
<td h/+*/"'-"p!+ *+t+1 +&(%/,t+)+!">$e 3a@a4</td>
<td h/+*/"'-"p!+ *+t+1 h!t/&">$e 11<@00</td>
<td h/+*/"'-"p!+ *+t+1 t"+,'p!"t/">$e 4G@00</td>
</tr>
<tr>
<td (*-"*+t+<" +.('-"*+t+"><] */ +#!'t! */ <010</td>
<td h/+*/"'-"p!+ *+t+< +&(%/,t+)+!">$e <a@<6</td>
<td h/+*/"'-"p!+ *+t+< h!t/&">$e 11<@00</td>
<td h/+*/"'-"p!+ *+t+< t"+,'p!"t/">$e 4G@00</td>
</tr>
<tr>
<th (*-"'1;P!+">=1;t!t+&</th>
<td h/+*/"'-"p!+ '1;P!+ +&(%/,t+)+!">$e ]G@0<</td>
<td h/+*/"'-"p!+ '1;P!+ h!t/&">$e <<4@00</td>
<td h/+*/"'-"p!+ '1;P!+ t"+,'p!"t/">$e 80@00</td>
</tr>
<tr>
<th (*-"5&!"(p+" +.('-"&!)+&(E+KF!" )!&'p+,-"4">H&!"(+,fp!&('</th>
</tr>
<tr>
<td (*-"*+t+3" +.('-"*+t+"><a */ +#!'t! */ <010</td>
<td h/+*/"'-"5&!"(p+ *+t+3 +&(%/,t+)+!">$e 8]@<G</td>
<td h/+*/"'-"5&!"(p+ *+t+3 h!t/&">$e 108@00</td>
<td h/+*/"'-"5&!"(p+ *+t+3 t"+,'p!"t/">$e 3]@00</td>
</tr>
<tr>
<td (*-"*+t+4" +.('-"*+t+"><6 */ +#!'t! */ <010</td>
<td h/+*/"'-"5&!"(p+ *+t+4 +&(%/,t+)+!">$e 3G@00</td>
<td h/+*/"'-"5&!"(p+ *+t+4 h!t/&">$e 108@00</td>
<td h/+*/"'-"5&!"(p+ *+t+4 t"+,'p!"t/">$e 3]@00</td>
</tr>
<tr>
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G ->
<th (*-"'1;H&!"(p+">=1;t!t+&</th>
<td h/+*/"'-"5&!"(p+ '1;H&!"(p+ +&(%/,t+)+!">$e 131@<G</td>
<td h/+*/"'-"5&!"(p+ '1;H&!"(p+ h!t/&">$e <16@00</td>
<td h/+*/"'-"5&!"(p+ '1;H&!"(p+ t"+,'p!"t/">$e a<@00</td>
</tr>
<tr>
<th (*-"t!t+&">T!t+&</th>
<td h/+*/"'-"t!t+& +&(%/,t+)+!">$e 18]@<a</td>
<td h/+*/"'-"t!t+& h!t/&">$e 44<@00</td>
<td h/+*/"'-"t!t+& t"+,'p!"t/">$e 1]<@00</td>
</tr>
</table>
8ig&ra 00 9 !Hemplo da ta%ela do eHemplo ; com o &so do atri%&to aHis
+ara mais detalhes ve4a o tutorial 6abelas Acess*veis (documento pdf 8 ?FE a2" na
seo do e83A5 no +ortal do +ro!rama de 5overno 9letr:nico.
(!2OM!)D+FGO /< 9 G+(+)TI( + L!ITD(+ ! 2OMP(!!)SGO D+S I)8O(M+F@!S
Ver WCAG 2.0 Critrio e !"cesso 3.$.3
, texto de um s*tio deve ser de f$cil leitura e compreenso, no exi!indo do usu$rio
um n*vel de instruo mais avanado do ue o ensino fundamental completo. 'uando
o texto exi!ir uma capacidade de leitura mais avanada, deve ser disponibili1ado
informa(es suplementares ue expliuem ou ilustrem conte&do principal. ,utra
alternativa - verso simplificada do conte&do em texto.
9xistem al!umas t-cnicas ue auxiliam na melhora da inteli!ibilidade de textos, como,
por exemplo.
)esenvolver apenas um t<pico por par$!rafo0
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G -?
Gtili1ar sentenas or!ani1adas de modo simplificado para o prop<sito do
conte&do (su4eito, verbo e ob4eto, preferencialmente"0
)ividir sentenas lon!as em sentenas mais curtas0
9vitar o uso de 4ar!o, express(es re!ionais ou termos especiali1ados ue
possam no ser claros para todos0
Gtili1ar palavras comuns no lu!ar de outras pouco familiares0
Gtili1ar listas de itens ao inv-s de uma lon!a s-rie de palavras ou frases
separadas por v*r!ulas0
Ka1er referncias claras a pronomes e outras partes do documento0
Gtili1ar, preferencialmente, a vo1 ativa.
+ara mais informa(es sobre como escrever textos para Veb, acesse a Cartilha de
Redao Beb na #eo do e8+B5 (+adr(es Beb em 5overno 9letr:nico" no +ortal de
5overno 9letr:nico.
(!2OM!)D+FGO /= 9 DISPO)IBILIE+( DM+ !ZPLI2+FGO P+(+ SIGL+S, +B(!,I+TD(+S !
P+L+,(+S I)2OMD)S
Ver BCA5 =.> Crit-rios de #ucesso D.?.D e D.?.E
)eve estar dispon*vel uma explicao ue identifiue a forma completa ou o
si!nificado das abreviaturas e si!las. +ara isso, pode ser utili1ada a ta! abbr.
!Hemplo
<p>B/%-2(,*! h <abbr t(t&/-"W!"&* W(*/ W/;" &+,#-"/,">WWW</abbr>!</p>
J$ as palavras ue podem ser amb*!uas, desconhecidas ou utili1adas de forma muito
espec*fica, devero ser definidas atrav-s de um texto ad4acente, uma lista de
defini(es ou estarem contidas num !loss$rio.
(!2OM!)D+FGO /> 9 I)8O(M+( MDD+)F+ D! IDIOM+ )O 2O)T!RDO
Ver WCAG 2.0 Critrio e !"cesso 3.$.2
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G -C
#e al!um elemento de uma p$!ina possuir conte&do em um idioma diferente do
principal, este dever$ estar identificado pelo atributo lan!. 9ssa recomendao no se
aplica para nomes pr<prios ou termos t-cnicos ue se4am compreendidos no contexto.
!Hemplo
XW63/
<p .%&:&+,#-"*/">
D+ *+)ht/ */" H/"" *+"+,@ (h, +1' */% H1tt/" E1 ')h+55/,@
+;/" */" E'/& %/"Pt/@ *+i P/(, #1t/" W(,* /ht/@ &(/5 5!"t
1,* %+)ht/ '()h +15 */, W/# ,+)h B"/%/,: *!"t@ %/(,t/ /"@
Pj,,t/ /" I+ =t+*t%1'(P+,t /"*/,.
</p>
W63/
<p &+,#-"*/">
D+ *+)ht/ */" H/"" *+"+,@ (h, +1' */% H1tt/" E1 ')h+55/,@
+;/" */" E'/& %/"Pt/@ *+i P/(, #1t/" W(,* /ht/@ &(/5 5!"t
1,* %+)ht/ '()h +15 */, W/# ,+)h B"/%/,: *!"t@ %/(,t/ /"@
Pj,,t/ /" I+ =t+*t%1'(P+,t /"*/,.
</p>
/$; +presentao W Design
(!2OM!)D+FGO /? 3 O8!(!2!( 2O)T(+ST! M:)IMO !)T(! PL+)O D! 8D)DO !
P(IM!I(O PL+)O
Ver WCAG 2.0 Critrio e !"cesso $.#.3
As cores do plano de fundo e do primeiro plano devero ser suficientemente
contrastantes para ue possam ser visuali1adas, tamb-m, por pessoas com baixa
viso, com cromodeficincias ou ue utili1am monitores de v*deo monocrom$tico.
No devero ser utili1adas ima!ens atr$s do texto (bacO!round", pois acabam por
dificultar a leitura e desviar a ateno do usu$rio.
A relao de contraste pode ser encontrada dividindo8se 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 D.? - o n*vel m*nimo de contraste recomendado pela 7#,8A=E?8D. No
entanto, levando8se em considerao a perda de percepo do contraste resultante da
baixa acuidade visual, cromodeficincia ou perda de sensibilidade ao contraste devido
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G ;.
ao envelhecimento, - recomendada aui uma maior relao de contraste, de, no
m*nimo, E,F.?. 9xistem ferramentas !ratuitas dispon*veis na Beb ue verificam a
relao de contraste entre as cores do plano de fundo e do primeiro plano,
referenciadas no cap*tulo E deste documento e para uma tabela de cores no anexo ?.
(!2OM!)D+FGO /C 9 )GO DTILIE+( +P!)+S 2O( OD ODT(+S 2+(+2T!(:STI2+S
S!)SO(I+IS P+(+ DI8!(!)2I+( !L!M!)TOS
Ver WCAG 2.0 Critrios e !"cesso $.3.3 e $.#.$
A cor ou outras caracter*sticas sensoriais, como forma, tamanho, locali1ao visual,
orientao ou som no devem ser utili1adas como o &nico meio para transmitir
informa(es, indicar uma ao, pedir uma resposta ao usu$rio ou distin!uir um
elemento visual.
!Hemplo
W63/
<p>E.('t/% t"A' p"!)/*(%/,t!' p+"+ /./)1t+" + t+"/5+:</p>
<ul>
<li><a h"/5-"M">P"!)/*(%/,t! D</a></li>
<li><a h"/5-"M" )&+''-""/)!%/,*+*!">P"!)/*(%/,t! B O$/)!%/,*+*!Q</a></li>
<li><a h"/5-"M">P"!)/*(%/,t! C</a></li>
</ul>
C##
+."/)!%/,*+*!R
color: MHH00004
T
8ig&ra 0/ 9 !Hemplo correto de &tiliMao de cores nos elementos
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G ;0
(!2OM!)D+FGO -. 9 P!(MITI( (!DIM!)SIO)+M!)TO D! T!ZTO S!M P!(D+ D!
8D)2IO)+LID+D!
Ver WCAG 2.0 Critrio e !"cesso $.#.#
A p$!ina deve continuar le!*vel e funcional uando redimensionada para at- =>>b.
Assim, - preciso !arantir ue, uando a p$!ina for redimensionada, no ocorram
sobreposi(es de texto nem o aparecimento de uma barra hori1ontal.
!Hemplo
Gm s*tio possui uma ferramenta ue permite o redimensionamento do tamanho da
fonte. +ara isso existe um boto ue aumenta a fonte de dois em dois pixels. )a
mesma forma, existe um boto ue diminui a fonte de dois em dois pixels e outro ue
retorna ao tamanho padro da fonte. , s*tio utili1a um leiaute flex*vel, isto -, %
medida ue a fonte aumenta ou diminui, o leiaute se a4usta automaticamente para
ue no ocorram RuebrasS.
<title>E./%p&! B?'()! */ L/(+1t/ LJ01(*!</title>
<style t3p/-"t/.t/)''">
.)!&1,+ R
border.left: 1p. '!&(* #"//,4
padding.left:1^4
float: &/5t4
/idth: 3<^4
T
M"!*+p/ R
border.top0 1p. '!&(* #"//,4
clear0 ;!th4
T
</style>
</head>
<body>
<h1>E./%p&! */ $/*(%/,'(!,+%/,t!</h1>
<form +)t(!,-"M">
<fieldset>
<legend>$/*(%/,'(!,+%/,t! *! t/.t!</legend>
<input t3p/-";1tt!," (*-"%+('" 2+&1/-"D1%/,t+"" />
<input t3p/-";1tt!," (*-"%+('" 2+&1/-"D(%(,1("" />
<input t3p/-";1tt!," (*-"%+('" 2+&1/-"T+%+,h! p+*"F!" />
</fieldset>
</form>
<h2>E't/ t/.t! /'t? *(2(*(*! /% t"A' ;&!)!'...</h2>
<div )&+''-")!&1,+">
<h3>B&!)! 1</h3>
<p>O !;I/t(2! */'t+ tB),()+ B +p"/'/,t+" ! )!,t/W*! '/% 01/ !)!""+ + (,t"!*1KF! */ 1%+ ;+""+
h!"(E!,t+&.</p> </div>
<div )&+''-")!&1,+">
<h3>B&!)! <</h3>
<p>E't/ B 1% /./%p&! '(%p&/' */ &/(+1t/ */ p?#(,+ 01/ '/ +*+pt+ +! "/*(%/,'(!,+%/,t! */
t/.t!.</p>
</div>
<div )&+''-")!&1,+">
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G ;/
<h3>B&!)! 3</h3>
<p>E't+ B 1%+ tB),()+ '(%p&/' %+' 01/ p!*/ '/" (%p&/%/,t+*+ p+"+ &/(+1t/' %+(' )!%p&/.!'.</p>
</div>
<p (*-""!*+p/">T/.t! *! $!*+pB</p>
</body>
</html>
8ig&ra 0- 9 !Hemplo de p1gina em se& taman4o padro
8ig&ra 0; 9 !Hemplo de p1gina redimensionada em /.._ sem perda de f&ncionalidade
(!2OM!)D+FGO -0 9 DI,IDI( +S P(!+S D! I)8O(M+FGO
Ver WCAG 2.0 Critrio e !"cesso 3.2.3 01cnica G=$4
creas de informao devem ser divididas em !rupos f$ceis de !erenciar. As divis(es
mais comuns so RtopoS, Rconte&doS, RmenuS e Rrodap-S. Nas p$!inas internas deve8
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G ;-
se manter uma mesma diviso para ue o usu$rio se familiari1e mais rapidamente
com a estrutura do s*tio. Z importante destacar, entretanto, ue a p$!ina inicial pode
ter uma diviso diferente das p$!inas internas, pois normalmente ela cont-m mais
elementos. , exemplo a se!uir mostra a diviso da p$!ina inicial de um s*tio contendo
os blocos RtopoS, RmenuS, Rconte&doS e Rrodap-S, al-m da barra de acessibilidade
contendo os atalhos.
!Hemplo
8ig&ra 0< 9 !Hemplo de diiso de %locos de conteVdo
<div (*-"t!p!">
<a h"/5-"M(,()(!T!p!" (*-"(,()(!T!p!">T!p!</a>
<h1>NOME DD IN=TITUIklO</h1>

<div (*-";+""+D)/''(;(&(*+*/">
<p>B+""+ */ D)/''(;(&(*+*/</p>
<ul>
<li><a h"/5-"M(,()(!C!,t/1*!">I" p+"+ )!,t/W*! X1Y</a></li>
<li><a h"/5-"M(,()(!M/,1">I" p+"+ %/,1 p"(,)(p+& X<Y</a></li>
<li><a h"/5-"M;1')+">I" p+"+ B1')+ X3Y</a></li>
</ul>
</div>
</div>
<div (*-"%/,1">
<a h"/5-"M(,()(!M/,1" (*-"(,()(!M/,1" +))/''P/3-"<">M/,1</a>
<ul>
<li>It/,' */ %/,1</li>
<li>...</li>
</ul>
</div>
<div (*-")!,t/1*!">
<a h"/5-"M(,()(!C!,t/1*!" (*-"(,()(!C!,t/1*!" +))/''P/3-"1">C!,t/W*!</a>
<form +)t(!,-"M" %/th!*-"p!'t">
<fieldset>
<legend>B1')+"</legend>
<label 5!"-";1')+">P/'01('/ +01(</label>
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G ;;
<input t3p/-"t/.t" (*-";1')+" ,+%/-";1')+" +))/''P/3-"3" 2+&1/-"P/'01('/ +01(" />
<input t3p/-"'1;%(t" 2+&1/-"B1')+"" )&+''-";1')+"" ,+%/-";1')+"" />
</fieldset>
</form>
<h2>BEM [INDO</h2>
<p>=/I+ ;/% 2(,*! +! ,!''! '(t/.</p>
</div>
<div (*-""!*+p/">
<a h"/5-"M(,()(!$!*+p/" (*-"(,()(!$!*+p/">$!*+pB</a>
<address> $1+ 777</address>
</div>
A diviso em blocos de conte&do representa a base para a utili1ao dos atalhos,
permitindo ue o usu$rio tenha r$pido acesso % $rea dese4ada. +ara mais detalhes
sobre a barra de acessibilidade e os atalhos, ver o cap+t"lo 3 , (aroni6a&'o e
acessibiliae nas p.ginas o Governo /eeral.
Z importante ue as diversas p$!inas de um s*tio possuam um estilo de apresentao
coerente e sistem$tico, mantendo8se um padro de estrutura. Assim, elementos
principais de nave!ao devero ser mantidos na mesma posio em todas as
p$!inas, com exceo da p$!ina inicial ue, muitas ve1es, apresenta uma estrutura
diferenciada.
!Hemplo
Gm s*tio possui um lo!otipo, um t*tulo, um formul$rio de pesuisa e uma barra de
nave!ao. 9sses elementos aparecem na mesma ordem relativa em cada p$!ina do
s*tio em ue se repetem. 9m uma das p$!inas, no h$ o formul$rio de pesuisa, mas
o restante dos itens continua na mesma ordem.
(!2OM!)D+FGO -/ 9 POSSIBILIT+( TD! O !L!M!)TO 2OM 8O2O S!Q+ ,ISD+LM!)T!
!,ID!)T!
Ver WCAG 2.0 Critrio e !"cesso 2.#.<
A $rea ue recebe o foco pelo teclado deve ser claramente marcada, devendo a $rea
de seleo ser pass*vel de ser clicada.
+or padro, linOs e elementos de formul$rio 4$ apresentam a borda destacada ao
receberem o foco do teclado. 9ssa borda pode ser modificada via C##, mas no
dever$ ser removida.
!Hemplo
CSS
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G ;<
+:+)t(2/@ +:5!)1'@ +:h!2/" R
border: 1p. '!&(* MH004
T
HTML
<ul>
<li><a h"/5-"/+)/''(;(&(*+*//(,*/..php">P?#(,+ I,()(+&</a></li>
<li><a h"/5-"/+)/''(;(&(*+*///2/,t!'.php">E2/,t!'</a></li>
<li><a h"/5-"/+)/''(;(&(*+*//01/%'!%!'.php">m1/% =!%!'</a></li>
<li><a h"/5-"/+)/''(;(&(*+*///+*.php">E,'(,! + D('t>,)(+ OE+DQ</a></li>
<li><a h"/5-"/+)/''(;(&(*+*//2(*/!+1&+'.php">[J*/!+1&+'</a></li>
<li><a h"/5-"/+)/''(;(&(*+*//2(*/!.php">[J*/! /% L(;"+'</a></li>
<li><a h"/5-"/+)/''(;(&(*+*//!+.php">O;I/t!' */ Dp"/,*(E+#/%</a></li>
<li><a h"/5-"/+)/''(;(&(*+*//t"+;+&h!'.php">T"+;+&h!' $/+&(E+*!'</a></li>
<li><a h"/5-"/+)/''(;(&(*+*//%+p+.php">M+p+ *! =(t/</a></li>
</ul>

8ig&ra 0= 9 !Hemplo de foco isel em men&
A pseudo8classe :focus - utili1ada para definir o estilo de ualuer elemento W63/
ue receber o foco do teclado, como linOs e elementos de formul$rio. A pseudo8classe
:hover - utili1ada para definir o estilo de um elemento uando passa8se o mouse
sobre ele. J$ a pseudo8classe :active define o estilo de linO ativo. No caso do
exemplo acima, a pseudo8classe :active foi utili1ada para definir o estilo do linO com
foco para nave!adores 7nternet 9xplorer H e anteriores, ue ainda no tinham suporte
% pseudo8classe :focus.
/$< M&ltimdia
(!2OM!)D+FGO -- 9 8O()!2!( +LT!()+TI,+ P+(+ ,:D!O
Ver WCAG 2.0 Critrios e !"cesso $.2.$A $.2.2A $.2.= e $.2.5
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G ;=
)eve haver uma alternativa sonora ou textual para v*deos ue no incluem faixas de
$udio. +ara v*deos ue contm $udio falado e no idioma natural da p$!ina, devem ser
fornecidas le!endas. Al-m de essencial para pessoas com deficincia visual, a
alternativa em texto tamb-m - importante para usu$rios ue no possuem
euipamento de som, ue dese4am apenas reali1ar a leitura do material ou no
disp(em de tempo para ouvir um aruivo multim*dia. +ara tanto, podem ser
fornecidos.
Sit&ao 0
Gm v*deo mostra como produ1ir uma tecnolo!ia assistiva de baixo custo. No h$
$udio, mas o v*deo inclui uma s-rie de n&meros para representar cada etapa do
processo. Nesse caso, 4unto ao v*deo, deve ser disponibili1ado um aruivo com a
alternativa de texto ue indica o conte&do do v*deo e a descrio de cada uma das
etapas.
8ig&ra 0> 9 ,deo contendo ar*&io com alternatia em teHto
Sit&ao /
Gma universidade oferece a opo de visuali1ar suas videoaulas com ou sem
le!endas.
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G ;>
8ig&ra 0? 9 ,deo com legenda
Al-m de alternativa em texto e le!enda, - dese4$vel ue os v*deos com $udio
apresentem alternativa na /*n!ua 2rasileira de #inais (/ibras".
(!2OM!)D+FGO -; 9 8O()!2!( +LT!()+TI,+ P+(+ PDDIO
Ver WCAG 2.0 Critrios e !"cesso $.2.$A $.2.2 e $.2.=
cudio !ravado deve possuir uma transcrio descritiva. Al-m de essencial para
pessoas com deficincia auditiva, a alternativa em texto tamb-m - importante para
usu$rios ue no possuem euipamento de som, ue dese4am apenas reali1ar a
leitura do material ou no disp(em de tempo para ouvir um aruivo multim*dia. Neste
caso, tamb-m - dese4$vel a alternativa em /ibras.
Sit&ao 0
9m um podcast o entrevistador fa1 per!untas a um especialista de sa&de. Como essas
informa(es so disponibili1adas ao usu$rio do s*tio em um aruivo de $udio, deve ser
fornecido um linO para um aruivo com alternativa em texto, lo!o ap<s o conte&do em
$udio.
Gma apresentao pr-via do conte&do dos dois tipos de aruivo e de sua durao
tamb-m - dese4$vel.
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G ;?
(!2OM!)D+FGO -< 9 O8!(!2!( +DDIOD!S2(IFGO P+(+ ,:D!O P(^3G(+,+DO
Ver WCAG 2.0 Critrio e !"cesso $.2.3A $.2.3 e $.2.<
V*deos ue transmitem conte&do visual ue no est$ dispon*vel na faixa de $udio
devem possuir uma audiodescrio.
A audiodescrio consiste na descrio clara e ob4etiva de todas as informa(es
apresentadas de forma visual e ue no fa1em parte dos di$lo!os. 9ssas descri(es
so apresentadas nos espaos entre os di$lo!os e nas pausas entre as informa(es
sonoras.
!Hemplo
Gm v*deo de um malabarista se apresentando para um !rupo de crianas inclui uma
verso com audiodescrio. , narrador da audiodescrio descreve o n&mero e o tipo
de instrumentos ue o malabarista utili1a, bem como as rea(es ue as crianas tm
durante a performance.
(!2OM!)D+FGO -= 9 8O()!2!( 2O)T(OL! D! PDDIO P+(+ SOM
Ver WCAG 2.0 Critrio e !"cesso $.#.2
)eve ser fornecido um mecanismo para parar, pausar, silenciar ou a4ustar o volume
de ualuer som ue se reprodu1a na p$!ina.
(!2OM!)D+FGO -> 9 8O()!2!( 2O)T(OL! D! +)IM+FGO
+ara ualuer animao ue inicie automaticamente na p$!ina devem ser fornecidos
mecanismos para ue o usu$rio possa pausar, parar ou ocultar tal animao.
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G ;C
/$= 8orm&l1rios
(!2OM!)D+FGO -? 9 8O()!2!( +LT!()+TI,+ !M T!ZTO P+(+ OS BOT@!S D! IM+G!M
D! 8O(MDLP(IOS
Ver WCAG 2.0 Critrio e !"cesso $.$.$
Ao serem utili1ados bot(es do tipo ima!em (input tYpe]Sima!eS", ue servem para o
mesmo prop<sito do boto do tipo submit, deve ser fornecida uma descrio textual
para o boto atrav-s do atributo alt, conforme o exemplo a se!uir.
!Hemplo 0
Ki!ura ?A C 7ma!em de2oto enviar
C<di!o.
<input t3p/-"(%+#/" ,+%/-"/,2(+"" '")-"/,2(+".Ip#" alt="enviar" />
J$ para outros tipos de bot(es (reset e button", - preciso substituir o boto pela
ima!em ue se dese4a utili1ar atrav-s do C##. Nesse caso, para ue o boto se4a
acess*vel, ele deve possuir um value descritivo, conforme o exemplo a se!uir.
!Hemplo /

Ki!ura => C 7ma!em de 2oto /impar
W63/
<input t3p/-""/'/t" ,+%/-"&(%p+"" 2+&1/-"L(%p+"" )&+''-";tL(%p+"" />
C##
input#bt$imparR
background:t"+,'p+"/,t 1"&O;tL(%p+".Ip#Q ,!-"/p/+t &/5t t!p4
/idth:100p.4
height:4ap.4
tet.indent:-<0000p.4
border:04
T
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G <.
(!2OM!)D+FGO -C 9 +SSO2I+( !TITD!T+S +OS S!DS 2+MPOS
Ver WCAG 2.0 Critrio e !"cesso $.3.$ 01cnica 2##4
As etiuetas de texto (label" devem estar associadas aos seus campos (input"
correspondentes no formul$rio, atrav-s dos atributos for do label e id do input, os
uais devero ter o mesmo valor.
!Hemplo
<label 5!"-",!%/">N!%/: </label>
<input t3p/-"t/.t" ,+%/-",!%/" (*-",!%/" />
<label>=/.!:</label>
<input t3p/-""+*(!" (*-"5/%" ,+%/-"'/.!" />
<label 5!"-"5/%">H/%(,(,!</label>
<input t3p/-""+*(!" (*-"%+'" ,+%/-"'/.!" />
<label 5!"-"%+'">M+')1&(,!</label>
<label 5!"-"%'#">M/,'+#/%: </label>
<tetarea ,+%/-"%'#" (*-"%'#">D(#(t/ '1+ %/,'+#/%</tetarea>
<input t3p/-")h/)P;!." (*-""/)/;/"" ,+%/-""/)/;/"" />
<label 5!"-""/)/;/"">D/'/I+ "/)/;/" ,!''+ ,/'&/tt/"n</label>
(!2OM!)D+FGO ;. 9 !ST+B!L!2!( DM+ O(D!M LJGI2+ D! )+,!G+FGO
,s elementos do formul$rio devem ser distribu*dos corretamente atrav-s do c<di!o
W63/, criando, assim, uma seuncia l<!ica de nave!ao. Assim, os formul$rios
devem primeiro ser codificados considerando a ordem l<!ica de nave!ao para
depois serem or!ani1ados visualmente via C##.
OBS6 , atributo tabindex somente dever$ ser utili1ado uando existir real
necessidade. Z importante ressaltar ue este atributo dever$ ser utili1ado com a
semQntica correta e dever$ ser verificado manualmente se o fluxo fornecido pelo
tabindex - realmente o dese4ado.
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G <0
(!2OM!)D+FGO ;0 9 )GO P(O,O2+( +DTOM+TI2+M!)T! +LT!(+FGO )O 2O)T!ZTO
'uando um elemento de formul$rio receber o foco, no deve ser iniciada uma
mudana autom$tica na p$!ina ue confunda ou desoriente o usu$rio. Assim, as
mudanas devem ocorrer atrav-s do acionamento de um boto.
!Hemplo 2orreto
<select (*-")(*+*/" ,+%/-")(*+*/">
<option 2+&1/-"POD">P!"t! D&/#"/</option>
<option 2+&1/-"BH">B/&! H!"(E!,t/</option>
<option 2+&1/-"$g">$(! */ g+,/("!</option>
<option 2+&1/-"=P">=F! P+1&!</option>
</select>
<input t3p/-"'1;%(t" (*-"'1;%(t" 2+&1/-"E,2(+"" />
8ig&ra /0 9 +cionamento 3 forma correta
!Hemplo Incorreto
<select ,+%/-")(*+*/" (*-")(*+*/" !,)h+,#/-"&!)+t(!, -
th('.!pt(!,'Xth('.'/&/)t/*I,*/.Y.2+&1/4">
<option 2+&1/-"POD">P!"t! D&/#"/</option>
<option 2+&1/-"BH">B/&! H!"(E!,t/</option>
<option 2+&1/-"$g">$(! */ g+,/("!</option>
<option 2+&1/-"=P">=F! P+1&!</option>
</select>
8ig&ra // 9 +cionamento 3 forma incorreta
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G </
(!2OM!)D+FGO ;/ 9 8O()!2!( I)ST(DF@!S P+(+ !)T(+D+ D! D+DOS
+ara conte&do ue exi!ir entrada de dados por parte do usu$rio, devem ser fornecidas
, uando necess$rio, instru(es de preenchimento 4untamente com as etiuetas
(label". A utili1ao de caracteres pr-8definidos em $reas de entrada de texto s< deve
ocorrer se.
, texto for inclu*do ap<s a entrada de dados pelo usu$rio (por exemplo, su!erir
um novo nome de usu$rio caso o escolhido 4$ exista"0
A semQntica do documento 4ustifiue a incluso de texto pr-8definido (por
exemplo, uma lo4a virtual ue s< vende para determinado pa*s 4$ vem com o
campo pa*s preenchido"0
,s caracteres tenham sido fornecidos previamente pelo usu$rio (por exemplo,
refinamento de busca".
!Hemplo
, se!uinte exemplo indica ue a data precisa ser inserida no formato dia (dd" Cms
(mm" Cano (aaaa".
<label 5!"-"*+t+">D+t+ O**-%%-++++Q</label>
<input t3p/-"t/.t" (*-"*+t+" ,+%/-"*+t+" />
(!2OM!)D+FGO ;- 9 ID!)TI8I2+( ! D!S2(!,!( !((OS D! !)T(+D+ D! D+DOS
'uando um erro de entrada de dados for automaticamente detectado, o item ue
apresenta erro deve ser identificado e descrito ao usu$rio por texto.
!Hemplo 0
Gm usu$rio tenta submeter um formul$rio, mas esuece de preencher campos
obri!at<rios. Gtili1ando validao client-sie (do lado do cliente", a omisso -
detectada e um alerta aparece informando ao usu$rio ue campos obri!at<rios no
foram preenchidos. +ara a identificao destes campos, as etiuetas so modificas
tornando8se avisos e tamb-m o foco do teclado - remetido para o primeiro campo
sem preenchimento.
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G <-
8ig&ra /- 9 +lerta so%re o no preenc4imento de campos o%rigat'rios
8ig&ra /; 9 Indicao do erro no form&l1rio ap's a mensagem de alerta
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G <;
!Hemplo /
'uando o usu$rio enviar o formul$rio e esuecer8se de preencher um campo
obri!at<rio ou preencher um campo de maneira incorreta, o foco - remetido
novamente ao formul$rio, mas ue estar$ contendo apenas os campos com erro, para
ue o usu$rio no precise nave!ar por todos os outros campos novamente. Abaixo dos
campos com erro ue devero ser novamente preenchidos, haver$ o boto de envio e
um boto para o usu$rio retornar ao formul$rio completo, caso ele dese4e verificar
todos os campos.
!Hemplo -
, usu$rio envia o formul$rio e deixa de preencher campos obri!at<rios ou preenche
al!um campo de maneira incorreta. , foco retorna ao in*cio do formul$rio contendo o
aviso de erro e linOs (Qncoras" para os campos do formul$rio ue apresentaram erro.
(!2OM!)D+FGO ;; 9 +G(DP+( 2+MPOS D! 8O(MDLP(IO
Ver WCAG 2.0 Critrio e !"cesso $.3.$ 01cnicas 2<$ e 2534
)evero ser a!rupados os controles de formul$rio relacionados de maneira l<!ica,
utili1ando8se o elemento fieldset, associando o elemento le!end de forma si!nificativa
(o elemento fieldset - &til para a!rupar, de forma l<!ica, elementos do formul$rio".
+ara cada fieldset, - poss*vel fornecer uma le!enda ue explica claramente o
prop<sito ou nature1a dos a!rupamentos.
!Hemplo
<form %/th!*-"p!'t" +)t(!,-"...">
<fieldset>
<legend>D+*!' P/''!+('</legend>
<label 5!"-",!%/">O '/1 N!%/: </label>
<input t3p/-"t/.t" ,+%/-",!%/" (*-",!%/" />
...
</fieldset>
<fieldset>
<legend>D+*!' P"!5(''(!,+('</legend>
<label 5!"-"p"!5(''+!">=1+ p"!5(KF!:</label>
<input t3p/-"t/.t" (*-"p"!5(''+!" ,+%/-"p"!5(''+!" />
...
</fieldset>
<fieldset>
<legend>I,5!"%+K:/' */ C!,t+t!</legend>
<label 5!"-"/%+(&">E-%+(&: </label>
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G <<
<input t3p/-"t/.t" (*-"/%+(&" ,+%/-"/%+(&" />
...
</fieldset>
</form>
8ig&ra /< 9 Imagem do 8orm&l1rio
+ara a!rupar elementos option dentro de um elemento de lista select, deve ser
utili1ado o elemento opt!roup.
!Hemplo /
<label 5!"-"(,'t(t1t!">m1+& + '1+ (,'t(t1(KF!n</label>

<select (*-"(,'t(t1t!" ,+%/-"(,'t(t1t!">

<optgroup &+;/&-"$(! \"+,*/ *! =1&">
<option 2+&1/-"(5"'">IH$=</option>
<option 2+&1/-"(5'1&">IH=UL</option>
<option 2+&1/-"(55+""!1p(&h+">IHH+""!1p(&h+</option>
</optgroup>

<optgroup &+;/&-"=+,t+ C+t+"(,+">
<option 2+&1/-"(5')">IH=C</option>
<option 2+&1/-"(5)">IHC</option>
</optgroup>

<optgroup &+;/&-"P+"+,?">
<option 2+&1/-"(5p"">IHP$</option>
</optgroup>

</select>
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G <=
8ig&ra /= 9 Imagem da caiHa de seleo
(!2OM!)D+FGO ;< 9 8O()!2!( 2+PT2K+ KDM+)O
Ver WCAG 2.0 Critrio e !"cesso $.$.$ 01cnicas G$#3 e G$##4
, CA+6CWA (teste interativo humano, completamente automati1ado, para distin!uir
computadores de seres humanos", uando utili1ado, dever$ ser fornecido em forma
de per!unta de interpretao. 6ais per!untas podero ser respondidas apenas por um
ser humano. No entanto, - preciso !arantir ue a per!unta no se4a de dif*cil
resoluo, permitindo ue a mesma possa ser respondida por pessoas de variadas
culturas e n*veis de instruo. +ara tal, podem ser utili1adas per!untas de senso
comum, como por exemplo, Rual - a cor do c-uUS ou Ro fo!o - uente ou frioUS.
6amb-m podem ser utili1ados testes matem$ticos. No entanto, - preciso tomar
cuidado para ue esses testes no se4am facilmente RuebradosS por determinados
pro!ramas. Gma alternativa - solicitar ue o usu$rio escreva o resultado do teste
matem$tico por extenso, como Rescreva por extenso uanto - = d DS, ou ainda
Rresponda por extenso uanto - dois mais trsS.
OBS6 , CA+6CWA dever$ ser utili1ado apenas uando estritamente necess$rio.
!Hemplo
<form +)t(!,-"+)t(!,.php" %/th!*-"p!'t">
<fieldset>
<legend>CDPTCHD</legend>
<label 5!"-"p/"#1,t+">E')"/2+ p!" /.t/,'! 01+,t! B *!(' %+(' t"A'.</label>
<input t3p/-"t/.t" (*-"p/"#1,t+" ,+%/-"p/"#1,t+" />
<input t3p/-"'1;%(t" ,+%/-"/,2(+"" 2+&1/-"E,2(+"!" />
</fieldset>
</form>
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G <>
8ig&ra /> 9 !Hemplo de 2+PT2K+
+ara mais detalhes sobre o desenvolvimento de formul$rios acess*veis, ve4a o tutorial
Kormul$rios Acess*veis (aruivo pdf C ?@> a2" na seo e83A5 no +ortal do +ro!rama
de 5overno 9letr:nico.
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G <?
-$ Padr7es de acessi%ilidade digital no Goerno
8ederal
9sta seo pretende padroni1ar elementos de acessibilidade ue devem ter
caracter*sticas em comum em todas as p$!inas do !overno federal, para fins de
facilitar o acesso por pessoas com deficincia. 9ste con4unto de elementos busca
!arantir o desenvolvimento de s*tios acess*veis a todas as pessoas.
,s elementos a serem padroni1ados, ue devem estar presentes em todas as p$!inas
do 5overno Kederal so.
?. +$!ina com a descrio dos recursos de acessibilidade
=. 6eclas de atalho
D. 2arra de acessibilidade
E. Apresentao do mapa do sitio
F. Apresentao de formul$rio
@. Conte&do alternativo para ima!ens
H. Apresentao de documentos
Ao final deste cap*tulo tamb-m sero apresentados elementos ue no sero
permitidos nas p$!inas do !overno federal.
-$0 P1gina de descrio com os rec&rsos de acessi%ilidade
9sta p$!ina apresenta os recursos de acessibilidade presentes no s*tio, como as teclas
de atalho dispon*veis, as op(es de redimensionamento de texto e alto contraste,
detalhes sobre testes de acessibilidade reali1ados no s*tio e outras informa(es
pertinentes a respeito de sua acessibilidade. , linO para a p$!ina contendo os recursos
de acessibilidade deve ser disponibili1ado na barra de acessibilidade, a ual ser$
abordada no terceiro item desta seo.
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G <C
8ig&ra /? 9 !Hemplo de p1gina so%re acessi%ilidade do stio
-$/ +tal4os de teclado
)evero ser disponibili1ados atalhos por teclado para pontos estrat-!icos da p$!ina,
permitindo ue o usu$rio possa ir diretamente a esses pontos. ,s atalhos devero
funcionar atrav-s de n&meros precedidos da tecla padro de cada nave!ador (Alt no
7nternet 9xplorer, #hift d Alt no Kirefox, #hift d 9sc no ,pera, etc.". ,s atalhos ue
devero existir nas p$!inas do 5overno Kederal so os se!uintes.
?. para ir ao conte&do0
=. para ir ao menu principal0
D. para ir % caixa de pesuisa0
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G =.
As dicas dos atalhos devero ser disponibili1adas na barra de acessibilidade, abordada
a se!uir e, tamb-m, na p$!ina sobre a acessibilidade do s*tio, 4$ comentada
anteriormente. +ara mais detalhes ver Recomendao @.
-$- Barra de acessi%ilidade
, s*tio dever$ conter uma barra de acessibilidade no topo de cada p$!ina contendo os
se!uintes itens.
Aumentar fonte
)iminuir fonte
Konte normal
Alto contraste
Atalhos (para 3enu, Conte&do e 2usca"
Acessibilidade (linO para a p$!ina contendo os recursos de acessibilidade do
s*tio"
Exemplo de Barra de Acessibilidade
<div (*-"+)/''(;(&(*+*/">
<ul (*-"+t+&h!'">
<li><a h"/5-"M(,()(!*!)!,t/1*!">I" p+"+ C!,t/W*! X1Y</a></li>
<li><a h"/5-"M(,()(!*!%/,1">I" p+"+ M/,1 X<Y</a></li>
<li><a h"/5-"M;1')+">I" p+"+ ;1')+ X3Y</a></li>
</ul>
<ul (*-";!t!/'">
<li><a h"/5-"M" (*-";t,D1%/,t+"H!,t/">+1%/,t+" &/t"+</a></li>
<li><a h"/5-"M" (*-";t,D(%(,1("H!,t/">*(%(,1(" &/t"+</a></li>
<li><a h"/5-"M" (*-";t,T+%+,h!H!,t/">t+%+,h! ,!"%+&</a></li>
<li><a h"/5-"M" (*-";t_)!,t"+'t/">+&t! )!,t"+'t/</a></li>
<li><a h"/5-"+)/''(;(&(*+*/.ht%&"> P?#(,+ */ +)/''(;(&(*+*/ </a></li>
</ul>
</div>
8ig&ra /C 9 !Hemplo de p1gina so%re acessi%ilidade do stio
'uando uma das ferramentas aumentar fonte, diminuir fonte e fonte normal for
utili1ada, o bloco como um todo deve ser modificado, no apenas a fonte do texto.
A opo alto contraste deve !erar uma p$!ina em ue a relao de contraste entre o
plano de fundo e os elementos do primeiro plano se4a de, no m*nimo H.? (contraste
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G =0
otimi1ado". As ferramentas utili1adas para verificar a relao de contraste entre as
cores esto listadas no cap*tulo E C Recursos e Kerramentas para Acessibilidade.
8ig&ra -. 9 !Hemplo de p1gina com alto contraste
+ara mais detalhes ver Recomenda(es =I e D>.
-$; +presentao do mapa do stio
)ever$ ser fornecido um mapa do s*tio para s*tios ue contenham p$!inas internas
ue no esto presentes no menu. , mapa do s*tio deve ser disponibili1ado em forma
de lista, podendo conter uantos n*veis forem necess$rios.
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G =/
8ig&ra -0 9!Hemplo de mapa do stio
-$< +presentao de form&l1rio
,s formul$rios devero estar de acordo com os se!uintes itens.
#empre utili1ar a ta! form, mesmo ue o formul$rio possua apenas um
elemento, como - o caso de uma caixa para pesuisa.
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G =-
)isponibili1ar os elementos do formul$rio no W63/ na ordem correta de
nave!ao, sem utili1ar o tabindex.
Associar as etiuetas (label" aos seus campos (input" correspondentes.
No deve ocorrer mudana no contexto uando um elemento receber o foco.
)eve ser fornecido um boto de envio (submit" para enviar os dados. No
entanto, - necess$rio fornecer uma maneira de o usu$rio poder verificar as
informa(es antes ue elas se4am enviadas.
,s erros de entrada de dados devem ser identificados e descritos ao usu$rio.
+ara cada con4unto de informa(es, com dois ou mais elementos de entrada de
dados, os mesmo devero ser a!rupados atrav-s do elemento fieldset;le!end.
9m um formul$rio de busca simples, por exemplo, no h$ a necessidade de
utili1ar o elemento fieldset;le!end, pois apresenta apenas um campo de
entrada de dados.
Exemplo de formulrio de Fale Conosco
<form %/th!*-"p!'t" +)t(!,-"+)t/)!,t+t!.php">
<fieldset>
<legend>H!"%1&?"(! */ C!,t+t!</legend>
<label 5!"-",!%/">N!%/:</label>
<input t3p/-"t/.t" ,+%/-",!%/" (*-",!%/" />
<label 5!"-",!%/">E-%+(&:</label >
<input t3p/-"t/.t" ,+%/-"/%+(&" (*-"/%+(&" />
<label 5!"-"+''1,t!">D''1,t!:</label>
<select ,+%/-"+''1,t!" (*-"+''1,t!">
<option 2+&1/-"0" '/&/)t/*-"'/&/)t/*">=/&/)(!,/ ! +''1,t! */'/I+*!</option>
<option 2+&1/-"(,5!"%+)!/'">I,5!"%+K:/'</option>
<option 2+&1/-"'1#/'t!/'">=1#/'t:/'</option>
<option 2+&1/-"*12(*+'">DW2(*+'</option>
</select>
<label 5!"-"%'#">M/,'+#/%:</label>
<tetarea ,+%/-"%'#" (*-"%'#"></tetarea>
<input t3p/-"'1;%(t" ,+%/-"/,2(+"" (*-"/,2(+"" 2+&1/-"E,2(+"" )&+''-";,t" />
</fieldset>
</form>
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G =;
8ig&ra -/ 98orm&l1rio de contato
Ap<s clicar no boto enviar, uma tela de confirmao dever$ aparecer, conforme no
exemplo a se!uir, permitindo ue o usu$rio verifiue e, se necess$rio, edite as
informa(es antes de envi$8las.
8ig&ra -- 9P1gina de 2onfirmao
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G =<
+ara mais detalhes ver recomenda(es DI a EF.
-$= 2onteVdo alternatio para imagens
)ever$ ser fornecida uma alternativa textual, pelo atributo alt, para ima!ens, fotos,
!r$ficos, banners, bot(es de ima!em, $reas ativas de mapa de ima!em, CA+6CWA,
etc. Al-m do alt, para ima!ens mais complexas, ue necessitem de uma descrio
mais detalhada, dever$ ser fornecida uma descrio lon!a no pr<prio contexto ou em
um linO (claramente identificado como descrio da ima!em" lo!o ap<s a ima!em.
+ara mais detalhes ver recomenda(es => e =?.
-$> +presentao de doc&mentos
,s documentos em texto devero ser disponibili1ados preferencialmente em W63/.
6amb-m podem ser disponibili1ados aruivos para doVnload no formato ,)K,
tomando8se os cuidados para ue se4am acess*veis. #e houver necessidade de
disponibili1ar aruivos em +)K, dever$ ser fornecida uma alternativa em W63/ ou
,)K. Z necess$rio, tamb-m, informar a extenso e o tamanho do aruivo no pr<prio
texto do linO.
+ara mais detalhes ver Recomendao ==.
-$? !lementos *&e no deem ser &tiliMados
6abelas para fins de dia!ramao, conforme Recomendao H0
Atuali1a(es autom$ticas peri<dicas, conforme Recomendao ??0
#itua(es com intermitncia de tela, conforme Recomendao ?E0
9lementos considerados depreciados pelo BDC, como frame, applet, blinO,
maruee, basefont, center, dir, ali!n, font, isindex, menu, striOe, u, etc.
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G ==
;$ (ec&rsos e ferramentas para acessi%ilidade
OrganiMa7es e especifica7es
Borld Bide Beb Consortium (BDC". http.;;VVV.VD.or!
BCA5 =.>. http.;;VVV.VD.or!;6R;BCA5=>
BCA5 =.> (portu!us". http.;;VVV.ilearn.com.br;6R;BCA5=>
9specificao W63/ F. http.;;VVV.VD.or!;6R;htmlF
9specificao W63/ E.>?. http.;;VVV.VD.or!;6R;htmlE>?
9specificao XW63/ ?.>. http.;;VVV.VD.or!;6R;xhtml?
9specificao XW63/ ?.?. http.;;VVV.VD.or!;6R;xhtml??
9specificao C## ?.>. http.;;VVV.VD.or!;6R;C##?
9specificao C## =.?. http.;;VVV.VD.or!;6R;C##=?
9specificao C## D.> (em construo". http.;;VVV.VD.or!;#tYle;C##;current8VorO
Codificao de caracteres. http.;;VVV.VD.or!;7nternational;,8charset.pt8br.php
6utoriais BDC. http.;;VVV.VD.or!;=>>=;>D;tutorials
C## +a!ed media. http.;;VVV.VD.or!;6R;R9C8C##=;pa!e.html
6he Beb #tandards +ro4ect. http.;;VVV.Vebstandards.or!;
,alidadores de c'digo
Validador (X"W63/. http.;;validator.VD.or!
Validador C##. http.;;4i!saV.VD.or!;css8validator
Validador de linOs. http.;;validator.VD.or!;checOlinO
,alidadores a&tom1ticos de acessi%ilidade
A#9# (BCA5 e e83A5".
http.;;VVV.!overnoeletronico.!ov.br;acoes8e8pro4etos;e83A5;material8de8apoio
)a #ilva (BA7 e e83A5". http.;;VVV.acessobrasil.or!.br
CYnthia #aYs (BA7". http.;;VVV.cYnthiasaYs.com
Wera (BA7". http.;;VVV.sidar.or!;hera;
/ift (BA7". http.;;VVV.usablenet.com
6AB (BA7". http.;;VVV.taVdis.net
e9xaminator (BCA5 ?.>". http.;;VVV.acesso.umic.pt;examinator.php
Kunctional AccessibilitY 9valuator ?.?. http.;;fae.cita.uiuc.edu;
24ec[lists para alidao 4&mana
ChecOlist 3anual de Acessibilidade 8 )esenvolvedores (documento pdf 8 FF= a2"
ChecOlist 3anual de Acessibilidade C +essoas com deficincia visual (documento pdf 8
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G =>
DDD a2"
8erramentas para an1lise de relao de contraste
/uminositY Colour Contrast Ratio AnalYser (online".
http.;;4uicYstudio.com;services;luminositYcontrastratio.php
Color Contrast AnalYser (online". http.;;VVV.colorsontheVeb.com;colorcontrast.asp
ChecO mu colours (online". http.;;VVV.checOmYcolours.com;
Contrast AnalYser =.=. http.;;VVV.paciello!roup.com;resources;contrast8
analYser.html
Sim&lador de )aegador
2roVsershots. http.;;broVsershots.or!
Leitores de Tela
JaVs for BindoVs 8 /eitor de tela americano produ1ido pela Kreedom #cientific.
http.;;VVV.freedomscientific.com
NV)A 8 /eitor de tela !ratuito e de c<di!o aberto para BindoVs. http.;;VVV.nvda8
pro4ect.or!
,rca 8 /eitor de tela !ratuito e de c<di!o aberto para /inux.
http.;;live.!nome.or!;,rca
Virtual Vision 8 /eitor de tela nacional fabricado pela 3icropoVer.
http.;;VVV.micropoVer.com.br
Voice,ver 8 /eitor de tela para 3AC ,#.
http.;;VVV.apple.com;br;accessibilitY;voiceover BindoVs 9Yes 8 /eitor de tela
canadense fabricado pela 5B 3icro. http.;;VVV.!Vmicro.com;BindoV89Yes
),#V,X. 7nterface especiali1ada desenvolvida pela GKRJ. http.;;intervox.nce.ufr4.br
)escrio dos /eitores de 6ela (documento pdf 8 =.H? 32"
Avaliao dos +ontos de Kra!ilidades em /eitores de 6ela (documento pdf 8 ?.EH 32"
)aegadores TeHt&ais
/Ynx. http.;;lYnx.broVser.or!
/Ynx VieVer (simulador". http.;;VVV.delorie.com;Veb;lYnxvieV.html
Sim&lador para 2eg&eira 2rom1tica NDaltonismoO
VischecO. http.;;VVV.vischecO.com;
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G =?
T&toriais
, uso correto do texto alternativo (documento pdf 8 =DA a2"
6abelas Acess*veis (documento pdf 8 ?FD a2"
Kormul$rios Acess*veis (documento pdf 8 ?FA a2"
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G =C
<$ Leit&ra complementar
+adr(es 2rasil e85ov
BCA5 =.>
http.;;VVV.ilearn.com.br;6R;BCA5=>
6-cnicas para as BCA5 =.>
http.;;VVV.acesso.umic.pt;VD;6R;BCA5=>869CW#;
C## e Beb #tandards
http.;;mau4or.com;
R9NA+7 C +ro4eto de Acessibilidade Virtual
http.;;bento.ifrs.edu.br;acessibilidade;
Acessibilidade Beb. (X"W63/, C##, #cripts e Gsabilidade para 6odos
http.;;VVV.acessibilidadele!al.com;
Acesso )i!ital
http.;;VVV.acessodi!ital.net
Beb AccessibilitY in 3ind
http.;;Vebaim.or!
BDC 2rasil
http.;;VDc.br
C/K #tandards (Canad$"
http.;;VVV.tbs8sct.!c.ca;clf=8nsi=;index8en!.asp
#ection F>I (9stados Gnidos"
http.;;VVV.sectionF>I.!ov;
N)A (7rlanda"
http.;;VVV.nda.ie;cntm!mtneV.nsf
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G >.
=$ Gloss1rio
+cessi%ilidade6 #i!nifica permitir o acesso por todos, independente do tipo de
usu$rio, situao ou ferramenta.
+cessi%ilidade ` Ae%6 Criar ou tornar as ferramentas e p$!inas Beb acess*veis a
um maior n&mero de usu$rios, inclusive pessoas com deficincia.
+gente de Ds&1rio6 'ualuer softVare ue recupera e apresenta conte&do Beb para
seus usu$rios, possibilitando ue o usu$rio intera4a com o conte&do Beb.
+tri%&to6 ,s atributos servem para definir uma propriedade de um elemento
(X"W63/.
2SS N2ascading Stale S4eets 9 8ol4as de estilo em cascataO6 /in!ua!em ue
descreve a apresentao, visual ou sonora, de um documento.
Leitor de tela6 #oftVare ue fornece informa(es atrav-s de s*ntese de vo1 sobre os
elementos exibidos na tela do computador. 9sses softVares intera!em com o sistema
operacional, capturando as informa(es apresentadas na forma de texto e
transformando8as em resposta falada atrav-s de um sinteti1ador de vo1. +ara nave!ar
utili1ando um leitor de tela, o usu$rio fa1 uso de comandos pelo teclado. , leitor de
tela tamb-m pode transformar o conte&do em informao t$til, exibida dinamicamente
em 2raille por um hardVare chamado de linha ou displaY 2raille, servindo, em
especial, a usu$rios com surdoce!ueira.
)aegador6 +ro!rama ue permite ao usu$rio consultar e intera!ir com o material
publicado na Beb.
)aegador teHt&al6 6ipo de nave!ador baseado em texto, diferente dos
nave!adores com interface !r$fica, onde as ima!ens so carre!adas. , nave!ador
textual pode ser utili1ado com leitores de tela por pessoas com deficincia visual e,
tamb-m, por pessoas ue acessam a 7nternet com conexo lenta.
Padr7es Ae% NAe% StandardsO6 +adr(es Beb so re!ras de tecnolo!ia definidas
pelo BDC e outros <r!os da $rea utili1ados para criar e interpretar o conte&do Beb.
Podcast6 Aruivo ou uma s-rie de aruivos de $udio di!ital, !eralmente em formato
3+D ou AAC (este pode conter ima!ens est$ticas e linOs", publicada atrav-s de
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G >0
podcastin! (forma de publicao de aruivos de m*dia di!ital pela 7nternet, atrav-s de
um feed R##".
Tag6 C<di!o usado para marcar o in*cio e o fim de um elemento (X"W63/.
Tecnologia assistia6 refere8se ao con4unto de artefatos disponibili1ados %s pessoas
com deficincia, ue contribui para prover8lhes uma vida mais independente, com
mais ualidade e possibilidades de incluso social. , prop<sito das tecnolo!ias
assistivas reside em ampliar a comunicao, a mobilidade, o controle do ambiente, as
possibilidades de aprendi1ado, trabalho e inte!rao na vida familiar, com os ami!os e
na sociedade em !eral.
A-2 NAorld Aide Ae% 2onsorti&mO6 Cons<rcio de Qmbito internacional com a
finalidade de desenvolver especifica(es, !uias e ferramentas para Beb.
A+I6 N+ccessi%ilita Initiatie 3 Iniciatia de +cessi%ilidade na Ae%O6 6em como
ob4etivo desenvolver protocolos ue melhorem a interoperabilidade e promovam a
evoluo da BBB.
A2+G NAe% 2ontent +ccessi%ilita G&idelines6 (ecomenda7es de
+cessi%ilidade para 2onteVdo Ae%O6 Abran!e diversas recomenda(es com a
finalidade de tornar o conte&do Beb mais acess*vel.
Ae%cast6 6ransmisso de $udio e v*deo por meio da 7nternet ou redes corporativas
para um !rupo de pessoas, simultaneamente.
ZKTML N!Htensi%le KaperTeHt Mar[&p Lang&ageO6 Z a lin!ua!em W63/
reformulada para se!uir as re!ras do X3/.
ZML N!Htensi%le Mar[&p Lang&ageO6 Gma lin!ua!em de marcao semelhante %
W63/, mas ue permite a descrio de dados definidos por elementos de
pro!ramao.
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G >/
>$ +neHo 0 9 Ta%ela de 2ontraste de 2ores
As tabelas a se!uir mostram as cores ue, em fundo preto ou branco, apresentam
uma relao de contraste de no m*nimo E,F.?.
2ores contrastantes com preto
b.C
.
b.C
-
b.C
=
b.C
C
b.C2 b.C8
b.2
.
b.2
-
b.2
=
b.2
C
b.22 b.28
b.8. b.8- b.8= b.8C b.82 b.88
b-C
.
b-C
-
b-C
=
b-C
C
b-C2 b-C8
b-2
.
b-2
-
b-2
=
b-2
C
b-22 b-28
b-8. b-8- b-8= b-8C b-82 b-88
b==8
b=C
.
b=C
-
b=C
=
b=C
C
b=C2 b=C8
b=2
.
b=2
-
b=2
=
b=2
C
b=22 b=28
b=8. b=8- b=8= b=8C b=82 b=88
bC=
C
bC=2 bC=8
bCC
.
bCC
-
bCC
=
bCC
C
bCC2 bCC8
bC2
.
bC2
-
bC2
=
bC2
C
bC22 bC28
bC8. bC8- bC8= bC8C bC82 bC88
b2.8
b2-
C
b2-2 b2-8
b2=
.
b2=
-
b2=
=
b2=
C
b2=2 b2=8
b2C
.
b2C
-
b2C
=
b2C
C
b2C2 b2C8
b22
.
b22
-
b22
=
b22
C
b222 b228
b28. b28- b28= b28C b282 b288
b8.. b8.- b8.= b8.C b8.2 b8.8
b8-. b8-- b8-= b8-C b8-2 b8-8
b8=. b8=- b8== b8=C b8=2 b8=8
b8C. b8C- b8C= b8CC b8C2 b8C8
b82. b82- b82= b82C b822 b828
b88. b88- b88= b88C b882 b888
Ta%ela 0 9 2ores contrastantes com a cor preta
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G >-
2ores contrastantes com %ranco
b..
.
b..
-
b..
=
b..
C
b..2 b..8
b.-
.
b.-
-
b.-
=
b.-
C
b.-2 b.-8
b.=
.
b.=
-
b.=
=
b.=
C
b.=2 b.=8
b-.
.
b-.
-
b-.
=
b-.
C
b-.2 b-.8
b--
.
b--
-
b--
=
b--
C
b--2 b--8
b-=
.
b-=
-
b-=
=
b-=
C
b-=2 b-=8
b=.
.
b=.
-
b=.
=
b=.
C
b=.2 b=.8
b=-
.
b=-
-
b=-
=
b=-
C
b=-2 b=-8
b==
.
b==
-
b==
=
b==
C
b==2 b==8
bC.
.
bC.
-
bC.
=
bC.
C
bC.2 bC.8
bC-
.
bC-
-
bC-
=
bC-
C
bC-2 bC-8
bC=
.
bC=
-
bC=
=
b2.
.
b2.
-
b2.
=
b2.
C
b2.2
b2-
.
b2-
-
b2-
=
b2-
C
Ta%ela / 9 2ores contrastantes com a cor %ranca
Modelo de +cessi%ilidade em Goerno !letr"nico e3M+G >;

Modelo de Acessibilidade em Governo Eletrônico: Versão 3.0

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

Modelo de Acessibilidade em Governo Eletrônico: Versão 3.0

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