E MAG Modelo de Acessibilidade Egov v3

Ministrio do Planejamento, Oramento e Gesto Secretaria de Logstica e Tecnologia da Informao Departamento de Governo Eletrnico www.governoeletronico.gov.
br Ministrio da Educao Secretaria de Educao Profissional e Tecnolgica Rede Nacional de Pesquisa e Inovao em Tecnologias Digitais Projeto de Acessibilidade Virtual
Verso 3.0
Modelo de Acessibilidade em Governo Eletrnico
Agosto de 2011
Brasil. Ministrio do Planejamento, Oramento e Gesto. Secretaria de Logstica e Tecnologia da Informao e-MAG Modelo de Acessibilidade em Governo Eletrnico/ Ministrio do Planejamento, Oramento e Gesto, Secretaria de Logstica e Tecnologia da Informao; Ministrio da Educao, Secretaria de Educao Profissional e Tecnolgica - Braslia : MP, SLTI, 2011. 69 p.: color. 1. Acessibilidade 2. Sites da Web Projetos. 3. Sites na Web Desenvolvimento 4. Programao para Internet 5. Informtica - Servio Pblico I. Ttulo.
CDU 004.5:35 CDD 004.678
Esta obra est licenciada por uma Licena Creative Commons - Atribuio Partilha nos Mesmos Termos 3.0 No Adaptada http://creativecommons.org/licenses/by-sa/3.0/br/ Voc tem a liberdade de:

Compartilhar copiar, distribuir e transmitir a obra. Remixar criar obras derivadas.
Sob as seguintes condies:
Atribuio Voc deve creditar a obra da forma especificada pelo autor ou licenciante (mas no de maneira que sugira que estes concedem qualquer aval a voc ou ao seu uso da obra). Compartilhamento pela mesma licena Se voc alterar, transformar ou criar em cima desta obra, voc poder distribuir a obra resultante apenas sob a mesma licena, ou sob uma licena similar presente.
Ficando claro que:
Renncia Qualquer das condies acima pode ser renunciada se voc obtiver permisso do titular dos direitos autorais. Domnio Pblico Onde a obra ou qualquer de seus elementos estiver em domnio pblico sob o direito aplicvel, esta condio no , de maneira alguma, afetada pela licena. Outros Direitos Os seguintes direitos no so, de maneira alguma, afetados pela licena: Limitaes e excees aos direitos autorais ou quaisquer usos livres aplicveis; Os direitos morais do autor; Direitos que outras pessoas podem ter sobre a obra ou sobre a utilizao da obra, tais como direitos de imagem ou privacidade. Aviso Para qualquer reutilizao ou distribuio, voc deve deixar claro a terceiros os termos da licena a que se encontra submetida esta obra
Modelo de Acessibilidade em Governo Eletrnico e-MAG
Agradecimentos
O Departamento de Governo Eletrnico agradece a: Bruna Poletto Salton, Juclia Poletto Almeida, Agebson Rocha Faanha, Andr Luiz Rezende, Andra Poletto Sonza, ngela Guimares, Felipe Zap, Gleison Samuel do Nascimento, Jorge Fiore de Oliveira Junior, Jlia Marques Carvalho da Silva, Marco Antonio de Queiroz, Marcus Vinicius Bennett Ferreira, Maurcio Covolan Rosito, Reinaldo Ferraz, Renato Busatto, Ricardo Moro, Ueslei Paterno e Woquiton Fernandes, que tornaram a verso 3.0 do e-MAG possvel. O DGE tambm agradece a: Andre Pimenta Freire Carol Scarton Diego Roger Ramos Freitas Edercio Marques Bento Jorge Fernandes Leonelo Dell Anhol Almeida Maria Ceclia Calani Baranauskas Thiago Prado de Campos Vagner Figueredo de Santana
Pela sua contribuio, via Consulta Pblica, com sugestes, esclarecimentos e correes para o presente documento.
Equipe do DGE Departamento de Governo Eletrnico
ndice
1. Introduo.............................................................................................................................. 5 1.1 Sobre a verso 3.0............................................................................................................ 5 1.2 Legislao......................................................................................................................... 6 1.3 O acesso de pessoas com deficincia................................................................................ 7 1.4 O processo para desenvolver um stio acessvel................................................................ 8 2. Recomendaes de acessibilidade........................................................................................ 12 2.1 Marcao......................................................................................................................... 13 2.2 Comportamento (DOM)................................................................................................... 21 2.3 Contedo / Informao.................................................................................................... 24 2.4 Apresentao / Design..................................................................................................... 38 2.5 Multimdia....................................................................................................................... 44 2.6 Formulrios..................................................................................................................... 47 3. Padres de acessibilidade digital no Governo Federal........................................................... 56 3.1 Pgina de descrio com os recursos de acessibilidade.................................................. 56 3.2 Atalhos de teclado........................................................................................................... 57 3.3 Barra de acessibilidade................................................................................................... 58 3.4 Apresentao do mapa do stio....................................................................................... 59 3.5 Apresentao de formulrio............................................................................................ 60 3.6 Contedo alternativo para imagens................................................................................. 63 3.7 Apresentao de documentos......................................................................................... 63 3.8 Elementos que no devem ser utilizados......................................................................... 63 4. Recursos e ferramentas para acessibilidade......................................................................... 64 5. Leitura complementar........................................................................................................... 66 6. Glossrio............................................................................................................................... 67 7. Anexo 1 Tabela de Contraste de Cores .............................................................................. 69
1. Introduo
O governo brasileiro, comprometido com a incluso, buscou, atravs da elaborao do modelo de acessibilidade do governo eletrnico, facilitar o acesso para todas as pessoas s informaes e servios disponibilizados nos stios e portais do governo. Assim, a primeira verso do e-MAG, elaborada pelo Departamento de Governo Eletrnico em parceria com a ONG Acessibilidade Brasil, foi disponibilizada para consulta pblica em 18 de janeiro de 2005, e a verso 2.0 j com as alteraes propostas, em 14 de dezembro do mesmo ano. Em 2007, a Portaria n 3, de 7 de maio, institucionalizou o e-MAG no mbito do sistema de Administrao dos Recursos de Informao e Informtica SISP, tornando sua observncia obrigatria nos stios e portais do governo brasileiro.
1.1 Sobre a verso 3.0

Para a elaborao da verso 2.0 do e-MAG foi realizado um estudo das regras de acessibilidade atravs de um mtodo comparativo entre as normas adotadas por diversos pases, como a Section 508 do governo dos Estados Unidos, os padres CLF do Canad, as diretrizes irlandesas de acessibilidade e documentos de outros pases, entre eles Portugal e Espanha. Tambm foi realizada uma anlise detalhada das regras e pontos de verificao do rgo internacional WAI/W3C, presentes na WCAG 1.0. A verso 2.0 do e-MAG dividia-se em duas partes: 1. a cartilha tcnica, voltada a desenvolvedores de stios, apresentando detalhadamente a proposta de implementao das recomendaes de acessibilidade em stios do governo; 2. a viso do cidado, voltada a todos os cidado brasileiros, apresentando o modelo de acessibilidade de forma simples e de fcil compreenso. A diviso do e-MAG apresentou alguns inconvenientes durante o processo de disseminao do Modelo, como a dificuldade das pessoas entenderem as reas da Viso do Cidado e seu relacionamento com a aplicao efetiva da acessibilidade. O aprendizado durante os seis anos da verso 2.0 do e-MAG e o lanamento da verso 2.0 do WCAG marcaram o caminho para a reviso do Modelo. A reviso do modelo e a nova verso foi desenvolvida atravs da parceria entre o Departamento de Governo Eletrnico e o Projeto de Acessibilidade Virtual da RENAPI (Rede de Pesquisa e Inovao em Tecnologias Digitais). Tambm, para a elaborao dessa nova verso, foram consideradas as contribuies de especialistas na rea da acessibilidade.
A elaborao da verso 3.0 foi embasada na verso anterior do e-MAG, apoiando-se na WCAG 2.0, lanada em dezembro de 2008, e considerando as novas pesquisas na rea de acessibilidade Web. Apesar de utilizar a WCAG como referncia, o e-MAG 3.0 foi desenvolvido e pensado para as necessidades locais, visando atender as prioridades brasileiras e mantendose alinhado ao que existe de mais atual neste segmento. Seguindo a diretriz do programa de Governo Eletrnico de promover a Cidadania, o documentoproposta passou por Consulta Pblica no perodo de novembro de 2010 a janeiro de 2011, recebendo contribuies tanto pelo sistema de Consulta Pblica do Portal do Programa , quanto por e-mail. O nmero de contribuies superou as expectativas e a avaliao criteriosa destas impactou na data de entrega do modelo, que teve seu cronograma estendido. Assim, aps um longo perodo de maturao e estudo, entregue sociedade brasileira a terceira verso do Modelo de Acessibilidade em Governo Eletrnico, o e-MAG verso 3.0, atualizado e mais abrangente no que diz respeito a tornar acessvel o contedo do governo brasileiro na Web. A verso 3.0 do e-MAG apresentada em apenas um documento, no havendo separao entre viso tcnica e viso do cidado. Outra deciso foi o abandono dos nveis de prioridade A, AA e AAA, visto que o padro voltado as pginas do Governo, no sendo permitido excees com relao ao cumprimento das recomendaes. Alm disso, no e-MAG 3.0 foi includa a seo chamada Padronizao de acessibilidade nas pginas do governo federal, com o intuito de padronizar elementos de acessibilidade que devem existir em todos os stios e portais do governo.
1.2 Legislao
Esto listados abaixo alguns dos principais documentos, que fazem parte da legislao que norteia o processo de promoo da acessibilidade e a implementao do e-MAG: 1. Decreto nmero 5296, de 2 de dezembro de 2004, que regulamenta as leis n 10.048, de 8 de novembro de 2000, que d prioridade de atendimento s pessoas que especifica, e 10.098, de 19 de dezembro de 2000, que estabelece normas gerais e critrios bsicos para a promoo da acessibilidade das pessoas com deficincia, e d outras providncias; 2. Comit CB-40 da ABNT, que se dedica normatizao no campo de acessibilidade, atendendo aos preceitos de desenho universal. O Comit possui diversas comisses, definindo normas de acessibilidade em todos os nveis, desde o espao fsico at o virtual;
3. Decreto n 6949, de 25 de agosto de 2009, que promulga a Conveno Internacional sobre os Direitos das Pessoas com Deficincia elaborada pelas Naes Unidas em 30 de maro de 2007, definindo, em seu artigo 9, a obrigatoriedade de promoo do acesso de pessoas com deficincia a novos sistemas e tecnologias da informao e comunicao, inclusive Internet. 4. Portaria n 3, de 7 de maio de 2007, que institucionalizou o e-MAG no mbito do sistema de Administrao dos Recursos de Informao e Informtica SISP, tornando sua observncia obrigatria nos stios e portais do governo brasileiro.
1.3 O acesso de pessoas com deficincia

O computador e a Internet representam um enorme passo para a incluso de pessoas com deficincia, promovendo autonomia e independncia. Mas como pessoas com deficincia utilizam o computador? Muitas vezes, a deficincia no severa o suficiente a ponto de tornarse uma barreira utilizao do computador. Entretanto, na maioria das pginas da Web, as pessoas cegas ou com baixa viso, pessoas com deficincia auditiva, com dificuldade em utilizar o mouse, por exemplo, encontram inmeras barreiras de acessibilidade que dificultam ou impossibilitam o acesso aos seus contedos. No que se refere a acesso ao computador, as quatro principais situaes vivenciadas por usurios com deficincia so: Acesso ao computador sem mouse: no caso de pessoas com deficincia visual, dificuldade de controle dos movimentos, paralisia ou amputao de um membro superior; Acesso ao computador sem teclado: no caso de pessoas com amputaes, grandes limitaes de movimentos ou falta de fora nos membros superiores; Acesso ao computador sem monitor: no caso de pessoas com cegueira; Acesso ao computador sem udio: no caso de pessoas com deficincia auditiva.
No entanto, esses no so os nicos casos que devem ser considerados quando se pensa em acessibilidade na Web. Muitas pessoas apresentam outras limitaes relacionadas memria, resoluo de problemas, ateno, compreenso verbal, leitura e lingustica, compreenso matemtica e compreenso visual. Uma pessoa com dislexia, por exemplo, pode apresentar dificuldade de leitura de uma pgina devido a um desenho inadequado. Por isso, um stio desenvolvido considerando a acessibilidade deve englobar diferentes nveis de escolaridade,
faixa etria e pouca experincia na utilizao do computador, bem como ser compatvel com as diversas tecnologias utilizadas para acessar uma pgina da Web. Um dos aliados das pessoas com deficincia para o uso do computador so os recursos de tecnologia assistiva, que auxiliam na realizao de tarefas antes muito difceis ou impossveis de realizar, promovendo, desta maneira, a autonomia, independncia, qualidade de vida e incluso social de pessoas com deficincia. Existe atualmente uma enorme gama de recursos de tecnologia assistiva, desde artefatos simples at objetos ou softwares mais sofisticados e especficos, de acordo com a necessidade de cada pessoa. Uma pessoa com limitado movimento das mos, por exemplo, pode utilizar um teclado adaptado que contm teclas maiores ou um mouse especial para operar o computador. J as pessoas com baixa viso podem recorrer a recursos como ampliadores de tela, enquanto usurios cegos podem utilizar softwares leitores de tela para fazer uso do computador. Apesar de sua enorme importncia na promoo da acessibilidade s pessoas com deficincia, os recursos de tecnologia assistiva, por si s, no garantem o acesso ao contedo de uma pgina da Web. Para tal, necessrio que a pgina tenha sido desenvolvida de acordo com os padres Web (Web Standards) e as recomendaes de acessibilidade, os quais sero abordados ao longo deste documento. Dentro desse contexto, este documento objetiva garantir que o processo de acessibilidade dos stios do governo brasileiro seja conduzido de forma padronizada, de fcil implementao, coerente com as necessidades brasileiras e em conformidade com os padres internacionais.
1.4 O processo para desenvolver um stio acessvel

