eMAG Conteudista

Mdulo
2 Web Acessvel

Atualizado em: Novembro de 2016

Fundao Escola Nacional de Administrao Pblica

Presidente
Francisco Gaetani
Diretor de Desenvolvimento Gerencial
Paulo Marques
Coordenadora-Geral de Educao a Distncia
Natlia Teles da Mota Teixeira

Diagramao realizada no mbito do acordo de Cooperao TcnicaFUB/CDT/Laboratrio Latitude e Enap.

Enap, 2015

Enap Escola Nacional de Administrao Pblica

Diretoria de Comunicao e Pesquisa
SAIS - rea 2-A - 70610-900 Braslia, DF
Telefone: (61) 2020 3096 - Fax: (61) 2020 3178
SUMRIO

1 Recomendaes de acessibilidade................................................................ 5
1.1 WCAG 2.0........................................................................................................ 5
1.2 eMAG............................................................................................................... 8

2 Prticas Web acessveis............................................................................... 10

2.1 Ttulos............................................................................................................ 11
2.2 Links............................................................................................................... 12
2.3 Sumrio para contedos longos.................................................................... 14
2.4 Imagens......................................................................................................... 15
2.5 Documentos para download......................................................................... 23
2.6 Texto.............................................................................................................. 25
2.7 Contraste....................................................................................................... 26
2.8 Utilizao da cor ou outros elementos visuais............................................... 28
2.9 Multimdia..................................................................................................... 30

3 Avaliao de Acessibilidade........................................................................ 32

4 Recursos e ferramentas.............................................................................. 33

5 Glossrio.................................................................................................... 35

6 Concluso................................................................................................... 35
Mdulo
2 Web Acessvel

1 Recomendaes de acessibilidade

Definio

As recomendaes ou diretrizes de acessibilidade so documentos que visam a 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 dessas recomendaes no beneficia somente pessoas com deficincias, mas,

tambm, facilita o acesso ao contedo da Web, independentemente 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.

O principal documento internacional de recomendaes de acessibilidade o WCAG 2.0 -

Web Content Accessibility Guidelines, ou Diretrizes de Acessibilidade para Contedo Web.
No Brasil, existe o eMAG - Modelo de Acessibilidade em Governo Eletrnico, que contm as
recomendaes de acessibilidade a serem seguidas nos stios e portais do governo brasileiro.

1.1 WCAG 2.0

As WCAG (Web Content Accessibility Guidelines) so as recomendaes de acessibilidade para

contedo da Web, ou seja, so diretrizes que explicam como tornar o contedo Web acessvel
a todas as pessoas.

Foram desenvolvidas pelo consrcio W3C - World Wide Web, por meio do WAI (Iniciativa de
Acessibilidade na Web), em colaborao com pessoas e organizaes em todo o mundo.

A verso 1.0 foi lanada em 5 de maio de 1999 e a verso 2.0 em 11 de dezembro de 2008.

5
Documentos da WAI - Web Accessibility Initiative:

WCAG: para contedo Web.

ATAG - Authoring Tool Accessibility Guidelines: para ferramentas de autoria, editores
HTML, content management systems (CMS), blogs, wikis, etc.
UAAG - User Agent Accessibility Guidelines: para navegadores Web, media players e
outros agentes de usurio.
WAI-ARIA - Accessible Rich Internet Applications Suite: aplicaes Web ricas e
acessveis (desenvolvidas com Ajax, por exemplo).

Estrutura

O documento WCAG 2.0 est estruturado em quatro princpios, cada qual contendo
recomendaes. As recomendaes possuem critrios de sucesso que devem ser seguidos.
Para seguir os critrios de sucesso, so disponibilizadas tcnicas especficas.

4 princpios

1 Princpio: Perceptvel - a informao e os componentes da interface do usurio tm

de ser apresentados aos usurios em formas que eles possam perceber.
2 Princpio: Opervel - os componentes de interface de usurio e a navegao tm de
ser operveis.
3 Princpio: Compreensvel - a informao e a operao da interface de usurio tm
de ser compreensveis.
4 Princpio: Robusto - o contedo tem de ser robusto o suficiente para poder ser
interpretado de forma concisa por diversos agentes do usurio, incluindo recursos de
tecnologia assistiva.

Recomendaes pertencentes a cada princpio

1Princpio: Perceptvel

1.1 Fornecer alternativas textuais para qualquer contedo no textual;

1.2 Fornecer alternativas para multimdia;
1.3 Criar contedo que possa ser apresentado de modos diferentes sem perder
informao ou estrutura;

6
 1.4 Tornar mais fcil aos usurios a visualizao e a audio de contedos, incluindo
as separaes das camadas da frente e de fundo.

2 Princpio: Opervel

2.1 Fazer com que todas as funcionalidades estejam disponveis no teclado;

2.2 Prover tempo suficiente para os usurios lerem e usarem o contedo;
2.3 No projetar contedo de uma forma conhecida por causar ataques epilticos;
2.4 Prover formas de ajudar os usurios a navegarem, localizarem contedos e
determinarem onde se encontram.

3 Princpio: Compreensvel

3.1 Tornar o contedo de texto legvel e compreensvel;

3.2 Fazer com que as pginas da Web apaream e funcionem de modo previsvel;
3.3 Ajudar os usurios a evitarem e corrigirem erros.

4Princpio: Robusto

4.1 Maximizar a compatibilidade entre os atuais e futuros agentes do usurio,

incluindo os recursos de tecnologia assistiva.

Critrios de sucesso

Para cada recomendao existem critrios de sucesso, que so pontos especficos a serem
atingidos.

Exemplo:

Recomendao 3.3 - Assistncia de Entrada: Ajudar os usurios a evitarem e corrigirem

erros

99 Critrio de sucesso 3.3.1 - Identificao do Erro: Se um erro de entrada for

automaticamente detectado, o item que apresenta erro identificado e o erro
descrito ao usurio por texto (Nvel A).

E, para cada critrio de sucesso, esto disponveis tcnicas especficas com exemplos de como
o objetivo do critrio pode ser atingido e testado.

Cada critrio de sucesso indicado por um nvel de conformidade, que pode ser A,
AA ou AAA:

