ACESSIBILIDADEemag 3

Ministrio do Planejamento, Oramento e Gesto Secretaria de Logstica e Tecnologia da Informao Departamento de Go erno !
letr"nico ###$go ernoeletronico$go $%r Ministrio da !d&cao Secretaria de !d&cao Profissional e Tecnol'gica (ede )acional de Pes*&isa e Ino ao em Tecnologias Digitais Projeto de +cessi%ilidade ,irt&al
,erso -$.
Modelo de +cessi%ilidade em Go erno !letr"nico
+gosto de /.00
3rasil. 4inist.rio do ,lane5amento, -ramento e 6esto. $ecretaria de 0o"+stica e 7ecnolo"ia da 8nformao e94A6 4odelo de Acessibilidade em 6overno :letr;nico< 4inist.rio do ,lane5amento, -ramento e 6esto, $ecretaria de 0o"+stica e 7ecnolo"ia da 8nformao1 4inist.rio da :ducao, $ecretaria de :ducao ,rofissional e 7ecnol="ica 9 3ras+lia / 4,, $078, >?@@. AB p./ color. @. Acessibilidade >. $ites da Ceb D ,ro5etos. E. $ites na Ceb 9 *esenvolvimento F. ,ro"ramao para 8nternet G. 8nform%tica 9 $ervio ,'blico 8. 7+tulo.
C*H ??F.G/EG C** ??F.AIJ
!sta o%ra est1 licenciada por &ma Licena 2reati e 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 !ual!uer 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 (ual!uer das condi)es acima pode ser renunciada se voc obtiver permisso do titular dos direitos autorais. *om+nio ,'blico -nde a obra ou !ual!uer 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/ 0imita)es e exce)es aos direitos autorais ou !uais!uer usos livres aplic%veis1 -s direitos morais do autor1 *ireitos !ue outras pessoas podem ter sobre a obra ou sobre a utili2ao da obra, tais como direitos de ima"em ou privacidade. Aviso ,ara !ual!uer reutili2ao ou distribuio, voc deve deixar claro a terceiros os termos da licena a !ue se encontra submetida esta obra
Modelo de +cessi%ilidade em Go erno !letr"nico e3M+G
+gradecimentos
- *epartamento de 6overno :letr;nico a"radece a/ 3runa ,oletto $alton, Kuc.lia ,oletto Almeida, A"ebson Rocha Laanha, Andr. 0ui2 Re2ende, Andr.a ,oletto $on2a, Mn"ela 6uimares, Lelipe Nap, 6leison $amuel do Oascimento, Kor"e Liore de -liveira Kunior, K'lia 4ar!ues Carvalho da $ilva, 4arco Antonio de (ueiro2, 4arcus Vinicius 3ennett Lerreira, 4aur+cio Covolan Rosito, Reinaldo Lerra2, Renato 3usatto, Ricardo 4oro, Heslei ,aterno e Co!uiton Lernandes, !ue tornaram a verso E.? do e94A6 poss+vel. - *6: tamb.m a"radece a/ Andre ,imenta Lreire Carol $carton *ie"o Ro"er Ramos Lreitas :dercio 4ar!ues 3ento Kor"e Lernandes 0eonelo *ell Anhol Almeida 4aria Cec+lia Calani 3aranausPas 7hia"o ,rado de Campos Va"ner Li"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 Go erno !letr"nico
:ndice
@. 8ntroduo.............................................................................................................................. G @.@ $obre a verso E.?............................................................................................................ G @.> 0e"islao......................................................................................................................... A @.E - acesso de pessoas com deficincia................................................................................ I @.F - processo para desenvolver um s+tio acess+vel................................................................ J >. Recomenda)es de acessibilidade........................................................................................ @> >.@ 4arcao......................................................................................................................... @E >.> Comportamento *-4#................................................................................................... >@ >.E Conte'do < 8nformao.................................................................................................... >F >.F Apresentao < *esi"n..................................................................................................... EJ >.G 4ultim+dia....................................................................................................................... FF >.A Lormul%rios..................................................................................................................... FI E. ,adr)es de acessibilidade di"ital no 6overno Lederal........................................................... GA E.@ ,%"ina de descrio com os recursos de acessibilidade.................................................. GA E.> Atalhos de teclado........................................................................................................... GI E.E 3arra de acessibilidade................................................................................................... GJ E.F Apresentao do mapa do s+tio....................................................................................... GB E.G Apresentao de formul%rio............................................................................................ A? E.A Conte'do alternativo para ima"ens................................................................................. AE E.I Apresentao de documentos......................................................................................... AE E.J :lementos !ue no devem ser utili2ados......................................................................... AE F. Recursos e ferramentas para acessibilidade......................................................................... AF G. 0eitura complementar........................................................................................................... AA A. 6loss%rio............................................................................................................................... AI I. Anexo @ D 7abela de Contraste de Cores .............................................................................. AB
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 disponibili2ados nos s+tios e portais do "overno. Assim, a primeira verso do e94A6, elaborada pelo *epartamento de 6overno :letr;nico em parceria com a -O6 Acessibilidade 3rasil, foi disponibili2ada para consulta p'blica em @J de 5aneiro de >??G, e a verso >.? 5% com as altera)es propostas, em @F de de2embro do mesmo ano. :m >??I, a ,ortaria nQ E, de I de maio, institucionali2ou o e94A6 no Rmbito do sistema de Administrao dos Recursos de 8nformao e 8nform%tica D $8$,, tornando sua observRncia obri"at=ria nos s+tios e portais do "overno brasileiro.
0$0 So%re a erso -$.

,ara a elaborao da verso >.? do e94A6 foi reali2ado 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 G?J do "overno dos :stados Hnidos, os padr)es C0L do Canad%, as diretri2es irlandesas de acessibilidade e documentos de outros pa+ses, entre eles ,ortu"al e :spanha. 7amb.m foi reali2ada uma an%lise detalhada das re"ras e pontos de verificao do =r"o internacional CA8<CEC, presentes na CCA6 @.?. A verso >.? do e94A6 dividia9se 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 "overno1 >. 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 e94A6 apresentou al"uns inconvenientes durante o processo de disseminao do 4odelo, como a dificuldade das pessoas entenderem as %reas da Viso do Cidado e seu relacionamento com a aplicao efetiva da acessibilidade. - aprendi2ado durante os seis anos da verso >.? do e94A6 e o lanamento da verso >.? do CCA6 marcaram o caminho para a reviso do 4odelo. A reviso do modelo e a nova verso foi desenvolvida atrav.s da parceria entre o *epartamento de 6overno :letr;nico e o ,ro5eto de Acessibilidade Virtual da R:OA,8 Rede de ,es!uisa e 8novao em 7ecnolo"ias *i"itais#. 7amb.m, para a elaborao dessa nova verso, foram consideradas as contribui)es de especialistas na %rea da acessibilidade.
<
A elaborao da verso E.? foi embasada na verso anterior do e94A6, apoiando9se na CCA6 >.?, lanada em de2embro de >??J, e considerando as novas pes!uisas na %rea de acessibilidade & Ceb. Apesar de utili2ar a CCA6 como referncia, o e94A6 E.? foi desenvolvido e pensado para as necessidades locais, visando atender as prioridades brasileiras e mantendo9 se alinhado ao !ue existe de mais atual neste se"mento. $e"uindo a diretri2 do pro"rama de 6overno :letr;nico de promover a Cidadania, o documento9 proposta passou por Consulta ,'blica no per+odo de novembro de >?@? a 5aneiro de >?@@, recebendo contribui)es tanto pelo sistema de Consulta ,'blica do ,ortal do ,ro"rama , !uanto por e9mail. - 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 4odelo de Acessibilidade em 6overno :letr;nico, o e94A6 erso -$., atuali2ado e mais abran"ente no !ue di2 respeito a tornar acess+vel o conte'do do "overno brasileiro na Ceb. A verso E.? do e94A6 . 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 6overno, no sendo permitido exce)es com relao ao cumprimento das recomenda)es. Al.m disso, no e94A6 E.? foi inclu+da a seo chamada S,adroni2ao de acessibilidade nas p%"inas do "overno federalT, com o intuito de padroni2ar elementos de acessibilidade !ue devem existir em todos os s+tios e portais do "overno.
0$/ Legislao
:sto listados abaixo al"uns dos principais documentos, !ue fa2em parte da le"islao !ue norteia o processo de promoo da acessibilidade e a implementao do e94A6/ @. *ecreto n'mero G>BA, de > de de2embro de >??F, !ue re"ulamenta as leis nU @?.?FJ, de J de novembro de >???, !ue d% prioridade de atendimento &s pessoas !ue especifica, e @?.?BJ, de @B de de2embro de >???, !ue estabelece normas "erais e crit.rios b%sicos para a promoo da acessibilidade das pessoas com deficincia, e d% outras providncias1 >. Comit C39F? da A3O7, !ue se dedica & normati2ao 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 virtual1
E. *ecreto nU ABFB, de >G de a"osto de >??B, !ue promul"a a Conveno 8nternacional sobre os *ireitos das ,essoas com *eficincia elaborada pelas Oa)es Hnidas em E? de maro de >??I, definindo, em seu arti"o BU, a obri"atoriedade de promoo do acesso de pessoas com deficincia a novos sistemas e tecnolo"ias da informao e comunicao, inclusive & 8nternet. F. ,ortaria nQ E, de I de maio de >??I, !ue institucionali2ou o e94A6 no Rmbito do sistema de Administrao dos Recursos de 8nformao e 8nform%tica D $8$,, tornando sua observRncia obri"at=ria nos s+tios e portais do "overno brasileiro.
0$- O acesso de pessoas com defici5ncia

- computador e a 8nternet representam um enorme passo para a incluso de pessoas com deficincia, promovendo autonomia e independncia. 4as como pessoas com deficincia utili2am o computadorV 4uitas ve2es, a deficincia no . severa o suficiente a ponto de tornar9 se uma barreira & utili2ao do computador. :ntretanto, na maioria das p%"inas da Ceb, as pessoas ce"as ou com baixa viso, pessoas com deficincia auditiva, com dificuldade em utili2ar o mouse, por exemplo, encontram in'meras barreiras de acessibilidade !ue dificultam ou impossibilitam o acesso aos seus conte'dos. Oo !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 superior1 Acesso ao computador sem teclado/ no caso de pessoas com amputa)es, "randes limita)es de movimentos ou falta de fora nos membros superiores1 Acesso ao computador sem monitor/ no caso de pessoas com ce"ueira1 Acesso ao computador sem %udio/ no caso de pessoas com deficincia auditiva.
Oo entanto, esses no so os 'nicos casos !ue devem ser considerados !uando se pensa em acessibilidade na Ceb. 4uitas 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. Hma pessoa com dislexia, por exemplo, pode apresentar dificuldade de leitura de uma p%"ina devido a um desenho inade!uado. ,or isso, um s+tio desenvolvido considerando a acessibilidade deve en"lobar diferentes n+veis de escolaridade,
>
faixa et%ria e pouca experincia na utili2ao do computador, bem como ser compat+vel com as diversas tecnolo"ias utili2adas para acessar uma p%"ina da Ceb. Hm dos aliados das pessoas com deficincia para o uso do computador so os recursos de tecnolo"ia assistiva, !ue auxiliam na reali2ao de tarefas antes muito dif+ceis ou imposs+veis de reali2ar, promovendo, desta maneira, a autonomia, independncia, !ualidade de vida e incluso social de pessoas com deficincia. :xiste atualmente uma enorme "ama de recursos de tecnolo"ia assistiva, desde artefatos simples at. ob5etos ou softWares mais sofisticados e espec+ficos, de acordo com a necessidade de cada pessoa. Hma pessoa com limitado movimento das mos, por exemplo, pode utili2ar um teclado adaptado !ue cont.m teclas maiores ou um mouse especial para operar o computador. K% as pessoas com baixa viso podem recorrer a recursos como ampliadores de tela, en!uanto usu%rios ce"os podem utili2ar softWares leitores de tela para fa2er uso do computador. Apesar de sua enorme importRncia 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 Ceb. ,ara tal, . necess%rio !ue a p%"ina tenha sido desenvolvida de acordo com os padr)es Ceb Ceb $tandards# e as recomenda)es de acessibilidade, os !uais sero abordados ao lon"o deste documento. *entro desse contexto, este documento ob5etiva "arantir !ue o processo de acessibilidade dos s+tios do "overno brasileiro se5a condu2ido de forma padroni2ada, de f%cil implementao, coerente com as necessidades brasileiras e em conformidade com os padr)es internacionais.
0$; O processo para desen ol er &m stio acess el