A acessibilidade Web refere-se a garantir acesso facilitado a qualquer pessoa, independente das condies fsicas, dos meios tcnicos ou dispositivos utilizados. No entanto, ela depende de vrios fatores, tanto de desenvolvimento quanto de interao com o contedo. O processo para desenvolver um stio acessvel realizado em trs passos: 1. Seguir os padres Web; 2. Seguir as diretrizes ou recomendaes de acessibilidade; 3. Realizar a avaliao de acessibilidade.
PRIMEIRO
PASSO:
PADRES WEB
Para se criar um ambiente online efetivamente acessvel necessrio, primeiramente, que o cdigo esteja dentro dos padres Web internacionais definidos pelo W3C. Os padres de desenvolvimento Web do W3C, ou Web Standards, so um conjunto de recomendaes que visa padronizar o contedo Web, possibilitando melhores prticas no desenvolvimento de pginas da Web. Uma pgina desenvolvida de acordo com os padres Web deve estar em conformidade com as normas HTML, XML, XHTML e CSS, seguindo as regras de formatao sinttica. Alm disso, muito importante que o cdigo seja semanticamente correto, ou seja, que cada elemento seja utilizado de acordo com um significado apropriado, valor e propsito. A conformidade com os padres Web permite que qualquer sistema de acesso informao interprete a mesma adequadamente e da mesma forma, seja por meio de navegadores, leitores de tela, dispositivos mveis (celulares, tablets, etc.) ou agentes de software (mecanismos de busca ou ferramentas de captura de contedo). Pginas que no possuem um cdigo de acordo com os padres do W3C apresentam comportamento imprevisvel, e na maioria das vezes impedem ou pelo menos dificultam o acesso. Para conhecer as boas prticas em desenvolvimento de stios de acordo com os padres, ver Cartilha de Codificao dos Padres Brasil e-GOV, disponvel em: http://www.governoeletronico.gov.br/acoes-e-projetos/padroes-brasil-e-gov
SEGUNDO
PASSO:
DIRETRIZES
OU
RECOMENDAES
DE
ACESSIBILIDADE
As diretrizes ou recomendaes de acessibilidade explicam como tornar o contedo Web acessvel a todas as pessoas, destinando-se aos criadores de contedo Web (autores de pginas e criadores de stios) e aos programadores de ferramentas para criao de contedo. Um dos principais documentos nessa rea a WCAG, atualmente em sua verso 2.0, desenvolvida pelo consrcio W3C a partir da criao do WAI (Web Accessibility Initiative), contendo as recomendaes de acessibilidade para contedo Web. Em nvel nacional, o e-MAG o documento que contm as diretrizes ou recomendaes que norteiam o desenvolvimento de stios e portais acessveis.
TERCEIRO
PASSO:
AVALIAO
DE
ACESSIBILIDADE
Aps a construo do ambiente online de acordo com os padres Web e as diretrizes de acessibilidade, necessrio test-lo para garantir sua acessibilidade. No caso dos padres Web, h um validador automtico disponibilizado pelo prprio W3C (ver seo de Recursos). No que diz respeito s diretrizes de acessibilidade, necessrio realizar, inicialmente, uma validao automtica atravs de validadores, que so softwares ou servios online que ajudam a
Modelo de Acessibilidade em Governo Eletrnico e-MAG 9
determinar se um stio respeitou ou no as recomendaes de acessibilidade, gerando um relatrio de erros. Uma das ferramentas que podem ser utilizadas o ASES, avaliador e simulador de acessibilidade em stios, cujos instrumentos permitem avaliar, simular e corrigir a acessibilidade de pginas, stios e portais, viabilizando a adoo da acessibilidade por rgos do governo. Alm do ASES, existem outros validadores automticos (para mais informaes, ver seo de Recursos deste documento). preciso salientar que, apesar de tornarem a avaliao de acessibilidade mais rpida e menos trabalhosa, os validadores automticos por si s no determinam se um stio est ou no acessvel. Para uma avaliao efetiva, ser necessria uma posterior validao manual. A validao manual necessria porque nem todos os problemas de acessibilidade em um stio so detectados mecanicamente pelos validadores. Para a validao manual, so utilizados checklists de validao humana. Assim, os passos sugeridos para a avaliao de acessibilidade em um stio so os seguintes: 1. Validar os cdigos do contedo HTML e das folhas de estilo; 2. Verificar o fluxo de leitura da pgina para tal, utilizar um navegador textual, como o Lynx, ou um leitor de tela (recomendamos o NVDA ou ORCA). Para maiores detalhes, ver documento Descrio dos Leitores de Tela, disponvel em: http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG/material-de-apoio. 3. Verificar o fluxo de leitura da pgina sem estilos, sem script e sem as imagens; 4. Verificar as funcionalidades da barra de acessibilidade, aumentando e diminuindo a letra, modificando o contraste, etc.; 5. Realizar a validao automtica de acessibilidade utilizando o ASES e outros avaliadores automticos sugeridos no Captulo 4; 6. Realizar a validao manual, utilizando os checklists de validao humana disponveis em http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG/material-de-apoio. A validao manual uma etapa essencial na avaliao de acessibilidade de um stio, j que os validadores automticos no so capazes de detectar todos os problemas de acessibilidade em um stio, pois muitos aspectos requerem um julgamento humano. Por exemplo, validadores automticos conseguem detectar se o atributo para descrever imagens foi utilizado em todas as imagens do stio, mas somente uma pessoa poder verificar se a descrio da imagem est adequada ao seu contedo. Para realizar uma validao manual efetiva, o desenvolvedor dever
10
ter conhecimento sobre as diferentes tecnologias, as barreiras de acessibilidade enfrentadas por pessoas com deficincia e as tcnicas ou recomendaes de acessibilidade. Outra etapa essencial da validao de uma pgina a realizao de testes com usurios reais (pessoas com deficincia ou limitaes tcnicas). Um usurio real poder dizer se um stio est realmente acessvel, compreensvel e com boa usabilidade e no simplesmente tecnicamente acessvel. Quanto maior e mais diversificado o nmero de usurios reais participando da avaliao de acessibilidade, mais eficaz e robusto ser o resultado.
11
2. Recomendaes de acessibilidade
Os padres de acessibilidade compreendem recomendaes ou diretrizes que visam tornar o contedo Web acessvel a todas as pessoas, inclusive s pessoas com deficincia, destinando-se aos autores de pginas, projetistas de stios e aos desenvolvedores de ferramentas para criao de contedo. A observao destes padres tambm facilita o acesso ao contedo da Web, independente da ferramenta utilizada (navegadores Web para computadores de mesa, laptops, telefones celulares, ou navegador por voz) e de certas limitaes tcnicas, como, por exemplo, uma conexo lenta, a falta de recursos de mdia, etc. As recomendaes de acessibilidade deste documento no esto dividas por nveis de prioridade, j que todas elas so de grande importncia e devem ser seguidas. Dessa forma, optou-se por classificar as recomendaes nas seguintes sees: Marcao Comportamento (DOM) Contedo/Informao Apresentao/Design Multimdia Formulrio
OBS: As recomendaes deste documento so baseadas em HTML 4.0 e XHTML 1.1. A maioria dos exemplos apresentados nas recomendaes a seguir mostram o cdigo (X)HTML que deve ser renderizado no navegador, j que esse cdigo que apresenta importncia para garantir a acessibilidade. Assim, no foram apresentados exemplos do lado do servidor, pois o desenvolvedor pode utilizar a linguagem do lado do servidor que preferir, apenas tomando o cuidado com o cdigo que ser gerado.
12
2.1 Marcao RECOMENDAO 1 RESPEITAR