99 Nvel A: barreiras mais significativas de acessibilidade. Estar em conformidade

apenas com os critrios de nvel A no garante um stio altamente acessvel.
99 Nvel AA: estar em conformidade com todos os critrios de sucesso de nvel AA
garante um stio bastante acessvel, ou seja, o stio ser acessvel para a maioria
dos usurios, sob a maior parte das circunstncias e utilizando-se a maioria das
tecnologias.
99 Nvel AAA: o nvel de conformidade triplo A bastante meticuloso, ou seja, visa
garantir um nvel otimizado de acessibilidade. A maioria dos critrios de sucesso
de nvel AAA refere-se a situaes bastante especficas, normalmente objetivando
refinar os critrios de sucesso de nvel AA. Manter uma conformidade com certos

7
 critrios de sucesso de nvel AAA pode ser um processo custoso e, s vezes, de
difcil implementao. No entanto, muitos stios no possuem contedo que se
aplica aos critrios de sucesso de nvel AAA.

Saiba Mais sobre as WCAG 2.0

WCAG 2.0 original em ingls (link para outro stio).

WCAG 2.0 verso em portugus (link para outro stio).
Lista com todas as tcnicas da WCAG 2.0 (link para outro stio).
Especificao WAI-ARIA (link para outro stio).

1.2 eMAG

Alm das WCAG 2.0 - Web Content Accessibility Guidelines, utilizadas internacionalmente,
muitos pases desenvolveram seus prprios documentos com recomendaes de acessibilidade.

O governo brasileiro, seguindo os exemplos de outros pases, desenvolveu suas prprias

diretrizes, reunidas no documento chamado de eMAG.

O eMAG - Modelo de Acessibilidade em Governo Eletrnico - um documento com

recomendaes a serem consideradas para que o processo de acessibilidade dos stios e
portais do governo brasileiro seja conduzido de forma padronizada e de fcil implementao,
isto , seja:

Pragmtico (estruturado de acordo com os problemas a serem abordados);

Dividido por reas de atuao;
Padronizado por funcionalidades.

eMAG 3.1

O eMAG 3.1 surgiu da parceria firmada entre o Ministrio do Planejamento, Oramento e

Gesto (Departamento de Governo Eletrnico) e o Projeto de Acessibilidade Virtual do IFRS
(Instituto Federal de Educao, Cincia e Tecnologia do Rio Grande do Sul).

A verso 3.1 do eMAG foi desenvolvida tomando como base a WCAG 2.0, outros documentos
internacionais de acessibilidade, alm de pesquisas realizadas no mbito do projeto de
acessibilidade virtual e com o auxlio de pessoas com deficincia.

Estrutura

Parte 1 - Introduo

99 O acesso de pessoas com deficincia.

99 Sobre as verses do eMAG.
99 Alteraes na verso 3.1.
99 Legislao.

8
 Parte 2 - O processo para desenvolver um stio acessvel

99 Primeiro passo: Padres Web.

99 Segundo passo: Recomendaes de Acessibilidade
99 Terceiro passo: Avaliao de Acessibilidade
99 Manuteno da acessibilidade
99 Recursos, ferramentas e leitura complementar

Parte 3 - Recomendaes de acessibilidade (diviso por Sees)

99 Marcao (9 recomendaes)
99 Comportamento (7 recomendaes)
99 Contedo / Informao (12 recomendaes)
99 Apresentao / Design (4 recomendaes)
99 Multimdia (5 recomendaes)
99 Formulrios (8 recomendaes)

Total: 45 recomendaes

Parte 4 - Elementos padronizados de acessibilidade digital no governo federal

99 Padroniza elementos de acessibilidade que devem ter caractersticas em comum

em todas as pginas do governo federal, como:

- atalhos;
- barra de acessibilidade;
- mapa do stio;
- pgina de acessibilidade, entre outros;

Parte 5 - Prticas desaconselhadas

Parte 6 - Glossrio

Saiba Mais sobre o eMAG

Conhea o eMAG (link para um novo stio)

9
2 Prticas Web acessveis

Nesta seo, vamos aprender como desenvolver contedo Web mais acessvel. Primeiramente,
preciso ter em mente que o mais importante para a acessibilidade o cdigo HTML -HyperText
Markup Language. O leitor de tela e outros recursos de Tecnologia Assistiva interpretam o cdigo
HTML, seus elementos e semntica. Por isso, o primeiro passo para se garantir acessibilidade
ao contedo Web utilizar cdigo semanticamente correto, ou seja, cada elemento para o seu
propsito, seguindo os Padres Web ou Web Standards do W3C -World Wide Web.

Seu cdigo deve ser acessvel ao maior nmero de usurios possvel, incluindo:

Usurios de leitor de tela;

Quem navega somente pelo teclado;
Quem utiliza navegador com JavaScript desabilitado;
Usurios de dispositivos mveis;
Quem utiliza outros recursos de Tecnologia Assistiva;
Usurios inexperientes;
Entre outros.

Vamos comear?

Saiba Mais sobre Padres Web

Padres Web ou Web Standards do W3C (link para um novo stio).

e-PWG - Padres Web em Governo Eletrnico (link para um novo stio).

10
2.1 Ttulos

Os cabealhos (ttulos) em HTML so representados pelas tags<h1> at <h6>.Assim, as tags

<h1>, <h2>, <h3>, <h4>, <h5> e <h6> informam ao navegador que aquele elemento trata-se de
um cabealho ("h" vem do ingls "heading", que significa cabealho). O "h1" deve ser o ttulo
principal da pgina, ou seja, dever existir apenas um elemento "h1" em cada pgina. Em seguida
devem ser utilizados os nveis subsequentes de ttulo, de maneira hierrquica, sem se pular um
ou mais nveis. A apresentao visual dos ttulos poder ser modificada pelas folhas de estilo.

Imagine o seu contedo como sendo um livro. O ttulo do livro seria o "h1", os captulos seriam
elementos "h2", os subcaptulos seriam representados por elementos "h3" e assim por diante.

