Académique Documents
Professionnel Documents
Culture Documents
Verso 3.0
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:
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.
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:
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
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
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.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:
PRIMEIRO
PASSO:
PADRES WEB
SEGUNDO
PASSO:
DIRETRIZES
OU
RECOMENDAES
DE
ACESSIBILIDADE
TERCEIRO
PASSO:
AVALIAO
DE
ACESSIBILIDADE
10
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
12
2.1 Marcao
RECOMENDAO 1 RESPEITAR
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>
Modelo de Acessibilidade em Governo Eletrnico e-MAG
13
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
RECOMENDAO 2 ORGANIZAR
O CDIGO
HTML
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>
14
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
15
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>
16
<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
href="#">Pgina Inicial</a></li>
href="#">Captulo 1</a></li>
href="#">Captulo 2</a></li>
href="#">Captulo 3</a></li>
17
RECOMENDAO 5 - DISPONIBILIZAR
Evento do mouse
Evento do teclado
onmousedown
onkeydown
onmouseup
onkeyup
onclick*
onkeypress
onmouseover
onfocus*
onmouseout
onblur*
18
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
19
Contedo da Pgina
<div>
<a name="conteudo" id="conteudo" class="oculto" accesskey="1">Incio do
contedo</a>
<!-- Contedo
</div>
20
RECOMENDAO 7 NO
RECOMENDAO 8 SEPARAR
LINKS ADJACENTES
21
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>
</p>
<!-- Conteudo do Site -->
RECOMENDAO 9 NO
Pop-ups;
22
Exemplo correto
Pgina HTML
<a href="cadastro.html" id="cadastro">Cadastre-se agora!</a>
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>
RECOMENDAO 11- NO
23
RECOMENDAO 12 NO
RECOMENDAO 13 FORNECER
24
RECOMENDAO 14 NO
RECOMENDAO 15 ASSEGURAR
TEMPORAIS DO CONTEDO
25
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
26
RECOMENDAO 18 DISPONIBILIZAR
NA PGINA
RECOMENDAO 19 DESCREVER
27
RECOMENDAO 20 FORNECER
28
No cdigo:
<img src="crianca.jpg" alt="Foto de uma criana cheirando uma flor" />
Exemplo 2
No cdigo:
<a href="http://www.dominiopublico.gov.br/">
<img src="dominioPublico.jpg" alt="Portal Domnio Pblico" />
</a>
29
Exemplo 3
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.
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>
Modelo de Acessibilidade em Governo Eletrnico e-MAG
30
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 */
}
RECOMENDAO 21 FORNECER
MAPA DE IMAGEM
31
<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.
RECOMENDAO 22 DISPONIBILIZAR
Exemplo
<a href=manual.odt> Manual do W3C (formato .odt, tamanho 150Kb) </a>
Modelo de Acessibilidade em Governo Eletrnico e-MAG
32
RECOMENDAO 23 EM
APROPRIADA
Para mais detalhes veja o tutorial tabelas acessveis (documento pdf - 154 KB), na
seo do
e-MAG no Portal do Programa de Governo Eletrnico.
RECOMENDAO 24 ASSOCIAR
TABELA
33
34
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>
35
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>
36
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>
Modelo de Acessibilidade em Governo Eletrnico e-MAG
37
<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>
Para mais detalhes veja o tutorial Tabelas Acessveis (documento pdf - 154 KB) na
seo do e-MAG no Portal do Programa de Governo Eletrnico.
RECOMENDAO 25 GARANTIR
38
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.
RECOMENDAO 26 DISPONIBILIZAR
PALAVRAS INCOMUNS
RECOMENDAO 27 INFORMAR
39
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>
PRIMEIRO PLANO
40
RECOMENDAO 29 NO
CSS
a.recomendado{
color: #FF0000;
}
41
RECOMENDAO 30 PERMITIR
FUNCIONALIDADE
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">
Modelo de Acessibilidade em Governo Eletrnico e-MAG
42
<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>
RECOMENDAO 31 DIVIDIR
AS REAS DE INFORMAO
43
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
44
RECOMENDAO 32 POSSIBILITAR
EVIDENTE
CSS
Modelo de Acessibilidade em Governo Eletrnico e-MAG
45
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>
2.5 Multimdia
RECOMENDAO 33 FORNECER
46
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.
Situao 2
Uma universidade oferece a opo de visualizar suas videoaulas com ou sem
legendas.
47
RECOMENDAO 34 FORNECER
48
RECOMENDAO 35 OFERECER
RECOMENDAO 36 FORNECER
RECOMENDAO 37 FORNECER
CONTROLE DE ANIMAO
49
2.6 Formulrios
RECOMENDAO 38 FORNECER
DE FORMULRIOS
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{
background:transparent url(btLimpar.jpg) no-repeat left top;
width:100px;
height:47px;
text-indent:-20000px;
border:0;
}
50
RECOMENDAO 39 ASSOCIAR
RECOMENDAO 40 ESTABELECER
51
RECOMENDAO 41 NO
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>
52
RECOMENDAO 42 FORNECER
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
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" />
RECOMENDAO 43 IDENTIFICAR
53
54
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.
RECOMENDAO 44 AGRUPAR
CAMPOS DE FORMULRIO
55
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>
56
HUMANO
57
58
59
1: para ir ao contedo;
60
Aumentar fonte
Diminuir fonte
Fonte normal
Alto contraste
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
61
62
63
<label for="msg">Mensagem:</label>
<textarea name="msg" id="msg"></textarea>
<input type="submit" name="enviar" id="enviar" value="Enviar" class="bnt" />
</fieldset>
</form>
64
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 envi-las.
65
66
67
333 KB)
http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG/material-de-apoio
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/contrastanalyser.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.nvdaproject.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
68
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
69
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
70
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
71
72
#09
3
#0C
3
#0F3
#39
3
#3C
3
#3F3
#09
6
#0C
6
#0F6
#39
6
#3C
6
#3F6
#09
9
#0C
9
#0F9
#39
9
#3C
9
#3F9
#69
0
#6C
0
#6F0
#69
3
#6C
3
#6F3
#69
6
#6C
6
#6F6
#99
0
#9C
0
#9F0
#99
3
#9C
3
#9F3
#99
6
#9C
6
#9F6
#69
9
#6C
9
#6F9
#96
9
#99
9
#9C
9
#9F9
#C6
6
#C9
6
#CC
6
#CF6
#F06
#F36
#F66
#F96
#FC6
#FF6
#C3
9
#C6
9
#C9
9
#CC
9
#CF9
#F09
#F39
#F69
#F99
#FC9
#FF9
#C6
0
#C9
0
#CC
0
#CF0
#F00
#F30
#F60
#F90
#FC0
#FF0
#C6
3
#C9
3
#CC
3
#CF3
#F03
#F33
#F63
#F93
#FC3
#FF3
#09C
#09F
#0CC
#0CF
#0FC
#39C
#0FF
#39F
#3CC
#3CF
#3FC
#69C
#3FF
#66F
#69F
#6CC
#6CF
#6FC
#96C
#6FF
#96F
#99C
#99F
#9CC
#9CF
#9FC
#C3C
#9FF
#C0F
#C3F
#C6C
#C6F
#C9C
#C9F
#CCC
#CCF
#CFC
#F0C
#F3C
#F6C
#F9C
#FCC
#FFC
#CFF
#F0F
#F3F
#F6F
#F9F
#FCF
#FFF
73
#00
0
#03
0
#06
0
#30
0
#33
0
#36
0
#60
0
#63
0
#66
0
#90
0
#93
0
#96
0
#C0
0
#C3
0
#C0
6
#C3
6
#C0
9
#C3
9
#C0C
74