OS PADRES DE DESENVOLVIMENTO WEB
Ver WCAG 2.0 Critrios de Sucesso 4.1.1 e 4.1.2 essencial seguir os padres de desenvolvimento Web, do W3C (World Wide Web Consortium), com o intuito de maximizar a compatibilidade com atuais e futuros agentes de usurio. preciso declarar o DOCTYPE correto da pgina de qualquer documento HTML ou XHTML. O DOCTYPE define qual verso do (X)HTML o documento est usando e esta uma informao fundamental para que os agentes de usurio processem corretamente o documento. Alm disso, por meio do DOCTYPE que as ferramentas de validao analisam o cdigo da pgina e indicam correes. Poder ser utilizado qualquer DOCTYPE para HTML ou XHTML, com exceo do Frameset. Alm disso, qualquer cdigo HTML ou CSS inserido em uma pgina por script ou outro mtodo similar deve produzir uma pgina vlida quando renderizada. As camadas lgicas devero ser separadas, de acordo com o objetivo para o qual elas foram desenvolvidas. Assim, para a camada de contedo devem ser utilizadas as linguagens de marcao, como html e xhtml. Para a camada de apresentao visual do contedo, utilizam-se as folhas de estilo css em qualquer uma de suas verses. J para a camada que modifica o comportamento dos elementos, so utilizadas linguagens javascript e modelos de objeto (dom). Exemplos de DOCTYPE Em HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="pt-BR"> <head> <title>Exemplo de DOCTYPE em HTML 4.01</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head>
Em XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-BR"> <head> <title> Exemplo de DOCTYPE em XHTML 1.1</title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> </head>
Para mais detalhes a respeito dos padres de desenvolvimento web, ver a Cartilha de Codificao Padres Web e-GOV do padro e-PWG, disponvel em: http://www.governoeletronico.gov.br/acoes-e-projetos/padroes-brasil-e-gov
13
RECOMENDAO 2 ORGANIZAR
O CDIGO
HTML
DE FORMA LGICA E SEMNTICA
Ver WCAG 2.0 Critrio de Sucesso 1.3.1 O cdigo HTML deve ser organizado de forma lgica e semntica, ou seja, apresentando os elementos em uma ordem compreensvel e correspondendo ao contedo desejado. Assim, marcao semntica adequada deve ser utilizada para designar os cabealhos (h1, h2, h3), as listas (ul, ol, dl), texto enfatizado (strong), marcao de cdigo (code), marcao de abreviaturas (abbr), marcao de citaes longas (blockquote), etc. Dessa forma, as pginas podero ser apresentadas e compreendidas sem recursos de estilizao, tal como as folhas de estilo. Alm disso, o cdigo semanticamente correto muito importante para usurios com deficincia visual, pois os leitores de telas descrevem primeiro o tipo de elemento e depois realizam a leitura do contedo que est dentro desse elemento. Exemplo correto
<h1>Padres Web</h1> <ul> <li><a href="menu1.html">Menu 1</a></li> <li><a href="menu2.html">Menu 2</a></li> </ul> <h2>Web Semntica</h2> <blockquote> O poder da web est em sua universalidade. Ser acessada por todos, independente de deficincia, um aspecto essencial. </blockquote> <cite xml:lang="en">Tim Berners Lee</cite>
Exemplo Incorreto
<h1>Padres Web</h1> <p><a href="menu1.html">Menu 1</a></p> <p><a href="menu2.html">Menu 2</a></p> <h2>Web Semntica</h2> <p> O poder da web est em sua universalidade. Ser acessada por todos, independente de deficincia, um aspecto essencial. </p> <p>Tim Berners Lee</p>
RECOMENDAO 3 UTILIZAR
CORRETAMENTE OS NVEIS DE CABEALHO
Ver WCAG 2.0 Critrios de Sucesso 1.3.1 e 2.4.10
14
Os nveis de cabealho devem ser utilizados de forma lgica e semntica para facilitar a leitura e compreenso. Alm disso, pessoas acessando uma pgina com leitor de tela podem navegar atravs dos cabealhos, pulando de um para outro, agilizando, assim, a navegao. Conceitualmente, existem seis nveis de ttulos, sendo o h1 o mais alto, ou seja, dever corresponder ao ttulo principal da pgina. Dessa forma, cada pgina dever ter apenas um h1, o qual poder ser substitudo por uma imagem, mas dever permanecer com seu contedo, mesmo que no visualmente, permitindo a leitura pelo leitor de tela. J os nveis do h2 ao h6 podero ser utilizados mais de uma vez na pgina, mas sem excesso e com lgica textual. Para compreender melhor os nveis de ttulo pode-se tomar como exemplo um stio de um livro, onde o nome do livro o h1, os captulos so h2, os subcaptulos so h3 e assim por diante. Exemplo
Figura 1 Exemplo de utilizao dos nveis de ttulo
HTML
<h1>Tcnicas culinrias</h1> <p>A seguir os segredos que facilitam a vida na cozinha.</p>
15
<h2>Legumes, folhas e vegetais</h2> <h3>Baba do quiabo</h3> <p>Para eliminar a baba do quiabo, lave-o ainda inteiro, seque-o e coloque-o numa tigela com um pouco de suco de limo, deixando repousar durante 15 minutos. Depois lave ligeiramente, corte e cozinhe.</p> <h3>Feijo</h3> <p>1 xcara de feijo cru serve trs pessoas depois de pronto.</p> <h3>Cenouras e aipos</h3> <p>Para resolver o problema de cenouras e aipos meio murchos, mergulhe-os em gua gelada misturada com uma colher de ch de mel por uma hora. Escorra e seque levemente depois.</p> <h2>Congelamento e descongelamento</h2> <h3>Carne em pedaos</h3> <p>Para descongelar carne em pedaos inteiros coloquea embrulhada, numa vasilha com gua. Coloque sal na gua e no pacote e tampe por uma hora.</p> <h3>Carne moda</h3> <p>Para apressar o descongelamento da carne moda, salgue a quantidade que ir usar. O sal apressa o descongelamento.</p>
RECOMENDAO 4 ORDENAR
TABULAO
DE FORMA LGICA E INTUITIVA A LEITURA E
Ver WCAG 2.0 Critrios de Sucesso 1.3.2 e 2.4.3 Deve-se criar o cdigo HTML com uma sequncia lgica de leitura para percorrer links, controles de formulrios e objetos. Essa sequncia determinada pela ordem que se encontra no cdigo HTML. recomendvel disponibilizar o bloco de contedo no HTML antes do bloco de menu, para que usurios, navegando pelo teclado, no precisem navegar por todos os itens de menu antes de chegar ao contedo. Apesar de os atalhos auxiliarem nesse sentido, alguns usurios no sabem utiliz-los. Os atalhos no funcionam em interfaces especializadas, como o do Leitor de Tela DOSVOX e podem ser de difcil utilizao para pessoas com deficincia motora. OBS: O atributo tabindex somente dever ser utilizado quando existir real necessidade. Com o uso de CSS para fins de leiaute, o cdigo HTML pode facilmente ser desenvolvido de maneira que a ordem de tabulao seja a correta. No entanto, se houver necessidade de utilizar o
tabindex , o mesmo dever ser utilizado com a semntica correta e dever ser verificado
manualmente se o fluxo fornecido pelo tabindex realmente o desejado, evitando, assim, que o uso do tabindex resulte em uma ordem de tabulao inconsistente. Exemplo correto (sem o uso do tabindex)
16
<ul> <li><a href="#">Pgina Inicial</a></li> <li><a href="#">Captulo 1</a></li> <li><a href="#">Captulo 2</a></li> <li><a href="#">Captulo 3</a></li> </ul>
<!primeiro foco --> <!segundo foco --> <!terceiro foco --> <!quarto foco -->
Exemplo incorreto do uso do tabindex