Dessa forma, o ttulo principal de um stio seria o "h1", o que nos leva a ter apenas um "h1" em
cada pgina. O ttulo do contedo principal passa a ser o "h2", as sees internas do contedo
o "h3" e assim por diante.

Por que to importante utilizar corretamente os ttulos em um stio?

Para quem enxerga, basta diferenciar os ttulos visualmente, pelo tamanho, tipo ou cor da fonte.
No entanto, para quem no pode ver, essa diferenciao visual perde seu propsito. Pessoas
que navegam pelos stios utilizando um leitor de tela so informadas por esse software sobre o
tipo de elemento pelo qual esto passando. Por exemplo, quando o usurio passar por um ttulo
dentro do contedo que foi inserido como um "h2", o leitor de tela ir ler algo do tipo "cabealho
de nvel 2, texto do cabealho. Dessa forma, o usurio, mesmo sem enxergar, saber que se
trata de um ttulo e conhecer a hierarquia do contedo da pgina. Alm disso, os leitores de
tela permitem que os usurios naveguem rapidamente pelos dos ttulos, pressionando a tecla
"h. Assim, podero pular de ttulo em ttulo, compreendendo a hierarquia da pgina e chegando
rapidamente ao contedo desejado.

Cdigo

<h1> Acessibilidade na Web</h1>

<h2>Introduo Acessibilidade na Web</h2>
<p> ...texto...</p>
<h3>Barreiras enfrentadas por pessoas com deficincia</h3>
<p> ...texto...</p>
<h3>Recursos de Tecnologia Assistiva</h3>
<p> ...texto...</p>
<h2>Garantindo a Acessibilidade na Web</h2>
<p> ...texto...</p>
<h3>Recomendaes de acessibilidade</h3>

11
Resultado

2.2 Links

Muitas pessoas utilizam apenas o mouse para navegar e nem imaginam que possvel navegar
por meio da tecla TAB do teclado pelos elementos ativos de uma pgina. Isso inclui a navegao
de link em link. Quando o usurio chega ao link desejado, basta ativ-lo pela tecla ENTER. Esse
tipo de navegao especialmente importante para pessoas que no conseguem utilizar o
mouse, como o caso de pessoas com problemas motores e de usurios com deficincia
visual, que navegam utilizando um leitor de tela. preciso considerar que, quando um usurio
de leitor de tela navega pelos links de uma pgina,ele recebe apenas a informao do texto do
link e no de todo o seu contexto.

Agora, imagine uma pgina contendo notcias como as da imagem abaixo:

12
Os links do tipo LEIA MAIS no so suficientemente descritivos fora do contexto. No exemplo
acima, o usurio, navegando com leitor de tela pela tecla TAB, receberia a informao "Leia Mais
Link", "Leia Mais Link", mas no saberia que assunto est sendo abordado e poderia se perguntar
"Leia mais sobre o qu?. O ideal que o prprio ttulo da notcia seja o link, de modo que o
usurio no precise navegar por todo o entorno para saber qual a finalidade do link.

Da mesma forma que o "Leia mais" problemtico para navegao com leitor de tela, links do
tipo "Clique aqui" e "Saiba mais" tambm so, pois no descrevem o destino do link. Portanto,
esses tipos de links devem ser evitados.

Os leitores de tela possuem uma tecla de atalho que permite ao usurio acessar a lista de todos
os links da pgina. Essa uma maneira fcil e rpida de ter acesso aos links. No entanto, se
o texto dos links no for suficientemente descritivo, essa funcionalidade ter pouco valor. No
exemplo a seguir, podemos ver uma parte da lista de links de uma pgina. Repare que existem
vrios links com o ttulo "Edital. O usurio ir navegar por eles e se perguntar: "edital do qu?.
O ideal para tornar esses links acessveis lhes fornecer um texto descritivo, como, por exemplo,
"Edital do concurso para professor 2011 ou "Edital do Concurso Pblico 2010, etc.

Quando o seu contedo contiver um link, preciso que o mesmo seja claro e descritivo o
suficiente, mesmo quando lido fora do contexto.

Exemplo de link suficientemente descritivo: Organograma da empresa.

13
Exemplo de link com informaes desnecessrias: Clique aqui para acessar o organograma da
empresa.

Exemplo de link com texto pouco descritivo: Clique aqui para acessar o organograma da
empresa.

No h necessidade de colocar no texto do link frases como "clique aqui para... , "link para...,
etc. Tanto visualmente quanto com o leitor de tela j fica claro para o usurio que se trata de
um link.

2.3 Sumrio para contedos longos

Para contedos muito extensos, o ideal que seja fornecido um sumrio com ncoras para as sees
do contedo. Ao final de cada seo, preciso haver um link que permita retornar ao sumrio. Para
quem utiliza o mouse para navegar, parece uma tarefa simples rolar a tela e chegar at o contedo
desejado. No entanto, para quem utiliza o teclado ou outros dispositivos diferentes do mouse,
navegar por contedos extensos acaba sendo uma tarefa lenta e difcil. Para essas pessoas e at
mesmo para as que utilizam o mouse, as ncoras facilitam muito a navegao.

Exemplo de sumrio com links para as partes do contedo:

Ao clicarmos no link "Introduo, o foco do teclado remetido para o incio dessa seo.
Repare, no exemplo a seguir, no link "Voltar ao sumrio, presente no final da seo.

14
Exemplo de ncora para a seo "Agradecimentos

Repare que o destino da ncora representado pelo sinal de # (cerquilha ou sustenido) seguido
do id da seo de destino:

<li>
<a href="#agradecimentos"title="#">Agradecimentos</a>
</li>
<h2 id="agradecimentos">Agradecimentos</h2>

Exemplo de ncora para voltar ao sumrio

<p class="voltar">
<a href="#sumario">Voltar ao sumrio</a>
</p>
<div id="sumario">

2.4 Imagens

A imagem abaixo ilustra o organograma da instituio:

Voc conseguiu compreender a imagem?

15
No contexto acima, se faltar a imagem, no conseguimos compreender a informao. O
mesmo ocorre no caso de pessoas cegas tentando acessar o contedo presente em imagens
que no foram descritas.