A acessibilidade & Ceb refere9se a "arantir acesso facilitado a !ual!uer pessoa, independente das condi)es f+sicas, dos meios t.cnicos ou dispositivos utili2ados. Oo 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 . reali2ado em trs passos/ @. $e"uir os padr)es Ceb1 >. $e"uir as diretri2es ou recomenda)es de acessibilidade1 E. Reali2ar 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 este5a dentro dos padr)es Ceb internacionais definidos pelo CEC. -s padr)es de desenvolvimento Ceb do CEC, ou Ceb $tandards, so um con5unto de recomenda)es !ue visa padroni2ar o conte'do Ceb, possibilitando melhores pr%ticas no desenvolvimento de p%"inas da Ceb. Hma p%"ina desenvolvida de acordo com os padr)es Ceb deve estar em conformidade com as normas X740, Y40, YX740 e C$$, se"uindo as re"ras de formatao sint%tica. Al.m disso, . muito importante !ue o c=di"o se5a semanticamente correto, ou se5a, !ue cada elemento se5a utili2ado de acordo com um si"nificado apropriado, valor e prop=sito. A conformidade com os padr)es Ceb permite !ue !ual!uer sistema de acesso & informao interprete a mesma ade!uadamente e da mesma forma, se5a por meio de nave"adores, leitores de tela, dispositivos m=veis celulares, tablets, etc.# ou a"entes de softWare 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 CEC apresentam comportamento imprevis+vel, e na maioria das ve2es 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 3rasil e96-V, dispon+vel em/ http/<<WWW."overnoeletronico."ov.br<acoes9e9pro5etos<padroes9brasil9e9"ov
S!GC)DO
P+SSO6
DI(!T(ID!S
OC
(!2OM!)D+E@!S
D!
+2!SSIBILID+D!
As diretri2es ou recomenda)es de acessibilidade explicam como tornar o conte'do Ceb acess+vel a todas as pessoas, destinando9se aos criadores de conte'do Ceb autores de p%"inas e criadores de s+tios# e aos pro"ramadores de ferramentas para criao de conte'do. Hm dos principais documentos nessa %rea . a CCA6, atualmente em sua verso >.?, desenvolvida pelo cons=rcio CEC a partir da criao do CA8 Ceb AccessibilitZ 8nitiative#, contendo as recomenda)es de acessibilidade para conte'do Ceb. :m n+vel nacional, o e94A6 . o documento !ue cont.m as diretri2es ou recomenda)es !ue norteiam o desenvolvimento de s+tios e portais acess+veis.
T!(2!I(O
P+SSO6
+,+LI+EFO
D!
+2!SSIBILID+D!
Ap=s a construo do ambiente online de acordo com os padr)es Ceb e as diretri2es de acessibilidade, . necess%rio test%9lo para "arantir sua acessibilidade. Oo caso dos padr)es Ceb, h% um validador autom%tico disponibili2ado pelo pr=prio CEC ver seo de Recursos#. Oo !ue di2 respeito &s diretri2es de acessibilidade, . necess%rio reali2ar, inicialmente, uma validao autom%tica atrav.s de validadores, !ue so softWares ou servios online !ue a5udam a
Modelo de +cessi%ilidade em Go erno !letr"nico e3M+G G
determinar se um s+tio respeitou ou no as recomenda)es de acessibilidade, "erando um relat=rio de erros. Hma das ferramentas !ue podem ser utili2adas . o A$:$, avaliador e simulador de acessibilidade em s+tios, cu5os instrumentos permitem avaliar, simular e corri"ir a acessibilidade de p%"inas, s+tios e portais, viabili2ando a adoo da acessibilidade por =r"os do "overno. Al.m do A$:$, existem outros validadores autom%ticos para mais informa)es, ver seo de Recursos deste documento#. [ 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 por!ue nem todos os problemas de acessibilidade em um s+tio so detectados mecanicamente pelos validadores. ,ara a validao manual, so utili2ados checPlists 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 X740 e das folhas de estilo1 >. Verificar o fluxo de leitura da p%"ina D para tal, utili2ar um nave"ador textual, como o 0Znx, ou um leitor de tela recomendamos o OV*A ou -RCA#. ,ara maiores detalhes, ver documento *escrio dos 0eitores de 7ela, dispon+vel em/ http/<<WWW."overnoeletronico."ov.br<acoes9e9pro5etos<e94A6<material9de9apoio. E. Verificar o fluxo de leitura da p%"ina sem estilos, sem script e sem as ima"ens1 F. Verificar as funcionalidades da barra de acessibilidade, aumentando e diminuindo a letra, modificando o contraste, etc.1 G. Reali2ar a validao autom%tica de acessibilidade utili2ando o A$:$ e outros avaliadores autom%ticos su"eridos no Cap+tulo F1 A. Reali2ar a alidao man&al, utili2ando os checPlists de validao humana dispon+veis em http/<<WWW."overnoeletronico."ov.br<acoes9e9pro5etos<e94A6<material9de9apoio. A validao manual . uma etapa essencial na avaliao de acessibilidade de um s+tio, 5% !ue os validadores autom%ticos no so capa2es de detectar todos os problemas de acessibilidade em um s+tio, pois muitos aspectos re!uerem um 5ul"amento humano. ,or exemplo, validadores autom%ticos conse"uem detectar se o atributo para descrever ima"ens foi utili2ado em todas as ima"ens do s+tio, mas somente uma pessoa poder% verificar se a descrio da ima"em est% ade!uada ao seu conte'do. ,ara reali2ar uma validao manual efetiva, o desenvolvedor dever%
0.
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 reali2ao de testes com usu%rios reais pessoas com deficincia ou limita)es t.cnicas#. Hm usu%rio real poder% di2er 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 efica2 e robusto ser% o resultado.
00
/$ (ecomenda7es de acessi%ilidade
-s padr)es de acessibilidade compreendem recomenda)es ou diretri2es !ue visam tornar o conte'do Ceb acess+vel a todas as pessoas, inclusive &s pessoas com deficincia, destinando9se aos autores de p%"inas, pro5etistas 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 Ceb, independente da ferramenta utili2ada nave"adores Ceb para computadores de mesa, laptops, telefones celulares, ou nave"ador por vo2# 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, 5% !ue todas elas so de "rande importRncia e devem ser se"uidas. *essa forma, optou9se por classificar as recomenda)es nas se"uintes se)es/ 4arcao Comportamento *-4# Conte'do<8nformao Apresentao<*esi"n 4ultim+dia Lormul%rio
OBS6 As recomenda)es deste documento so baseadas em X740 F.? e YX740 @.@. A maioria dos exemplos apresentados nas recomenda)es a se"uir mostram o c=di"o Y#X740 !ue deve ser renderi2ado no nave"ador, 5% !ue . esse c=di"o !ue apresenta importRncia para "arantir a acessibilidade. Assim, no foram apresentados exemplos do lado do servidor, pois o desenvolvedor pode utili2ar a lin"ua"em do lado do servidor !ue preferir, apenas tomando o cuidado com o c=di"o !ue ser% "erado.
0/
/$0 Marcao (!2OM!)D+EFO 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 [ essencial se"uir os padr)es de desenvolvimento Ceb, do CEC Corld Cide Ceb Consortium#, com o intuito de maximi2ar a compatibilidade com atuais e futuros a"entes de usu%rio. [ preciso declarar o *-C7\,: correto da p%"ina de !ual!uer documento X740 ou YX740. *-C7\,: define !ual verso do Y#X740 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 *-C7\,: !ue as ferramentas de validao analisam o c=di"o da p%"ina e indicam corre)es. ,oder% ser utili2ado !ual!uer *-C7\,: para X740 ou YX740, com exceo do Lrameset. Al.m disso, !ual!uer c=di"o X740 ou C$$ inserido em uma p%"ina por script ou outro m.todo similar deve produ2ir uma p%"ina v%lida !uando renderi2ada. As camadas l="icas devero ser separadas, de acordo com o ob5etivo para o !ual elas foram desenvolvidas. Assim, para a camada de conte'do devem ser utili2adas as lin"ua"ens de marcao, como html e xhtml. ,ara a camada de apresentao visual do conte'do, utili2am9se as folhas de estilo css em !ual!uer uma de suas vers)es. K% para a camada !ue modifica o comportamento dos elementos, so utili2adas lin"ua"ens 5avascript e modelos de ob5eto dom#. !Hemplos de DO2TIP! :m X740 F.?@ $trict
]^*-C7\,: X740 ,H308C _9<<CEC<<*7* X740 F.?@<<:O_ _http/<<WWW.WE.or"<7R<htmlF<strict.dtd_ J K4tml lan"`_pt93R_J K4eadJ KtitleJ:xemplo de *-C7\,: em X740 F.?@KLtitleJ Kmeta http9e!uiv`_content9tZpe_ content`_text<html1 charsetùtf9J_ LJ KL4eadJ
:m YX740 @.@
]^*-C7\,: html ,H308C _9<<CEC<<*7* YX740 @.@<<:O_ _http/<<WWW.WE.or"<7R<xhtml@@<*7*<xhtml@@.dtd_J K4tml xmlns`_http/<<WWW.WE.or"<@BBB<xhtml_ xml/lan"`_pt93R_J K4eadJ KtitleJ :xemplo de *-C7\,: em YX740 @.@KLtitleJ Kmeta http9e!uiv`_content9tZpe_ content`_application<xhtmlaxml1 charsetùtf9J_ LJ KL4eadJ
,ara mais detalhes a respeito dos padr)es de desenvolvimento Web, ver a Cartilha e Co i%ica&'o (a r)es Web e-G*V do padro e9,C6, dispon+vel em/ http/<<WWW."overnoeletronico."ov.br<acoes9e9pro5etos<padroes9brasil9e9"ov
0-
(!2OM!)D+EFO / 9 O(G+)ID+(
O 2MDIGO
NTML
D! 8O(M+ LMGI2+ ! S!MO)TI2+
Ver WCAG 2.0 Critrio e !"cesso $.3.$ - c=di"o X740 deve ser or"ani2ado de forma l="ica e semRntica, ou se5a, apresentando os elementos em uma ordem compreens+vel e correspondendo ao conte'do dese5ado. Assim, marcao semRntica ade!uada deve ser utili2ada para desi"nar os cabealhos h@, h>, hE#, as listas ul, ol, dl#, texto enfati2ado stron"#, marcao de c=di"o code#, marcao de abreviaturas abbr#, marcao de cita)es lon"as blocP!uote#, etc. *essa forma, as p%"inas podero ser apresentadas e compreendidas sem recursos de estili2ao, 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 reali2am a leitura do conte'do !ue est% dentro desse elemento. !Hemplo correto
K40J,adr)es CebKL40J K&lJ KliJKa href`_menu@.html_J4enu @KLaJKLliJ KliJKa href`_menu>.html_J4enu >KLaJKLliJ KL&lJ K4/JCeb $emRnticaKL4/J K%locP*&oteJ - poder da Web est% em sua universalidade. $er acessada por todos, independente de deficincia, . um aspecto essencial. KL%locP*&oteJ Kcite xml/lan"`_en_b7im 3erners 0eeKLciteJ
!Hemplo Incorreto
K40J,adr)es CebKL40J KpJKa href`_menu@.html_J4enu @KLaJKLpJ KpJKa href`_menu>.html_J4enu >KLaJKLpJ K4/JCeb $emRnticaKL4/J KpJ - poder da Web est% em sua universalidade. $er acessada por todos, independente de deficincia, . um aspecto essencial. KLpJ KpJ7im 3erners 0eeKLpJ
(!2OM!)D+EFO - 9 CTILID+(
2O((!T+M!)T! OS ):,!IS D! 2+B!E+LNO
Ver WCAG 2.0 Critrios e !"cesso $.3.$ e 2.#.$0
0;
-s n+veis de cabealho devem ser utili2ados de forma l="ica e semRntica 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"ili2ando, assim, a nave"ao. Conceitualmente, existem seis n+veis de t+tulos, sendo o h@ o mais alto, ou se5a, 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. K% os n+veis do h> ao hA podero ser utili2ados mais de uma ve2 na p%"ina, mas sem excesso e com l="ica textual. ,ara compreender melhor os n+veis de t+tulo pode9se 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 hE e assim por diante. !Hemplo
8ig&ra 0 9 !Hemplo de &tiliQao dos n eis de tt&lo
NTML
K40J7.cnicas culin%riasKL40J KpJA se"uir os se"redos !ue facilitam a vida na co2inha.KLpJ
0<
K4/J0e"umes, folhas e ve"etaisKL4/J K4-J3aba do !uiaboKL4-J KpJ,ara eliminar a baba do !uiabo, lave9o ainda inteiro, se!ue9o e colo!ue9o numa ti"ela com um pouco de suco de limo, deixando repousar durante @G minutos. *epois lave li"eiramente, corte e co2inhe.KLpJ K4-JLei5oKL4-J KpJ@ x+cara de fei5o cru serve tr%s pessoas depois de pronto. KLpJ K4-JCenouras e aiposKL4-J KpJ,ara resolver o problema de cenouras e aipos meio murchos, mer"ulhe9os em %"ua "elada misturada com uma colher de ch% de mel por uma hora. :scorra e se!ue levemente depois.KLpJ K4/JCon"elamento e descon"elamentoKL4/J K4-JCarne em pedaosKL4-J KpJ,ara descon"elar carne em pedaos inteiros colo!ueDa embrulhada, numa vasilha com %"ua. Colo!ue sal na %"ua e no pacote e tampe por uma hora.KLpJ K4-JCarne mo+daKL4-J KpJ,ara apressar o descon"elamento da carne mo+da, sal"ue a !uantidade !ue ir% usar. - sal apressa o descon"elamento.KLpJ
(!2OM!)D+EFO ; 9 O(D!)+(
T+BCL+EFO
D! 8O(M+ LMGI2+ ! I)TCITI,+ + L!ITC(+ !
Ver WCAG 2.0 Critrios e !"cesso $.3.2 e 2.#.3 *eve9se criar o c=di"o X740 com uma se!uncia l="ica de leitura para percorrer linPs, controles de formul%rios e ob5etos. :ssa se!uncia . determinada pela ordem !ue se encontra no c=di"o X740. [ recomend%vel disponibili2ar o bloco de conte'do no X740 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 utili2%9los. -s atalhos no funcionam em interfaces especiali2adas, como o do 0eitor de 7ela *-$V-Y e podem ser de dif+cil utili2ao para pessoas com deficincia motora. OBS6 - atributo tabindex somente dever% ser utili2ado !uando existir real necessidade. Com o uso de C$$ para fins de leiaute, o c=di"o X740 pode facilmente ser desenvolvido de maneira !ue a ordem de tabulao se5a a correta. Oo entanto, se houver necessidade de utili2ar o
tabindex , o mesmo dever% ser utili2ado com a semRntica correta e dever% ser verificado
manualmente se o fluxo fornecido pelo tabindex . realmente o dese5ado, evitando, assim, !ue o uso do tabindex resulte em uma ordem de tabulao inconsistente. !Hemplo correto Rsem o &so do tabindexS
0=
K&lJ KliJKa href`_c_J,%"ina 8nicialKLaJKLliJ KliJKa href`_c_JCap+tulo @KLaJKLliJ KliJKa href`_c_JCap+tulo >KLaJKLliJ KliJKa href`_c_JCap+tulo EKLaJKLliJ KL&lJ
]^primeiro foco 99b ]^se"undo foco 99b ]^terceiro foco 99b ]^!uarto foco 99b
!Hemplo incorreto do &so do tabindex

K&lJ KliJKa href`_main.html_ tabindex`_@_J,%"ina 8nicialKLaJKLliJ KliJKa href`_capitulo@.html_ tabindex`_F_JCap+tulo @KLaJKLliJ KliJKa href`_capitulo>.html_ tabindex`_E_J Cap+tulo >KLaJKLliJ KliJKa href`_capituloE.html_ tabindex`_>_J Cap+tulo EKLaJKLliJ KL&lJ
-rdem de tabulao errada, conferida pelo tabindex/
(!2OM!)D+EFO < 3 DISPO)IBILID+(
TOD+S +S 8C)E@!S D+ PTGI)+ ,I+ T!2L+DO
Ver WCAG 2.0 Critrios e !"cesso 2.$.$ e 2.$.2 7odas as fun)es da p%"ina desenvolvidas utili2ando9se lin"ua"ens de script 5avascript# devero estar dispon+veis !uando for utili2ado apenas o teclado. [ importante salientar !ue o foco no dever% estar blo!ueado ou fixado em um elemento da p%"ina, para !ue o usu%rio possa mover9se 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 onmousedown onmouseup onclick* onmouseover onmouseout
! ento do teclado onkeydown onkeyup onkeypress onfocus* onblur*
0>
-3$/ d Al"uns manipuladores de eventos so dispositivo9independentes, ou se5a, se aplicam a !ual!uer dispositivo mouse, teclado ou outro#, como . o caso de/ onLocus, on3lur, on$elect, onChan"e, e onClicP !uando o onClicP for utili2ado em um linP ou elemento de formul%rio#.
(uando forem utili2ados 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 utili2ando diferentes recursos de tecnolo"ia assistiva, para "arantir !ue o evento se5a, de fato, acess+vel. * preferncia por utili2ar o onclicP<onPeZpress em ve2 de onmousedoWn<onPeZdoWn e onmouseup<onPeZup, pois estes 'ltimos fa2em com !ue o evento se5a disparado automaticamente atrav.s do teclado. $e houver real necessidade de utili2ao destes eventos, dever% ser feito um controle sobre !ual tecla dever% ser acionada para !ue o evento ocorra, conforme o exemplo a se"uir/ Ua aScript
]script tZpe`_text<5avascript_b ar x`document."et:lement3Z8d _linP_# x.onPeZdoWn`f&nction e#e ar pressedPeZ if tVpeof event^`fundefinedf#e <<nave"ador 8nternet :xplorer pressedPeZ`WindoW.event.PeZCode gelsee<<outros nave"adores pressedPeZè.PeZCode <<identifica tecla pressionada g if pressedPeZ``f@Ef#e <<teste se a tecla . o SenterT WindoW.open fhttp/<<WWW.brasil."ov.br<f# <<abre a HR0 g g ]<scriptb
NTML
KpJKa href`_c_ id`_linP_J,ortal 3rasilKLaJKLpJ
:xistem fun)es do mouse !ue no possuem uma funo correspondente via teclado, como . o caso de duplo cli!ue dblclicP#. Oesses casos, . necess%rio implementar a funo de maneira alternativa, como, por exemplo, incluindo bot)es !ue executem, pelo teclado, a funo de forma e!uivalente. - evento onclicP 5% funciona pelo teclado tecla :O7:R# na maioria dos nave"adores.
(!2OM!)D+EFO = 9 8O()!2!(
O)2O(+S P+(+ I( DI(!TO + CM BLO2O D! 2O)T!WDO
Ver WCAG 2.0 Critrio e !"cesso 2.#.$

Modelo de +cessi%ilidade em Go erno !letr"nico e3M+G 0?
*evem ser fornecidas Rncoras, dispon+veis na barra de acessibilidade, !ue apontem para linPs relevantes presentes na mesma p%"ina. Assim, . poss+vel ir ao bloco de conte'do dese5ado. -s linPs 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 utili2ao das Rncoras, podem ser disponibili2ados atalhos por teclado, utili2ando o atributo accessPeZ nos linPs relevantes. [ importante ressaltar !ue as dicas de atalhos presentes na barra de acessibilidade no devem possuir o atributo accessPeZ, 5% !ue no pode haver repetio do mesmo accessPeZ em uma p%"ina. Recomenda9se fornecer atalhos para o menu principal, para o conte'do e para a caixa de pes!uisa. !Hemplo 7opo da ,%"ina na barra de acessibilidade#
K&l id`_atalhos_J KliJKa href`_cconteudo_J8r para conte'do h@iKLaJKLliJ KliJKa href`_cmenu_J8r para menu principalh>iKLaJKLliJ KliJKa href`_cbusca_J8r para busca hEiKLaJKLliJ KL&lJ
Conte'do da ,%"ina
Kdi J Ka name`_conteudo_ id`_conteudo_ class`_oculto_ accessPeZ`_@_J8n+cio do conte'doKLaJ ]^99 Conte'do j KLdi J
4enu ,rincipal da ,%"ina

Kdi J Ka name`_menu_ id`_menu_ class`_oculto_ accessPeZ`_>_J8n+cio do menuKLaJ ]^99itens de menu 99b KLdi J
Lormul%rio de pes!uisa do s+tio pode estar em !ual!uer lu"ar no s+tio#

Kform action`_c_method`_post_J KfieldsetJ KlegendJ3uscarKLlegendJ Kla%el for`_busca_J,es!uise a!uiKLla%elJ Kinp&t tVpeXYteHtY idXY%&scaY nameXY%&scaY accessPeVXY-Y al&eXYPes*&ise a*&iY LJ Kinp&t tZpe`_submit_ value`_3uscar_ class`_buscar_ name`_buscar_ LJ KLfieldsetJ KLformJ
Loram utili2ados ambos os atributos name e id para !ue as Rncoras funcionem em todos os
Modelo de +cessi%ilidade em Go erno !letr"nico e3M+G 0G
nave"adores, tanto textuais !uanto "r%ficos, 5% !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 disponibili2adas na barra de acessibilidade e na p%"ina sobre a acessibilidade do s+tio. 4aiores detalhes a esse respeito podem ser encontrados no cap+t"lo 3 , -lementos e acessibili a e nas p.ginas o Governo /e eral.
(!2OM!)D+EFO > 9 )FO
CTILID+( T+B!L+S P+(+ DI+G(+M+EFO
Ver WCAG 2.0 Critrio e !"cesso $.3.$ 01cnica 23$4 As tabelas devem ser utili2adas apenas para dados tabulares e no para efeitos de disposio dos elementos na p%"ina. ,ara este fim, utili2e as folhas de estilo.
(!2OM!)D+EFO ? 9 S!P+(+(
LI)ZS +DU+2!)T!S
Ver WCAG 2.0 Critrio e !"cesso $.3.$ 01cnica 2#54 0inPs ad5acentes devem ser separados por mais do !ue simples espaos, para !ue no fi!uem confusos, em especial para usu%rios !ue utili2am leitor de tela. ,ara isso, . recomendado o uso de listas, onde cada elemento dentro da lista . um linP. As listas podem ser estili2adas visualmente com C$$ para !ue os itens se5am mostrados da maneira dese5ada, como um ao lado do outro, por exemplo. Caso os linPs este5am no meio de um par%"rafo, pode9se utili2ar v+r"ulas, parnteses, colchetes, etc., para fa2er a separao. !Hemplo correto
K&l id`_menu_J KliJ Ka href`_home.html_JXomeKLaJKLliJ KliJ Ka href`_pes!uisa.html_J,es!uisaKLaJKLliJ KliJ Ka href`_mapasite.html_J4apa do $iteKLaJKLliJ KL&lJ ]^99 Conteudo do $ite 99b
!Hemplo incorreto
/.
Kp id`_menu_J Ka href`_cmenu_J,ular o menuKLaJK%r LJ Ka href`_home.html_JXomeKLaJK%r LJ Ka href`_pes!uisa.html_J,es!uisaKLaJK%r LJ Ka href`_mapasite.html_J4apa do $iteKLaJ KLpJ ]^99 Conteudo do $ite 99b
(!2OM!)D+EFO G 9 )FO
+B(I( )O,+S I)STO)2I+S S!M + SOLI2IT+EFO DO CSCT(IO
Ver WCAG 2.0 Critrio e !"cesso 3.2.3 A deciso de se utili2ar9se de novas instRncias D por exemplo abas ou 5anelas 9 para acesso a p%"inas e servios ou !ual!uer informao . do cidado. Assim, no devem ser utili2ados/
,op9ups1 A abertura de novas abas ou 5anelas1 - uso do atributo tar"et`SkblanPT1 4udanas no controle do foco do teclado1 :ntre outras, !ue no tenham sido solicitadas pelo usu%rio.
/$/ 2omportamento RDOMS (!2OM!)D+EFO 0. 9 G+(+)TI(

[C! OS OBU!TOS P(OG(+MT,!IS S!U+M +2!SS:,!IS
Ver WCAG 2.0 Critrios e !"cesso 2.$.$ e 2.$.2 *eve9se "arantir !ue scripts, Llash, conte'dos dinRmicos e outros elementos pro"ram%veis se5am acess+veis. $e no for poss+vel !ue o elemento pro"ram%vel se5a diretamente acess+vel, deve ser fornecida uma alternativa em X740 para o conte'do. Assim, . preciso "arantir !ue o conte'do e as funcionalidades de ob5etos pro"ram%veis se5am acess+veis aos recursos de tecnolo"ia assistiva e !ue se5a poss+vel a nave"ao por teclado. (uando o script for utili2ado em uma p%"ina da Ceb, uma forma de fornecer uma alternativa para ele . atrav.s do elemento ]noscriptb. :ste elemento pode ser utili2ado para mostrar conte'dos em nave"adores !ue no suportam scripts ou !ue tenham o script desabilitado. Oo entanto, se o nave"ador tiver suporte a scripts e estes estiverem habilitados, o elemento ]noscriptb 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
Modelo de +cessi%ilidade em Go erno !letr"nico e3M+G /0
script se5a desenvolvido tomando9se o cuidado para !ue ele se5a acess+vel, e o elemento ]noscriptb deve ser utili2ado para abran"er os casos em !ue scripts no so suportados. !Hemplo correto ,%"ina X740
Ka href`_cadastro.html_ id`_cadastro_JCadastre9se a"ora^KLaJ
,%"ina Kava$cript .5s#

f&nction pop # e alert _Voc vai fa2er um novo cadastro^_#1 g ar element ` document."et:lement3Z8d _cadastro_#1 element.onclicP ` pop1
!Hemplo incorreto ,%"ina X740

Ka href`_5avascript/pop #_JCadastre9se a"ora^KLaJ Kscript lan"ua"e`_5avascript_ tZpe`_text<5avascript_J f&nction pop # e alert _Voc vai fa2er um novo cadastro^_#1 g KLscriptJ
Oesse caso, se o nave"ador no tiver suporte a scripts, o usu%rio ficar% impossibilitado de acessar o linP. OBS6 A funo SalertT do 5avascript no "era um pop9up e sim uma mensa"em !ue . lida por todos os leitores de tela.
(!2OM!)D+EFO 003 )FO
2(I+( PTGI)+S 2OM +TC+LID+EFO +CTOMTTI2+ P!(IMDI2+
Ver WCAG 2.0 Critrio e !"cesso 3.2.3 01cnicas !V;$ e 2<=4 Oo devem ser criadas p%"inas com atuali2ao autom%tica peri=dica. Assim, no deve ser utili2ada a meta ta" refresh, nem outra forma de atuali2ao autom%tica. ,%"inas !ue se atuali2am automaticamente podem confundir e desorientar os usu%rios, especialmente usu%rios !ue utili2am leitores de tela. !Hemplo0 :m uma interface Ceb para e9mail Cebmail#, um desenvolvedor pode fornecer um boto ou linP para buscar novos e9mails recebidos em ve2 de atuali2ar automaticamente.
//
:m p%"inas onde o limite de tempo . absolutamente necess%rio, o usu%rio dever% ser informado !ue a p%"ina . atuali2ada automaticamente. !Hemplo/ :m uma p%"ina de leil)es online, . fornecido um banner contendo a informao de !ue a p%"ina . atuali2ada a cada @G se"undos.
(!2OM!)D+EFO 0/ 9 )FO
CTILID+( (!DI(!2IO)+M!)TO +CTOMTTI2O D! PTGI)+S
Ver WCAG 2.0 Critrio e !"cesso 3.2.3 01cnicas !V;$ e 2<=4 Oo devem ser utili2adas marca)es para redirecionar para uma nova p%"ina, como a meta ta" re%resh. Ao inv.s disso, deve9se confi"urar o servidor para !ue o redirecionamento se5a transparente para o usu%rio. !Hemplo Incorreto
K4eadJ KtitleJ:xemploKtitleJ Kmeta http9e!uiv`_refresh_ content`_>?1 url`fhttp/<<WWW.exemplo.com<f_ LJ KL4eadJ K%odVJ KpJ:sta p%"ina mudou seu endereo para WWW.novoendereco.com.brKLpJ KL%odVJ
(!2OM!)D+EFO 0- 9 8O()!2!(
+LT!()+TI,+ P+(+ MODI8I2+( LIMIT! D! T!MPO
Ver WCAG 2.0 Critrio e !"cesso 2.2.$ :m uma p%"ina onde h% limite de tempo para reali2ar uma tarefa deve haver a opo de desli"ar, a5ustar ou prolon"ar esse limite. :ssa recomendao no se aplica a eventos em !ue o limite de tempo . absolutamente necess%rio. :xemplo / Oa 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+EFO 0; 9 )FO
I)2LCI( SITC+E@!S 2OM I)T!(MIT\)2I+ D! T!L+
Ver WCAG 2.0 Critrio e !"cesso 2.3.$ Oo devem ser utili2ados efeitos visuais piscantes, intermitentes ou cintilantes. :m pessoas com epilepsia fotosensitiva, o cintilar ou piscar pode desencadear um ata!ue epil.tico. A exi"ncia dessa diretri2 aplica9se tamb.m para propa"anda de terceiros inserida na p%"ina.
(!2OM!)D+EFO 0< 9 +SS!GC(+(

T!MPO(+IS DO 2O)T!WDO
O 2O)T(OL! DO CSCT(IO SOB(! +S +LT!(+E@!S
Ver WCAG 2.0 Critrio e !"cesso 2.2.2 Conte'dos !ue Sse movemT, 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 se5a por escolha de preferncia de visuali2ao da p%"ina, !uer por outro m.todo !ual!uer acess+vel a usu%rio com deficincia#. Al.m disso, o usu%rio deve ser capa2 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 se5a uma tarefa de dif+cil execuo se for necess%rio reali2ar uma escolha baseando9se nas limita)es, prefira implementar mecanismos para redu2ir a velocidade dos conte'dos no lu"ar de aumentar#.
/$- 2onte]do L Informao (!2OM!)D+EFO 0= 9 ID!)TI8I2+(

Ver WCAG 2.0 Critrio e !"cesso 3.$.$ *eve9se identificar o principal idioma utili2ado nos documentos. A identificao . feita por meio do atributo lan" do X740 e, para documentos YX740, . utili2ado o xml/lan".
O IDIOM+ P(I)2IP+L D+ PTGI)+
/;
!Hemplo :m X740 F.?@

... K4tml lan"`_pt93R_J K4eadJ KtitleJdocumento escrito em portu"us do 3rasilKLtitleJ ...
:m YX740 @.@
... K4tml xmlns`_http/<<WWW.WE.or"<@BBB<xhtml_ xml/lan"`_pt93R_J K4eadJ KtitleJdocumento escrito em portu"us do 3rasilKLtitleJ ...
(!2OM!)D+EFO 0> 9 O8!(!2!(
CM T:TCLO D!S2(ITI,O ! I)8O(M+TI,O ^ PTGI)+
Ver WCAG 2.0 Critrio e !"cesso 2.#.2 - t+tulo da p%"ina deve ser descritivo e informativo, 5% !ue essa informao ser% a primeira lida pelo leitor de tela, !uando o usu%rio acessar a p%"ina. - t+tulo . informado pela ta" ]titleb. !Hemplo - s+tio sobre o ,ro5eto Acessibilidade Virtual da R:OA,8 Rede Oacional de ,es!uisa e 8novao em 7ecnolo"ias *i"itais# apresenta o se"uinte t+tulo/
KtitleJ ,ro5eto Acessibilidade Virtual 9 ,ortal R:OA,8 D ,%"ina 8nicial KLtitleJ
(!2OM!)D+EFO 0?9 DISPO)IBILID+(

CSCT(IO )+ PTGI)+
I)8O(M+EFO SOB(! + LO2+LID+EFO DO
Ver WCAG 2.0 Critrio e !"cesso 2.#.5 *ever% ser fornecido um mecanismo !ue permita ao usu%rio orientar9se dentro de um con5unto de p%"inas, permitindo !ue ele saiba onde est% no momento. Assim, poder% ser utili2ado o recurso de Smi"alha de poT brea cr"mbs#, !ue so linPs nave"%veis em forma de lista hier%r!uica e permitem !ue o usu%rio saiba !ual o caminho percorrido at. che"ar & p%"ina em !ue se encontra no momento.
Modelo de +cessi%ilidade em Go erno !letr"nico e3M+G /<
!Hemplo Hm usu%rio nave"ando por um s+tio de uma universidade encontra9se na seo de editais, !ue est% dentro do menu S:nsinoT. Acima do conte'do, . disponibili2ado a se"uinte 4i"alha de po/
,oc5 est1 em6 P1gina inicial J !nsino J !ditais

OBS6 Oa mi"alha de po, todos as p%"inas do caminho, com exceo da !ual est% o usu%rio posio atual#, devero estar implementadas como linPs.
(!2OM!)D+EFO 0G 9 D!S2(!,!(
LI)ZS 2L+(+ ! SC2I)T+M!)T!
Ver CCA6 >.? Crit.rios de $ucesso >.F.F e >.F.B *eve9se identificar claramente o destino de cada linP, informando, inclusive, se o linP remete a outro s+tio. Al.m disso, . preciso !ue o texto do linP faa sentido mesmo !uando isolado do contexto da p%"ina. [ preciso tomar cuidado para no utili2ar o mesmo t+tulo para dois ou mais linPs !ue apontem para destinos diferentes. !Hemplo 0
K4/J:ducao $uperiorKL4/J KpJ7omam posse os reitores das federais da 3ahia e 7riRn"ulo KLpJ KpJ Ka 4refXYnotici<0/<$4tmlYJLeia mais notcias so%re !d&cao S&periorKLaJ KLpJ
Repare !ue no h% necessidade de utili2ar o atributo title em linPs, 5% !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 linP, faa9o no pr=prio texto do linP ou no contexto. !Hemplo / 2orreto6 6anhe um prmio fornecido pelo nosso patrocinador 6anhe um prmio fornecido pelo nosso patrocinador Incorreto6 Cli!ue a!ui para "anhar um prmio fornecido pelo nosso patrocinador
/=
OBS6 Oo . recomendada a utili2ao de linPs do tipo Scli!ue a!uiT pois esta expresso no fa2 sentido fora do contexto. 4uitos usu%rios de leitores de tela nave"am por linPs, tornando descri)es como SCli!ue a!uiT, SVe5a maisT insuficientes para o usu%rio saber o destino do linP, ou locali2%9lo na p%"ina. :vitar essas express)es para evitar verborra"ia, ou se5a, evitar !ue o leitor de tela SleiaT para o usu%rio palavras ou frases desnecess%rias.
(!2OM!)D+EFO /. 9 8O()!2!(
+LT!()+TI,+ !M T!_TO 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, utili2ando9se o atributo alt. 8ma"ens !ue no transmitem conte'do, ou se5a, ima"ens decorativas, devem ser inseridas por C$$. Oo entanto, descrever !ual!uer ima"em, em "eral, . al"o bastante sub5etivo e a descrio deve ser adaptada ao contexto em !ue a ima"em se encontra. ,ara maiores detalhes de como escrever um texto alternativo ve5a o tutorial * "so correto o te?to alternativo na seo do e9 4A6 no portal de 6overno :letr;nico. !Hemplo 0
8ig&ra / 9 !Hemplo de descrio de imagem$ Loto de K;natas Cunha em licena Creative Commons Lonte/ http/<<WWW.flicPr.com<photos<5onZcunha<F?@BI?F>@F<in<photostream<
Oo c=di"o/
Kimg srcXYcrianca$jpgY altXY8oto de &ma criana c4eirando &ma florY LJ
/>
!Hemplo /
8ig&ra - 9 !Hemplo de descrio de %anner
Oo c=di"o/
Ka href`_http/<<WWW.dominiopublico."ov.br<_J Kimg srcXYdominioP&%lico$jpgY altXYPortal Domnio P]%licoY LJ KLaJ
Apesar de no haver um limite de caracteres no atributo alt, ele . utili2ado 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, deve9se fornecer, al.m do alt, a descrio no pr=prio contexto ou um linP para a descrio lon"a lo"o ap=s a ima"em. *eve ficar claro para o usu%rio !ue esse linP remete para a descrio lon"a da ima"em, conforme o exemplo a se"uir. !Hemplo -
8ig&ra ; 9 !Hemplo de descrio de gr1fico + descrio teHt&al do gr1fico est1 dispon el em o&tra p1gina
Oo c=di"o/
Kimg src`_"rafico.5p"_ alt`_6r%fico de pi22a demonstrando os resultado da pes!uisa sobre a distribuio de espao em p%"inas_ LJ KpJKa href`_"rafico,es!uisa.html_JA descrio textual do "r%ficoKLaJ est% dispon+vel em outra p%"inaKLpJ
,ara "r%ficos, poder% ser disponibili2ada tanto a descrio textual !uanto a tabela de dados !ue lhe deu ori"em, desde !ue a tabela se5a fornecida em X740, tomando9se os devidos cuidados relativos & acessibilidade.
/?
Al.m de fornecer a descrio lon"a no contexto ou em um linP pr=ximo, pode9se utili2ar o atributo lon"desc na ima"em, o !ual . recomendado pela CCA6 para descri)es lon"as, mas no . suportado por al"uns recursos de tecnolo"ia assistiva. A utili2ao do lon"desc pode ser vista no exemplo a se"uir. !Hemplo ;
Kimg src`_"rafico.5p"_ alt`_6r%fico de pi22a demonstrando os resultado da pes!uisa sobre a distribuio de espao em p%"inas_ lon"desc`_"rafico,es!uisa.html_ LJ KpJKa href`_"rafico,es!uisa.html_JA descrio textual do "r%ficoKLaJ est% dispon+vel em outra p%"inaKLpJ
"rafico,es!uisa.html
K4/J *istribuio de espao em p%"inasKL4/J K&lJ KliJ,ropa"anda 9 A?lKLliJ KliJ$em Hso 9 @?lKLliJ KliJOave"ao 9 @?lKLliJ KliJConte'do de 8nteresse 9 >?lKLliJ KL&lJ
!Hemplo de imagem decorati a6
8ig&ra < 9 Imagem decorati a em linP `,olta ao topo da p1ginaa
X740
Ka href`_cidkdekdestino_J7opo da p%"inaKLaJ
C$$
ae %acPgro&nd/transparent url im"<topokpa"ina.5p"#no9repeat ri"ht top1 <dinsero da ima"em decorativa do linP d< padding/Fpx >Ipx ? ?1 <d espao colocado para a ima"em ficar ao lado do linP d< 4eig4t/>Epx1 <da5uste na altura do linP para !ue aparea toda a ima"em d< g
(!2OM!)D+EFO /0 9 8O()!2!(
M+P+ D! IM+G!M
+LT!()+TI,+ !M T!_TO P+(+ +S DO)+S +TI,+S D!
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 2onas ativas, ou se5a, para cada um dos linPs !ue receber% o foco.
/G
!Hemplo Rmapa de imagem do lado do clienteS
8ig&ra = 9 Mapa de imagem eHemplo 0
Kimg src`_mapa8m".5p"_ alt`_8ma"em com alternativas hAi e h3i_ usemap`_c4ap_ LJ Kmap name`_4ap_ id`_4ap_J Karea shape`_rect_ coords`_J,@?,AE,GB_ href`_a.html_ alt`_0inP para a seo hAi_ LJ Karea shape`_rect_ coords`_II,B,@>A,A@_ href`_b.html_ alt`_0inP para a seo h3i_ LJ KLmapJ
Al.m dos mapas de ima"em do lado do cliente, existem os do lado do servidor. Oo entanto, . recomendada a utili2ao de mapas de ima"em do lado do cliente, 5% !ue para mapas de ima"em do lado do servidor no . poss+vel fornecer um alt para cada uma das 2onas ativas, somente para o mapa como um todo, no sendo poss+vel, portanto, torn%9lo acess+vel. Oo entanto, se for realmente necess%ria sua utili2ao, devem ser fornecidos linPs 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 Rmapa de imagem do lado do ser idorS
Ka href`_nova,a"ina.5p"_JKimg src`_bandeira3rasil.5p"_ ismap`_ismap_ alt`_3andeira do 3rasil 0inPs a se"uir#_LJKLaJ KpJKa href`_areaVerde.html_Jmrea VerdeKLaJ 9 KLpJ KpJKa href`_areaAmarela.html_Jmrea AmarelaKLaJ 9 KLpJ KpJKa href`_areaA2ul.html_Jmrea A2ulKLaJKLpJ
8ig&ra > 9 Mapa de imagem eHemplo /
OBS6 Oo devem ser utili2ados mapas de ima"em para menus ou seleo de re"i)es para servios.
(!2OM!)D+EFO // 9 DISPO)IBILID+(
DO2CM!)TOS !M 8O(M+TOS +2!SS:,!IS
!em correspon @ncia a critrios a WCAG 2.0
-.
-s documentos devem ser disponibili2ados preferencialmente em X740. 7amb.m podem ser utili2ados ar!uivos para doWnload no formato -*L, tomando9se os cuidados para !ue se5am acess+veis. $e um ar!uivo for disponibili2ado em ,*L, dever% ser fornecida uma alternativa em X740 ou -*L. [ necess%rio, tamb.m, informar a extenso e o tamanho do ar!uivo no pr=prio texto do linP. !Hemplo
Ka href`Tmanual.odtTJ 4anual do CEC formato .odt, tamanho @G?nb# KLaJ
OBS6 - -*L -pen *ocument Lormat# . um formato aberto de documento adotado pela e9,8O6 Ar!uitetura de 8nteroperabilidade em 6overno :letr;nico# !ue pode ser implementado em !ual!uer sistema. - -*L en"loba formatos como/ -*7 para documentos de texto, -*$ para planilhas eletr;nicas, -*, para apresenta)es de slides, entre outros. 4uitos softWares 5% utili2am esses formatos, como . o caso do -pen-ffice, 3r-ffice, 6oo"le *ocs, AbiWord e $tar-ffice. - 4icrosoft -ffice >?@? tamb.m inclui suporte para -*L. ,ara vers)es anteriores do 4icrosoft -ffice, pode ser instalado um Add9in "ratuito para suporte aos formatos -*L.
(!2OM!)D+EFO /- 9 !M
+P(OP(I+D+
T+B!L+S, CTILID+( T:TCLOS ! (!SCMOS D! 8O(M+
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 utili2ado ap=s a declarao do elemento table. :m casos de tabelas extensas, deve ser fornecido um resumo de seus dados atrav.s do atributo summarZ !ue deve ser declarado no elemento table. !Hemplo
Kta%le summarZ`_:sta tabela exibe os copos de caf. consumidos por cada senador, o tipo de caf. descafeinado ou normal#, com a'car ou sem a'car._J KcaptionJCopos de caf. por $enadorKLcaptionJ $$$
,ara mais detalhes ve5a o tutorial tabelas acess+veis documento pdf 9 @GF n3#, na seo do e94A6 no ,ortal do ,ro"rama de 6overno :letr;nico.
-0
(!2OM!)D+EFO /; 9 +SSO2I+(
CM+ T+B!L+
2bLCL+S D! D+DOS ^S 2bLCL+S D! 2+B!E+LNO !M
Ver WCAG 2.0 Critrio e !"cesso $.3.$ 01cnicas 2#3 e 2=34 :m 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%9las acess+veis. ,ara incrementar a acessibilidade, deve9se utili2ar os elementos thead, tbodZ e tfoot, para 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.. - CEC su"ere utili2ar o tfoot antes do tbodZ dentro da definio table para !ue o a"ente de usu%rio possa renderi2ar o rodap. antes de receber todas potencialmente numerosas# linha de dados. !Hemplo 0
Kta%leJ KcaptionJ*emonstrativo do ,atrim;nioKLcaptionJ Kt4eadJ KtrJ Kt4J7iposKLt4J Kt4JValores Ro#KLt4J Kt4J,ercentualKLt4J KLtrJ KLt4eadJ KtfootJ KtrJ KtdJ7otalKLtdJ KtdJ@@?.IF?,>>KLtdJ KtdJ@??lKLtdJ KLtrJ KLtfootJ Kt%odVJ KtrJ KtdJRecursos LinanceiroKLtdJ KtdJGA.JIB,AEKLtdJ KtdJG@,EAlKLtdJ KLtrJ KtrJ KtdJ3ens 4=veisKLtdJ KtdJ>G.AB@,>EKLtdJ KtdJ>E,>?lKLtdJ KLtrJ KtrJ KtdJ3ens 8m=veisKLtdJ KtdJ>J.@AB,EAKLtdJ KtdJ>G,FFlKLtdJ KLtrJ KLt%odVJ KLta%leJ
-/
8ig&ra ? 9 Imagem da ta%ela descrita no c'digo do eHemplo 0
,ara tabelas mais complexas, . necess%rio utili2ar marca)es para associar as c.lulas de dados com as c.lulas de cabealho. A maneira mais ade!uada de reali2ar esse procedimento . utili2ar os elementos id<headers ou scope<col. Oo primeiro, pode9se associar !ual!uer c.lula de conte'do a !ual!uer c.lula de cabealho, utili2ando o mesmo valor para o atributo id e para o headers. Oo se"undo caso, a associao . autom%tica, sendo mais utili2ado em tabelas de associao direta, onde . dado o valor ScolT para o atributo scope nos cabealhos. Oos exemplo a se"uir, . poss+vel verificar a utili2ao do id<headers e do scope<col. !Hemplo /
Kta%le summarZ`_..._J Kta%leJ KcaptionJResultado do ConcursoKLcaptionJ KtrJ Kt4 id`_va"a_JVa"aKLt4J Kt4 id`_candidato_JOome do candidatoKLt4J Kt4 id`_basico_J,rova de Conhecimento 3%sicoKLt4J Kt4 id`_especifico_J,rova de Conhecimento :spec+ficoKLt4J KLtrJ KtrJ Ktd id`_adm_ roWspan`_>_J7.cnico AdministrativoKLtdJ Ktd id`_,auloda$ilva_J,aulo da $ilvaKLtdJ Ktd headers`_adm basico ,auloda$ilva_JJKLtdJ Ktd headers`_adm especifico ,auloda$ilva_J@AKLtdJ KLtrJ KtrJ Ktd id`_,edro,ontes_J,edro ,ontesKLtdJ Ktd headers`_adm basico ,edro,ontes_JIKLtdJ Ktd headers`_adm especifico ,edro,ontes_J@GKLtdJ KLtrJ KtrJ Ktd id`_inf_J7.cnico em 8nform%ticaKLtdJ Ktd id`_Koao,ereira_JKoo ,ereiraKLtdJ Ktd headers`_inf basico Koao,ereira_JBKLtdJ Ktd headers`_inf especifico Koao,ereira_J@IKLtdJ KLtrJ KLta%leJ
--
8ig&ra G 9 Imagem da ta%ela descrita no c'digo do eHemplo /
!Hemplo Kta%le summarZ`_7abela de vendas de ma e banana efetuadas no ano de >?@?_J KcaptionJVendas >?@?KLcaptionJ KtrJ Kt4 scope`_col_J4sKLt4J Kt4 scope`_col"roup_ colspan`_>_JRio 6rande do $ulKLt4J Kt4 scope`_col"roup_ colspan`_>_J$anta CatarinaKLt4J KLtrJ KtrJ KtdJKaneiroKLtdJ Ktd scope`_col_J4aKLtdJ Ktd scope`_col_J3ananaKLtdJ Ktd scope`_col_J4aKLtdJ Ktd scope`_col_J3ananaKLtdJ KLtrJ KtrJ KtdJLeveiroKLtdJ KtdJ@???KLtdJ KtdJ@G??KLtdJ KtdJE???KLtdJ KtdJ@???KLtdJ KLtrJ KtrJ KtdJ4aroKLtdJ KtdJ>???KLtdJ KtdJ@G??KLtdJ KtdJEG??KLtdJ KtdJG??KLtdJ KLtrJ KLta%leJ
-;
8ig&ra 0. 9 Imagem da ta%ela descrita no c'digo do eHemplo -
!Hemplo ;
Kta%le summarZ`_7abela com resumo das despesas de transporte durante o ms de A"osto nas cidades de ,orto Ale"re e Llorian=polis_J KcaptionJRelat=rio de despesa de via"emKLcaptionJ KtrJ Kt4JKLt4J Kt4 id`_alimentacao_ axis`_despesas_JAlimentaoKLt4J Kt4 id`_hotel_ axis`_despesas_JXotelKLt4J Kt4 id`_transporte_ axis`_despesas_J7ransporteKLt4J KLtrJ KtrJ Kt4 id`_poa_ axis`_locali2ao_ colspan`_F_J,orto Ale"reKLt4J KLtrJ KtrJ Ktd id`_data@_ axis`_data_J>G de a"osto de >?@?KLtdJ Ktd headers`_poa data@ alimentacao_JRo EI,IFKLtdJ Ktd headers`_poa data@ hotel_JRo @@>,??KLtdJ Ktd headers`_poa data@ transporte_JRo FG,??KLtdJ KLtrJ KtrJ Ktd id`_data>_ axis`_data_J>A de a"osto de >?@?KLtdJ Ktd headers`_poa data> alimentacao_JRo >I,>JKLtdJ Ktd headers`_poa data> hotel_JRo @@>,??KLtdJ Ktd headers`_poa data> transporte_JRo FG,??KLtdJ KLtrJ KtrJ Kt4 id`_sub,oa_J$ubtotalKLt4J Ktd headers`_poa sub,oa alimentacao_JRo AG,?>KLtdJ Ktd headers`_poa sub,oa hotel_JRo >>F,??KLtdJ Ktd headers`_poa sub,oa transporte_JRo B?,??KLtdJ KLtrJ KtrJ Kt4 id`_floripa_ axis`_locali2ao_ colspan`_F_JLlorian=polisKLt4J KLtrJ KtrJ Ktd id`_dataE_ axis`_data_J>I de a"osto de >?@?KLtdJ Ktd headers`_floripa dataE alimentacao_JRo BA,>GKLtdJ Ktd headers`_floripa dataE hotel_JRo @?B,??KLtdJ Ktd headers`_floripa dataE transporte_JRo EA,??KLtdJ KLtrJ KtrJ Ktd id`_dataF_ axis`_data_J>J de a"osto de >?@?KLtdJ Ktd headers`_floripa dataF alimentacao_JRo EG,??KLtdJ Ktd headers`_floripa dataF hotel_JRo @?B,??KLtdJ Ktd headers`_floripa dataF transporte_JRo EA,??KLtdJ KLtrJ KtrJ
Modelo de +cessi%ilidade em Go erno !letr"nico e3M+G -<
Kt4 id`_subLloripa_J$ubtotalKLt4J Ktd headers`_floripa subLloripa alimentacao_JRo @E@,>GKLtdJ Ktd headers`_floripa subLloripa hotel_JRo >@J,??KLtdJ Ktd headers`_floripa subLloripa transporte_JRo I>,??KLtdJ KLtrJ KtrJ Kt4 id`_total_J7otalKLt4J Ktd headers`_total alimentacao_JRo @BA,>IKLtdJ Ktd headers`_total hotel_JRo FF>,??KLtdJ Ktd headers`_total transporte_JRo @A>,??KLtdJ KLtrJ KLta%leJ
8ig&ra 00 9 !Hemplo da ta%ela do eHemplo ; com o &so do atri%&to aHis
,ara mais detalhes ve5a o tutorial 7abelas Acess+veis documento pdf 9 @GF n3# na seo do e9 4A6 no ,ortal do ,ro"rama de 6overno :letr;nico.
(!2OM!)D+EFO /< 9 G+(+)TI(
+ L!ITC(+ ! 2OMP(!!)SFO D+S I)8O(M+E@!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 disponibili2ado informa)es suplementares !ue expli!uem ou ilustrem conte'do principal. -utra alternativa . verso simplificada do conte'do em texto. :xistem al"umas t.cnicas !ue auxiliam na melhora da inteli"ibilidade de textos, como, por exemplo/ *esenvolver apenas um t=pico por par%"rafo1
-=
Htili2ar sentenas or"ani2adas de modo simplificado para o prop=sito do conte'do su5eito, verbo e ob5eto, preferencialmente#1 *ividir sentenas lon"as em sentenas mais curtas1 :vitar o uso de 5ar"o, express)es re"ionais ou termos especiali2ados !ue possam no ser claros para todos1 Htili2ar palavras comuns no lu"ar de outras pouco familiares1 Htili2ar listas de itens ao inv.s de uma lon"a s.rie de palavras ou frases separadas por v+r"ulas1 La2er referncias claras a pronomes e outras partes do documento1 Htili2ar, preferencialmente, a vo2 ativa.
,ara mais informa)es sobre como escrever textos para Web, acesse a Cartilha de Redao Ceb na $eo do e9,C6 ,adr)es Ceb em 6overno :letr;nico# no ,ortal de 6overno :letr;nico.
(!2OM!)D+EFO /= 9 DISPO)IBILID+(
! P+L+,(+S I)2OMC)S
CM+ !_PLI2+EFO P+(+ SIGL+S, +B(!,I+TC(+S
Ver CCA6 >.? Crit.rios de $ucesso E.@.E e E.@.F *eve estar dispon+vel uma explicao !ue identifi!ue a forma completa ou o si"nificado das abreviaturas e si"las. ,ara isso, pode ser utili2ada a ta" abbr. !Hemplo
KpJ3em9vindo & Ka%%r title`_Corld Cide Ceb_ lan"`_en_JCCCKLa%%rJ^KLpJ
K% as palavras !ue podem ser amb+"uas, desconhecidas ou utili2adas de forma muito espec+fica, devero ser definidas atrav.s de um texto ad5acente, uma lista de defini)es ou estarem contidas num "loss%rio.
(!2OM!)D+EFO /> 9 I)8O(M+(
MCD+)E+ D! IDIOM+ )O 2O)T!WDO
Ver WCAG 2.0 Critrio e !"cesso 3.$.2 $e al"um elemento de uma p%"ina possuir conte'do em um idioma diferente do principal, este dever% estar identificado pelo atributo lan". :ssa recomendao no se aplica para nomes pr=prios ou termos t.cnicos !ue se5am compreendidos no contexto.
->
!Hemplo YX740
Kp xml/lan"`_de_J *a dachte der Xerr daran, ihn aus dem Lutter 2u schaffen, aber der :sel merPte, dap Pein "uter Cind Wehte, lief fort und machte sich auf den Ce" nach 3remen/ dort, meinte er, Pqnnte er 5a $tadtmusiPant Werden. KLpJ
X740
Kp lan"`_de_J *a dachte der Xerr daran, ihn aus dem Lutter 2u schaffen, aber der :sel merPte, dap Pein "uter Cind Wehte, lief fort und machte sich auf den Ce" nach 3remen/ dort, meinte er, Pqnnte er 5a $tadtmusiPant Werden. KLpJ
/$; +presentao L Design (!2OM!)D+EFO /? 3 O8!(!2!(

P(IM!I(O PL+)O
2O)T(+ST! M:)IMO !)T(! PL+)O D! 8C)DO !
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 visuali2adas, tamb.m, por pessoas com baixa viso, com cromodeficincias ou !ue utili2am monitores de v+deo monocrom%tico. Oo devero ser utili2adas ima"ens atr%s do texto bacP"round#, pois acabam por dificultar a leitura e desviar a ateno do usu%rio. A relao de contraste pode ser encontrada dividindo9se 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 E/@ . o n+vel m+nimo de contraste recomendado pela 8$-9B>F@9E. Oo entanto, levando9se em considerao a perda de percepo do contraste resultante da baixa acuidade visual, cromodeficincia ou perda de sensibilidade ao contraste devido ao envelhecimento, . recomendada a!ui uma maior relao de contraste, de, no m+nimo, F,G/@. :xistem ferramentas "ratuitas dispon+veis na Ceb !ue verificam a relao de contraste entre as cores do plano de fundo e do primeiro plano, referenciadas no cap+tulo F deste documento e para uma tabela de cores no anexo @.
-?
(!2OM!)D+EFO /G 9 )FO
CTILID+( +P!)+S 2O( OC OCT(+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, locali2ao visual, orientao ou som no devem ser utili2adas como o 'nico meio para transmitir informa)es, indicar uma ao, pedir uma resposta ao usu%rio ou distin"uir um elemento visual. !Hemplo X740
KpJ:xistem trs procedimentos para executar a tarefa/KLpJ K&lJ KliJKa href`_c_J,rocedimento AKLaJKLliJ KliJKa href`_c_ class`_recomendado_J,rocedimento 3 Recomendado#KLaJKLliJ href`_c_J,rocedimento CKLaJKLliJ KL&lJ
KliJKa
C$$
a.recomendadoe color/ cLL????1 g
8ig&ra 0/ 9 !Hemplo correto de &tiliQao de cores nos elementos
(!2OM!)D+EFO -. 9 P!(MITI(
8C)2IO)+LID+D!
(!DIM!)SIO)+M!)TO D! T!_TO S!M P!(D+ D!
Ver WCAG 2.0 Critrio e !"cesso $.#.# A p%"ina deve continuar le"+vel e funcional !uando redimensionada para at. >??l. Assim, . preciso "arantir !ue, !uando a p%"ina for redimensionada, no ocorram sobreposi)es de texto nem o aparecimento de uma barra hori2ontal.
-G
!Hemplo Hm 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 utili2a um leiaute flex+vel, isto ., & medida !ue a fonte aumenta ou diminui, o leiaute se a5usta automaticamente para !ue no ocorram S!uebrasT.
KtitleJ:xemplo 3%sico de 0eiaute 0+!uidoKLtitleJ KstVle tZpe`_text<css_J .coluna e %order3left/ @px solid "reen1 padding3left/@l1 float/ left1 #idt4/ E>l1 g crodape e %order3top6 @px solid "reen1 clear6 both1 g KLstVleJ KL4eadJ K%odVJ K40J:xemplo de RedimensionamentoKL40J Kform action`_c_J KfieldsetJ KlegendJRedimensionamento do textoKLlegendJ Kinp&t tZpe`_button_ id`_mais_ value`_Aumentar_ LJ Kinp&t tZpe`_button_ id`_mais_ value`_*iminuir_ LJ Kinp&t tZpe`_button_ id`_mais_ value`_7amanho padro_ LJ KLfieldsetJ KLformJ K4/J:ste texto est% dividido em trs blocos... KL4/J Kdi class`_coluna_J K4-J3loco @KL4-J KpJ- ob5etivo desta t.cnica . apresentar o conte'do sem !ue ocorra a introduo de uma barra hori2ontal. KLpJ KLdi J Kdi class`_coluna_J K4-J3loco >KL4-J KpJ:ste . um exemplo simples de leiaute de p%"ina !ue se adapta ao redimensionamento de texto.KLpJ KLdi J Kdi class`_coluna_J K4-J3loco EKL4-J KpJ:sta . uma t.cnica simples mas !ue pode ser implementada para leiautes mais complexos. KLpJ KLdi J Kp id`_rodape_J7exto do Rodap.KLpJ KL%odVJ KL4tmlJ
;.
8ig&ra 0- 9 !Hemplo de p1gina em se& taman4o padro
8ig&ra 0; 9 !Hemplo de p1gina redimensionada em /..c sem perda de f&ncionalidade
(!2OM!)D+EFO -0 9 DI,IDI(
+S T(!+S D! I)8O(M+EFO
Ver WCAG 2.0 Critrio e !"cesso 3.2.3 01cnica G=$4 mreas de informao devem ser divididas em "rupos f%ceis de "erenciar. As divis)es mais comuns so StopoT, Sconte'doT, SmenuT e Srodap.T. Oas p%"inas internas deve9se manter uma mesma diviso para !ue o usu%rio se familiari2e mais rapidamente com a estrutura do s+tio. [ 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 StopoT, SmenuT, Sconte'doT e Srodap.T, al.m da barra de acessibilidade contendo os atalhos.
Modelo de +cessi%ilidade em Go erno !letr"nico e3M+G ;0
!Hemplo
8ig&ra 0< 9 !Hemplo de di iso de %locos de conte]do Kdi id`_topo_J Ka href`_cinicio7opo_ id`_inicio7opo_J7opoKLaJ K40JO-4: *A 8O$787H8rs-KL40J Kdi id`_barraAcessibilidade_J KpJ3arra de AcessibilidadeKLpJ K&lJ KliJKa href`_cinicioConteudo_J8r para conte'do h@iKLaJKLliJ KliJKa href`_cinicio4enu_J8r para menu principal h>iKLaJKLliJ KliJKa href`_cbusca_J8r para 3usca hEiKLaJKLliJ KL&lJ KLdi J KLdi J Kdi id`_menu_J Ka href`_cinicio4enu_ id`_inicio4enu_ accessPeZ`_>_J4enuKLaJ K&lJ KliJ8tens de menuKLliJ KliJ...KLliJ KL&lJ KLdi J Kdi id`_conteudo_J Ka href`_cinicioConteudo_ id`_inicioConteudo_ accessPeZ`_@_JConte'doKLaJ Kform action`_c_ method`_post_J KfieldsetJ KlegendJ3uscarKLlegendJ Kla%el for`_busca_J,es!uise a!uiKLla%elJ Kinp&t tZpe`_text_ id`_busca_ name`_busca_ accessPeZ`_E_ value`_,es!uise a!ui_ LJ Kinp&t tZpe`_submit_ value`_3uscar_ class`_buscar_ name`_buscar_ LJ KLfieldsetJ KLformJ K4/J3:4 V8O*-KL4/J KpJ$e5a bem vindo ao nosso site.KLpJ KLdi J Kdi id`_rodape_J Ka href`_cinicioRodape_ id`_inicioRodape_JRodap.KLaJ KaddressJ Rua YYYKLaddressJ KLdi J
;/
A diviso em blocos de conte'do representa a base para a utili2ao dos atalhos, permitindo !ue o usu%rio tenha r%pido acesso & %rea dese5ada. ,ara mais detalhes sobre a barra de acessibilidade e os atalhos, ver o cap+t"lo 3 , (a roni6a&'o e acessibili a e nas p.ginas o Governo /e eral. [ importante !ue as diversas p%"inas de um s+tio possuam um estilo de apresentao coerente e sistem%tico, mantendo9se 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 ve2es, apresenta uma estrutura diferenciada. !Hemplo Hm s+tio possui um lo"otipo, um t+tulo, um formul%rio de pes!uisa e uma barra de nave"ao. :sses elementos aparecem na mesma ordem relativa em cada p%"ina do s+tio em !ue se repetem. :m uma das p%"inas, no h% o formul%rio de pes!uisa, mas o restante dos itens continua na mesma ordem.
(!2OM!)D+EFO -/ 9 POSSIBILIT+(
!,ID!)T!
[C! O !L!M!)TO 2OM 8O2O S!U+ ,ISC+LM!)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, linPs e elementos de formul%rio 5% apresentam a borda destacada ao receberem o foco do teclado. :ssa borda pode ser modificada via C$$, mas no dever% ser removida. !Hemplo
CSS
a/active, a/focus, a/hover e %order/ @px solid cL??1 g
HTML
K&lJ KliJKa KliJKa KliJKa KliJKa KliJKa KliJKa KliJKa KliJKa KliJKa KL&lJ href`_<acessibilidade<index.php_J,%"ina 8nicialKLaJKLliJ href`_<acessibilidade<eventos.php_J:ventosKLaJKLliJ href`_<acessibilidade<!uemsomos.php_J(uem $omosKLaJKLliJ href`_<acessibilidade<ead.php_J:nsino a *istRncia :a*#KLaJKLliJ href`_<acessibilidade<videoaulas.php_JV+deoaulasKLaJKLliJ href`_<acessibilidade<video.php_JV+deo em 0ibrasKLaJKLliJ href`_<acessibilidade<oa.php_J-b5etos de Aprendi2a"emKLaJKLliJ href`_<acessibilidade<trabalhos.php_J7rabalhos Reali2adosKLaJKLliJ href`_<acessibilidade<mapa.php_J4apa do $iteKLaJKLliJ
;-
8ig&ra 0= 9 !Hemplo de foco is el em men&
A pseudo9classe :focus . utili2ada para definir o estilo de !ual!uer elemento X740 !ue receber o foco do teclado, como linPs e elementos de formul%rio. A pseudo9classe :hover . utili2ada para definir o estilo de um elemento !uando passa9se o mouse sobre ele. K% a pseudo9 classe :active define o estilo de linP ativo. Oo caso do exemplo acima, a pseudo9classe :active foi utili2ada para definir o estilo do linP com foco para nave"adores 8nternet :xplorer I e anteriores, !ue ainda no tinham suporte & pseudo9classe :focus.
/$< M&ltimdia (!2OM!)D+EFO -- 9 8O()!2!(

+LT!()+TI,+ P+(+ ,:D!O
Ver WCAG 2.0 Critrios e !"cesso $.2.$A $.2.2A $.2.= e $.2.5 *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 e!uipamento de som, !ue dese5am apenas reali2ar a leitura do material ou no disp)em de tempo para ouvir um ar!uivo multim+dia. ,ara tanto, podem ser fornecidos/ Sit&ao 0 Hm v+deo mostra como produ2ir uma tecnolo"ia assistiva de baixo custo. Oo h% %udio, mas o v+deo inclui uma s.rie de n'meros para representar cada etapa do processo. Oesse caso, 5unto ao v+deo, deve ser disponibili2ado um ar!uivo com a alternativa de texto !ue indica o conte'do do v+deo e a descrio de cada uma das etapas.
Modelo de +cessi%ilidade em Go erno !letr"nico e3M+G ;;
8ig&ra 0> 9 ,deo contendo ar*&i o com alternati a em teHto
Sit&ao / Hma universidade oferece a opo de visuali2ar suas videoaulas com ou sem le"endas.
8ig&ra 0? 9 ,deo com legenda
Al.m de alternativa em texto e le"enda, . dese5%vel !ue os v+deos com %udio apresentem alternativa na 0+n"ua 3rasileira de $inais 0ibras#.
;<
(!2OM!)D+EFO -; 9 8O()!2!(
+LT!()+TI,+ P+(+ TCDIO
Ver WCAG 2.0 Critrios e !"cesso $.2.$A $.2.2 e $.2.= mudio "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 e!uipamento de som, !ue dese5am apenas reali2ar a leitura do material ou no disp)em de tempo para ouvir um ar!uivo multim+dia. Oeste caso, tamb.m . dese5%vel a alternativa em 0ibras. Sit&ao 0 :m um podcast o entrevistador fa2 per"untas a um especialista de sa'de. Como essas informa)es so disponibili2adas ao usu%rio do s+tio em um ar!uivo de %udio, deve ser fornecido um linP para um ar!uivo com alternativa em texto, lo"o ap=s o conte'do em %udio. Hma apresentao pr.via do conte'do dos dois tipos de ar!uivo e de sua durao tamb.m . dese5%vel.
(!2OM!)D+EFO -< 9 O8!(!2!(
+CDIOD!S2(IEFO P+(+ ,:D!O P(b3G(+,+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 ob5etiva de todas as informa)es apresentadas de forma visual e !ue no fa2em parte dos di%lo"os. :ssas descri)es so apresentadas nos espaos entre os di%lo"os e nas pausas entre as informa)es sonoras. !Hemplo Hm 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 utili2a, bem como as rea)es !ue as crianas tm durante a performance.
;=
(!2OM!)D+EFO -= 9 8O()!2!(
2O)T(OL! D! TCDIO P+(+ SOM
Ver WCAG 2.0 Critrio e !"cesso $.#.2 *eve ser fornecido um mecanismo para parar, pausar, silenciar ou a5ustar o volume de !ual!uer som !ue se reprodu2a na p%"ina.
(!2OM!)D+EFO -> 9 8O()!2!(
2O)T(OL! D! +)IM+EFO
Ver WCAG 2.0 Critrio e !"cesso 2.2.2 ,ara !ual!uer animao !ue inicie automaticamente na p%"ina devem ser fornecidos mecanismos para !ue o usu%rio possa pausar, parar ou ocultar tal animao.
/$= 8orm&l1rios (!2OM!)D+EFO -? 9 8O()!2!(

IM+G!M D! 8O(MCLT(IOS +LT!()+TI,+ !M T!_TO P+(+ OS BOT@!S D!
Ver WCAG 2.0 Critrio e !"cesso $.$.$ Ao serem utili2ados bot)es do tipo ima"em input tZpe`Tima"eT#, !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
Li"ura @B D 8ma"em de3oto enviar C=di"o/

Kinp&t tZpe`_ima"e_ name`_enviar_ src`_enviar.5p"_ altXYen iar_ LJ
K% para outros tipos de bot)es reset e button#, . preciso substituir o boto pela ima"em !ue se dese5a utili2ar atrav.s do C$$. Oesse caso, para !ue o boto se5a acess+vel, ele deve possuir um value descritivo, conforme o exemplo a se"uir.
;>
!Hemplo /
Li"ura >? D 8ma"em de 3oto 0impar X740

Kinp&t tZpe`_reset_ name`_limpar_ value`_0impar_ class`_bt0impar_ LJ
C$$
inp&t$%tLimpare %acPgro&nd/transparent url bt0impar.5p"# no9repeat left top1 #idt4/@??px1 4eig4t/FIpx1 teHt3indent/9>????px1 %order/?1 g
(!2OM!)D+EFO -G 9 +SSO2I+(
!TI[C!T+S +OS S!CS 2+MPOS
Ver WCAG 2.0 Critrio e !"cesso $.3.$ 01cnica 2##4 As eti!uetas 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
Kla%el for`_nome_JOome/ KLla%elJ Kinp&t tZpe`_text_ name`_nome_ id`_nome_ LJ Kla%elJ$exo/KLla%elJ Kinp&t tZpe`_radio_ id`_fem_ name`_sexo_ LJ Kla%el for`_fem_JLemininoKLla%elJ Kinp&t tZpe`_radio_ id`_mas_ name`_sexo_ LJ Kla%el for`_mas_J4asculinoKLla%elJ Kla%el for`_ms"_J4ensa"em/ KLla%elJ KteHtarea name`_ms"_ id`_ms"_J*i"ite sua mensa"emKLteHtareaJ Kinp&t tZpe`_checPbox_ id`_receber_ name`_receber_ LJ Kla%el for`_receber_J*ese5a receber nossa neWsletterVKLla%elJ
;?
(!2OM!)D+EFO ;. 9 !ST+B!L!2!(
Ver WCAG 2.0 Critrio e !"cesso 2.#.3
CM+ O(D!M LMGI2+ D! )+,!G+EFO
-s elementos do formul%rio devem ser distribu+dos corretamente atrav.s do c=di"o X740, criando, assim, uma se!uncia 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"ani2ados visualmente via C$$. OBS6 - atributo tabindex somente dever% ser utili2ado !uando existir real necessidade. [ importante ressaltar !ue este atributo dever% ser utili2ado com a semRntica correta e dever% ser verificado manualmente se o fluxo fornecido pelo tabindex . realmente o dese5ado.
(!2OM!)D+EFO ;0 9 )FO
P(O,O2+( +CTOM+TI2+M!)T! +LT!(+EFO )O 2O)T!_TO
Ver WCAG 2.0 Critrio e !"cesso 3.2.2 (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
Kselect id`_cidade_ name`_cidade_J Koption value`_,-A_J,orto Ale"reKLoptionJ Koption value`_3X_J3elo Xori2onteKLoptionJ Koption value`_RK_JRio de KaneiroKLoptionJ Koption value`_$,_J$o ,auloKLoptionJ KLselectJ Kinp&t tZpe`_submit_ id`_submit_ value`_:nviar_ LJ
8ig&ra /0 9 +cionamento 3 forma correta
;G
!Hemplo Incorreto
Kselect name`_cidade_ id`_cidade_ onchan"e`_location ` this.optionshthis.selected8ndexi.value1_J Koption value`_,-A_J,orto Ale"reKLoptionJ Koption value`_3X_J3elo Xori2onteKLoptionJ Koption value`_RK_JRio de KaneiroKLoptionJ Koption value`_$,_J$o ,auloKLoptionJ KLselectJ
8ig&ra // 9 +cionamento 3 forma incorreta
(!2OM!)D+EFO ;/ 9 8O()!2!(
I)ST(CE@!S P+(+ !)T(+D+ D! D+DOS
Ver WCAG 2.0 Critrio e !"cesso 3.3.2 ,ara conte'do !ue exi"ir entrada de dados por parte do usu%rio, devem ser fornecidas , !uando necess%rio, instru)es de preenchimento 5untamente com as eti!uetas label#. A utili2ao de caracteres pr.9definidos 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 5% exista#1
A semRntica do documento 5ustifi!ue a incluso de texto pr.9definido por exemplo, uma lo5a virtual !ue s= vende para determinado pa+s 5% vem com o campo pa+s preenchido#1
-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# Dms mm# Dano aaaa#.
Kla%el for`_data_J*ata dd9mm9aaaa#KLla%elJ Kinp&t tZpe`_text_ id`_data_ name`_data_ LJ
<.
(!2OM!)D+EFO ;- 9 ID!)TI8I2+(
Ver WCAG 2.0 Critrio e !"cesso 3.3.$
! 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 Hm usu%rio tenta submeter um formul%rio, mas es!uece de preencher campos obri"at=rios. Htili2ando validao client-si e 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 eti!uetas so modificas tornando9se avisos e tamb.m o foco do teclado . remetido para o primeiro campo sem preenchimento.
8ig&ra /- 9 +lerta so%re o no preenc4imento de campos o%rigat'rios
<0
8ig&ra /; 9 Indicao do erro no form&l1rio ap's a mensagem de alerta
!Hemplo / (uando o usu%rio enviar o formul%rio e es!uecer9se 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 dese5e 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 linPs Rncoras# para os campos do formul%rio !ue apresentaram erro.
</
(!2OM!)D+EFO ;; 9 +G(CP+(
2+MPOS D! 8O(MCLT(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, utili2ando9se 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 nature2a dos a"rupamentos. !Hemplo
Kform method`_post_ action`_..._J KfieldsetJ KlegendJ*ados ,essoaisKLlegendJ Kla%el for`_nome_J- seu Oome/ KLla%elJ Kinp&t tZpe`_text_ name`_nome_ id`_nome_ LJ ... KLfieldsetJ KfieldsetJ KlegendJ*ados ,rofissionaisKLlegendJ Kla%el for`_profissao_J$ua profio/KLla%elJ Kinp&t tZpe`_text_ id`_profissao_ name`_profissao_ LJ ... KLfieldsetJ KfieldsetJ KlegendJ8nforma)es de ContatoKLlegendJ Kla%el for`_email_J:9mail/ KLla%elJ Kinp&t tZpe`_text_ id`_email_ name`_email_ LJ ... KLfieldsetJ KLformJ
8ig&ra /< 9 Imagem do 8orm&l1rio
<-
,ara a"rupar elementos option dentro de um elemento de lista select, deve ser utili2ado o elemento opt"roup. !Hemplo /
Kla%el for`_instituto_J(ual a sua instituioVKLla%elJ Kselect id`_instituto_ name`_instituto_J Koptgro&p label`_Rio 6rande do $ul_J Koption value`_ifrs_J8LR$KLoptionJ Koption value`_ifsul_J8L$H0KLoptionJ Koption value`_iffarroupilha_J8LLarroupilhaKLoptionJ KLoptgro&pJ Koptgro&p label`_$anta Catarina_J Koption value`_ifsc_J8L$CKLoptionJ Koption value`_ifc_J8LCKLoptionJ KLoptgro&pJ Koptgro&p label`_,aran%_J Koption value`_ifpr_J8L,RKLoptionJ KLoptgro&pJ KLselectJ
8ig&ra /= 9 Imagem da caiHa de seleo
(!2OM!)D+EFO ;< 9 8O()!2!( 2+PT2N+
NCM+)O
Ver WCAG 2.0 Critrio e !"cesso $.$.$ 01cnicas G$#3 e G$##4 - CA,7CXA teste interativo humano, completamente automati2ado, para distin"uir computadores de seres humanos#, !uando utili2ado, dever% ser fornecido em forma de per"unta de interpretao. 7ais per"untas podero ser respondidas apenas por um ser humano. Oo entanto, . preciso "arantir !ue a per"unta no se5a 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 utili2adas per"untas de senso comum, como por exemplo, S!ual . a cor do c.uVT ou So fo"o . !uente ou frioVT. 7amb.m podem ser utili2ados testes matem%ticos. Oo entanto, . preciso tomar cuidado para !ue esses testes no se5am facilmente S!uebradosT por
Modelo de +cessi%ilidade em Go erno !letr"nico e3M+G <;
determinados pro"ramas. Hma alternativa . solicitar !ue o usu%rio escreva o resultado do teste matem%tico por extenso, como Sescreva por extenso !uanto . > a ET, ou ainda Sresponda por extenso !uanto . dois mais trsT. OBS6 - CA,7CXA dever% ser utili2ado apenas !uando estritamente necess%rio. !Hemplo
Kform action`_action.php_ method`_post_J KfieldsetJ KlegendJCA,7CXAKLlegendJ Kla%el for`_per"unta_J:screva por extenso !uanto . dois mais trs.KLla%elJ Kinp&t tZpe`_text_ id`_per"unta_ name`_per"unta_ LJ Kinp&t tZpe`_submit_ name`_enviar_ value`_:nviar^_ LJ KLfieldsetJ KLformJ
8ig&ra /> 9 !Hemplo de 2+PT2N+
,ara mais detalhes sobre o desenvolvimento de formul%rios acess+veis, ve5a o tutorial Lormul%rios Acess+veis ar!uivo pdf D @A? n3# na seo e94A6 no ,ortal do ,ro"rama de 6overno :letr;nico.
<<
-$ Padr7es de acessi%ilidade digital no Go erno 8ederal

:sta seo pretende padroni2ar 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. :ste con5unto de elementos busca "arantir o desenvolvimento de s+tios acess+veis a todas as pessoas. -s elementos a serem padroni2ados, !ue devem estar presentes em todas as p%"inas do 6overno Lederal so/ @. ,%"ina com a descrio dos recursos de acessibilidade >. 7eclas de atalho E. 3arra de acessibilidade F. Apresentao do mapa do sitio G. Apresentao de formul%rio A. Conte'do alternativo para ima"ens I. 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

:sta 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 reali2ados no s+tio e outras informa)es pertinentes a respeito de sua acessibilidade. - linP para a p%"ina contendo os recursos de acessibilidade deve ser disponibili2ado na barra de acessibilidade, a !ual ser% abordada no terceiro item desta seo.
<=
8ig&ra /? 9 !Hemplo de p1gina so%re acessi%ilidade do stio
-$/ +tal4os de teclado

*evero ser disponibili2ados 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 8nternet :xplorer, $hift a Alt no Lirefox, $hift a :sc no -pera, etc.#. -s atalhos !ue devero existir nas p%"inas do 6overno Lederal so os se"uintes/
@/ para ir ao conte'do1 >/ para ir ao menu principal1 E/ para ir & caixa de pes!uisa1
<>
As dicas dos atalhos devero ser disponibili2adas na barra de acessibilidade, abordada a se"uir e, tamb.m, na p%"ina sobre a acessibilidade do s+tio, 5% comentada anteriormente. ,ara mais detalhes ver Recomendao A.
-$- 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 Lonte normal Alto contraste Atalhos para 4enu, Conte'do e 3usca# Acessibilidade linP para a p%"ina contendo os recursos de acessibilidade do s+tio#
Exemplo de Barra de Acessibilidade

Kdi id`_acessibilidade_J K&l id`_atalhos_J KliJKa href`_ciniciodoconteudo_J8r para Conte'do h@iKLaJKLliJ KliJKa href`_ciniciodomenu_J8r para 4enu h>iKLaJKLliJ KliJKa href`_cbusca_J8r para busca hEiKLaJKLliJ KL&lJ K&l id`_botoes_J KliJKa href`_c_ id`_btnAumentarLonte_Jaumentar letraKLaJKLliJ KliJKa href`_c_ id`_btn*iminuirLonte_Jdiminuir letraKLaJKLliJ KliJKa href`_c_ id`_btn7amanhoLonte_Jtamanho normalKLaJKLliJ KliJKa href`_c_ id`_btkcontraste_Jalto contrasteKLaJKLliJ KliJKa href`_acessibilidade.html_J ,%"ina de acessibilidade KLaJKLliJ KL&lJ KLdi J
8ig&ra /G 9 !Hemplo de p1gina so%re acessi%ilidade do stio
(uando uma das ferramentas aumentar fonte, diminuir fonte e fonte normal for utili2ada, 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 se5a de, no m+nimo I/@ contraste otimi2ado#. As ferramentas utili2adas para verificar a relao de contraste entre as cores esto listadas no cap+tulo F D Recursos e Lerramentas para Acessibilidade.
Modelo de +cessi%ilidade em Go erno !letr"nico e3M+G <?
8ig&ra -. 9 !Hemplo de p1gina com alto contraste
,ara mais detalhes ver Recomenda)es >J e E?.
-$; +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 disponibili2ado em forma de lista, podendo conter !uantos n+veis forem necess%rios.
<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 utili2ar a ta" form, mesmo !ue o formul%rio possua apenas um elemento, como . o caso de uma caixa para pes!uisa.
=.
*isponibili2ar os elementos do formul%rio no X740 na ordem correta de nave"ao, sem utili2ar o tabindex.
Associar as eti!uetas label# aos seus campos input# correspondentes. Oo deve ocorrer mudana no contexto !uando um elemento receber o foco. *eve ser fornecido um boto de envio submit# para enviar os dados. Oo entanto, . necess%rio fornecer uma maneira de o usu%rio poder verificar as informa)es antes !ue elas se5am enviadas.
-s erros de entrada de dados devem ser identificados e descritos ao usu%rio. ,ara cada con5unto 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. :m um formul%rio de busca simples, por exemplo, no h% a necessidade de utili2ar o elemento fieldset<le"end, pois apresenta apenas um campo de entrada de dados.
Exemplo de formulrio de Fale Conosco

Kform method`_post_ action`_act<contato.php_J KfieldsetJ KlegendJLormul%rio de ContatoKLlegendJ Kla%el for`_nome_JOome/KLla%elJ Kinp&t tZpe`_text_ name`_nome_ id`_nome_ LJ Kla%el for`_nome_J:9mail/KLla%el J Kinp&t tZpe`_text_ name`_email_ id`_email_ LJ Kla%el for`_assunto_JAssunto/KLla%elJ Kselect name`_assunto_ id`_assunto_J Koption value`_?_ selected`_selected_J$elecione o assunto dese5adoKLoptionJ Koption value`_informacoes_J8nforma)esKLoptionJ Koption value`_su"estoes_J$u"est)esKLoptionJ Koption value`_duvidas_J*'vidasKLoptionJ KLselectJ Kla%el for`_ms"_J4ensa"em/KLla%elJ KteHtarea name`_ms"_ id`_ms"_JKLteHtareaJ Kinp&t tZpe`_submit_ name`_enviar_ id`_enviar_ value`_:nviar_ class`_bnt_ LJ KLfieldsetJ KLformJ
=0
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 verifi!ue e, se necess%rio, edite as informa)es antes de envi%9 las.
8ig&ra -- 9P1gina de 2onfirmao
,ara mais detalhes ver recomenda)es EJ a FG.
=/
-$= 2onte]do alternati o 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,7CXA, 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 linP 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 disponibili2ados preferencialmente em X740. 7amb.m podem ser disponibili2ados ar!uivos para doWnload no formato -*L, tomando9se os cuidados para !ue se5am acess+veis. $e houver necessidade de disponibili2ar ar!uivos em ,*L, dever% ser fornecida uma alternativa em X740 ou -*L. [ necess%rio, tamb.m, informar a extenso e o tamanho do ar!uivo no pr=prio texto do linP. ,ara mais detalhes ver Recomendao >>.
-$? !lementos *&e no de em ser &tiliQados
7abelas para fins de dia"ramao, conforme Recomendao I1 Atuali2a)es autom%ticas peri=dicas, conforme Recomendao @@1 $itua)es com intermitncia de tela, conforme Recomendao @F1 :lementos considerados depreciados pelo CEC, como frame, applet, blinP, mar!uee, basefont, center, dir, ali"n, font, isindex, menu, striPe, u, etc.
=-
;$ (ec&rsos e ferramentas para acessi%ilidade

OrganiQa7es e especifica7es Corld Cide Ceb Consortium CEC#/ http/<<WWW.WE.or" CCA6 >.?/ http/<<WWW.WE.or"<7R<CCA6>? CCA6 >.? portu"us#/ http/<<WWW.ilearn.com.br<7R<CCA6>? :specificao X740 G/ http/<<WWW.WE.or"<7R<htmlG :specificao X740 F.?@/ http/<<WWW.WE.or"<7R<htmlF?@ :specificao YX740 @.?/ http/<<WWW.WE.or"<7R<xhtml@ :specificao YX740 @.@/ http/<<WWW.WE.or"<7R<xhtml@@ :specificao C$$ @.?/ http/<<WWW.WE.or"<7R<C$$@ :specificao C$$ >.@/ http/<<WWW.WE.or"<7R<C$$>@ :specificao C$$ E.? em construo#/ http/<<WWW.WE.or"<$tZle<C$$<current9WorP Codificao de caracteres/ http/<<WWW.WE.or"<8nternational<-9charset.pt9br.php 7utoriais CEC/ http/<<WWW.WE.or"<>??><?E<tutorials C$$ ,a"ed media/ http/<<WWW.WE.or"<7R<R:C9C$$><pa"e.html 7he Ceb $tandards ,ro5ect/ http/<<WWW.Webstandards.or"< ,alidadores de c'digo Validador Y#X740/ http/<<validator.WE.or" Validador C$$/ http/<<5i"saW.WE.or"<css9validator Validador de linPs/ http/<<validator.WE.or"<checPlinP ,alidadores a&tom1ticos de acessi%ilidade A$:$ CCA6 e e94A6#/ http/<<WWW."overnoeletronico."ov.br<acoes9e9pro5etos<e94A6<material9de9apoio *a $ilva CA8 e e94A6#/ http/<<WWW.acessobrasil.or".br CZnthia $aZs CA8#/ http/<<WWW.cZnthiasaZs.com Xera CA8#/ http/<<WWW.sidar.or"<hera< 0ift CA8#/ http/<<WWW.usablenet.com 7AC CA8#/ http/<<WWW.taWdis.net e:xaminator CCA6 @.?#/ http/<<WWW.acesso.umic.pt<examinator.php Lunctional AccessibilitZ :valuator @.@/ http/<<fae.cita.uiuc.edu< 24ecPlists para alidao 4&mana ChecPlist 4anual de Acessibilidade 9 *esenvolvedores documento pdf 9 GG> n3# http/<<WWW."overnoeletronico."ov.br<acoes9e9pro5etos<e94A6<material9de9apoio ChecPlist 4anual de Acessibilidade D ,essoas com deficincia visual documento pdf 9 EEE n3# http/<<WWW."overnoeletronico."ov.br<acoes9e9pro5etos<e94A6<material9de9apoio
=;
8erramentas para an1lise de relao de contraste 0uminositZ Colour Contrast Ratio AnalZser online#/ http/<<5uicZstudio.com<services<luminositZcontrastratio.php Color Contrast AnalZser online#/ http/<<WWW.colorsontheWeb.com<colorcontrast.asp ChecP mu colours online#/ http/<<WWW.checPmZcolours.com< Contrast AnalZser >.>/ http/<<WWW.paciello"roup.com<resources<contrast9analZser.html Sim&lador de )a egador 3roWsershots/ http/<<broWsershots.or" Leitores de Tela KaWs for CindoWs 9 0eitor de tela americano produ2ido pela Lreedom $cientific/ http/<<WWW.freedomscientific.com OV*A 9 0eitor de tela "ratuito e de c=di"o aberto para CindoWs/ http/<<WWW.nvda9pro5ect.or" -rca 9 0eitor de tela "ratuito e de c=di"o aberto para 0inux/ http/<<live."nome.or"<-rca Virtual Vision 9 0eitor de tela nacional fabricado pela 4icropoWer/ http/<<WWW.micropoWer.com.br Voice-ver 9 0eitor de tela para 4AC -$/ http/<<WWW.apple.com<br<accessibilitZ<voiceover CindoWs :Zes 9 0eitor de tela canadense fabricado pela 6C 4icro/ http/<<WWW."Wmicro.com<CindoW9:Zes *-$V-Y/ 8nterface especiali2ada desenvolvida pela HLRK/ http/<<intervox.nce.ufr5.br *escrio dos 0eitores de 7ela documento pdf 9 >.I@ 43# http/<<WWW."overnoeletronico."ov.br<acoes9e9pro5etos<e94A6<material9de9apoio Avaliao dos ,ontos de Lra"ilidades em 0eitores de 7ela documento pdf 9 @.FI 43# http/<<WWW."overnoeletronico."ov.br<acoes9e9pro5etos<e94A6<material9de9apoio )a egadores TeHt&ais 0Znx/ http/<<lZnx.broWser.or" 0Znx VieWer simulador#/ http/<<WWW.delorie.com<Web<lZnxvieW.html Sim&lador para 2eg&eira 2rom1tica RDaltonismoS VischecP/ http/<<WWW.vischecP.com< T&toriais - uso correto do texto alternativo documento pdf 9 >EB n3# http/<<WWW."overnoeletronico."ov.br<acoes9e9pro5etos<e94A6<material9de9apoio 7abelas Acess+veis documento pdf 9 @GE n3# http/<<WWW."overnoeletronico."ov.br<acoes9e9pro5etos<e94A6<material9de9apoio Lormul%rios Acess+veis documento pdf 9 @GB n3# http/<<WWW."overnoeletronico."ov.br<acoes9e9pro5etos<e94A6<material9de9apoio
Modelo de +cessi%ilidade em Go erno !letr"nico e3M+G =<
<$ Leit&ra complementar

,adr)es 3rasil e96ov http/<<WWW."overnoeletronico."ov.br<acoes9e9pro5etos<padroes9brasil9e9"ov CCA6 >.? http/<<WWW.ilearn.com.br<7R<CCA6>? 7.cnicas para as CCA6 >.? http/<<WWW.acesso.umic.pt<WE<7R<CCA6>?97:CX$< C$$ e Ceb $tandards http/<<mau5or.com< R:OA,8 D ,ro5eto de Acessibilidade Virtual http/<<bento.ifrs.edu.br<acessibilidade< Acessibilidade Ceb/ Y#X740, C$$, $cripts e Hsabilidade para 7odos http/<<WWW.acessibilidadele"al.com< Acesso *i"ital http/<<WWW.acessodi"ital.net Ceb AccessibilitZ in 4ind http/<<Webaim.or" CEC 3rasil http/<<WEc.br C0L $tandards Canad%# http/<<WWW.tbs9sct."c.ca<clf>9nsi><index9en".asp $ection G?J :stados Hnidos# http/<<WWW.sectionG?J."ov< O*A 8rlanda# http/<<WWW.nda.ie<cntm"mtneW.nsf
==
=$ Gloss1rio
+cessi%ilidade6 $i"nifica permitir o acesso por todos, independente do tipo de usu%rio, situao ou ferramenta. +cessi%ilidade d Ae%6 Criar ou tornar as ferramentas e p%"inas Ceb acess+veis a um maior n'mero de usu%rios, inclusive pessoas com deficincia. +gente de Cs&1rio6 (ual!uer softWare !ue recupera e apresenta conte'do Ceb para seus usu%rios, possibilitando !ue o usu%rio intera5a com o conte'do Ceb. +tri%&to6 -s atributos servem para definir uma propriedade de um elemento Y#X740. 2SS R2ascading StVle S4eets 9 8ol4as de estilo em cascataS6 0in"ua"em !ue descreve a apresentao, visual ou sonora, de um documento. Leitor de tela6 $oftWare !ue fornece informa)es atrav.s de s+ntese de vo2 sobre os elementos exibidos na tela do computador. :sses softWares intera"em com o sistema operacional, capturando as informa)es apresentadas na forma de texto e transformando9as em resposta falada atrav.s de um sinteti2ador de vo2. ,ara nave"ar utili2ando um leitor de tela, o usu%rio fa2 uso de comandos pelo teclado. - leitor de tela tamb.m pode transformar o conte'do em informao t%til, exibida dinamicamente em 3raille por um hardWare chamado de linha ou displaZ 3raille, servindo, em especial, a usu%rios com surdoce"ueira. )a egador6 ,ro"rama !ue permite ao usu%rio consultar e intera"ir com o material publicado na Ceb. )a egador teHt&al6 7ipo 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 utili2ado com leitores de tela por pessoas com deficincia visual e, tamb.m, por pessoas !ue acessam a 8nternet com conexo lenta. Padr7es Ae% RAe% StandardsS6 ,adr)es Ceb so re"ras de tecnolo"ia definidas pelo CEC e outros =r"os da %rea utili2ados para criar e interpretar o conte'do Ceb. Podcast6 Ar!uivo ou uma s.rie de ar!uivos de %udio di"ital, "eralmente em formato 4,E ou AAC este pode conter ima"ens est%ticas e linPs#, publicada atrav.s de podcastin" forma de publicao de ar!uivos de m+dia di"ital pela 8nternet, atrav.s de um feed R$$#. Tag6 C=di"o usado para marcar o in+cio e o fim de um elemento Y#X740.
=>
Tecnologia assisti a6 refere9se ao con5unto de artefatos disponibili2ados &s pessoas com deficincia, !ue contribui para prover9lhes 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 aprendi2ado, trabalho e inte"rao na vida familiar, com os ami"os e na sociedade em "eral. A-2 RAorld Aide Ae% 2onsorti&mS6 Cons=rcio de Rmbito internacional com a finalidade de desenvolver especifica)es, "uias e ferramentas para Ceb. A+I6 R+ccessi%ilitV Initiati e 3 Iniciati a de +cessi%ilidade na Ae%S6 7em como ob5etivo desenvolver protocolos !ue melhorem a interoperabilidade e promovam a evoluo da CCC. A2+G RAe% 2ontent +ccessi%ilitV G&idelines6 (ecomenda7es de +cessi%ilidade para 2onte]do Ae%S6 Abran"e diversas recomenda)es com a finalidade de tornar o conte'do Ceb mais acess+vel. Ae%cast6 7ransmisso de %udio e v+deo por meio da 8nternet ou redes corporativas para um "rupo de pessoas, simultaneamente. _NTML R!Htensi%le NVperTeHt MarP&p Lang&ageS6 [ a lin"ua"em X740 reformulada para se"uir as re"ras do Y40. _ML R!Htensi%le MarP&p Lang&ageS6 Hma lin"ua"em de marcao semelhante & X740, mas !ue permite a descrio de dados definidos por elementos de pro"ramao.
=?
>$ +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 F,G/@. 2ores e.Ge.2e.8e-Ge-2e-8e=Ge=2e=8eGGeG2eG8contrastantes com preto e.G= e.GG e.G2 e.2= e.2G e.22 e.8= e.8G e.82 e-G= e-GG e-G2 e-2= e-2G e-22 e-8= e-8G e-82 e=G= e=2= e=8= eGG= eG2= eG8= e=GG e=2G e=8G eG=G eGGG eG2G eG8G e2-G e2=G e2GG e22G e28G e8.G e8-G e8=G e8GG e82G e88G e=G2 e=22 e=82 eG=2 eGG2 eG22 eG82 e2-2 e2=2 e2G2 e222 e282 e8.2 e8-2 e8=2 e8G2 e822 e882
e.G. e.2. e.8. e-G. e-2. e-8. e=G. e=2. e=8. eGG. eG2. eG8.
e2=. e2G. e22. e28. e8.. e8-. e8=. e8G. e82. e88.
e2=e2Ge22e28e8.e8-e8=e8Ge82e88-
e2== e2G= e22= e28= e8.= e8-= e8== e8G= e82= e88=
e.G8 e.28 e.88 e-G8 e-28 e-88 e==8 e=G8 e=28 e=88 eG=8 eGG8 eG28 eG88 e2.8 e2-8 e2=8 e2G8 e228 e288 e8.8 e8-8 e8=8 e8G8 e828 e888
Ta%ela 0 9 2ores contrastantes com a cor preta
e... e.-. e.=. e-.. e--. e-=. e=.. e=-. e==. eG.. eG-. eG=.
e2.. e2-.
2ores e..e.-e.=e-.e--e-=e=.e=-e==eG.eG-eG=e2.e2--
contrastantes e..= e..G e.-= e.-G e.== e.=G e-.= e-.G e--= e--G e-== e-=G e=.= e=.G e=-= e=-G e=== e==G eG.= eG.G eG-= eG-G eG==
e2.= e2-= e2.G e2-G
com %ranco e..2 e.-2 e.=2 e-.2 e--2 e-=2 e=.2 e=-2 e==2 eG.2 eG-2
e2.2
e..8 e.-8 e.=8 e-.8 e--8 e-=8 e=.8 e=-8 e==8 eG.8 eG-8
Ta%ela / 9 2ores contrastantes com a cor %ranca
=G

ACESSIBILIDADEemag 3

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

ACESSIBILIDADEemag 3

Enviado por

Direitos autorais:

Formatos disponíveis

Ministrio do Planejamento, Oramento e Gesto Secretaria de Logstica e Tecnologia da Informao Departamento de Go erno !

Modelo de +cessi%ilidade em Go erno !letr"nico

C*H ??F.G/EG C** ??F.AIJ

Compartilhar copiar, distribuir e transmitir a obra. Remixar criar obras derivadas.

So% as seg&intes condi7es6

8icando claro *&e6

Modelo de +cessi%ilidade em Go erno !letr"nico e3M+G

!*&ipe do DG! 9 Departamento de Go erno !letr"nico

Modelo de +cessi%ilidade em Go erno !letr"nico e3M+G

Modelo de +cessi%ilidade em Go erno !letr"nico e3M+G

0$0 So%re a erso -$.

Modelo de +cessi%ilidade em Go erno !letr"nico e3M+G

Modelo de +cessi%ilidade em Go erno !letr"nico e3M+G

0$- O acesso de pessoas com defici5ncia

Modelo de +cessi%ilidade em Go erno !letr"nico e3M+G

0$; O processo para desen ol er &m stio acess el

Modelo de +cessi%ilidade em Go erno !letr"nico e3M+G

Modelo de +cessi%ilidade em Go erno !letr"nico e3M+G

Modelo de +cessi%ilidade em Go erno !letr"nico e3M+G

Modelo de +cessi%ilidade em Go erno !letr"nico e3M+G

/$0 Marcao (!2OM!)D+EFO 0 9 (!SP!IT+(

Modelo de +cessi%ilidade em Go erno !letr"nico e3M+G

D! 8O(M+ LMGI2+ ! S!MO)TI2+

2O((!T+M!)T! OS ):,!IS D! 2+B!E+LNO

Ver WCAG 2.0 Critrios e !"cesso $.3.$ e 2.#.$0

Modelo de +cessi%ilidade em Go erno !letr"nico e3M+G

8ig&ra 0 9 !Hemplo de &tiliQao dos n eis de tt&lo

Modelo de +cessi%ilidade em Go erno !letr"nico e3M+G

D! 8O(M+ LMGI2+ ! I)TCITI,+ + L!ITC(+ !

Modelo de +cessi%ilidade em Go erno !letr"nico e3M+G

!Hemplo incorreto do &so do tabindex

-rdem de tabulao errada, conferida pelo tabindex/

(!2OM!)D+EFO < 3 DISPO)IBILID+(

TOD+S +S 8C)E@!S D+ PTGI)+ ,I+ T!2L+DO

! ento do mo&se onmousedown onmouseup onclick* onmouseover onmouseout

! ento do teclado onkeydown onkeyup onkeypress onfocus* onblur*

Modelo de +cessi%ilidade em Go erno !letr"nico e3M+G

O)2O(+S P+(+ I( DI(!TO + CM BLO2O D! 2O)T!WDO

Ver WCAG 2.0 Critrio e !"cesso 2.#.$

4enu ,rincipal da ,%"ina

Lormul%rio de pes!uisa do s+tio pode estar em !ual!uer lu"ar no s+tio#

(!2OM!)D+EFO > 9 )FO

CTILID+( T+B!L+S P+(+ DI+G(+M+EFO

Modelo de +cessi%ilidade em Go erno !letr"nico e3M+G

+B(I( )O,+S I)STO)2I+S S!M + SOLI2IT+EFO DO CSCT(IO

/$/ 2omportamento RDOMS (!2OM!)D+EFO 0. 9 G+(+)TI(

,%"ina Kava$cript .5s#

!Hemplo incorreto ,%"ina X740

(!2OM!)D+EFO 003 )FO

2(I+( PTGI)+S 2OM +TC+LID+EFO +CTOMTTI2+ P!(IMDI2+

Modelo de +cessi%ilidade em Go erno !letr"nico e3M+G

CTILID+( (!DI(!2IO)+M!)TO +CTOMTTI2O D! PTGI)+S

+LT!()+TI,+ P+(+ MODI8I2+( LIMIT! D! T!MPO

Modelo de +cessi%ilidade em Go erno !letr"nico e3M+G

I)2LCI( SITC+E@!S 2OM I)T!(MIT\)2I+ D! T!L+

(!2OM!)D+EFO 0< 9 +SS!GC(+(

O 2O)T(OL! DO CSCT(IO SOB(! +S +LT!(+E@!S

/$- 2onte]do L Informao (!2OM!)D+EFO 0= 9 ID!)TI8I2+(

Modelo de +cessi%ilidade em Go erno !letr"nico e3M+G

!Hemplo :m X740 F.?@

(!2OM!)D+EFO 0> 9 O8!(!2!(

CM T:TCLO D!S2(ITI,O ! I)8O(M+TI,O ^ PTGI)+

(!2OM!)D+EFO 0?9 DISPO)IBILID+(