<ul> <li><a href="main.html" tabindex="1">Pgina Inicial</a></li> <li><a href="capitulo1.html" tabindex="4">Captulo 1</a></li> <li><a href="capitulo2.html" tabindex="3"> Captulo 2</a></li> <li><a href="capitulo3.html" tabindex="2"> Captulo 3</a></li> </ul>
Ordem de tabulao errada, conferida pelo tabindex:
RECOMENDAO 5 - DISPONIBILIZAR
TODAS AS FUNES DA PGINA VIA TECLADO
Ver WCAG 2.0 Critrios de Sucesso 2.1.1 e 2.1.2 Todas as funes da pgina desenvolvidas utilizando-se linguagens de script (javascript) devero estar disponveis quando for utilizado apenas o teclado. importante salientar que o foco no dever estar bloqueado ou fixado em um elemento da pgina, para que o usurio possa mover-se pelo teclado por todos os elementos. Algumas funes especficas do mouse possuem uma funo lgica correspondente via teclado, conforme mostrado na tabela a seguir:
Evento do mouse onmousedown onmouseup onclick* onmouseover onmouseout
Evento do teclado onkeydown onkeyup onkeypress onfocus* onblur*
17
OBS: * Alguns manipuladores de eventos so dispositivo-independentes, ou seja, se aplicam a qualquer dispositivo (mouse, teclado ou outro), como o caso de: onFocus, onBlur, onSelect, onChange, e onClick (quando o onClick for utilizado em um link ou elemento de formulrio).
Quando forem utilizados mltiplos manipuladores de eventos para uma ao, de maneira que ela funcione tanto pelo mouse como pelo teclado, importante testar o resultado final em diferentes navegadores e utilizando diferentes recursos de tecnologia assistiva, para garantir que o evento seja, de fato, acessvel. D preferncia por utilizar o onclick/onkeypress em vez de onmousedown/onkeydown e onmouseup/onkeyup, pois estes ltimos fazem com que o evento seja disparado automaticamente atravs do teclado. Se houver real necessidade de utilizao destes eventos, dever ser feito um controle sobre qual tecla dever ser acionada para que o evento ocorra, conforme o exemplo a seguir: JavaScript
<script type="text/javascript"> var x=document.getElementById("link") x.onkeydown=function(e){ var pressedkey if(typeof event!='undefined'){ //navegador Internet Explorer pressedkey=window.event.keyCode }else{//outros navegadores pressedkey=e.keyCode //identifica tecla pressionada } if(pressedkey=='13'){ //teste se a tecla o enter window.open('http://www.brasil.gov.br/') //abre a URL } } </script>
HTML
<p><a href="#" id="link">Portal Brasil</a></p>
Existem funes do mouse que no possuem uma funo correspondente via teclado, como o caso de duplo clique (dblclick). Nesses casos, necessrio implementar a funo de maneira alternativa, como, por exemplo, incluindo botes que executem, pelo teclado, a funo de forma equivalente. O evento onclick j funciona pelo teclado (tecla ENTER) na maioria dos navegadores.
RECOMENDAO 6 FORNECER
NCORAS PARA IR DIRETO A UM BLOCO DE CONTEDO
Ver WCAG 2.0 Critrio de Sucesso 2.4.1

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

<form action="#"method="post"> <fieldset> <legend>Buscar</legend> <label for="busca">Pesquise aqui</label> <input type="text" id="busca" name="busca" accesskey="3" value="Pesquise aqui" /> <input type="submit" value="Buscar" class="buscar" name="buscar" /> </fieldset> </form>
Foram utilizados ambos os atributos name e id para que as ncoras funcionem em todos os
navegadores, tanto textuais quanto grficos, j que h os que suportam ambos os atributos e os que suportam apenas um deles. As dicas dos principais atalhos do stio devem ser disponibilizadas na barra de acessibilidade e na pgina sobre a acessibilidade do stio. Maiores detalhes a esse respeito podem ser encontrados no captulo 3 Elementos de acessibilidade nas pginas do Governo Federal.
RECOMENDAO 7 NO
UTILIZAR TABELAS PARA DIAGRAMAO
Ver WCAG 2.0 Critrio de Sucesso 1.3.1 (Tcnica H51) As tabelas devem ser utilizadas apenas para dados tabulares e no para efeitos de disposio dos elementos na pgina. Para este fim, utilize as folhas de estilo.
RECOMENDAO 8 SEPARAR
LINKS ADJACENTES
Ver WCAG 2.0 Critrio de Sucesso 1.3.1 (Tcnica H48) Links adjacentes devem ser separados por mais do que simples espaos, para que no fiquem confusos, em especial para usurios que utilizam leitor de tela. Para isso, recomendado o uso de listas, onde cada elemento dentro da lista um link. As listas podem ser estilizadas visualmente com CSS para que os itens sejam mostrados da maneira desejada, como um ao lado do outro, por exemplo. Caso os links estejam no meio de um pargrafo, pode-se utilizar vrgulas, parnteses, colchetes, etc., para fazer a separao. Exemplo correto
<ul id="menu"> <li> <a href="home.html">Home</a></li> <li> <a href="pesquisa.html">Pesquisa</a></li> <li> <a href="mapasite.html">Mapa do Site</a></li> </ul> 
Exemplo incorreto
20
<p id="menu"> <a href="#menu">Pular o menu</a><br /> <a href="home.html">Home</a><br /> <a href="pesquisa.html">Pesquisa</a><br /> <a href="mapasite.html">Mapa do Site</a> </p> 
RECOMENDAO 9 NO
ABRIR NOVAS INSTNCIAS SEM A SOLICITAO DO USURIO
Ver WCAG 2.0 Critrio de Sucesso 3.2.5 A deciso de se utilizar-se de novas instncias por exemplo abas ou janelas - para acesso a pginas e servios ou qualquer informao do cidado. Assim, no devem ser utilizados:
Pop-ups; A abertura de novas abas ou janelas; O uso do atributo target=_blank; Mudanas no controle do foco do teclado; Entre outras, que no tenham sido solicitadas pelo usurio.
2.2 Comportamento (DOM) RECOMENDAO 10 GARANTIR

QUE OS OBJETOS PROGRAMVEIS SEJAM ACESSVEIS
Ver WCAG 2.0 Critrios de Sucesso 2.1.1 e 2.1.2 Deve-se garantir que scripts, Flash, contedos dinmicos e outros elementos programveis sejam acessveis. Se no for possvel que o elemento programvel seja diretamente acessvel, deve ser fornecida uma alternativa em HTML para o contedo. Assim, preciso garantir que o contedo e as funcionalidades de objetos programveis sejam acessveis aos recursos de tecnologia assistiva e que seja possvel a navegao por teclado. Quando o script for utilizado em uma pgina da Web, uma forma de fornecer uma alternativa para ele atravs do elemento <noscript>. Este elemento pode ser utilizado para mostrar contedos em navegadores que no suportam scripts ou que tenham o script desabilitado. No entanto, se o navegador tiver suporte a scripts e estes estiverem habilitados, o elemento <noscript> ser ignorado. Dessa forma, a utilizao do elemento <noscript> para um script inacessvel no garante que o objeto seja acessvel. Assim, a recomendao que o prprio
script seja desenvolvido tomando-se o cuidado para que ele seja acessvel, e o elemento <noscript> deve ser utilizado para abranger os casos em que scripts no so suportados. Exemplo correto Pgina HTML
<a href="cadastro.html" id="cadastro">Cadastre-se agora!</a>
Pgina JavaScript (.js)

function pop() { alert("Voc vai fazer um novo cadastro!"); } var element = document.getElementById("cadastro"); element.onclick = pop;
Exemplo incorreto Pgina HTML

<a href="javascript:pop()">Cadastre-se agora!</a> <script language="javascript" type="text/javascript"> function pop() { alert("Voc vai fazer um novo cadastro!"); } </script>
Nesse caso, se o navegador no tiver suporte a scripts, o usurio ficar impossibilitado de acessar o link. OBS: A funo alert do javascript no gera um pop-up e sim uma mensagem que lida por todos os leitores de tela.
RECOMENDAO 11- NO
CRIAR PGINAS COM ATUALIZAO AUTOMTICA PERIDICA
Ver WCAG 2.0 Critrio de Sucesso 3.2.5 (Tcnicas SVR1 e H76) No devem ser criadas pginas com atualizao automtica peridica. Assim, no deve ser utilizada a meta tag refresh, nem outra forma de atualizao automtica. Pginas que se atualizam automaticamente podem confundir e desorientar os usurios, especialmente usurios que utilizam leitores de tela. Exemplo1 Em uma interface Web para e-mail (Webmail), um desenvolvedor pode fornecer um boto ou link para buscar novos e-mails recebidos em vez de atualizar automaticamente.
22
Em pginas onde o limite de tempo absolutamente necessrio, o usurio dever ser informado que a pgina atualizada automaticamente. Exemplo2 Em uma pgina de leiles online, fornecido um banner contendo a informao de que a pgina atualizada a cada 15 segundos.
RECOMENDAO 12 NO
UTILIZAR REDIRECIONAMENTO AUTOMTICO DE PGINAS
Ver WCAG 2.0 Critrio de Sucesso 3.2.5 (Tcnicas SVR1 e H76) No devem ser utilizadas marcaes para redirecionar para uma nova pgina, como a meta tag refresh. Ao invs disso, deve-se configurar o servidor para que o redirecionamento seja transparente para o usurio. Exemplo Incorreto
<head> <title>Exemplo<title> <meta http-equiv="refresh" content="20; url='http://www.exemplo.com/'" /> </head> <body> <p>Esta pgina mudou seu endereo para www.novoendereco.com.br</p> </body>
ALTERNATIVA PARA MODIFICAR LIMITE DE TEMPO
Ver WCAG 2.0 Critrio de Sucesso 2.2.1 Em uma pgina onde h limite de tempo para realizar uma tarefa deve haver a opo de desligar, ajustar ou prolongar esse limite. Essa recomendao no se aplica a eventos em que o limite de tempo absolutamente necessrio. Exemplo : Na insero de dados em um formulrio para obteno de um benefcio ou consulta a processo, o cidado deve ter tanto tempo quanto for necessrio para o preenchimento de seus dados.
23
RECOMENDAO 14 NO
INCLUIR SITUAES COM INTERMITNCIA DE TELA
Ver WCAG 2.0 Critrio de Sucesso 2.3.1 No devem ser utilizados efeitos visuais piscantes, intermitentes ou cintilantes. Em pessoas com epilepsia fotosensitiva, o cintilar ou piscar pode desencadear um ataque epiltico. A exigncia dessa diretriz aplica-se tambm para propaganda de terceiros inserida na pgina.
RECOMENDAO 15 ASSEGURAR
TEMPORAIS DO CONTEDO
O CONTROLE DO USURIO SOBRE AS ALTERAES
Ver WCAG 2.0 Critrio de Sucesso 2.2.2 Contedos que se movem, rolagens, movimentaes em geral ou animaes no devem ser disparadas automaticamente sem o controle do usurio, mesmo em propagandas na pgina. Ao usurio deve ser repassado o controle sobre essas movimentaes (quer seja por escolha de preferncia de visualizao da pgina, quer por outro mtodo qualquer acessvel a usurio com deficincia). Alm disso, o usurio deve ser capaz de parar e reiniciar contedos que se movem, sem exceo. A velocidade desses contedos tambm deve ser passvel de controle pelo usurio, a menos que a implementao de mecanismo para alterar a velocidade seja uma tarefa de difcil execuo (se for necessrio realizar uma escolha baseando-se nas limitaes, prefira implementar mecanismos para reduzir a velocidade dos contedos no lugar de aumentar).
2.3 Contedo / Informao RECOMENDAO 16 IDENTIFICAR

Ver WCAG 2.0 Critrio de Sucesso 3.1.1 Deve-se identificar o principal idioma utilizado nos documentos. A identificao feita por meio do atributo lang do HTML e, para documentos XHTML, utilizado o xml:lang.
O IDIOMA PRINCIPAL DA PGINA
24
Exemplo Em HTML 4.01

... <html lang="pt-BR"> <head> <title>documento escrito em portugus do Brasil</title> ...
Em XHTML 1.1
... <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-BR"> <head> <title>documento escrito em portugus do Brasil</title> ...
RECOMENDAO 17 OFERECER
UM TTULO DESCRITIVO E INFORMATIVO PGINA
Ver WCAG 2.0 Critrio de Sucesso 2.4.2 O ttulo da pgina deve ser descritivo e informativo, j que essa informao ser a primeira lida pelo leitor de tela, quando o usurio acessar a pgina. O ttulo informado pela tag <title>. Exemplo O stio sobre o Projeto Acessibilidade Virtual da RENAPI (Rede Nacional de Pesquisa e Inovao em Tecnologias Digitais) apresenta o seguinte ttulo:
<title> Projeto Acessibilidade Virtual - Portal RENAPI Pgina Inicial </title>
RECOMENDAO 18 DISPONIBILIZAR
USURIO NA PGINA
INFORMAO SOBRE A LOCALIZAO DO
Ver WCAG 2.0 Critrio de Sucesso 2.4.8 Dever ser fornecido um mecanismo que permita ao usurio orientar-se dentro de um conjunto de pginas, permitindo que ele saiba onde est no momento. Assim, poder ser utilizado o recurso de migalha de po (breadcrumbs), que so links navegveis em forma de lista hierrquica e permitem que o usurio saiba qual o caminho percorrido at chegar pgina em que se encontra no momento.
Exemplo Um usurio navegando por um stio de uma universidade encontra-se na seo de editais, que est dentro do menu Ensino. Acima do contedo, disponibilizado a seguinte Migalha de po:
Voc est em: Pgina inicial > Ensino > Editais

OBS: Na migalha de po, todos as pginas do caminho, com exceo da qual est o usurio (posio atual), devero estar implementadas como links.
RECOMENDAO 19 DESCREVER
LINKS CLARA E SUCINTAMENTE
Ver WCAG 2.0 Critrios de Sucesso 2.4.4 e 2.4.9 Deve-se identificar claramente o destino de cada link, informando, inclusive, se o link remete a outro stio. Alm disso, preciso que o texto do link faa sentido mesmo quando isolado do contexto da pgina. preciso tomar cuidado para no utilizar o mesmo ttulo para dois ou mais links que apontem para destinos diferentes. Exemplo 1
<h2>Educao Superior</h2> <p>Tomam posse os reitores das federais da Bahia e Tringulo</p> <p> <a href="notici5125.html">Leia mais notcias sobre Educao Superior</a> </p>
Repare que no h necessidade de utilizar o atributo title em links, j que esse atributo no bem suportado por recursos de tecnologia assistiva, como leitores de tela, no tem utilidade para quem navega apenas pelo teclado e no tem bom suporte em dispositivos mveis, como celulares, entre outros problemas. Assim, se voc quiser fornecer informaes adicionais para um link, faa-o no prprio texto do link ou no contexto. Exemplo 2 Correto: Ganhe um prmio fornecido pelo nosso patrocinador Ganhe um prmio fornecido pelo nosso patrocinador Incorreto: Clique aqui para ganhar um prmio fornecido pelo nosso patrocinador
26
OBS: No recomendada a utilizao de links do tipo clique aqui pois esta expresso no faz sentido fora do contexto. Muitos usurios de leitores de tela navegam por links, tornando descries como Clique aqui, Veja mais insuficientes para o usurio saber o destino do link, ou localiz-lo na pgina. Evitar essas expresses para evitar verborragia, ou seja, evitar que o leitor de tela leia para o usurio palavras ou frases desnecessrias.
ALTERNATIVA EM TEXTO PARA AS IMAGENS DO STIO
Ver WCAG 2.0 Critrio de Sucesso 1.1.1 (Tcnica G95) Deve ser fornecida uma descrio para as imagens da pgina, utilizando-se o atributo alt. Imagens que no transmitem contedo, ou seja, imagens decorativas, devem ser inseridas por CSS. No entanto, descrever qualquer imagem, em geral, algo bastante subjetivo e a descrio deve ser adaptada ao contexto em que a imagem se encontra. Para maiores detalhes de como escrever um texto alternativo veja o tutorial O uso correto do texto alternativo na seo do eMAG no portal de Governo Eletrnico. Exemplo 1
Figura 2 Exemplo de descrio de imagem. Foto de Jnatas Cunha em licena Creative Commons Fonte: http://www.flickr.com/photos/jonycunha/4019704214/in/photostream/
No cdigo:
<img src="crianca.jpg" alt="Foto de uma criana cheirando uma flor" />
27
Exemplo 2
Figura 3 Exemplo de descrio de banner
No cdigo:
<a href="http://www.dominiopublico.gov.br/"> <img src="dominioPublico.jpg" alt="Portal Domnio Pblico" /> </a>
Apesar de no haver um limite de caracteres no atributo alt, ele utilizado para descries sintticas, em poucas palavras ou em uma frase curta. Para imagens mais complexas que exigem uma descrio mais detalhada, como grficos, por exemplo, deve-se fornecer, alm do alt, a descrio no prprio contexto ou um link para a descrio longa logo aps a imagem. Deve ficar claro para o usurio que esse link remete para a descrio longa da imagem, conforme o exemplo a seguir. Exemplo 3
Figura 4 Exemplo de descrio de grfico A descrio textual do grfico est disponvel em outra pgina
No cdigo:
<img src="grafico.jpg" alt="Grfico de pizza demonstrando os resultado da pesquisa sobre a distribuio de espao em pginas" /> <p><a href="graficoPesquisa.html">A descrio textual do grfico</a> est disponvel em outra pgina</p>
Para grficos, poder ser disponibilizada tanto a descrio textual quanto a tabela de dados que lhe deu origem, desde que a tabela seja fornecida em HTML, tomando-se os devidos cuidados relativos acessibilidade.
28
Alm de fornecer a descrio longa no contexto ou em um link prximo, pode-se utilizar o atributo longdesc na imagem, o qual recomendado pela WCAG para descries longas, mas no suportado por alguns recursos de tecnologia assistiva. A utilizao do longdesc pode ser vista no exemplo a seguir. Exemplo 4
<img src="grafico.jpg" alt="Grfico de pizza demonstrando os resultado da pesquisa sobre a distribuio de espao em pginas" longdesc="graficoPesquisa.html" /> <p><a href="graficoPesquisa.html">A descrio textual do grfico</a> est disponvel em outra pgina</p>
graficoPesquisa.html
<h2> Distribuio de espao em pginas</h2> <ul> <li>Propaganda - 60%</li> <li>Sem Uso - 10%</li> <li>Navegao - 10%</li> <li>Contedo de Interesse - 20%</li> </ul>
Exemplo de imagem decorativa:
Figura 5 Imagem decorativa em link Volta ao topo da pgina
HTML
<a href="#id_de_destino">Topo da pgina</a>
CSS
a{ background:transparent url(img/topo_pagina.jpg)no-repeat right top; /*insero da imagem decorativa do link */ padding:4px 27px 0 0; /* espao colocado para a imagem ficar ao lado do link */ height:23px; /*ajuste na altura do link para que aparea toda a imagem */ }
MAPA DE IMAGEM
ALTERNATIVA EM TEXTO PARA AS ZONAS ATIVAS DE
Ver WCAG 2.0 Critrio de Sucesso 1.1.1 (Tcnica H24) Para mapas de imagem do lado do cliente, devem ser fornecidas descries atravs do atributo alt para cada uma das zonas ativas, ou seja, para cada um dos links que receber o foco.
29
Exemplo (mapa de imagem do lado do cliente)
Figura 6 Mapa de imagem exemplo 1
<img src="mapaImg.jpg" alt="Imagem com alternativas [A] e [B]" usemap="#Map" /> <map name="Map" id="Map"> <area shape="rect" coords="8,10,63,59" href="a.html" alt="Link para a seo [A]" /> <area shape="rect" coords="77,9,126,61" href="b.html" alt="Link para a seo [B]" /> </map>
Alm dos mapas de imagem do lado do cliente, existem os do lado do servidor. No entanto, recomendada a utilizao de mapas de imagem do lado do cliente, j que para mapas de imagem do lado do servidor no possvel fornecer um alt para cada uma das zonas ativas, somente para o mapa como um todo, no sendo possvel, portanto, torn-lo acessvel. No entanto, se for realmente necessria sua utilizao, devem ser fornecidos links redundantes relativos a cada regio ativa do mapa de imagem, conforme o exemplo a seguir, para que, desta forma, usurios com leitores de tela possam ter acesso ao seu contedo.
Exemplo (mapa de imagem do lado do servidor)
<a href="novaPagina.jpg"><img src="bandeiraBrasil.jpg" ismap="ismap" alt="Bandeira do Brasil (Links a seguir)"/></a> <p><a href="areaVerde.html">rea Verde</a> - </p> <p><a href="areaAmarela.html">rea Amarela</a> </p> <p><a href="areaAzul.html">rea Azul</a></p>
Figura 7 Mapa de imagem exemplo 2
OBS: No devem ser utilizados mapas de imagem para menus ou seleo de regies para servios.
DOCUMENTOS EM FORMATOS ACESSVEIS
Sem correspondncia a critrios da WCAG 2.0
30
Os documentos devem ser disponibilizados preferencialmente em HTML. Tambm podem ser utilizados arquivos para download no formato ODF, tomando-se os cuidados para que sejam acessveis. Se um arquivo for disponibilizado em PDF, dever ser fornecida uma alternativa em HTML ou ODF. necessrio, tambm, informar a extenso e o tamanho do arquivo no prprio texto do link. Exemplo
<a href=manual.odt> Manual do W3C (formato .odt, tamanho 150Kb) </a>
OBS: O ODF (Open Document Format) um formato aberto de documento adotado pela e-PING (Arquitetura de Interoperabilidade em Governo Eletrnico) que pode ser implementado em qualquer sistema. O ODF engloba formatos como: ODT para documentos de texto, ODS para planilhas eletrnicas, ODP para apresentaes de slides, entre outros. Muitos softwares j utilizam esses formatos, como o caso do OpenOffice, BrOffice, Google Docs, Abiword e StarOffice. O Microsoft Office 2010 tambm inclui suporte para ODF. Para verses anteriores do Microsoft Office, pode ser instalado um Add-in gratuito para suporte aos formatos ODF.
RECOMENDAO 23 EM
APROPRIADA
TABELAS, UTILIZAR TTULOS E RESUMOS DE FORMA
Ver WCAG 2.0 Critrio de Sucesso 1.3.1 (Tcnicas H39 e H73) O ttulo da tabela deve ser definido pelo elemento caption e deve ser o primeiro elemento utilizado aps a declarao do elemento table. Em casos de tabelas extensas, deve ser fornecido um resumo de seus dados atravs do atributo summary que deve ser declarado no elemento table. Exemplo
<table summary="Esta tabela exibe os copos de caf consumidos por cada senador, o tipo de caf (descafeinado ou normal), com acar ou sem acar."> <caption>Copos de caf por Senador</caption> ...
Para mais detalhes veja o tutorial tabelas acessveis (documento pdf - 154 KB), na seo do e-MAG no Portal do Programa de Governo Eletrnico.
31
RECOMENDAO 24 ASSOCIAR
UMA TABELA
CLULAS DE DADOS S CLULAS DE CABEALHO EM
Ver WCAG 2.0 Critrio de Sucesso 1.3.1 (Tcnicas H43 e H63) Em tabelas de dados simples, a uso apropriado do elemento th para os cabealhos e do elemento td para as clulas de dados essencial para torn-las acessveis. Para incrementar a acessibilidade, deve-se utilizar os elementos thead, tbody e tfoot, para agrupar as linhas de cabealho, do corpo da tabela e do final, respectivamente, com exceo de quando a tabela possuir apenas o corpo, sem ter sees de cabealho e rodap. O W3C sugere utilizar o tfoot antes do tbody dentro da definio table para que o agente de usurio possa renderizar o rodap antes de receber todas (potencialmente numerosas) linha de dados. Exemplo 1
<table> <caption>Demonstrativo do Patrimnio</caption> <thead> <tr> <th>Tipos</th> <th>Valores (R$)</th> <th>Percentual</th> </tr> </thead> <tfoot> <tr> <td>Total</td> <td>110.740,22</td> <td>100%</td> </tr> </tfoot> <tbody> <tr> <td>Recursos Financeiro</td> <td>56.879,63</td> <td>51,36%</td> </tr> <tr> <td>Bens Mveis</td> <td>25.691,23</td> <td>23,20%</td> </tr> <tr> <td>Bens Imveis</td> <td>28.169,36</td> <td>25,44%</td> </tr> </tbody> </table>
32
Figura 8 Imagem da tabela descrita no cdigo do exemplo 1
Para tabelas mais complexas, necessrio utilizar marcaes para associar as clulas de dados com as clulas de cabealho. A maneira mais adequada de realizar esse procedimento utilizar os elementos id/headers ou scope/col. No primeiro, pode-se associar qualquer clula de contedo a qualquer clula de cabealho, utilizando o mesmo valor para o atributo id e para o headers. No segundo caso, a associao automtica, sendo mais utilizado em tabelas de associao direta, onde dado o valor col para o atributo scope nos cabealhos. Nos exemplo a seguir, possvel verificar a utilizao do id/headers e do scope/col. Exemplo 2
<table summary="..."> <table> <caption>Resultado do Concurso</caption> <tr> <th id="vaga">Vaga</th> <th id="candidato">Nome do candidato</th> <th id="basico">Prova de Conhecimento Bsico</th> <th id="especifico">Prova de Conhecimento Especfico</th> </tr> <tr> <td id="adm" rowspan="2">Tcnico Administrativo</td> <td id="PaulodaSilva">Paulo da Silva</td> <td headers="adm basico PaulodaSilva">8</td> <td headers="adm especifico PaulodaSilva">16</td> </tr> <tr> <td id="PedroPontes">Pedro Pontes</td> <td headers="adm basico PedroPontes">7</td> <td headers="adm especifico PedroPontes">15</td> </tr> <tr> <td id="inf">Tcnico em Informtica</td> <td id="JoaoPereira">Joo Pereira</td> <td headers="inf basico JoaoPereira">9</td> <td headers="inf especifico JoaoPereira">17</td> </tr> </table>
33
Exemplo 3
<table summary="Tabela de vendas de ma e banana efetuadas no ano de 2010"> <caption>Vendas 2010</caption> <tr> <th scope="col">Ms</th> <th scope="colgroup" colspan="2">Rio Grande do Sul</th> <th scope="colgroup" colspan="2">Santa Catarina</th> </tr> <tr> <td>Janeiro</td> <td scope="col">Ma</td> <td scope="col">Banana</td> <td scope="col">Ma</td> <td scope="col">Banana</td> </tr> <tr> <td>Feveiro</td> <td>1000</td> <td>1500</td> <td>3000</td> <td>1000</td> </tr> <tr> <td>Maro</td> <td>2000</td> <td>1500</td> <td>3500</td> <td>500</td> </tr> </table>
34
Exemplo 4
<table summary="Tabela com resumo das despesas de transporte durante o ms de Agosto nas cidades de Porto Alegre e Florianpolis"> <caption>Relatrio de despesa de viagem</caption> <tr> <th></th> <th id="alimentacao" axis="despesas">Alimentao</th> <th id="hotel" axis="despesas">Hotel</th> <th id="transporte" axis="despesas">Transporte</th> </tr> <tr> <th id="poa" axis="localizao" colspan="4">Porto Alegre</th> </tr> <tr> <td id="data1" axis="data">25 de agosto de 2010</td> <td headers="poa data1 alimentacao">R$ 37,74</td> <td headers="poa data1 hotel">R$ 112,00</td> <td headers="poa data1 transporte">R$ 45,00</td> </tr> <tr> <td id="data2" axis="data">26 de agosto de 2010</td> <td headers="poa data2 alimentacao">R$ 27,28</td> <td headers="poa data2 hotel">R$ 112,00</td> <td headers="poa data2 transporte">R$ 45,00</td> </tr> <tr> <th id="subPoa">Subtotal</th> <td headers="poa subPoa alimentacao">R$ 65,02</td> <td headers="poa subPoa hotel">R$ 224,00</td> <td headers="poa subPoa transporte">R$ 90,00</td> </tr> <tr> <th id="floripa" axis="localizao" colspan="4">Florianpolis</th> </tr> <tr> <td id="data3" axis="data">27 de agosto de 2010</td> <td headers="floripa data3 alimentacao">R$ 96,25</td> <td headers="floripa data3 hotel">R$ 109,00</td> <td headers="floripa data3 transporte">R$ 36,00</td> </tr> <tr> <td id="data4" axis="data">28 de agosto de 2010</td> <td headers="floripa data4 alimentacao">R$ 35,00</td> <td headers="floripa data4 hotel">R$ 109,00</td> <td headers="floripa data4 transporte">R$ 36,00</td> </tr> <tr>
<th id="subFloripa">Subtotal</th> <td headers="floripa subFloripa alimentacao">R$ 131,25</td> <td headers="floripa subFloripa hotel">R$ 218,00</td> <td headers="floripa subFloripa transporte">R$ 72,00</td> </tr> <tr> <th id="total">Total</th> <td headers="total alimentacao">R$ 196,27</td> <td headers="total hotel">R$ 442,00</td> <td headers="total transporte">R$ 162,00</td> </tr> </table>
Figura 11 Exemplo da tabela do exemplo 4 com o uso do atributo axis
Para mais detalhes veja o tutorial Tabelas Acessveis (documento pdf - 154 KB) na seo do eMAG no Portal do Programa de Governo Eletrnico.
RECOMENDAO 25 GARANTIR
A LEITURA E COMPREENSO DAS INFORMAES
Ver WCAG 2.0 Critrio de Sucesso 3.1.5 O texto de um stio deve ser de fcil leitura e compreenso, no exigindo do usurio um nvel de instruo mais avanado do que o ensino fundamental completo. Quando o texto exigir uma capacidade de leitura mais avanada, deve ser disponibilizado informaes suplementares que expliquem ou ilustrem contedo principal. Outra alternativa verso simplificada do contedo em texto. Existem algumas tcnicas que auxiliam na melhora da inteligibilidade de textos, como, por exemplo: Desenvolver apenas um tpico por pargrafo;
36
Utilizar sentenas organizadas de modo simplificado para o propsito do contedo (sujeito, verbo e objeto, preferencialmente); Dividir sentenas longas em sentenas mais curtas; Evitar o uso de jargo, expresses regionais ou termos especializados que possam no ser claros para todos; Utilizar palavras comuns no lugar de outras pouco familiares; Utilizar listas de itens ao invs de uma longa srie de palavras ou frases separadas por vrgulas; Fazer referncias claras a pronomes e outras partes do documento; Utilizar, preferencialmente, a voz ativa.
Para mais informaes sobre como escrever textos para web, acesse a Cartilha de Redao Web na Seo do e-PWG (Padres Web em Governo Eletrnico) no Portal de Governo Eletrnico.
E PALAVRAS INCOMUNS
UMA EXPLICAO PARA SIGLAS, ABREVIATURAS
Ver WCAG 2.0 Critrios de Sucesso 3.1.3 e 3.1.4 Deve estar disponvel uma explicao que identifique a forma completa ou o significado das abreviaturas e siglas. Para isso, pode ser utilizada a tag abbr. Exemplo
<p>Bem-vindo <abbr title="World Wide Web" lang="en">WWW</abbr>!</p>
J as palavras que podem ser ambguas, desconhecidas ou utilizadas de forma muito especfica, devero ser definidas atravs de um texto adjacente, uma lista de definies ou estarem contidas num glossrio.
RECOMENDAO 27 INFORMAR
MUDANA DE IDIOMA NO CONTEDO
Ver WCAG 2.0 Critrio de Sucesso 3.1.2 Se algum elemento de uma pgina possuir contedo em um idioma diferente do principal, este dever estar identificado pelo atributo lang. Essa recomendao no se aplica para nomes prprios ou termos tcnicos que sejam compreendidos no contexto.
37
Exemplo XHTML
<p xml:lang="de"> Da dachte der Herr daran, ihn aus dem Futter zu schaffen, aber der Esel merkte, da kein guter Wind wehte, lief fort und machte sich auf den Weg nach Bremen: dort, meinte er, knnte er ja Stadtmusikant werden. </p>
HTML
<p lang="de"> Da dachte der Herr daran, ihn aus dem Futter zu schaffen, aber der Esel merkte, da kein guter Wind wehte, lief fort und machte sich auf den Weg nach Bremen: dort, meinte er, knnte er ja Stadtmusikant werden. </p>
2.4 Apresentao / Design RECOMENDAO 28 - OFERECER

PRIMEIRO PLANO
CONTRASTE MNIMO ENTRE PLANO DE FUNDO E
Ver WCAG 2.0 Critrio de Sucesso 1.4.3 As cores do plano de fundo e do primeiro plano devero ser suficientemente contrastantes para que possam ser visualizadas, tambm, por pessoas com baixa viso, com cromodeficincias ou que utilizam monitores de vdeo monocromtico. No devero ser utilizadas imagens atrs do texto (background), pois acabam por dificultar a leitura e desviar a ateno do usurio. A relao de contraste pode ser encontrada dividindo-se o valor da luminosidade relativa da cor mais clara de um dos planos pelo valor da luminosidade relativa da cor mais escura do outro plano. A relao de contraste entre plano de fundo e primeiro plano de 3:1 o nvel mnimo de contraste recomendado pela ISO-9241-3. No entanto, levando-se em considerao a perda de percepo do contraste resultante da baixa acuidade visual, cromodeficincia ou perda de sensibilidade ao contraste devido ao envelhecimento, recomendada aqui uma maior relao de contraste, de, no mnimo, 4,5:1. Existem ferramentas gratuitas disponveis na Web que verificam a relao de contraste entre as cores do plano de fundo e do primeiro plano, referenciadas no captulo 4 deste documento e para uma tabela de cores no anexo 1.
38
RECOMENDAO 29 NO
UTILIZAR APENAS COR OU OUTRAS CARACTERSTICAS
SENSORIAIS PARA DIFERENCIAR ELEMENTOS
Ver WCAG 2.0 Critrios de Sucesso 1.3.3 e 1.4.1 A cor ou outras caractersticas sensoriais, como forma, tamanho, localizao visual, orientao ou som no devem ser utilizadas como o nico meio para transmitir informaes, indicar uma ao, pedir uma resposta ao usurio ou distinguir um elemento visual. Exemplo HTML
<p>Existem trs procedimentos para executar a tarefa:</p> <ul> <li><a href="#">Procedimento A</a></li> <li><a href="#" class="recomendado">Procedimento B (Recomendado)</a></li> href="#">Procedimento C</a></li> </ul>
<li><a
CSS
a.recomendado{ color: #FF0000; }
Figura 12 Exemplo correto de utilizao de cores nos elementos
RECOMENDAO 30 PERMITIR
FUNCIONALIDADE
REDIMENSIONAMENTO DE TEXTO SEM PERDA DE
Ver WCAG 2.0 Critrio de Sucesso 1.4.4 A pgina deve continuar legvel e funcional quando redimensionada para at 200%. Assim, preciso garantir que, quando a pgina for redimensionada, no ocorram sobreposies de texto nem o aparecimento de uma barra horizontal.
39
Exemplo Um stio possui uma ferramenta que permite o redimensionamento do tamanho da fonte. Para isso existe um boto que aumenta a fonte de dois em dois pixels. Da mesma forma, existe um boto que diminui a fonte de dois em dois pixels e outro que retorna ao tamanho padro da fonte. O stio utiliza um leiaute flexvel, isto , medida que a fonte aumenta ou diminui, o leiaute se ajusta automaticamente para que no ocorram quebras.
<title>Exemplo Bsico de Leiaute Lquido</title> <style type="text/css"> .coluna { border-left: 1px solid green; padding-left:1%; float: left; width: 32%; } #rodape { border-top: 1px solid green; clear: both; } </style> </head> <body> <h1>Exemplo de Redimensionamento</h1> <form action="#"> <fieldset> <legend>Redimensionamento do texto</legend> <input type="button" id="mais" value="Aumentar" /> <input type="button" id="mais" value="Diminuir" /> <input type="button" id="mais" value="Tamanho padro" /> </fieldset> </form> <h2>Este texto est dividido em trs blocos...</h2> <div class="coluna"> <h3>Bloco 1</h3> <p>O objetivo desta tcnica apresentar o contedo sem que ocorra a introduo de uma barra horizontal.</p> </div> <div class="coluna"> <h3>Bloco 2</h3> <p>Este um exemplo simples de leiaute de pgina que se adapta ao redimensionamento de texto.</p> </div> <div class="coluna"> <h3>Bloco 3</h3> <p>Esta uma tcnica simples mas que pode ser implementada para leiautes mais complexos.</p> </div> <p id="rodape">Texto do Rodap</p> </body> </html>
40
Figura 13 Exemplo de pgina em seu tamanho padro
Figura 14 Exemplo de pgina redimensionada em 200% sem perda de funcionalidade
RECOMENDAO 31 DIVIDIR
AS REAS DE INFORMAO
Ver WCAG 2.0 Critrio de Sucesso 3.2.3 (Tcnica G61) reas de informao devem ser divididas em grupos fceis de gerenciar. As divises mais comuns so topo, contedo, menu e rodap. Nas pginas internas deve-se manter uma mesma diviso para que o usurio se familiarize mais rapidamente com a estrutura do stio. importante destacar, entretanto, que a pgina inicial pode ter uma diviso diferente das pginas internas, pois normalmente ela contm mais elementos. O exemplo a seguir mostra a diviso da pgina inicial de um stio contendo os blocos topo, menu, contedo e rodap, alm da barra de acessibilidade contendo os atalhos.
Exemplo
Figura 15 Exemplo de diviso de blocos de contedo <div id="topo"> <a href="#inicioTopo" id="inicioTopo">Topo</a> <h1>NOME DA INSTITUIO</h1> <div id="barraAcessibilidade"> <p>Barra de Acessibilidade</p> <ul> <li><a href="#inicioConteudo">Ir para contedo [1]</a></li> <li><a href="#inicioMenu">Ir para menu principal [2]</a></li> <li><a href="#busca">Ir para Busca [3]</a></li> </ul> </div> </div> <div id="menu"> <a href="#inicioMenu" id="inicioMenu" accesskey="2">Menu</a> <ul> <li>Itens de menu</li> <li>...</li> </ul> </div> <div id="conteudo"> <a href="#inicioConteudo" id="inicioConteudo" accesskey="1">Contedo</a> <form action="#" method="post"> <fieldset> <legend>Buscar</legend> <label for="busca">Pesquise aqui</label> <input type="text" id="busca" name="busca" accesskey="3" value="Pesquise aqui" /> <input type="submit" value="Buscar" class="buscar" name="buscar" /> </fieldset> </form> <h2>BEM VINDO</h2> <p>Seja bem vindo ao nosso site.</p> </div> <div id="rodape"> <a href="#inicioRodape" id="inicioRodape">Rodap</a> <address> Rua XXX</address> </div>
42
A diviso em blocos de contedo representa a base para a utilizao dos atalhos, permitindo que o usurio tenha rpido acesso rea desejada. Para mais detalhes sobre a barra de acessibilidade e os atalhos, ver o captulo 3 Padronizao de acessibilidade nas pginas do Governo Federal. importante que as diversas pginas de um stio possuam um estilo de apresentao coerente e sistemtico, mantendo-se um padro de estrutura. Assim, elementos principais de navegao devero ser mantidos na mesma posio em todas as pginas, com exceo da pgina inicial que, muitas vezes, apresenta uma estrutura diferenciada. Exemplo Um stio possui um logotipo, um ttulo, um formulrio de pesquisa e uma barra de navegao. Esses elementos aparecem na mesma ordem relativa em cada pgina do stio em que se repetem. Em uma das pginas, no h o formulrio de pesquisa, mas o restante dos itens continua na mesma ordem.
RECOMENDAO 32 POSSIBILITAR
EVIDENTE
QUE O ELEMENTO COM FOCO SEJA VISUALMENTE
Ver WCAG 2.0 Critrio de Sucesso 2.4.7 A rea que recebe o foco pelo teclado deve ser claramente marcada, devendo a rea de seleo ser passvel de ser clicada. Por padro, links e elementos de formulrio j apresentam a borda destacada ao receberem o foco do teclado. Essa borda pode ser modificada via CSS, mas no dever ser removida. Exemplo
CSS
a:active, a:focus, a:hover { border: 1px solid #F00; }
HTML
<ul> <li><a <li><a <li><a <li><a <li><a <li><a <li><a <li><a <li><a </ul> href="/acessibilidade/index.php">Pgina Inicial</a></li> href="/acessibilidade/eventos.php">Eventos</a></li> href="/acessibilidade/quemsomos.php">Quem Somos</a></li> href="/acessibilidade/ead.php">Ensino a Distncia (EaD)</a></li> href="/acessibilidade/videoaulas.php">Vdeoaulas</a></li> href="/acessibilidade/video.php">Vdeo em Libras</a></li> href="/acessibilidade/oa.php">Objetos de Aprendizagem</a></li> href="/acessibilidade/trabalhos.php">Trabalhos Realizados</a></li> href="/acessibilidade/mapa.php">Mapa do Site</a></li>
43
Figura 16 Exemplo de foco visvel em menu
A pseudo-classe :focus utilizada para definir o estilo de qualquer elemento HTML que receber o foco do teclado, como links e elementos de formulrio. A pseudo-classe :hover utilizada para definir o estilo de um elemento quando passa-se o mouse sobre ele. J a pseudoclasse :active define o estilo de link ativo. No caso do exemplo acima, a pseudo-classe :active foi utilizada para definir o estilo do link com foco para navegadores Internet Explorer 7 e anteriores, que ainda no tinham suporte pseudo-classe :focus.
2.5 Multimdia RECOMENDAO 33 FORNECER

ALTERNATIVA PARA VDEO
Ver WCAG 2.0 Critrios de Sucesso 1.2.1, 1.2.2, 1.2.6 e 1.2.8 Deve haver uma alternativa sonora ou textual para vdeos que no incluem faixas de udio. Para vdeos que contm udio falado e no idioma natural da pgina, devem ser fornecidas legendas. Alm de essencial para pessoas com deficincia visual, a alternativa em texto tambm importante para usurios que no possuem equipamento de som, que desejam apenas realizar a leitura do material ou no dispem de tempo para ouvir um arquivo multimdia. Para tanto, podem ser fornecidos: Situao 1 Um vdeo mostra como produzir uma tecnologia assistiva de baixo custo. No h udio, mas o vdeo inclui uma srie de nmeros para representar cada etapa do processo. Nesse caso, junto ao vdeo, deve ser disponibilizado um arquivo com a alternativa de texto que indica o contedo do vdeo e a descrio de cada uma das etapas.
Figura 17 Vdeo contendo arquivo com alternativa em texto
Situao 2 Uma universidade oferece a opo de visualizar suas videoaulas com ou sem legendas.
Figura 18 Vdeo com legenda
Alm de alternativa em texto e legenda, desejvel que os vdeos com udio apresentem alternativa na Lngua Brasileira de Sinais (Libras).
45
ALTERNATIVA PARA UDIO
Ver WCAG 2.0 Critrios de Sucesso 1.2.1, 1.2.2 e 1.2.6 udio gravado deve possuir uma transcrio descritiva. Alm de essencial para pessoas com deficincia auditiva, a alternativa em texto tambm importante para usurios que no possuem equipamento de som, que desejam apenas realizar a leitura do material ou no dispem de tempo para ouvir um arquivo multimdia. Neste caso, tambm desejvel a alternativa em Libras. Situao 1 Em um podcast o entrevistador faz perguntas a um especialista de sade. Como essas informaes so disponibilizadas ao usurio do stio em um arquivo de udio, deve ser fornecido um link para um arquivo com alternativa em texto, logo aps o contedo em udio. Uma apresentao prvia do contedo dos dois tipos de arquivo e de sua durao tambm desejvel.
RECOMENDAO 35 OFERECER
AUDIODESCRIO PARA VDEO PR-GRAVADO
Ver WCAG 2.0 Critrio de Sucesso 1.2.3, 1.2.5 e 1.2.7 Vdeos que transmitem contedo visual que no est disponvel na faixa de udio devem possuir uma audiodescrio. A audiodescrio consiste na descrio clara e objetiva de todas as informaes apresentadas de forma visual e que no fazem parte dos dilogos. Essas descries so apresentadas nos espaos entre os dilogos e nas pausas entre as informaes sonoras. Exemplo Um vdeo de um malabarista se apresentando para um grupo de crianas inclui uma verso com audiodescrio. O narrador da audiodescrio descreve o nmero e o tipo de instrumentos que o malabarista utiliza, bem como as reaes que as crianas tm durante a performance.
46
CONTROLE DE UDIO PARA SOM
Ver WCAG 2.0 Critrio de Sucesso 1.4.2 Deve ser fornecido um mecanismo para parar, pausar, silenciar ou ajustar o volume de qualquer som que se reproduza na pgina.
CONTROLE DE ANIMAO
Ver WCAG 2.0 Critrio de Sucesso 2.2.2 Para qualquer animao que inicie automaticamente na pgina devem ser fornecidos mecanismos para que o usurio possa pausar, parar ou ocultar tal animao.
2.6 Formulrios RECOMENDAO 38 FORNECER

IMAGEM DE FORMULRIOS ALTERNATIVA EM TEXTO PARA OS BOTES DE
Ver WCAG 2.0 Critrio de Sucesso 1.1.1 Ao serem utilizados botes do tipo imagem (input type=image), que servem para o mesmo propsito do boto do tipo submit, deve ser fornecida uma descrio textual para o boto atravs do atributo alt, conforme o exemplo a seguir. Exemplo 1
Figura 19 Imagem deBoto enviar Cdigo:

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

<input type="reset" name="limpar" value="Limpar" class="btLimpar" />
CSS
input.btLimpar{ background:transparent url(btLimpar.jpg) no-repeat left top; width:100px; height:47px; text-indent:-20000px; border:0; }
RECOMENDAO 39 ASSOCIAR
ETIQUETAS AOS SEUS CAMPOS
Ver WCAG 2.0 Critrio de Sucesso 1.3.1 (Tcnica H44) As etiquetas de texto (label) devem estar associadas aos seus campos (input) correspondentes no formulrio, atravs dos atributos for do label e id do input, os quais devero ter o mesmo valor. Exemplo
<label for="nome">Nome: </label> <input type="text" name="nome" id="nome" /> <label>Sexo:</label> <input type="radio" id="fem" name="sexo" /> <label for="fem">Feminino</label> <input type="radio" id="mas" name="sexo" /> <label for="mas">Masculino</label> <label for="msg">Mensagem: </label> <textarea name="msg" id="msg">Digite sua mensagem</textarea> <input type="checkbox" id="receber" name="receber" /> <label for="receber">Deseja receber nossa newsletter?</label>
48
RECOMENDAO 40 ESTABELECER
UMA ORDEM LGICA DE NAVEGAO
Os elementos do formulrio devem ser distribudos corretamente atravs do cdigo HTML, criando, assim, uma sequncia lgica de navegao. Assim, os formulrios devem primeiro ser codificados considerando a ordem lgica de navegao para depois serem organizados visualmente via CSS. OBS: O atributo tabindex somente dever ser utilizado quando existir real necessidade. importante ressaltar que este atributo dever ser utilizado com a semntica correta e dever ser verificado manualmente se o fluxo fornecido pelo tabindex realmente o desejado.
RECOMENDAO 41 NO
PROVOCAR AUTOMATICAMENTE ALTERAO NO CONTEXTO
Ver WCAG 2.0 Critrio de Sucesso 3.2.2 Quando um elemento de formulrio receber o foco, no deve ser iniciada uma mudana automtica na pgina que confunda ou desoriente o usurio. Assim, as mudanas devem ocorrer atravs do acionamento de um boto. Exemplo Correto
<select id="cidade" name="cidade"> <option value="POA">Porto Alegre</option> <option value="BH">Belo Horizonte</option> <option value="RJ">Rio de Janeiro</option> <option value="SP">So Paulo</option> </select> <input type="submit" id="submit" value="Enviar" />
Figura 21 Acionamento - forma correta
49
Exemplo Incorreto
<select name="cidade" id="cidade" onchange="location = this.options[this.selectedIndex].value;"> <option value="POA">Porto Alegre</option> <option value="BH">Belo Horizonte</option> <option value="RJ">Rio de Janeiro</option> <option value="SP">So Paulo</option> </select>
Figura 22 Acionamento - forma incorreta
INSTRUES PARA ENTRADA DE DADOS
Ver WCAG 2.0 Critrio de Sucesso 3.3.2 Para contedo que exigir entrada de dados por parte do usurio, devem ser fornecidas , quando necessrio, instrues de preenchimento juntamente com as etiquetas (label). A utilizao de caracteres pr-definidos em reas de entrada de texto s deve ocorrer se:
O texto for includo aps a entrada de dados pelo usurio (por exemplo, sugerir um novo nome de usurio caso o escolhido j exista);
A semntica do documento justifique a incluso de texto pr-definido (por exemplo, uma loja virtual que s vende para determinado pas j vem com o campo pas preenchido);
Os caracteres tenham sido fornecidos previamente pelo usurio (por exemplo, refinamento de busca).
Exemplo O seguinte exemplo indica que a data precisa ser inserida no formato dia (dd) ms (mm) ano (aaaa).
<label for="data">Data (dd-mm-aaaa)</label> <input type="text" id="data" name="data" />
50
RECOMENDAO 43 IDENTIFICAR
E DESCREVER ERROS DE ENTRADA DE DADOS
Quando um erro de entrada de dados for automaticamente detectado, o item que apresenta erro deve ser identificado e descrito ao usurio por texto. Exemplo 1 Um usurio tenta submeter um formulrio, mas esquece de preencher campos obrigatrios. Utilizando validao client-side (do lado do cliente), a omisso detectada e um alerta aparece informando ao usurio que campos obrigatrios no foram preenchidos. Para a identificao destes campos, as etiquetas so modificas tornando-se avisos e tambm o foco do teclado remetido para o primeiro campo sem preenchimento.
Figura 23 Alerta sobre o no preenchimento de campos obrigatrios
51
Figura 24 Indicao do erro no formulrio aps a mensagem de alerta
Exemplo 2 Quando o usurio enviar o formulrio e esquecer-se de preencher um campo obrigatrio ou preencher um campo de maneira incorreta, o foco remetido novamente ao formulrio, mas que estar contendo apenas os campos com erro, para que o usurio no precise navegar por todos os outros campos novamente. Abaixo dos campos com erro que devero ser novamente preenchidos, haver o boto de envio e um boto para o usurio retornar ao formulrio completo, caso ele deseje verificar todos os campos. Exemplo 3 O usurio envia o formulrio e deixa de preencher campos obrigatrios ou preenche algum campo de maneira incorreta. O foco retorna ao incio do formulrio contendo o aviso de erro e links (ncoras) para os campos do formulrio que apresentaram erro.
52
RECOMENDAO 44 AGRUPAR
CAMPOS DE FORMULRIO
Ver WCAG 2.0 Critrio de Sucesso 1.3.1 (Tcnicas H71 e H85) Devero ser agrupados os controles de formulrio relacionados de maneira lgica, utilizando-se o elemento fieldset, associando o elemento legend de forma significativa (o elemento fieldset til para agrupar, de forma lgica, elementos do formulrio). Para cada fieldset, possvel fornecer uma legenda que explica claramente o propsito ou natureza dos agrupamentos. Exemplo
<form method="post" action="..."> <fieldset> <legend>Dados Pessoais</legend> <label for="nome">O seu Nome: </label> <input type="text" name="nome" id="nome" /> ... </fieldset> <fieldset> <legend>Dados Profissionais</legend> <label for="profissao">Sua profio:</label> <input type="text" id="profissao" name="profissao" /> ... </fieldset> <fieldset> <legend>Informaes de Contato</legend> <label for="email">E-mail: </label> <input type="text" id="email" name="email" /> ... </fieldset> </form>
Figura 25 Imagem do Formulrio
53
Para agrupar elementos option dentro de um elemento de lista select, deve ser utilizado o elemento optgroup. Exemplo 2
<label for="instituto">Qual a sua instituio?</label> <select id="instituto" name="instituto"> <optgroup label="Rio Grande do Sul"> <option value="ifrs">IFRS</option> <option value="ifsul">IFSUL</option> <option value="iffarroupilha">IFFarroupilha</option> </optgroup> <optgroup label="Santa Catarina"> <option value="ifsc">IFSC</option> <option value="ifc">IFC</option> </optgroup> <optgroup label="Paran"> <option value="ifpr">IFPR</option> </optgroup> </select>
Figura 26 Imagem da caixa de seleo
RECOMENDAO 45 FORNECER CAPTCHA
HUMANO
Ver WCAG 2.0 Critrio de Sucesso 1.1.1 (Tcnicas G143 e G144) O CAPTCHA (teste interativo humano, completamente automatizado, para distinguir computadores de seres humanos), quando utilizado, dever ser fornecido em forma de pergunta de interpretao. Tais perguntas podero ser respondidas apenas por um ser humano. No entanto, preciso garantir que a pergunta no seja de difcil resoluo, permitindo que a mesma possa ser respondida por pessoas de variadas culturas e nveis de instruo. Para tal, podem ser utilizadas perguntas de senso comum, como por exemplo, qual a cor do cu? ou o fogo quente ou frio?. Tambm podem ser utilizados testes matemticos. No entanto, preciso tomar cuidado para que esses testes no sejam facilmente quebrados por
determinados programas. Uma alternativa solicitar que o usurio escreva o resultado do teste matemtico por extenso, como escreva por extenso quanto 2 + 3, ou ainda responda por extenso quanto dois mais trs. OBS: O CAPTCHA dever ser utilizado apenas quando estritamente necessrio. Exemplo
<form action="action.php" method="post"> <fieldset> <legend>CAPTCHA</legend> <label for="pergunta">Escreva por extenso quanto dois mais trs.</label> <input type="text" id="pergunta" name="pergunta" /> <input type="submit" name="enviar" value="Enviar!" /> </fieldset> </form>
Figura 27 Exemplo de CAPTCHA
Para mais detalhes sobre o desenvolvimento de formulrios acessveis, veja o tutorial Formulrios Acessveis (arquivo pdf 160 KB) na seo e-MAG no Portal do Programa de Governo Eletrnico.
55
3. Padres de acessibilidade digital no Governo Federal

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

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

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

O stio dever conter uma barra de acessibilidade no topo de cada pgina contendo os seguintes itens:

Aumentar fonte Diminuir fonte Fonte normal Alto contraste Atalhos (para Menu, Contedo e Busca) Acessibilidade (link para a pgina contendo os recursos de acessibilidade do stio)
Exemplo de Barra de Acessibilidade

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

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

Os formulrios devero estar de acordo com os seguintes itens:
Sempre utilizar a tag form, mesmo que o formulrio possua apenas um elemento, como o caso de uma caixa para pesquisa.
60
Disponibilizar os elementos do formulrio no HTML na ordem correta de navegao, sem utilizar o tabindex.
Associar as etiquetas (label) aos seus campos (input) correspondentes. No deve ocorrer mudana no contexto quando um elemento receber o foco. Deve ser fornecido um boto de envio (submit) para enviar os dados. No entanto, necessrio fornecer uma maneira de o usurio poder verificar as informaes antes que elas sejam enviadas.
Os erros de entrada de dados devem ser identificados e descritos ao usurio. Para cada conjunto de informaes, com dois ou mais elementos de entrada de dados, os mesmo devero ser agrupados atravs do elemento fieldset/legend. Em um formulrio de busca simples, por exemplo, no h a necessidade de utilizar o elemento fieldset/legend, pois apresenta apenas um campo de entrada de dados.
Exemplo de formulrio de Fale Conosco

<form method="post" action="act/contato.php"> <fieldset> <legend>Formulrio de Contato</legend> <label for="nome">Nome:</label> <input type="text" name="nome" id="nome" /> <label for="nome">E-mail:</label > <input type="text" name="email" id="email" /> <label for="assunto">Assunto:</label> <select name="assunto" id="assunto"> <option value="0" selected="selected">Selecione o assunto desejado</option> <option value="informacoes">Informaes</option> <option value="sugestoes">Sugestes</option> <option value="duvidas">Dvidas</option> </select> <label for="msg">Mensagem:</label> <textarea name="msg" id="msg"></textarea> <input type="submit" name="enviar" id="enviar" value="Enviar" class="bnt" /> </fieldset> </form>
61
Figura 32 Formulrio de contato
Aps clicar no boto enviar, uma tela de confirmao dever aparecer, conforme no exemplo a seguir, permitindo que o usurio verifique e, se necessrio, edite as informaes antes de envilas.
Figura 33 Pgina de Confirmao
Para mais detalhes ver recomendaes 38 a 45.
62
3.6 Contedo alternativo para imagens

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

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

Organizaes e especificaes World Wide Web Consortium (W3C): http://www.w3.org WCAG 2.0: http://www.w3.org/TR/WCAG20 WCAG 2.0 (portugus): http://www.ilearn.com.br/TR/WCAG20 Especificao HTML 5: http://www.w3.org/TR/html5 Especificao HTML 4.01: http://www.w3.org/TR/html401 Especificao XHTML 1.0: http://www.w3.org/TR/xhtml1 Especificao XHTML 1.1: http://www.w3.org/TR/xhtml11 Especificao CSS 1.0: http://www.w3.org/TR/CSS1 Especificao CSS 2.1: http://www.w3.org/TR/CSS21 Especificao CSS 3.0 (em construo): http://www.w3.org/Style/CSS/current-work Codificao de caracteres: http://www.w3.org/International/O-charset.pt-br.php Tutoriais W3C: http://www.w3.org/2002/03/tutorials CSS Paged media: http://www.w3.org/TR/REC-CSS2/page.html The Web Standards Project: http://www.webstandards.org/ Validadores de cdigo Validador (X)HTML: http://validator.w3.org Validador CSS: http://jigsaw.w3.org/css-validator Validador de links: http://validator.w3.org/checklink Validadores automticos de acessibilidade ASES (WCAG e e-MAG): http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG/material-de-apoio Da Silva (WAI e e-MAG): http://www.acessobrasil.org.br Cynthia Says (WAI): http://www.cynthiasays.com Hera (WAI): http://www.sidar.org/hera/ Lift (WAI): http://www.usablenet.com TAW (WAI): http://www.tawdis.net eExaminator (WCAG 1.0): http://www.acesso.umic.pt/examinator.php Functional Accessibility Evaluator 1.1: http://fae.cita.uiuc.edu/ Checklists para validao humana Checklist Manual de Acessibilidade - Desenvolvedores (documento pdf - 552 KB) http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG/material-de-apoio Checklist Manual de Acessibilidade Pessoas com deficincia visual (documento pdf - 333 KB) http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG/material-de-apoio
64
Ferramentas para anlise de relao de contraste Luminosity Colour Contrast Ratio Analyser (online): http://juicystudio.com/services/luminositycontrastratio.php Color Contrast Analyser (online): http://www.colorsontheweb.com/colorcontrast.asp Check mu colours (online): http://www.checkmycolours.com/ Contrast Analyser 2.2: http://www.paciellogroup.com/resources/contrast-analyser.html Simulador de Navegador Browsershots: http://browsershots.org Leitores de Tela Jaws for Windows - Leitor de tela americano produzido pela Freedom Scientific: http://www.freedomscientific.com NVDA - Leitor de tela gratuito e de cdigo aberto para Windows: http://www.nvda-project.org Orca - Leitor de tela gratuito e de cdigo aberto para Linux: http://live.gnome.org/Orca Virtual Vision - Leitor de tela nacional fabricado pela Micropower: http://www.micropower.com.br VoiceOver - Leitor de tela para MAC OS: http://www.apple.com/br/accessibility/voiceover Windows Eyes - Leitor de tela canadense fabricado pela GW Micro: http://www.gwmicro.com/Window-Eyes DOSVOX: Interface especializada desenvolvida pela UFRJ: http://intervox.nce.ufrj.br Descrio dos Leitores de Tela (documento pdf - 2.71 MB) http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG/material-de-apoio Avaliao dos Pontos de Fragilidades em Leitores de Tela (documento pdf - 1.47 MB) http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG/material-de-apoio Navegadores Textuais Lynx: http://lynx.browser.org Lynx Viewer (simulador): http://www.delorie.com/web/lynxview.html Simulador para Cegueira Cromtica (Daltonismo) Vischeck: http://www.vischeck.com/ Tutoriais O uso correto do texto alternativo (documento pdf - 239 KB) http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG/material-de-apoio Tabelas Acessveis (documento pdf - 153 KB) http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG/material-de-apoio Formulrios Acessveis (documento pdf - 159 KB) http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG/material-de-apoio
5. Leitura complementar
Padres Brasil e-Gov http://www.governoeletronico.gov.br/acoes-e-projetos/padroes-brasil-e-gov WCAG 2.0 http://www.ilearn.com.br/TR/WCAG20 Tcnicas para as WCAG 2.0 http://www.acesso.umic.pt/w3/TR/WCAG20-TECHS/ CSS e Web Standards http://maujor.com/ RENAPI Projeto de Acessibilidade Virtual http://bento.ifrs.edu.br/acessibilidade/ Acessibilidade Web: (X)HTML, CSS, Scripts e Usabilidade para Todos http://www.acessibilidadelegal.com/ Acesso Digital http://www.acessodigital.net Web Accessibility in Mind http://webaim.org W3C Brasil http://w3c.br CLF Standards (Canad) http://www.tbs-sct.gc.ca/clf2-nsi2/index-eng.asp Section 508 (Estados Unidos) http://www.section508.gov/ NDA (Irlanda) http://www.nda.ie/cntmgmtnew.nsf
66
6. Glossrio
Acessibilidade: Significa permitir o acesso por todos, independente do tipo de usurio, situao ou ferramenta. Acessibilidade Web: Criar ou tornar as ferramentas e pginas Web acessveis a um maior nmero de usurios, inclusive pessoas com deficincia. Agente de Usurio: Qualquer software que recupera e apresenta contedo Web para seus usurios, possibilitando que o usurio interaja com o contedo Web. Atributo: Os atributos servem para definir uma propriedade de um elemento (X)HTML. CSS (Cascading Style Sheets Folhas de estilo em cascata): Linguagem que descreve a apresentao, visual ou sonora, de um documento. Leitor de tela: Software que fornece informaes atravs de sntese de voz sobre os elementos exibidos na tela do computador. Esses softwares interagem com o sistema operacional, capturando as informaes apresentadas na forma de texto e transformando-as em resposta falada atravs de um sintetizador de voz. Para navegar utilizando um leitor de tela, o usurio faz uso de comandos pelo teclado. O leitor de tela tambm pode transformar o contedo em informao ttil, exibida dinamicamente em Braille por um hardware chamado de linha ou display Braille, servindo, em especial, a usurios com surdocegueira. Navegador: Programa que permite ao usurio consultar e interagir com o material publicado na Web. Navegador textual: Tipo de navegador baseado em texto, diferente dos navegadores com interface grfica, onde as imagens so carregadas. O navegador textual pode ser utilizado com leitores de tela por pessoas com deficincia visual e, tambm, por pessoas que acessam a Internet com conexo lenta. Padres Web (Web Standards): Padres Web so regras de tecnologia definidas pelo W3C e outros rgos da rea utilizados para criar e interpretar o contedo Web. Podcast: Arquivo ou uma srie de arquivos de udio digital, geralmente em formato MP3 ou AAC (este pode conter imagens estticas e links), publicada atravs de podcasting (forma de publicao de arquivos de mdia digital pela Internet, atravs de um feed RSS). Tag: Cdigo usado para marcar o incio e o fim de um elemento (X)HTML.
67
Tecnologia assistiva: refere-se ao conjunto de artefatos disponibilizados s pessoas com deficincia, que contribui para prover-lhes uma vida mais independente, com mais qualidade e possibilidades de incluso social. O propsito das tecnologias assistivas reside em ampliar a comunicao, a mobilidade, o controle do ambiente, as possibilidades de aprendizado, trabalho e integrao na vida familiar, com os amigos e na sociedade em geral. W3C (World Wide Web Consortium): Consrcio de mbito internacional com a finalidade de desenvolver especificaes, guias e ferramentas para Web. WAI: (Accessibility Initiative - Iniciativa de Acessibilidade na Web): Tem como objetivo desenvolver protocolos que melhorem a interoperabilidade e promovam a evoluo da WWW. WCAG (Web Content Accessibility Guidelines: Recomendaes de Acessibilidade para Contedo Web): Abrange diversas recomendaes com a finalidade de tornar o contedo Web mais acessvel. Webcast: Transmisso de udio e vdeo por meio da Internet ou redes corporativas para um grupo de pessoas, simultaneamente. XHTML (Extensible HyperText Markup Language): a linguagem HTML reformulada para seguir as regras do XML. XML (Extensible Markup Language): Uma linguagem de marcao semelhante HTML, mas que permite a descrio de dados definidos por elementos de programao.
68
7. Anexo 1 Tabela de Contraste de Cores

As tabelas a seguir mostram as cores que, em fundo preto ou branco, apresentam uma relao de contraste de no mnimo 4,5:1. Cores #093 #0C3 #0F3 #393 #3C3 #3F3 #693 #6C3 #6F3 #993 #9C3 #9F3 contrastantes com preto #096 #099 #09C #0C6 #0C9 #0CC #0F6 #0F9 #0FC #396 #399 #39C #3C6 #3C9 #3CC #3F6 #3F9 #3FC #696 #6C6 #6F6 #996 #9C6 #9F6 #699 #6C9 #6F9 #969 #999 #9C9 #9F9 #C39 #C69 #C99 #CC9 #CF9 #F09 #F39 #F69 #F99 #FC9 #FF9 #69C #6CC #6FC #96C #99C #9CC #9FC #C3C #C6C #C9C #CCC #CFC #F0C #F3C #F6C #F9C #FCC #FFC
#090 #0C0 #0F0 #390 #3C0 #3F0 #690 #6C0 #6F0 #990 #9C0 #9F0
#C60 #C90 #CC0 #CF0 #F00 #F30 #F60 #F90 #FC0 #FF0
#C63 #C93 #CC3 #CF3 #F03 #F33 #F63 #F93 #FC3 #FF3
#C66 #C96 #CC6 #CF6 #F06 #F36 #F66 #F96 #FC6 #FF6
#09F #0CF #0FF #39F #3CF #3FF #66F #69F #6CF #6FF #96F #99F #9CF #9FF #C0F #C3F #C6F #C9F #CCF #CFF #F0F #F3F #F6F #F9F #FCF #FFF
Tabela 1 Cores contrastantes com a cor preta
#000 #030 #060 #300 #330 #360 #600 #630 #660 #900 #930 #960
#C00 #C30
Cores #003 #033 #063 #303 #333 #363 #603 #633 #663 #903 #933 #963
#C03 #C33
contrastantes #006 #009 #036 #039 #066 #069 #306 #309 #336 #339 #366 #369 #606 #609 #636 #639 #666 #669 #906 #909 #936 #939 #966
#C06 #C36 #C09 #C39
com branco #00C #03C #06C #30C #33C #36C #60C #63C #66C #90C #93C
#C0C
#00F #03F #06F #30F #33F #36F #60F #63F #66F #90F #93F
Tabela 2 Cores contrastantes com a cor branca
69

E MAG Modelo de Acessibilidade Egov v3

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

E MAG Modelo de Acessibilidade Egov v3

Uploaded by

Copyright:

Available Formats

Ministrio do Planejamento, Oramento e Gesto Secretaria de Logstica e Tecnologia da Informao Departamento de Governo Eletrnico www.governoeletronico.gov.

Modelo de Acessibilidade em Governo Eletrnico

CDU 004.5:35 CDD 004.678

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

Sob as seguintes condies:

Ficando claro que:

Modelo de Acessibilidade em Governo Eletrnico e-MAG

Equipe do DGE Departamento de Governo Eletrnico

Modelo de Acessibilidade em Governo Eletrnico e-MAG

Modelo de Acessibilidade em Governo Eletrnico e-MAG

1.1 Sobre a verso 3.0

Modelo de Acessibilidade em Governo Eletrnico e-MAG

Modelo de Acessibilidade em Governo Eletrnico e-MAG

1.3 O acesso de pessoas com deficincia

Modelo de Acessibilidade em Governo Eletrnico e-MAG

1.4 O processo para desenvolver um stio acessvel

Modelo de Acessibilidade em Governo Eletrnico e-MAG

Modelo de Acessibilidade em Governo Eletrnico e-MAG

Modelo de Acessibilidade em Governo Eletrnico e-MAG

Modelo de Acessibilidade em Governo Eletrnico e-MAG

2.1 Marcao RECOMENDAO 1 RESPEITAR

Modelo de Acessibilidade em Governo Eletrnico e-MAG

DE FORMA LGICA E SEMNTICA

CORRETAMENTE OS NVEIS DE CABEALHO

Ver WCAG 2.0 Critrios de Sucesso 1.3.1 e 2.4.10

Modelo de Acessibilidade em Governo Eletrnico e-MAG

Figura 1 Exemplo de utilizao dos nveis de ttulo

Modelo de Acessibilidade em Governo Eletrnico e-MAG

DE FORMA LGICA E INTUITIVA A LEITURA E

Modelo de Acessibilidade em Governo Eletrnico e-MAG

Exemplo incorreto do uso do tabindex

Ordem de tabulao errada, conferida pelo tabindex:

TODAS AS FUNES DA PGINA VIA TECLADO

Evento do mouse onmousedown onmouseup onclick* onmouseover onmouseout

Evento do teclado onkeydown onkeyup onkeypress onfocus* onblur*

Modelo de Acessibilidade em Governo Eletrnico e-MAG

NCORAS PARA IR DIRETO A UM BLOCO DE CONTEDO

Ver WCAG 2.0 Critrio de Sucesso 2.4.1

Menu Principal da Pgina

Formulrio de pesquisa do stio (pode estar em qualquer lugar no stio)

UTILIZAR TABELAS PARA DIAGRAMAO

Modelo de Acessibilidade em Governo Eletrnico e-MAG

ABRIR NOVAS INSTNCIAS SEM A SOLICITAO DO USURIO

2.2 Comportamento (DOM) RECOMENDAO 10 GARANTIR

Pgina JavaScript (.js)

Exemplo incorreto Pgina HTML

CRIAR PGINAS COM ATUALIZAO AUTOMTICA PERIDICA

Modelo de Acessibilidade em Governo Eletrnico e-MAG

UTILIZAR REDIRECIONAMENTO AUTOMTICO DE PGINAS

ALTERNATIVA PARA MODIFICAR LIMITE DE TEMPO

Modelo de Acessibilidade em Governo Eletrnico e-MAG

INCLUIR SITUAES COM INTERMITNCIA DE TELA

O CONTROLE DO USURIO SOBRE AS ALTERAES

2.3 Contedo / Informao RECOMENDAO 16 IDENTIFICAR

Modelo de Acessibilidade em Governo Eletrnico e-MAG

Exemplo Em HTML 4.01

UM TTULO DESCRITIVO E INFORMATIVO PGINA

INFORMAO SOBRE A LOCALIZAO DO

Voc est em: Pgina inicial > Ensino > Editais

LINKS CLARA E SUCINTAMENTE

Modelo de Acessibilidade em Governo Eletrnico e-MAG

ALTERNATIVA EM TEXTO PARA AS IMAGENS DO STIO

Modelo de Acessibilidade em Governo Eletrnico e-MAG