Pessoas cegas no tero acesso ao contedo transmitido por uma imagem caso no tenha sido
fornecida uma descrio para ela. Dessa forma, preciso descrever de maneira apropriada
todas as imagens que transmitem contedo.

Uma imagem pode ou no transmitir uma informao. Podemos tratar as imagens inseridas
em uma pgina dividindo-as nos dois contextos abaixo:

Imagens com contedo: fotos, grficos, organogramas, ilustraes, imagens que

substituem botes ou links, etc.

As imagens que apresentam contedo precisam de uma descrio. A descrio

da imagem pode ser informada no prprio texto ou, ento, por um atributo
especfico do elemento img no HTML, o atributo alt. A descrio fornecida por
esse atributo no aparece visualmente, mas lida pelo leitor de tela quando
o usurio, navegando pelo teclado, passa pela imagem. Assim, mesmo que os
usurios com deficincia visual no enxerguem a imagem, ser informada a eles a
sua descrio.

Imagens decorativas: utilizadas para decorar a pgina ou partes dela. Como exemplos,
podemos citar marcadores de lista estilizados, cantos arredondados, cones utilizados
para decorar ou enfatizar um link, etc.

As imagens decorativas devem ser ignoradas pelos recursos de tecnologia assistiva,

ou seja, o ideal que os leitores de tela ignorem a presena dessas imagens, j
que elas no transmitem contedo. Para que isso ocorra, a maneira mais indicada
inserir todas as imagens decorativas por meio das folhas de estilo (CSS). Como
alternativa, pode-se deixar o contedo do atributo "alt" vazio (alt=), para que a
imagem seja ignorada pelos leitores de tela.

Exemplos de descrio de imagens

img src="acesso.jpeg" alt="Acesso Informao" />

<img src="plano.jpeg" alt="Viver Sem Limite: Plano Nacional dos Direitos da

Pessoa com Deficincia" />

16
 <img src="dominio.jpeg" alt="Portal Domnio Pblico" />

Por Henrique Vicente - Licena Creative Commons

<img src="viversemlimite1.jpeg" alt="Astronauta brasileiro Marcos Pontes

dando autgrafo a um menino" />

Mas qual o limite para uma descrio ser considerada curta e poder ser disponibilizada pelo
do atributo "alt"?

No existe uma restrio oficial para o tamanho do texto alternativo fornecido no "alt", mas
especialistas recomendam que ele seja inferior a 125 caracteres, aproximadamente.

Imagens complexas

O exemplo a seguir apresenta um grfico que foi inserido em forma de imagem. Quem no pode
ver, no ter acesso s suas informaes. Nesse caso, primeiramente, precisamos fornecer
uma alternativa textual para a imagem no atributo "alt". No entanto, esse atributo utilizado
para descries sucintas, em poucas palavras ou em uma frase curta. No caso de grficos e
imagens complexas, precisamos fornecer uma descrio mais detalhada. A soluo fornecer
as informaes do grfico no prprio contexto antes ou depois da imagem ou ento em um
link logo aps a imagem. Conforme podemos ver no exemplo abaixo, foi fornecida uma breve
descrio para a imagem no atributo "alt" e, alm disso, foi fornecido o link para a descrio
detalhada do grfico. Nesse link, o usurio ter acesso a dados do grfico em forma textual.

17
 <img src="grafico.jpg" alt="Grfico demonstrativo do nvel de escolaridade dos
usurios" />
<p>
<a href="graficoPesquisa.html">A descrio textual do grfico</a> est
disponvel em outra pgina
</p>

Ao desabilitarmos as imagens do navegador, podemos visualizar os textos alternativos:

Imagens que so links

Quando um usurio com leitor de tela passa por um link, ele informado pelo leitor que
aquele elemento um link e lhe informado o texto do mesmo. No entanto, se quisermos
substituir um link por uma imagem, o ideal que o faamos por meio do CSS, de modo que o
texto do link continue sendo lido normalmente pelo leitor de tela.

Caso no seja possvel substituir o link pela imagem por meio do CSS, necessrio que a
imagem possua um texto alternativo (alt). preciso que o texto alternativo seja curto e
objetivo, representando o seu destino. No exemplo abaixo, o texto no atributo "alt" deve ser
simplesmente "livros, o mesmo texto que aparece visualmente na imagem.

18
 <a href="livros.html">
<img src="BOOKS.jpg" alt="Livros"/>
</a>

Imagens que so botes

So elementos input do tipo image (input type="image"). Para os botes de imagem que
servem para o mesmo propsito do boto do tipo "submit", deve ser fornecida uma descrio
textual para o boto por meio do atributo "alt", conforme o exemplo a seguir.

<input type="image" name="entrar" src="entrar.jpg" alt="entrar" />

J para outros tipos de botes ("reset", "submit" e "button"), preciso substituir o boto pela
imagem que se deseja utilizar por meio do CSS, j que o comportamento dos leitores de tela
quanto ao atributo "alt" nesses tipos de botes, bastante varivel. Nesse caso, para que o
boto seja acessvel, ele deve possuir um value descritivo, conforme o exemplo a seguir.

HTML:

<input type="reset" name="limpar" value="Limpar" class="btLimpar"/>

CSS:

input.btLimpar{
background:transparenturl(btLimpar.jpg) no-repeat left top;
width:100px;
height:47px;
text-indent:-20000px;
border:0;
}

Imagens decorativas

A ideia que as imagens decorativas sejam ignoradas pelos leitores de tela. Para tal, essas
imagens devem ser inseridas por CSS.

19
Um exemplo de imagem decorativa so os marcadores estilizados para listas (na figura a seguir,
as setas). No exemplo abaixo, essas imagens foram inseridas por CSS.

HTML:

<ul class="bullet" >

<li>Item de lista 1</li>
<li>Item de lista 2</li>
<li>Item de lista 3</li>
</ul>

CSS:

#content ul.bullet li {
list-style-type: none;
text-align: center left;
background-image: url(../images/ex-list-bullet.PNG);
background-position: center left;
background-repeat: no-repeat;
padding: .3em 0 .2em 1.1em;
}
#content ul.bullet {
margin: 0 0 .3em -.5em;
}

