Beruflich Dokumente
Kultur Dokumente
Ministrio da Educao
Secretaria de Educao Profissional e Tecnolgica
Projeto de Acessibilidade Virtual
Instituto Federal de Educao, Cincia e Tecnologia do Rio Grande do Sul
Instituto Federal de Educao, Cincia e Tecnologia do Cear
Instituto Federal de Educao, Cincia e Tecnologia Baiano
Verso 3.1
Modelo de Acessibilidade
em Governo Eletrnico
Abril de 2014
Brasil. Ministrio do Planejamento, Oramento e Gesto. Secretaria de Logstica
e Tecnologia da Informao
CDU 004.5:35
CDD 004.678
Esta obra est licenciada por uma licena Creative Commons - Atribuio 4.0
Internacional(CC BY 4.0)
http://creativecommons.org/licenses/by/4.0/deed.pt_BR
mesmo comercialmente.
O concedente no pode revogar essas liberdades, contanto que voc siga os termos
da licena.
licenciante, e indicar as mudanas feitas (mas no de maneira que sugira que estes
concedem qualquer aval a voc ou ao seu uso da obra).
Sem restries adicionais Voc no pode aplicar termos jurdicos ou medidas de
carter tecnolgico que restrinjam legalmente outros de fazerem algo que a licena
permita.
Bruna Poletto Salton, Juclia Poletto Almeida, Agebson Rocha Faanha, Andr Luiz
Rezende, Andra Poletto Sonza, ngela Guimares, Felipe Zap, Gleison Samuel do
Nascimento, Jorge Fiore de Oliveira Junior, Jlia Marques Carvalho da Silva, Marco
Antnio de Queiroz (in memoriam), Marcus Vincius Bennett Ferreira, Maurcio Covolan
Rosito, Reinaldo Ferraz, Renato Busatto, Ricardo Moro, Ueslei Paterno e Woquiton
Fernandes, que tornaram a verso 3.0 do eMAG possvel. Por sua contribuio na
verso 3.1 agradecemos Anderson Lus Porto Costa, Everaldo Carniel, Lael Nervis,
Jason Pilotti e Lvio Siqueira Lima.
O DGE tambm agradece ao: Andr Pimenta Freire, Carol Scarton, Diego Roger Ramos
Freitas, Edercio Marques Bento, Jorge Fernandes, Leonelo Dell Anhol Almeida, Maria
Ceclia Calani Baranauskas, Thiago Prado de Campos, Vagner Figueredo de Santana.
Pelas contribuies, via consulta pblica, com sugestes, esclarecimentos e correes
para o presente documento.
3.1 Marcao................................................................................................16
Recomendao 1.1 Respeitar os Padres Web..............................................16
Recomendao 1.2 Organizar o cdigo HTML de forma lgica e semntica.......17
Recomendao 1.3 Utilizar corretamente os nveis de cabealho.....................19
Recomendao 1.4 Ordenar de forma lgica e intuitiva a leitura e tabulao....21
Recomendao 1.5 Fornecer ncoras para ir direto a um bloco de contedo.....22
Recomendao 1.6 No utilizar tabelas para diagramao.............................24
Recomendao 1.7 Separar links adjacentes................................................25
Recomendao 1.8 Dividir as reas de informao........................................27
Recomendao 1.9 No abrir novas instncias sem a solicitao do usurio.....32
3.2 Comportamento (Document Object Model DOM).......................................34
Recomendao 2.1 - Disponibilizar todas as funes da pgina via teclado.........34
Recomendao 2.2 Garantir que os objetos programveis sejam acessveis ....37
Recomendao 2.3- No criar pginas com atualizao automtica peridica......38
Recomendao 2.4 No utilizar redirecionamento automtico de pginas........39
Recomendao 2.5 Fornecer alternativa para modificar limite de tempo..........39
Recomendao 2.6 No incluir situaes com intermitncia de tela.................40
6 . Glossrio....................................................................................................94
Uma das principais atribuies do Governo Federal promover a incluso social, com
distribuio de renda e diminuio das desigualdades. Entre as diversas iniciativas que
visam atingir esse objetivo, o governo investe no uso adequado e coordenado da
tecnologia porque compreende a incluso digital como caminho para a incluso social.
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.
A reviso do modelo 2.0, que resultou na verso 3.0, foi desenvolvida atravs da
parceria entre o Departamento de Governo Eletrnico e o Projeto de Acessibilidade
Virtual da RENAPI (Rede de Pesquisa e Inovao em Tecnologias Digitais).
A verso 3.1 do eMAG apresenta melhorias no contedo do texto para torn-lo mais
compreensvel.
1. Marcao;
3. Contedo/Informao;
4. Apresentao/Design;
5. Multimdia;
6. Formulrio.
Por fim, os links de Recursos e Leitura complementar foram retirados para permitir
alteraes mais dinmicas ao contedo, que pode ser consultado na pgina do eMAG
no Portal do Programa de Governo Eletrnico: http://governoeletronico.gov.br/acoes-
e-projetos/eMAG
1.4 Legislao
Esto listados os principais documentos, que fazem parte da legislao que norteia o
processo de promoo da acessibilidade e a implementao do eMAG:
O WAI ainda desenvolveu especificaes para aplicaes web (Web Rica), ainda boa
parte em status de 'rascunho chamado WAI-ARIA (Accessible Rich Internet
Applications http://w3.org/standards/techs/aria#w3c_all), que busca resolver
muitos dos problemas da camada de comportamento (DOM), sendo parte j
implementada por alguns navegadores.
Deve-se lembrar que aps cada teste, os ajustes devidos devem ser feitos e
novamente testados.
5. Teste com usurios reais. Outra etapa essencial da validao de uma pgina
a realizao de testes com usurios reais (pessoas com deficincia ou
limitaes tcnicas). Um usurio real poder dizer se um stio est realmente
acessvel, compreensvel e com boa usabilidade e no simplesmente
tecnicamente acessvel. Quanto maior e mais diversificado o nmero de
usurios reais participando da avaliao de acessibilidade, mais eficaz e
robusto ser o resultado.
1. Marcao;
3. Contedo/Informao;
4. Apresentao/Design;
5. Multimdia;
6. Formulrio.
3.1 Marcao
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/cartilha-
de-codificacao.
Assim, marcao semntica adequada deve ser utilizada para designar os cabealhos
(h1, h2, h3), as listas (ul, ol, dl), texto enfatizado (strong), marcao de cdigo
(code), marcao de abreviaturas (abbr), marcao de citaes longas (blockquote),
etc. Dessa forma, as pginas podero ser apresentadas e compreendidas sem
recursos de estilizao, tal como as folhas de estilo. Alm disso, o cdigo
semanticamente correto muito importante para usurios com deficincia visual, pois
os leitores de tela descrevem primeiro o tipo de elemento e depois realizam a leitura
do contedo que est dentro desse elemento.
Exemplo incorreto
<h1>Padres Web</h1>
<p><a href="menu1.html">Menu 1</a></p>
<p><a href="menu2.html">Menu 2</a></p>
<h2>Web Semntica</h2>
<p>
O poder da web est em sua universalidade. Ser
acessada por todos, independente de deficincia,
um aspecto essencial.
</p>
<p>Tim Berners Lee</p>
Exemplo correto
<h1>Padres Web</h1>
<ul>
<li><a href="menu1.html">Menu 1</a></li>
<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>
<header role="banner">
<h1>Padres Web</h1>
</header>
<nav role="navigation">
<ul>
<li><a href="menu1.html">Menu 1</a></li>
<li><a href="menu2.html">Menu 2</a></li>
</ul>
</nav>
<div role="main">
<h2>Web Semntica</h2>
<blockquote>
O poder da web est em sua universalidade. Ser acessada por todos,
Exemplo
HTML
<h1>Tcnicas culinrias</h1>
<p>A seguir os segredos que facilitam a vida na cozinha.</p>
<h2>Legumes, folhas e vegetais</h2>
<h3>Baba do quiabo</h3>
<p>Para eliminar a baba do quiabo, lave-o ainda inteiro, seque-o e coloque-o numa
tigela com um pouco de suco de limo, deixando repousar durante 15 minutos. Depois lave
ligeiramente, corte e cozinhe.</p>
<h3>Feijo</h3>
<p>1 xcara de feijo cru serve trs pessoas depois de pronto.</p>
<h3>Cenouras e aipos</h3>
<p>Para resolver o problema de cenouras e aipos meio murchos, mergulhe-os em gua
gelada misturada com uma colher de ch de mel por uma hora. Escorra e seque levemente
depois.</p>
<h2>Congelamento e descongelamento</h2>
<h3>Carne em pedaos</h3>
<p>Para descongelar carne em pedaos inteiros coloquea embrulhada, numa vasilha com
gua. Coloque sal na gua e no pacote e tampe por uma hora.</p>
<h3>Carne moda</h3>
<p>Para apressar o descongelamento da carne moda, salgue a quantidade que ir usar. O
sal apressa o descongelamento.</p>
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.
Para facilitar a utilizao das ncoras, podem ser disponibilizados atalhos por teclado,
utilizando o atributo accesskey nos links relevantes. No pode haver repetio do
mesmo accesskey em uma pgina. Para o governo federal so recomendados atalhos
para o menu principal, para o contedo e para a caixa de pesquisa. Maiores detalhes a
esse respeito podem ser encontrados no captulo 3 Elementos de acessibilidade nas
pginas do Governo Federal.
Devem ser utilizados ambos os atributos name e id para que as ncoras funcionem em
todos os navegadores e tecnologias assistivas, tanto textuais quanto grficos, j que
h os que suportam ambos os atributos e os que suportam apenas um deles.
Os links indicadores de incio e fim de contedo e incio e fim de menu podem estar
ocultos na pgina utilizando folhas de estilo. No entanto, necessrio tomar o cuidado
de ocult-los de forma que eles continuem acessveis aos leitores de tela. Os
mecanismos para ocultar elementos e seus efeitos na acessibilidade so os seguintes:
Exemplo
<ul id="atalhos">
<li><a href="#irconteudo" accesskey="1">Ir Conteudo[1]</a></li>
<li><a href="#irmenu" accesskey="2">Ir para menu principal[2]</a></li>
<li><a href="#irbusca">Ir para busca [3]</a></li>
</ul>
Contedo da Pgina
<div>
<a href="#" id="irconteudo" class="oculto">Incio do contedo</a>
<!-- Contedo
</div>
<form action="#"method="post">
<fieldset>
<legend>Buscar</legend>
<label for="busca">Pesquise aqui</label>
<input type="text" href="#" id="irbusca" value="Pesquise aqui" />
<input type="submit" value="Buscar" class="buscar" name="buscar" />
</fieldset>
</form>
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.
</head>
<body>
<table border="1">
<tr id="topo">
<td colspan="2">
<!--barra de acessibilidade-->
</td>
<td colspan="3">
<h1>Exemplo com tabela</h1>
</td>
</tr>
<tr id="menu">
<td><a href="menu1.html">Menu 1</a></td>
<td><a href="menu2.html">Menu 2</a></td>
<td><a href="menu3.html">Menu 3</a></td>
<td><a href="menu4.html">Menu 4</a></td>
</tr>
<tr id="conteudo">
<td colspan="4" id="central">
<!--contedo principal da pgina-->
</td>
<td id="lateral">
<!--contedo da lateral da pgina-->
</td>
</tr>
<tr id="rodape">
<td colspan="2">
<!--direitos autorais-->
</td>
<td colspan="3">
<!--e-mail de contato-->
</td>
</tr>
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.
Exemplo incorreto
<p id="menu">
<a href="#menu">Pular o menu</a><br />
<a href="home.html">Home</a><br />
<a href="pesquisa.html">Pesquisa</a><br />
<a href="mapasite.html">Mapa do Site</a>
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>
<!-- Conteudo do Site -->
Em HTML5 e ARIA
Existem trs roles da especificao ARIA que podem ser utilizados para as listas: o
role navigation, que indica o menu principal do site (esse role possui a mesma funo
que a elemento NAV do HTML5). O segundo e o terceiro roles so muito semelhantes,
o role menu e o role menubar. Os dois possuem a funo de indicar menus que no
so o principal da pgina. A diferena entre os dois que o role menu possui um
sentindo mais geral enquanto o menubar ideal para criaes de menu na horizontal.
Um exemplo de uso de menu pode ser a utilizao de sub-menus dentro do menu
principal. Os roles menu e menubar podem possuir filhos com role menuitem para
indicar que se trata de um item daquele menu.
...
</head>
<body>
<header id="topo" role="banner">
<div>
<!--barra de acessibilidade-->
</div>
<h1>Exemplo com tabela</h1>
</header>
<nav id="menu" role="navigation">
<ul>
<li><a href="menu1.html">Menu 1</a></li>
<li><a href="menu2.html">Menu 2</a></li>
<li><a href="menu3.html">Menu 3</a></li>
<li><a href="menu4.html">Menu 4</a></li>
<li><a href="menu5.html">Menu 5</a></li>
<ul>
</nav>
<div role="main">
<div id="central">
<!--contedo principal da pgina-->
</div>
<div id="lateral">
Exemplo
<div id="topo">
<a href="#inicioTopo" id="inicioTopo">Topo</a>
<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>
Exemplo
Em HTML5 e ARIA
<header>
Contm informaes introdutrias para uma pgina ou para uma seo dela.
<nav>
utilizada para sees da pgina que contenham links para outras pginas ou
sees, como o menu principal, por exemplo.
<section>
Representa uma seo genrica ou uma seo que contm uma aplicao.
Funciona de maneira parecida com a elemento <div>, separando sees do
documento.
<article>
Representa uma seo da pgina independente, como uma postagem em um
blog, um comentrio em um frum, entre outros.
<aside>
Contm contedo relacionado rea principal do documento.
<footer>
utilizada para demarcar o rodap da pgina ou de uma seo do contedo.
Banner
Contm informaes voltadas ao site como um todo e no somente pgina.
Representa as informaes normalmente contidas no topo das pginas, como o
ttulo e o logo do site e a barra de acessibilidade.
Complementary
Contedo adicional ou complementar ao contedo principal.
Contentinfo
Contm informaes gerais do site como um todo, que normalmente aparecem
no rodap, como copyright, contato, etc.
Main
Contm o contedo principal da pgina.
Navigation
Contm os links para navegar pelas partes do site ou da pgina, como o caso
do menu.
Search
Esta seo contm o formulrio de busca do site.
O elemento FOOTER, assim como o HEADER, pode ser utilizado mais que uma vez na
mesma pgina, pois ele pode ser utilizado para dois objetivos. O primeiro para o
rodap geral da pgina que deve receber o valor contentinfo para o role. O segundo
para indicar rodap em sees e, nesse caso, deve ser utilizado o role complementary.
Toda diviso de contedo que possua um significado importante deve ser feita
utilizando o elemento SECTION no lugar do elemento DIV, pois o DIV no HTML5 possui
a funo de apenas agrupar elementos que precisam ser agrupados, mas no
possuem uma separao semntica dos demais elementos.
<header role="banner">
<a href="#inicioTopo" id="inicioTopo">Topo</a>
<h1>NOME DA INSTITUIO</h1>
<div id="barraAcessibilidade">
<p>Barra de Acessibilidade</p>
<ul>
<li><a href="#inicioConteudo">Ir para contedo [1]</a></li>
<li><a href="#inicioMenu">Ir para menu principal [2]</a></li>
<li><a href="#busca">Ir para Busca [3]</a></li>
</ul>
</div>
</header>
<nav role="navigation">
<a href="#inicioMenu" id="inicioMenu" accesskey="2">Menu</a>
<ul>
<li>Itens de menu</li>
<li>...</li>
</ul>
</nav>
<div id="conteudo" role="main">
<a href="#inicioConteudo" id="inicioConteudo" accesskey="1">Contedo</a>
<section role="section" aria-label="Formulrio de busca">
<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>
</section>
<section role="section" aria-label="Contedo Principal">
<header role="heading">
<h2>BEM VINDO</h2>
</header>
<p>Seja bem vindo ao nosso site.</p>
</section>
</div>
<footer role="contentinfo">
Pop-ups;
muito importante que os links abram na guia ou janela atual de navegao, pois os
usurios com deficincia visual podem ter dificuldade em identificar que uma nova
janela foi aberta. Alm disso, estando em uma nova janela, no conseguiro retornar
pgina anterior utilizando a opo voltar do navegador. Quando for realmente
necessria a abertura de um link em nova janela, recomendado que tal ao seja
informada ao usurio no prprio texto do link. Isso permite ao usurio decidir se quer
ou no sair da janela ou aba em que se encontra e, caso decida acessar o link, ele
saber que se trata de uma nova aba ou janela.
Exemplo
As janelas modais, como as lightbox, fazem com que o foco do teclado permanea
atrs da janela, ou seja, o usurio navegando pelo teclado no tem acesso ao
contedo dessas janelas. Alm disso, as janelas modais, em geral, no apresentam
um bom nvel de acessibilidade em dispositivos mveis. Assim, se houver real
necessidade de utilizar esse tipo de elemento, preciso garantir que o foco seja
remetido para o incio do contedo da janela modal, que o contedo dentro da mesma
seja acessvel e que seja possvel retornar facilmente para o site navegando pelo
teclado.
Exemplo
Um exemplo simples para criao de uma janela modal foi colocado abaixo contendo
apenas HTML e CSS3.
HTML
<div id="conteudo" role="main">
<a href="#openModal">Abrir Janela Modal</a>
<div id="openModal" class="modalDialog">
<div>
<a href="#close" class="close">Fechar</a>
<h2>Janela Modal</h2>
<p>
Esta uma janela modal acessvel e foi criada utilizando apenas HTML e CSS3.
</p>
<p> importante disponibilizar o link abaixo para sinalizar o final da janela modal.<
/p>
<a href="#close">Fim do contedo modal, clique aqui para retornar</a>
</div>
</div>
</div>
CSS3
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
display:none;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
display: block;
pointer-events: auto;
}
.modalDialog > div {
Algumas funes especficas do mouse possuem uma funo lgica correspondente via
teclado, conforme mostrado na tabela a seguir:
onkeydown onmousedown
onkeyup onmouseup
onkeypress onclick*
onfocus* onmouseover
onblur* onmouseout
Exemplo:
HTML
Em HTML5 e ARIA
Menus suspensos so timos para organizar sites muito grandes, porm esses menus
podem acarretar problemas na acessibilidade, especialmente no que diz respeito ao
acesso aos subitens. Esses menus, em muitos casos, so desenvolvidos de forma que
funcionam apenas com eventos do mouse, o que se torna um grande problema de
acessibilidade. Abaixo, apresentado um exemplo que utiliza HTML5 e ARIA, alm de
implementao de javascript, pensando-se na acessibilidade nos subitens.
HTML5
<nav role="navigation" aria-label="Menu principal" class="topnav" id="menu">
<ul>
<li><a href="index.php">Pgina inicial</a></li>
<li><a href="noticias.php">Notcias</a></li>
<li><a href="eventos.php">Eventos</a></li>
<li>
<a href="acessibilidade-web.php">Acessibilidade Web</a>
<p><a href="#" class="expandir">Expandir menu Acessibilidade Web</a></p>
<ul class="subnav" role="menu">
<li role="menuitem"><a href="#">Projetos acessibilidade web</a></li>
<li role="menuitem"><a href="#">Notcias acessibilidade web</a></li>
<li role="menuitem"><a href="#">Dicas acessibilidade web</a></li>
<li role="menuitem"><a href="#">Manuais acessibilidade web</a></li>
</ul>
</li>
</ul>
</nav>
CSS
Javascript:
$(".expandir").click(function() {
$(this).parent().next().slideToggle('slow');
return false;
});
});
Exemplo incorreto
Pgina HTML
Exemplo correto
Pgina HTML
<script src="js/exemplo.js" type="text/javascript"></script>
<noscript>Seu navegador no tem suporte a JavaScript ou est desativado!</noscript>
A funo alert do javascript no gera um pop-up e sim uma mensagem que lida
por todos os leitores de tela.
Quando no for possvel que o elemento programvel seja diretamente acessvel, deve
ser fornecida uma alternativa em HTML para o contedo.
Quando o script for utilizado em uma pgina da Web, uma forma de fornecer uma
alternativa para ele atravs do elemento NOSCRIPT. Este elemento pode ser
utilizado para mostrar contedos em navegadores que no suportam scripts ou que
tenham o script desabilitado. No entanto, se o navegador tiver suporte a scripts e
estes estiverem habilitados, o elemento NOSCRIPT ser ignorado. Dessa forma, a
utilizao do elemento NOSCRIPT para um script inacessvel no garante que o objeto
seja acessvel. Assim, a recomendao que o prprio script seja desenvolvido
tomando-se o cuidado para que ele seja acessvel, e o elemento NOSCRIPT deve ser
utilizado para abranger os casos em que scripts no so suportados.
Como exemplo de uma boa prtica, em uma interface Web para e-mail (Webmail), um
desenvolvedor pode fornecer um boto ou link para buscar novos e-mails recebidos
em vez de atualizar automaticamente. Em pginas onde o limite de tempo
absolutamente necessrio, o usurio dever ser informado que a pgina atualizada
automaticamente.
Figura 7: O Webmail Expresso possui um boto de atualizar para carregamento de novas mensagens
Exemplo:
No devem ser utilizadas marcaes para redirecionar a uma nova pgina, como o uso
do atributo http-equiv com contedo refresh do elemento META. Ao invs disso,
deve-se configurar o servidor para que o redirecionamento seja transparente para o
usurio (ver ePWG - Cartilha de Codificao em
http://epwg.governoeletronico.gov.br/cartilha-codificacao).
Em uma pgina onde h limite de tempo para realizar uma tarefa deve haver a opo
de desligar, ajustar ou prolongar esse limite. Essa recomendao no se aplica a
eventos em que o limite de tempo absolutamente necessrio.
Deve-se lembrar que, em ambos os casos, o limite de tempo deve ser informado.
Exemplos:
Em HTML 4.01
<html lang="pt-BR">
<head>
<title>documento escrito em portugus do Brasil</title>
Em XHTML 1.1
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-BR" lang="pt-BR">
<head>
<title>documento escrito em portugus do Brasil</title>
Em HTML5
<html lang="pt-br">
Exemplo
XHTML
<p xml:lang="de">
Da dachte der Herr daran, ihn aus dem Futter zu schaffen,
aber der Esel merkte, da kein guter Wind wehte, lief fort
und machte sich auf den Weg nach Bremen: dort, meinte er,
knnte er ja Stadtmusikant werden.
</p>
HTML
<p lang="de">
Da dachte der Herr daran, ihn aus dem Futter zu schaffen,
aber der Esel merkte, da kein guter Wind wehte, lief fort
und machte sich auf den Weg nach Bremen: dort, meinte er,
knnte er ja Stadtmusikant werden.
</p>
<p>
O leitor de tela <span lang="en">JAWS</span> (acrnimo para <span lang="en">Job
Access With Speech</span>) um software desenvolvido pela empresa americana <span
lang="en">FreedomScientific</span> e , atualmente, um dos mais populares no mundo.
Trata-se de um <span lang="en">software pago</span>, desenvolvido para o sistema
operacional <span lang="en">Microsoft Windows</span>.
</p>
Exemplo 1
A pgina inicial do Projeto de Acessibilidade Virtual apresenta o seguinte ttulo:
<title>
Exemplo 2
A pgina secundria Contato do Projeto de Acessibilidade Virtual apresenta o
seguinte ttulo:
<title>
Contato - Projeto Acessibilidade Virtual
</title>
Exemplo 3
A pgina interna Publicaes do stio do Ministrio da Educao apresenta o seguinte
ttulo:
<title>
Publicaes Ministrio da Educao
</title>
Para mais detalhes a respeito do ttulo descritivo, ver ePWG - Cartilha de Codificao
do ePWG (disponvel em: http://epwg.governoeletronico.gov.br/cartilha-codificacao)
Exemplo
Um usurio navegando por um stio de uma universidade encontra-se na seo de
editais, que est dentro do menu Ensino. Acima do contedo, disponibilizada a
seguinte Migalha de po:
OBS: Na migalha de po, todas as pginas do caminho, com exceo da qual est o
usurio (posio atual), devero estar implementadas como links e contidas dentro de
uma lista.
preciso tomar cuidado para no utilizar a mesma descrio para dois ou mais links
que apontem para destinos diferentes. Da mesma forma, links que remetem ao
mesmo destino devem ter a mesma descrio.
Exemplo Incorreto
<h2>Educao Superior</h2>
<p>Tomam posse os reitores das federais da Bahia e Tringulo</p>
<p> <a href="notici5125.html" title=Leia mais notcias sobre Educao
Superior>Leia mais notcias sobre Educao Superior</a> </p>
Exemplo correto
<h2>Educao Superior</h2>
<p>Tomam posse os reitores das federais da Bahia e Tringulo</p>
Exemplo incorreto:
Exemplo correto:
OBS: No se deve fazer a utilizao de links do tipo clique aqui, leia mais, mais,
saiba mais, veja mais, acesse a lista, pois estas expresses no fazem sentido
fora do contexto. Muitos usurios de leitores de tela navegam por links, tornando
descries como Clique aqui, Veja mais insuficientes para o usurio saber o destino
do link, ou localiz-lo na pgina.
Exemplo
Deve ser fornecida uma descrio para as imagens da pgina, utilizando-se, para
tanto o atributo alt.
Exemplo 1
No cdigo:
<img src="foto-porto-alegre.jpg" alt="Foto de uma bicicleta de carga verde com caixas
laranjas encostada numa parede" />
Exemplo 2
No cdigo:
<a href="http://www.dominiopublico.gov.br/">
<img src="guia.png" alt="Guia de Servios Consulte servios pblicos de forma
fcil" />
</a>
Apesar de no haver um limite de caracteres para o atributo alt, ele utilizado para
descries sintticas, em poucas palavras ou em uma frase curta. Para imagens mais
complexas que exigem uma descrio mais detalhada, como infogrficos, por
exemplo, deve-se fornecer, alm do alt, a descrio no prprio contexto ou um link
para a descrio longa logo aps a imagem. Deve ficar claro para o usurio que esse
link remete para a descrio longa da imagem, conforme o exemplo a seguir.
Exemplo 3
Em HTML5
Foram incorporados ao HTML5 os elementos FIGURE e FIGCAPTION, que so utilizados
em conjunto com o objetivo de agrupar uma imagem IMG com a sua legenda, a qual
aparecer visualmente.
Exemplo
OBS:
Imagens que no transmitem contedo, ou seja, imagens decorativas, devem ser
inseridas por CSS. No exemplo a seguir, o separador pontilhado logo abaixo do ttulo
de nvel 3 Acessibilidade web uma imagem decorativa cuja funo foi inserida
atravs das folhas de estilo. Note que em alguns casos a imagem pode ser substituda
por um cdigo CSS.
Exemplo
HTML
<h3>Acessibilidade web</h3>
CSS
h3 {
color: #64860B;
font-size: 1.4em;
Esse recurso no deve ser utilizado para menus ou seleo de regies para servios.
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.
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>
...
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>
Para tabelas mais complexas, necessrio utilizar marcaes para associar as clulas
de dados com as clulas de cabealho. A maneira mais adequada de realizar esse
procedimento utilizar os atributos id/headers ou scope/col. No primeiro, pode-se
associar qualquer clula de contedo a qualquer clula de cabealho, utilizando o
mesmo valor para o atributo id e para o header. No segundo caso, a associao
automtica, sendo mais utilizado em tabelas de associao direta, nas quais dado o
valor col para o atributo scope nos cabealhos. Nos exemplos a seguir, possvel
verificar a utilizao do id/headers e do scope/col.
Exemplo 2
<table summary="...">
<caption>Resultado do Concurso</caption>
<tr>
<th id="vaga">Vaga</th>
<th id="candidato">Nome do candidato</th>
<th id="basico">Prova de Conhecimento Bsico</th>
<th id="especifico">Prova de Conhecimento Especfico</th>
</tr>
<tr>
<td id="adm" rowspan="2">Tcnico Administrativo</td>
<td id="PaulodaSilva">Paulo da Silva</td>
<td headers="adm basico PaulodaSilva">8</td>
<td headers="adm especifico PaulodaSilva">16</td>
</tr>
<tr>
<td id="PedroPontes">Pedro Pontes</td>
<td headers="adm basico PedroPontes">7</td>
<td headers="adm especifico PedroPontes">15</td>
</tr>
<tr>
<td id="inf">Tcnico em Informtica</td>
<td id="JoaoPereira">Joo Pereira</td>
<td headers="inf basico JoaoPereira">9</td>
<td headers="inf especifico JoaoPereira">17</td>
</tr>
</table>
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>
Exemplo 4
Para mais informaes sobre como escrever textos para web, acesse ePWG Cartilha de
Redao Web (http://epwg.governoeletronico.gov.br/cartilha-redacao) e o manual
<p>A ONU (Organizao das Naes Unidas) um rgo internacional criado em 1945.</p>
Um site sobre desenvolvimento Web fornece um link de menu para o Glossrio, que
contm explicaes para termos como HTML, CSS, Tag, atributo, etc.
No devero ser utilizadas imagens atrs do texto (background), pois acabam por
dificultar a leitura e desviar a ateno do usurio.
Exemplo incorreto
HTML
CSS
a.recomendado{
color: #FF0000;
}
Exemplo correto
HTML
<ul>
<li><a href="#">Procedimento A</a></li>
<li><a href="#" class="recomendado">Procedimento B (Recomendado)</a></li>
<li><a href="#">Procedimento C</a></li>
</ul>
CSS
a.recomendado{
color: #FF0000;
}
Exemplo
A rea que recebe o foco pelo teclado deve ser claramente marcada, devendo a rea
de seleo ser passvel de ser clicada.
Exemplo
CSS
a:focus, a:hover {
border: 2px solid #F00;
}
HTML
<ul>
<li><a href="/acessibilidade/index.php">Pgina Inicial</a></li>
<li><a href="/acessibilidade/eventos.php">Eventos</a></li>
<li><a href="/acessibilidade/quemsomos.php">Quem Somos</a></li>
<li><a href="/acessibilidade/ead.php">Ensino a Distncia (EaD)</a></li>
<li><a href="/acessibilidade/videoaulas.php">Vdeoaulas</a></li>
<li><a href="/acessibilidade/video.php">Vdeo em Libras</a></li>
<li><a href="/acessibilidade/oa.php">Objetos de Aprendizagem</a></li>
<li><a href="/acessibilidade/trabalhos.php">Trabalhos Realizados</a></li>
<li><a href="/acessibilidade/mapa.php">Mapa do Site</a></li>
</ul>
3.5 Multimdia
Deve haver uma alternativa sonora ou textual para vdeos que no incluem faixas de
udio. Para vdeos que contm udio falado e no idioma natural da pgina, devem ser
fornecidas legendas. Alm de essencial para pessoas com deficincia visual, a
alternativa em texto tambm importante para usurios que no possuem
equipamento de som, que desejam apenas realizar a leitura do material ou no
dispem de tempo para ouvir um arquivo multimdia.
Exemplo 1
Exemplo 2
importante salientar que o player de vdeo deve ser acessvel. Deve ser possvel
acessar os controles via teclado e os mesmos devem estar devidamente descritos,
para serem interpretados pelos leitores de tela.
HTML
<button onclick="playPause()">Play/Pause</button>
<button onclick="grande()">Grande</button>
Javascript
var meuVideo=document.getElementById("video");
function playPause()
{
if (meuVideo.paused)
meuVideo.play();
else
meuVideo.pause();
}
function grande()
{
meuVideo.width=500;
}
function pequeno()
{
meuVideo.width=300;
}
function normal()
{
meuVideo.width=420;
}
udio gravado deve possuir uma transcrio descritiva. Alm de essencial para
pessoas com deficincia auditiva, a alternativa em texto tambm importante para
usurios que no possuem equipamento de som, que desejam apenas realizar a
leitura do material ou no dispem de tempo para ouvir um arquivo multimdia. Neste
caso, tambm desejvel a alternativa em Libras.
Exemplo
Vdeos que transmitem contedo visual que no est disponvel na faixa de udio
devem possuir uma audiodescrio.
Exemplo
Deve ser fornecido um mecanismo para parar, pausar, silenciar ou ajustar o volume de
qualquer som que se reproduza na pgina.
HTML5
<button onclick="playPause()">Play/Pause</button>
<audio controls id="audio">
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Seu navegador no suporta a elemento audio.
</audio>
Javascript
var meuAudio=document.getElementById("audio");
function playPause()
{
if (meuAudio.paused)
meuAudio.play();
else
meuAudio.pause();
}
Para qualquer animao que inicie automaticamente na pgina devem ser fornecidos
mecanismos para que o usurio possa pausar, parar ou ocultar tal animao.
Figura 32: Gif animado de pessoas num ponto de nibus com controle de animao
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
Cdigo:
<input type="image" name="enviar" src="enviar.jpg" alt="enviar" />
J para outros tipos de botes (reset e button), preciso substituir o boto pela
imagem que se deseja utilizar atravs do CSS. Nesse caso, para que o boto seja
acessvel, ele deve possuir um value descritivo, conforme o exemplo a seguir.
Exemplo 2
CSS
input.btLimpar{
As etiquetas de texto (elemento LABEL) devem estar associadas aos seus campos
(elementos INPUT, SELECT e TEXTAREA, exceo do elemento BUTTON)
Exemplo
<label for="nome">Nome: </label>
<input type="text" name="nome" id="nome" />
<fieldset>
<legend>Sexo:</legend>
<input type="radio" id="fem" name="sexo" />
<label for="fem">Feminino</label>
<input type="radio" id="mas" name="sexo" />
<label for="mas">Masculino</label>
</fieldset>
Exemplo Incorreto
Exemplo Correto
Para contedo que exigir entrada de dados por parte do usurio, devem ser fornecidas
quando necessrio, instrues de preenchimento juntamente com as etiquetas
(elemento LABEL). A utilizao de caracteres pr-definidos em reas de entrada de
texto s deve ocorrer se:
O texto for includo aps a entrada de dados pelo usurio (por exemplo, sugerir
um novo nome de usurio caso o escolhido j exista);
Exemplo 1
O seguinte exemplo indica que a data precisa ser inserida no formato dia (dd) ms
(mm) ano (aaaa).
Exemplo 2
<label for="nome">Nome:
<img src="images/icon_asterisk.gif" alt="obrigatrio"/>
</label>
<input type=text name="nome" id="nome" />
Exemplo 3
HTML
<label for="nome">Nome:
<span>Obrigatrio<span/>
</label>
<input type=text name="nome" id="nome" />
CSS
label span{
background-image: images/icon_asterisk.gif;
text-indent: -20000px;
font-size: 0;
width: 0.1 em;
height: 0.2em;
}
<label for="nome">Nome:</label>
<input type=text name="nome" id="nome" required />
<input type="submit" value="Enviar" />
Renderizao
Exemplo
Aps a validao dos dados, antes de enviar o formulrio, uma tela de confirmao
dever aparecer, conforme no exemplo a seguir, permitindo que o usurio verifique e,
se necessrio, edite as informaes antes de envi-las.
Em HTML5
No HTML5 existem novos valores para o atributo type do elemento INPUT e, de acordo
com a definio do input type, a validao do lado do cliente ocorre atravs do prprio
HTML, j que esses valores basicamente definem o tipo de dado esperado pelo campo.
Por exemplo, no cdigo abaixo, temos um INPUT do tipo e-mail. Ao tentar enviar o
formulrio, se o tipo de texto inserido no for um endereo de e-mail, o navegador ir
retornar uma mensagem no prprio campo, solicitando que o campo seja preenchido
corretamente.
Exemplo
<input type="email">
<input type="submit" value="Inscrever-se">
Exemplo
<form method="post" action="...">
<fieldset>
<legend>Dados Pessoais</legend>
<label for="nome">O seu Nome: </label>
<input type="text" name="nome" id="nome" />
...
</fieldset>
<fieldset>
<legend>Dados Profissionais</legend>
<label for="profissao">Sua profisso:</label>
<input type="text" id="profissao" name="profissao" />
...
</fieldset>
<fieldset>
<legend>Informaes de Contato</legend>
<label for="email">E-mail: </label>
<input type="text" id="email" name="email" />
...
</fieldset>
</form>
No caso do elemento SELECT, pode ser utilizado o elemento OPTGROUP para agrupar
os itens da lista de seleo.
Exemplo 2
<label for="instituto">Qual a sua instituio?</label>
Limites de conexo;
Monitoramento;
Consistncia nas polticas de segurana;
Uso de tcnicas de desenvolvimento de servios e formulrios seguros.
Caso o uso de CAPTCHA seja estritamente necessrio, o mesmo dever ser fornecido
em forma de pergunta simples de interpretao (CAPTCHA Humano), e este
preferencialmente s dever ser apresentado aps pelo menos 2 tentativas de envio
do formulrio, por exemplo. Tais perguntas podero ser respondidas apenas por um
ser humano. No entanto, preciso garantir que a pergunta no seja de difcil
resoluo, permitindo que a mesma possa ser respondida por pessoas de variadas
culturas e nveis de instruo. Para tal, podem ser utilizadas perguntas de senso
comum, como por exemplo, qual a cor do cu? ou o fogo quente ou frio?.
Tambm podem ser utilizados testes matemticos. No entanto, preciso tomar
cuidado para que esses testes no sejam facilmente quebrados por determinados
programas. Uma alternativa solicitar que o usurio escreva o resultado do teste
matemtico por extenso, como escreva por extenso quanto 2 + 3, ou ainda
responda por extenso quanto dois mais trs.
Exemplo
<form action="action.php" method="post">
<fieldset>
<legend>CAPTCHA</legend>
</form>
Para mais detalhes sobre CAPTCHA, verificar o documento Orientaes para o uso do
CAPTCHA no Governo Federal na seo do eMAG
http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG/material-de-apoio.
1. Teclas de atalho
3. Barra de acessibilidade
Esses elementos j fazem parte da identidade digital de governo para mais detalhes
dessa iniciativa visite: http://portalpadrao.plone.org.br/manuais
1: para ir ao contedo;
A opo alto contraste deve gerar uma pgina em que a relao de contraste entre o
plano de fundo e os elementos do primeiro plano seja de, no mnimo 7:1 (contraste
otimizado). Desta forma, a folha principal de autocontraste deve obedecer a seguinte
configurao de cores:
Cor de texto : independente da cor utilizada, ela deve ser alterada para
branco (#FFFFFF) ;
Links : O modo normal do link deve ser sublinhado (para que ele se diferencie
do texto normal), assim como o modo hover e o modo active. O link deve ser
alterado para amarelo (#FFF333) ;
Alto contraste
Figura 47: Cabealho da identidade digital de governo (verso verde) com barra de acessibilidade no topo.
Acessibilidade
Este portal segue as diretrizes do eMAG (Modelo de Acessibilidade em Governo
Eletrnico), conforme as normas do Governo Federal, em obedincia ao Decreto
5.296, de 2.12.2004 .
Esses atalhos valem para o navegador Chrome, mas existem algumas variaes para
outros navegadores:
Ao final desse texto, voc poder baixar alguns arquivos que explicam melhor o termo
acessibilidade e como deve ser implementado nos sites da Internet.
Agente de Usurio: Qualquer software que recupera e apresenta contedo Web para
seus usurios, possibilitando que o usurio interaja com o contedo Web.
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.