Como segunda opo, imagens sem contedo que no foram inseridas por CSS devem ter
o atributo "alt" nulo (alt="") e no apresentar atributo title. O atributo "alt" com valor nulo
indica ao leitor de tela que a imagem em questo pode ser ignorada. No exemplo a seguir,
temos um link que formado pelo texto do link ("Contato") e por um cone (imagem de um
telefone). Essa imagem est inserida no cdigo dentro da tag <a>. O texto do link "contato",
informao essa que suficientemente descritiva. Se fosse fornecida uma descrio para a
imagem, o leitor de tela iria "ler" para o usurio informaes desnecessrias. Assim, para que
o leitor de tela ignore a imagem e leia simplesmente o texto do link, deixamos o "alt" da
imagem nulo. Vale lembrar que o mais recomendado inserir a imagem por CSS.

<a href="contact.html"> <img src="phoneicon.gif" alt="" /> Contato </a>

Mapas de imagem

20
Um mapa de imagem uma imagem dividida em reas selecionveis. Cada rea um link
para outra pgina ou para outra parte da mesma pgina. Um exemplo de um mapa de imagem
seria a imagem de uma estante de livros em que cada prateleira seria um link para um tipo
especfico de literatura.

Para que um mapa de imagem seja acessvel, preciso fornecer uma alternativa em texto para
cada uma de suas reas selecionveis.

Exemplo 1 - Mapa de imagem do lado do cliente

<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>

Exemplo 2 - Mapa de imagem do lado do servidor

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. Dessa forma, se a opo for por utilizar um mapa de
imagem do lado do servidor, ser preciso fornecer links redundantes relativos a cada uma das
reas selecionveis.

21
Resumo sobre imagens

Todas as imagens que transmitem informao devem possuir uma descrio indicando
seu contedo.
Para imagens que exigem uma descrio mais extensa, deve ser fornecido um texto
sucinto no atributo "alt" e a descrio detalhada no prprio contexto ou em um link
adjacente.
Imagens decorativas devem ser inseridas por CSS.

Dicas para descrever uma imagem.

Quando for descrever uma imagem, pergunte-se "se eu no pudesse utilizar esta imagem
aqui, o que eu escreveria em seu lugar?

Seja objetivo: apesar de parecer uma boa ideia descrever uma imagem nos mnimos
detalhes, na maioria das vezes, no existe essa necessidade. Busque informar
simplesmente o que ela transmite, nem a menos, nem a mais. Deixe de lado detalhes
pouco importantes e evite informar no texto alternativo mais do que a imagem est
passando visualmente. Veja o exemplo a seguir:

Essa imagem tem a seguinte descrio:

<img src="beach.jpg" alt="Foto de rochas em uma praia da costa do estado de

Oregon" />

Repare que, apenas olhando para a foto, a maioria das pessoas no saberia onde fica essa praia.
Ou seja, o texto alternativo est informando mais do que a prpria imagem passa visualmente.
Um exemplo de texto alternativo apropriado para essa imagem seria:

<img src="beach.jpg" alt="Foto de uma praia com um pouco de areia e grandes

rochas dentro do mar" />

Seja claro: tome cuidado para no ser to objetivo a ponto de seu texto no ficar
claro o suficiente.

22
Veja o exemplo a seguir:

Descrio muito objetiva e pouco clara: alt="rvores" ou alt="floresta".

99 Descrio objetiva e clara: alt="plantao de eucaliptos".
Descrio pouco objetiva: alt="eucaliptos com caules muito longos e folhas verdes
plantados em fileira e fazendo sombra sobre a grama".

Considere o contexto: Procure no repetir na descrio da imagem informaes que

j esto no contexto, evitando que o leitor de tela leia duas vezes a mesma informao.
No exemplo abaixo, no necessrio descrever as informaes sobre inscries e
provas divulgadas na imagem, j que essa informao j est no contexto. Poderamos
inserir no "alt" apenas a informao "Banner do processo seletivo 2014/1. No
entanto, se essa informao no estivesse no contexto, teramos que descrever as
informaes de inscries e provas.

2.5 Documentos para download

Assim como o contedo de um stio deve ser acessvel, o material disponibilizado para download
tambm precisa ser. Um dos formatos mais acessveis o prprio HTML e, por isso, sempre
que possvel, disponibilize documentos nesse formato. Tambm podem ser utilizados arquivos
para download no formato ODF - Open Document Format, tomando-se os cuidados para que
sejam acessveis. Se um arquivo for disponibilizado em PDF - Portable Document Format,
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:

23
 <a href="manual.odt"> Manual do W3C (formato .odt, tamanho 150Kb) </a>

O ODF um formato aberto de documento, que pode ser implementado em qualquer sistema.
Atualmente existem diversos softwares, pagos ou gratuitos, que permitem a utilizao de
documentos ODF, suportados em diversos sistemas operacionais. O ODF engloba formatos como:

ODT para documentos de texto;

ODS para planilhas eletrnicas;
ODP para apresentaes de slides.

Muitos softwares j utilizam esses formatos, como o caso do OpenOffice (LibreOffice),

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.

Se forem utilizados cones para arquivos, importante que sejam utilizadas imagens e
descries de forma consistente dentro de um mesmo stio, evitando-se confuso:

Utilizao inconsistente

Pgina 1

Pgina 2

Utilizao consistente

Pgina 1

24
 Pgina 2

2.6 Texto

Acessibilidade tambm consiste em garantir que um texto possa ser compreendido por todos.
Assim, o texto de um stio dever ser fcil de ler e compreender. Algumas tcnicas que podem
auxiliar nesse sentido so:

Desenvolver apenas um tpico por pargrafo;

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 em vez de uma longa srie de palavras ou frases separadas por
vrgulas;
Fazer referncias claras a pronomes e a outras partes do documento;
Utilizar, preferencialmente, a voz ativa.

Exemplo:

Repare no texto a seguir:

"Como exemplos de leitores de tela podemos citar o JAWS, que um dos mais populares no
mundo para Windows, mas um software pago, o NVDA, o qual gratuito e de cdigo aberto
para Windows, o ORCA, que tambm gratuito e de cdigo aberto, mas para Linux e o Virtual
Vision, que um leitor de tela pago para ambiente Windows, desenvolvido pela empresa
brasileira MicroPower. Mais informaes sobre esses leitores podem ser encontradas nos seus
respectivos stios:

http://www.freedomscientific.com/products/fs/jaws-product-page.asp (link para um novo

stio).
http://www.nvda-project.org (link para um novo stio).
http://live.gnome.org/Orca (link para um novo stio) e http://www.virtualvision.com.br (link
para um novo stio)."

O texto acima pode ser apresentado de maneira mais clara e fcil de compreender por meio
de pequenas modificaes, como a utilizao de listas de itens e a padronizao na linguagem
e na forma de apresentao:

"Como exemplos de leitores de tela podemos citar:

JAWS: software PAGO PARA Windows, sendo um dos mais populares pelo mundo (stio
do Jaws - link para um novo stio);

25
 NVDA: software gratuito e de cdigo aberto para Windows (stio do NVDA - link para um
novo stio);
ORCA: software gratuito e de cdigo aberto para Linux (stio do Orca - link para um
novo stio);
Virtual Vision: software pago para Windows, desenvolvido pela empresa brasileira
MicroPower (stio do Virtual Vision - link para um novo stio).

Quando o texto incluir palavras incomuns, termos tcnicos, palavras ou frases em outro idioma,
etc., dever ser fornecida uma explicao para tais palavras. Tambm devero ser fornecidas
as formas completas ou o significado de siglas e abreviaturas, ao menos na primeira vez em
que aparecerem no texto.

As definies podero ser fornecidas por um texto adjacente, uma lista de definies, um
glossrio ou de qualquer outro modo.

2.7 Contraste

Uma boa relao de contraste entre o texto e o plano de fundo fundamental para que todos
possam visualizar as informaes de forma clara e sem grandes esforos. Alm disso, um bom
contraste essencial para pessoas com baixa viso, pessoas com daltonismo e aquelas que
utilizam monitores monocromticos.

Alm de escolher cores que tenham uma boa relao de contraste, preciso tomar cuidado
com imagens utilizadas de plano de fundo. Um fundo decorado ou em forma de figura, como
uma paisagem, por exemplo, torna o contedo da pgina de difcil visualizao, alm de desviar
a ateno do usurio. Se possvel, evite utilizar imagens como plano de fundo ou planos de
fundo decorados, enfeitados, com listras, crculos, bordas, marca d'gua, etc.

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. 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 relao de contraste de, no mnimo, 4,5:1.

Apenas olhando para uma pgina, j podemos ter uma ideia se ela apresenta um bom contraste
ou no. No entanto, para garantirmos um contraste otimizado, podemos utilizar ferramentas
gratuitas, disponveis online, para analisar a relao de contraste, como, por exemplo:

Luminosity Colour Contrast Ratio Analyser (link para um novo stio).

26
 Color Contrast Analyser (link para um novo stio).
Check my colours (link para um novo stio).

No "Check my colours", voc fornece o endereo de uma pgina da Web, clica em "check" e
ele lhe mostrar uma lista contendo o resultado das taxas de contraste entre o plano de fundo
e o primeiro plano dos diversos elementos da pgina, conforme podemos ver nas figuras a
seguir.

No exemplo a seguir, utilizamos o servio online "Luminosity Colour Contrast Ratio Analyser",
especificamos os valores (em notao hexadecimal) das cores de fundo (Background Colour) e
da fonte (Foreground Colour) e calculamos a relao de contraste (Calculate Luminosity Contrast
Ratio). O exemplo mostrado de como ficaria visualmente esse contraste quando utilizada uma
fonte em tamanho grande e quando utilizada uma fonte em tamanho normal, alm da relao
de contraste (contrast ratio), que, nesse caso, foi de 7,74:1, ou seja, bem acima do recomendado
4,5:1, o que indica que essas duas cores apresentam um excelente contraste entre si.

27
A importncia do contraste para usurios com Daltonismo

A deficincia de cores vermelha/verde o tipo mais comum de Daltonismo. Por isso, deve-se
evitar a utilizao de contrastes entre essas duas cores.

Utilizando combinao de cores verde/vermelha: com a deficincia de cor no possvel

perceber o contraste entre as cores.

Utilizando combinao de cores verde/lils: mesmo com a deficincia de cor, ainda possvel
perceber o contraste.

Fonte: JENNY, B; KELSO, N.V. Color Design for the Color Vision Impaired

2.8 Utilizao da cor ou outros elementos visuais

As informaes no podem ser transmitidas unicamente por meio de caractersticas sensoriais,

tais como cor, forma, tamanho, localizao visual, orientao ou som. Para compreendermos
melhor esse ponto, vamos analisar alguns exemplos.

Exemplo 1:

Lista de produtos (os itens em vermelho no esto disponveis):

Produto 1
Produto 2
Produto 3
Produto 4
Produto 5

Nesse exemplo, preciso que o usurio consiga enxergar e distinguir cores para saber
quais produtos esto indisponveis. Uma soluo para esse caso seria, alm de utilizar a cor
como diferencial, informar ao lado do produto que ele encontra-se indisponvel Produto 3
(indisponvel).

28
Exemplo 2:

O link para a pgina do concurso pblico est disponvel no canto superior direito da pgina.

Repare que, no exemplo acima, necessrio que o usurio consiga visualizar uma posio
especfica da pgina. Nesse caso, o ideal seria fornecer o link no prprio contexto, facilitando
o acesso por todos os usurios.

Exemplo 3:

Para salvar o questionrio, clique no boto redondo. Para sair do questionrio sem salv-lo,
clique no boto quadrado. Voc poder retornar mais tarde para preencher este questionrio.

No exemplo acima, uma pessoa cega no saberia qual o formato dos botes, nem o leitor de
tela teria como interpretar esse tipo de informao sensorial para transmitir ao usurio. Nesse
caso, seria necessrio fornecer informaes adicionais aos botes, como uma descrio que
identifique a sua funo, ou ento, o seu formato, de modo que o leitor de tela possa ler essa
informao ao usurio.

Exemplo 4:

Repare que o formulrio acima indica os campos obrigatrios apenas por meio da mudana de
cor. Um usurio que no pode ver, no saber quais campos so de preenchimento obrigatrio.

Uma soluo para o caso de campos obrigatrios em formulrios seria inserir um asterisco em
forma de imagem ao lado de cada campo obrigatrio, fornecendo uma descrio no atributo
"alt" para essa imagem, que poderia ser "campo obrigatrio ou, simplesmente, "obrigatrio.

29
 <label for="nome">
Nome: <img src="images/icon_asterisk.gif" alt="obrigatrio"/>
</label>
<input type=text name="nome" id="nome" />

Para quem enxerga, basta visualizar o asterisco para distinguir os campos obrigatrios. Com o
leitor de tela, a informao do "alt" seria lida para o usurio. No caso do exemplo de cdigo
acima, o leitor iria informar algo do tipo: "Campo de edio, nome, obrigatrio.

2.9 Multimdia

Ao disponibilizarmos um arquivo multimdia, sempre importante garantir que todos possam

ter acesso ao seu contedo, incluindo pessoas com deficincia visual e as com deficincia
auditiva.

Para vdeos que no possuem faixa de udio, necessrio fornecer alternativa em texto, ou
seja, disponibilizar, junto ao vdeo, um arquivo para download ou um link para a transcrio
textual.

A transcrio textual representa uma alternativa em texto que contm todo o contedo de
um vdeo, incluindo tanto as informaes contidas na faixa de udio (se esta existir), quanto
informaes visuais transmitidas durante o vdeo. Assim, alm das informaes contidas nas
falas, preciso informar todo o contedo visual relevante para a compreenso do vdeo, como
expresses corporais, risadas, informaes em texto, mudana de ambiente, etc. A transcrio
uma alternativa para vdeos muito importante, pois possibilita o acesso a todo o contedo
de um vdeo para pessoas com deficincia visual e para pessoas com deficincia auditiva, alm
de pessoas com surdocegueira, que podem acessar o contedo da transcrio textual por
meio de um display Braille. Alm de essencial para pessoas com deficincia visual e 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 assistir
a um arquivo multimdia.

Para arquivos apenas de udio, tambm essencial fornecer um arquivo para download ou
um link para a alternativa textual.

30
Caso o vdeo possua faixa de udio, alm da alternativa em texto, devem ser fornecidas
legendas. Se necessrio, podemos fornecer, ainda, uma faixa de audiodescrio para o vdeo.

As legendas so de fundamental importncia para garantir a acessibilidade a pessoas com

deficincia auditiva. Legendas so textos sincronizados equivalentes ao contedo de udio.
Existem trs tipos de legenda:

Closed caption (CC): dever ser ativada para comear a aparecer no vdeo.
Open caption (OC): est sempre visvel.
Real time caption (legenda em tempo real): representam as legendas de vdeo ao
vivo, ou seja, so criadas simultaneamente apresentao do vdeo por pessoal
especializado, utilizando softwares e equipamentos especiais.

Alm das legendas, muitos vdeos iro exigir uma faixa de audiodescrio para que sejam
totalmente acessveis. A audiodescrio no a transcrio textual do contedo de um vdeo,
mas sim uma faixa de udio que contempla informaes que aparecem visualmente, mas no
esto presentes nos dilogos ou no udio do prprio vdeo. Assim, a audiodescrio permite
que o usurio tenha acesso a informaes visuais que transmitem contedo, como expresses
faciais e corporais, informao sobre o ambiente, efeitos especiais, informaes em texto que
aparecem no vdeo, etc. A audiodescrio aparece no espao entre as falas, sem sobrepor o
contedo em udio original do vdeo.

Acesse o vdeo da Natura Mame e Beb (abaixo) para compreender melhor o que a
audiodescrio: http://www.youtube.com/watch?v=LrWzH6S493I.

No podemos esquecer que sempre desejvel que os vdeos com udio apresentem
alternativa na Lngua Brasileira de Sinais (Libras).

31
 importante, tambm, que os arquivos multimdia no iniciem automaticamente em uma
pgina. Isto , um vdeo, por exemplo, no dever ser iniciado sem que o usurio tenha
acionado um boto para esse fim. Assim, para qualquer vdeo, udio ou animao presentes
na pgina, necessrio que sejam fornecidas ferramentas para que o usurio possa iniciar,
pausar, reiniciar ou parar a apresentao desses elementos.

3 Avaliao de Acessibilidade

A avaliao de acessibilidade um processo fundamental para garantir uma Web acessvel.

Existem ferramentas automticas que auxiliam na avaliao de acessibilidade,como o Avaliador
e Simulador de Acessibilidade de Stios (ASES)(link para um novo stio), capaz de avaliar os itens
do eMAG que so passveis de validao por mquina.

Apesar de muito teis, essas ferramentas sozinhas no so capazes de detectar todos os

problemas de acessibilidade de um stio. Para tal deteco, utiliza-se anlise manual, que pode
ser realizada por usurios reais, usando-se diferentes tipos de tecnologia, e por especialistas na
rea de acessibilidade Web.

O eMAG sugere um passo a passo para avaliar a acessibilidade de um stio:

1. Validar os cdigos de contedo HTML e folhas de estilo;

2. Verificar o fluxo de leitura da pgina, utilizando um navegador textual ou um software
leitor de tela;
3. Checar o fluxo de leitura das pginas sem estilos, sem scripts e sem as imagens;
4. Verificar as funcionalidades disponveis na barra de acessibilidade, como atalhos e
contraste;
5. Efetuar a validao automtica de acessibilidade, por meio de avaliadores automticos;
6. Realizar a validao manual, com uso de checklists de validao humana.

Um recurso bastante til na avaliao de acessibilidade de um stio so as extenses para

navegadores para anlise de acessibilidade:

32
 Para Firefox: Accessibility Evaluation Toolbar (link para um novo stio).
Para Google Chrome: Accessibility Developer Tools (link para um novo stio).
Para Internet Explorer: Web Accessibility Toolbar for Internet Explorer (link para um
novo stio).

A avaliao manual pode ser feita utilizando-se checklists, como os disponibilizados pelo
Departamento de Governo Eletrnico:

Checklist Manual de Acessibilidade - Desenvolvedores.

Checklist Manual de Acessibilidade - Usurios com deficincia visual .
Ou utilizando o anexo D - Pontos de Checagem validveis por avaliao Humana (.ods,
26kb) (link para outro stio) da Cartilha de Contratao (link para um novo stio).

Saiba Mais sobre avaliao de acessibilidade

Lista completa de ferramentas para avaliao de acessibilidade - em ingls (link para

um novo stio).

4 Recursos e ferramentas

Organizaes e especificaes

World Wide Web Consortium (W3C) (link para um novo stio).

Web Content Accessibility Guidelines (WCAG) Verso 2.0 (link para um novo stio).
Web Content Accessibility Guidelines (WCAG) Verso 2.0 (portugus) (link para um novo stio).
Modelo de Acessiblidade em Governo Eletrnico (eMAG) (link para um novo stio).

Validadores de cdigo

Validador de Extensible Hypertext Markup Language (XHTML) e Hypertext Markup Language

(HTML) (link para um novo stio).
Validador de Folhas de Estilo (CSS) (link para um novo stio).
Validador de links (link para um novo stio).

Validadores automticos de acessibilidade

Avaliador e Simulador de Acessibilidade de Stios (ASES) (WAI e eMAG) (link para um novo stio).
Da Silva (WAI e eMAG) (link para um novo stio).
AccessMonitor (WAI) (link para um novo stio).
Web Accessibility Tool (WAVE) (WAI) (link para um novo stio).
Cynthia Says (WAI) (link para um novo stio).
Hera (WAI) (link para um novo stio).
Lift (WAI) (link para um novo stio).

33
TAW (WAI) (link para um novo stio).
Examinator (WAI) (link para um novo stio).
Functional Accessibility Evaluator 1.1 (WAI e Section 508) (link para um novo stio).
Barra de ferramentas para avaliao de acessibilidade

Web Accessibility Toolbar for Internet Explorer (para Internet Explorer) (link para um novo stio).
Accessibility Evaluation Toolbar (para Firefox) (link para um novo stio).

Ferramentas para anlise de relao de contraste

Luminosity Colour Contrast Ratio Analyser (online) (link para um novo stio).
Contrast Analyser (online) (link para um novo stio).
Check my colours (online) (link para um novo stio).
Contrast Analyser 2.2 (link para um novo stio).

Simulador de Navegador

Browsershots (link para um novo stio).

Navegadores Textuais

Lynx (link para um novo stio).

LynxViewer (simulador) (link para um novo stio).

Simulador para Cegueira Cromtica (Daltonismo)

Vischeck (link para um novo stio).

Leitores de Tela

Jaws for Windows - Leitor de tela americano produzido pela Freedom Scientific (link para um
novo stio).
NVDA - Leitor de tela gratuito e de cdigo aberto para Windows (link para um novo stio).
Orca - Leitor de tela gratuito e de cdigo aberto para Linux (link para um novo stio).
Virtual Vision - Leitor de tela nacional fabricado pela Micropower (link para um novo stio).
VoiceOver - Leitor de tela para MAC OS (link para um novo stio).
Windows Eyes - Leitor de tela canadense fabricado pela GW Micro (link para um novo stio).
DOSVOX - Interface especializada desenvolvida pela UFRJ (link para um novo stio).

Material de apoio

Material de apoio fornecido pelo Departamento de Governo Eletrnico, incluindo tutoriais de

acessibilidade e modelos de checklists (link para um novo stio).
Cartilha de acessibilidade na Web do W3C (link para um novo stio).
Lista completa de ferramentas para avaliao de acessibilidade disponibilizada pelo W3C (em
ingls) (link para um novo stio).
Building Accessible Webstios (em ingls) - livro online bastante completo sobre como

34
desenvolver um stio acessvel (link para um novo stio).

5 Glossrio

Atributo

Os atributos servem para definir uma propriedade de um elemento (X)HTML.

Folhas de estilo ou CSS (Cascading Style Sheets)

Representam uma linguagem de estilizao, ou seja, utilizada para definir a apresentao visual
de uma pgina. Assim, enquanto o contedo de um stio encontra-se no HTML, a formatao
feita por meio das folhas de estilo, separando-se, dessa forma, as camadas lgicas.

HTML (Hyper Text Markup Language)

uma linguagem de marcao utilizada para produzir pginas da Web.

Leitor de tela

Esses softwares interagem com o sistema operacional, capturando as informaes apresentadas

na forma de texto e transformando-as em resposta falada por um sintetizador de voz. Para
navegar utilizando um leitor de tela, o usurio faz uso de comandos pelo teclado.

Navegador

So os softwares utilizados para acessar, consultar e interagir com o material publicado na

Web. Como exemplos, podemos citar o Internet Explorer, o Mozilla Firefox, o Google Chrome,
o Safari, entre outros.

Tags

So os comandos no HTML. Existem as tags de abertura (<comando>) e as de fechamento (</

comando>). O contedo de cada comando inserido entre uma tag de abertura e uma de
fechamento.

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 dessas tecnologias 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.
6 Concluso

35
 "A web assume um papel de to grande importncia, que sua
acessibilidade passa a no significar acesso a uma coisa s,
mas a uma infinidade de aspectos importantes da vida e do
cotidiano de cada pessoa. Para as pessoas com deficincia
e mobilidade reduzida, a acessibilidade possibilita uma
vida independente e com participao plena em todos
os seus aspectos; e para todas as pessoas, em diferentes
contextos, pode proporcionar maior conforto, facilidade de
uso, rapidez, satisfao, segurana e eficincia."

W3C Brasil em Cartilha Acessibilidade na Web (link para um novo stio)

Muito bem! Chegamos ao final do curso!

Nesta segunda seo, conhecemos as Recomendaes de Acessibilidade, a Acessibilidade

Web na prtica e recursos que podem nos auxiliar nesse processo. As dicas que aprendemos
no curso podem auxiliar, e muito, na garantia de uma Web mais inclusiva e acessvel.

Agora, vamos testar o que aprendemos?

36