Este documento fornece uma introdução ao curso de Acessibilidade para WebDesigners, descrevendo seu objetivo, público-alvo, pré-requisitos, programa, metodologia, avaliação e bibliografia. Ele também apresenta técnicas e diretrizes para projetar sites acessíveis de acordo com padrões internacionais, além de discutir a importância da acessibilidade e inclusão digital.
8. CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
É dada permissão para copiar, distribuir e/ou modificar este documento sob os termos
da Licença de Documentação Livre GNU, Versão 1.1 ou qualquer versão posterior
públicada pela Free Software Foundation; com o Capitulo Invariante SOBRE ESSA
APOSTILA. Uma cópia da licença está inclusa na seção entitulada "Licença de Docu-
mentação Livre GNU".
Os 10 mandamentos do aluno de educação online
• 1. Acesso à Internet: ter endereço eletrônico, um provedor e um equipamento adequado é
pré-requisito para a participação nos cursos a distância;
• 2. Habilidade e disposição para operar programas: ter conhecimentos básicos de Informá-
tica é necessário para poder executar as tarefas;
• 3. Vontade para aprender colaborativamente: interagir, ser participativo no ensino a distân-
cia conta muitos pontos, pois irá colaborar para o processo ensino-aprendizagem pessoal,
dos colegas e dos professores;
• 4. Comportamentos compatíveis com a etiqueta: mostrar-se interessado em conhecer seus
colegas de turma respeitando-os e se fazendo ser respeitado pelos mesmos;
• 5. Organização pessoal: planejar e organizar tudo é fundamental para facilitar a sua revisão
e a sua recuperação de materiais;
• 6. Vontade para realizar as atividades no tempo correto: anotar todas as suas obrigações e
realizá-las em tempo real;
• 7. Curiosidade e abertura para inovações: aceitar novas idéias e inovar sempre;
• 8. Flexibilidade e adaptação: requisitos necessário à mudança tecnológica, aprendizagens
e descobertas;
• 9. Objetividade em sua comunicação: comunicar-se de forma clara, breve e transparente é
ponto - chave na comunicação pela Internet;
• 10. Responsabilidade: ser responsável por seu próprio aprendizado. O ambiente virtual não
controla a sua dedicação, mas reflete os resultados do seu esforço e da sua colaboração.
Como participar dos fóruns e Wikipédia
Você tem um problema e precisa de ajuda?
Podemos te ajudar de 2 formas:
A primeira é o uso dos fóruns de notícias e de dúvidas gerais que se distinguem pelo uso:
. O fórum de notícias tem por objetivo disponibilizar um meio de acesso rápido a informações
que sejam pertinentes ao curso (avisos, notícias). As mensagens postadas nele são enviadas a
7
9. CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
todos participantes. Assim, se o monitor ou algum outro participante tiver uma informação que
interesse ao grupo, favor postá-la aqui.
Porém, se o que você deseja é resolver alguma dúvida ou discutir algum tópico específico do
curso. É recomendado que você faça uso do Fórum de dúvidas gerais que lhe dá recursos mais
efetivos para esta prática.
. O fórum de dúvidas gerais tem por objetivo disponibilizar um meio fácil, rápido e interativo
para solucionar suas dúvidas e trocar experiências. As mensagens postadas nele são enviadas
a todos participantes do curso. Assim, fica muito mais fácil obter respostas, já que todos podem
ajudar.
Se você receber uma mensagem com algum tópico que saiba responder, não se preocupe com a
formalização ou a gramática. Responda! E não se esqueça de que antes de abrir um novo tópico
é recomendável ver se a sua pergunta já foi feita por outro participante.
A segunda forma se dá pelas Wikis:
. Uma wiki é uma página web que pode ser editada colaborativamente, ou seja, qualquer par-
ticipante pode inserir, editar, apagar textos. As versões antigas vão sendo arquivadas e podem
ser recuperadas a qualquer momento que um dos participantes o desejar. Assim, ela oferece um
ótimo suporte a processos de aprendizagem colaborativa. A maior wiki na web é o site "Wikipé-
dia", uma experiência grandiosa de construção de uma enciclopédia de forma colaborativa, por
pessoas de todas as partes do mundo. Acesse-a em português pelos links:
• Página principal da Wiki - http://pt.wikipedia.org/wiki/
Agradecemos antecipadamente a sua colaboração com a aprendizagem do grupo!
Primeiros Passos
Para uma melhor aprendizagem é recomendável que você siga os seguintes passos:
• Ler o Plano de Ensino e entender a que seu curso se dispõe a ensinar;
• Ler a Ambientação do Moodle para aprender a navegar neste ambiente e se utilizar das
ferramentas básicas do mesmo;
• Entrar nas lições seguindo a seqüência descrita no Plano de Ensino;
• Qualquer dúvida, reporte ao Fórum de Dúvidas Gerais.
Perfil do Tutor
Segue-se uma descrição do tutor ideal, baseada no feedback de alunos e de tutores.
O tutor ideal é um modelo de excelência: é consistente, justo e profissional nos respectivos
valores e atitudes, incentiva mas é honesto, imparcial, amável, positivo, respeitador, aceita as
idéias dos estudantes, é paciente, pessoal, tolerante, apreciativo, compreensivo e pronto a ajudar.
8
10. CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
A classificação por um tutor desta natureza proporciona o melhor feedback possível, é crucial, e,
para a maior parte dos alunos, constitui o ponto central do processo de aprendizagem.’ Este tutor
ou instrutor:
• fornece explicações claras acerca do que ele espera e do estilo de classificação que irá
utilizar;
• gosta que lhe façam perguntas adicionais;
• identifica as nossas falhas, mas corrige-as amavelmente’, diz um estudante, ’e explica por-
que motivo a classificação foi ou não foi atribuída’;
• tece comentários completos e construtivos, mas de forma agradável (em contraste com um
reparo de um estudante: ’os comentários deixam-nos com uma sensação de crítica, de
ameaça e de nervossismo’)
• dá uma ajuda complementar para encorajar um estudante em dificuldade;
• esclarece pontos que não foram entendidos, ou corretamente aprendidos anteriormente;
• ajuda o estudante a alcançar os seus objetivos;
• é flexível quando necessário;
• mostra um interesse genuíno em motivar os alunos (mesmo os principiantes e, por isso,
talvez numa fase menos interessante para o tutor);
• escreve todas as correções de forma legível e com um nível de pormenorização adequado;
• acima de tudo, devolve os trabalhos rapidamente;
9
12. CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
(Traduzido pelo João S. O. Bueno através do CIPSGA em 2001)
Esta é uma tradução não oficial da Licença de Documentação Livre GNU em Português Brasi-
leiro. Ela não é publicada pela Free Software Foundation, e não se aplica legalmente a distribuição
de textos que usem a GFDL - apenas o texto original em Inglês da GNU FDL faz isso. Entretanto,
nós esperamos que esta tradução ajude falantes de português a entenderem melhor a GFDL.
This is an unofficial translation of the GNU General Documentation License into Brazilian Por-
tuguese. It was not published by the Free Software Foundation, and does not legally state the
distribution terms for software that uses the GFDL–only the original English text of the GFDL does
that. However, we hope that this translation will help Portuguese speakers understand the GFDL
better.
Licença de Documentação Livre GNU Versão 1.1, Março de 2000
Copyright (C) 2000 Free Software Foundation, Inc.
59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
É permitido a qualquer um copiar e distribuir cópias exatas deste documento de licença, mas
não é permitido alterá-lo.
INTRODUÇÃO
O propósito desta Licença é deixar um manual, livro-texto ou outro documento escrito "livre"no
sentido de liberdade: assegurar a qualquer um a efetiva liberdade de copiá-lo ou redistribui-lo,
com ou sem modificações, comercialmente ou não. Secundariamente, esta Licença mantém
para o autor e editor uma forma de ter crédito por seu trabalho, sem ser considerado responsável
pelas modificações feitas por terceiros.
Esta Licença é um tipo de "copyleft"("direitos revertidos"), o que significa que derivações do
documento precisam ser livres no mesmo sentido. Ela complementa a GNU Licença Pública Ge-
ral (GNU GPL), que é um copyleft para software livre.
Nós fizemos esta Licença para que seja usada em manuais de software livre, por que software
livre precisa de documentação livre: um programa livre deve ser acompanhado de manuais que
provenham as mesmas liberdades que o software possui. Mas esta Licença não está restrita a
manuais de software; ela pode ser usada para qualquer trabalho em texto, independentemente
do assunto ou se ele é publicado como um livro impresso. Nós recomendamos esta Licença prin-
cipalmente para trabalhos cujo propósito seja de introdução ou referência.
APLICABILIDADE E DEFINIÇÕES
Esta Licença se aplica a qualquer manual ou outro texto que contenha uma nota colocada pelo
detentor dos direitos autorais dizendo que ele pode ser distribuído sob os termos desta Licença.
O "Documento"abaixo se refere a qualquer manual ou texto. Qualquer pessoa do público é um
11
13. CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
licenciado e é referida como "você".
Uma "Versão Modificada"do Documento se refere a qualquer trabalho contendo o documento
ou uma parte dele, quer copiada exatamente, quer com modificações e/ou traduzida em outra
língua.
Uma "Seção Secundária"é um apêndice ou uma seção inicial do Documento que trata ex-
clusivamente da relação dos editores ou dos autores do Documento com o assunto geral do
Documento (ou assuntos relacionados) e não contém nada que poderia ser incluído diretamente
nesse assunto geral (Por exemplo, se o Documento é em parte um livro texto de matemática, a
Seção Secundária pode não explicar nada de matemática).
Essa relação poderia ser uma questão de ligação histórica com o assunto, ou matérias relaci-
onadas, ou de posições legais, comerciais, filosóficas, éticas ou políticas relacionadas ao mesmo.
As "Seções Invariantes"são certas Seções Secundárias cujos títulos são designados, como
sendo de Seções Invariantes, na nota que diz que o Documento é publicado sob esta Licença.
Os "Textos de Capa"são certos trechos curtos de texto que são listados, como Textos de Capa
Frontal ou Textos da Quarta Capa, na nota que diz que o texto é publicado sob esta Licença.
Uma cópia "Transparente"do Documento significa uma cópia que pode ser lida automatica-
mente, representada num formato cuja especificação esteja disponível ao público geral, cujos
conteúdos possam ser vistos e editados diretamente e sem mecanismos especiais com editores
de texto genéricos ou (para imagens compostas de pixels) programas de pintura genéricos ou
(para desenhos) por algum editor de desenhos grandemente difundido, e que seja passível de
servir como entrada a formatadores de texto ou para tradução automática para uma variedade
de formatos que sirvam de entrada para formatadores de texto. Uma cópia feita em um formato
de arquivo outrossim Transparente cuja constituição tenha sido projetada para atrapalhar ou de-
sencorajar modificações subsequentes pelos leitores não é Transparente. Uma cópia que não é
"Transparente"é chamada de "Opaca".
Exemplos de formatos que podem ser usados para cópias Transparentes incluem ASCII sim-
ples sem marcações, formato de entrada do Texinfo, formato de entrada do LaTex, SGML ou XML
usando uma DTD disponibilizada publicamente, e HTML simples, compatível com os padrões, e
projetado para ser modificado por pessoas. Formatos opacos incluem PostScript, PDF, formatos
proprietários que podem ser lidos e editados apenas com processadores de texto proprietários,
SGML ou XML para os quais a DTD e/ou ferramentas de processamento e edição não estejam
disponíveis para o público, e HTML gerado automaticamente por alguns editores de texto com
finalidade apenas de saída.
A "Página do Título"significa, para um livro impresso, a página do título propriamente dita,
mais quaisquer páginas subsequentes quantas forem necessárias para conter, de forma legível,
o material que esta Licença requer que apareça na página do título. Para trabalhos que não
tenham uma página do título, "Página do Título"significa o texto próximo da aparição mais proe-
minente do título do trabalho, precedendo o início do corpo do texto.
12
14. CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
FAZENDO CÓPIAS EXATAS
Você pode copiar e distribuir o Documento em qualquer meio, de forma comercial ou não
comercial, desde que esta Licença, as notas de copyright, e a nota de licença dizendo que esta
Licença se aplica ao documento estejam reproduzidas em todas as cópias, e que você não acres-
cente nenhuma outra condição, quaisquer que sejam, às desta Licença.
Você não pode usar medidas técnicas para obstruir ou controlar a leitura ou confecção de
cópias subsequentes das cópias que você fizer ou distribuir. Entretanto, você pode aceitar com-
pensação em troca de cópias. Se você distribuir uma quantidade grande o suficiente de cópias,
você também precisa respeitar as condições da seção 3.
Você também pode emprestar cópias, sob as mesmas condições colocadas acima, e também
pode exibir cópias publicamente.
FAZENDO CÓPIAS EM QUANTIDADE
Se você publicar cópias do Documento em número maior que 100, e a nota de licença do
Documento obrigar Textos de Capa, você precisará incluir as cópias em capas que tragam, clara
e legivelmente, todos esses Textos de Capa: Textos de Capa da Frente na capa da frente, e
Textos da Quarta Capa na capa de trás. Ambas as capas também precisam identificar clara e
legivelmente você como o editor dessas cópias. A capa da frente precisa apresentar o título com-
pleto com todas as palavras do título igualmente proeminentes e visíveis. Você pode adicionar
outros materiais às capas. Fazer cópias com modificações limitadas às capas, tanto quanto estas
preservem o título do documento e satisfaçam a essas condições, pode ser tratado como cópia
exata em outros aspectos.
Se os textos requeridos em qualquer das capas for muito volumoso para caber de forma
legível, você deve colocar os primeiros (tantos quantos couberem de forma razoável) na capa
verdadeira, e continuar os outros nas páginas adjacentes.
Se você publicar ou distribuir cópias Opacas do Documento em número maior que 100, você
precisa ou incluir uma cópia Transparente que possa ser lida automaticamente com cada cópia
Opaca, ou informar, em ou com, cada cópia Opaca a localização de uma cópia Transparente
completa do Documento acessível publicamente em uma rede de computadores, à qual o público
usuário de redes tenha acesso a download gratuito e anônimo utilizando padrões públicos de
protocolos de rede. Se você utilizar o segundo método, você precisará tomar cuidados razoavel-
mente prudentes, quando iniciar a distribuição de cópias Opacas em quantidade, para assegurar
que esta cópia Transparente vai permanecer acessível desta forma na localização especificada
por pelo menos um ano depois da última vez em que você distribuir uma cópia Opaca (direta-
mente ou através de seus agentes ou distribuidores) daquela edição para o público.
É pedido, mas não é obrigatório, que você contate os autores do Documento bem antes de
redistribuir qualquer grande número de cópias, para lhes dar uma oportunidade de prover você
com uma versão atualizada do Documento.
13
15. CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
MODIFICAÇÕES
Você pode copiar e distribuir uma Versão Modificada do Documento sob as condições das se-
ções 2 e 3 acima, desde que você publique a Versão Modificada estritamente sob esta Licença,
com a Versão Modificada tomando o papel do Documento, de forma a licenciar a distribuição
e modificação da Versão Modificada para quem quer que possua uma cópia da mesma. Além
disso, você precisa fazer o seguinte na versão modificada:
A. Usar na Página de Título (e nas capas, se houver alguma) um título distinto daquele do Do-
cumento, e daqueles de versões anteriores (que deveriam, se houvesse algum, estarem listados
na seção "Histórico do Documento"). Você pode usar o mesmo título de uma versão anterior se
o editor original daquela versão lhe der permissão;
B. Listar na Página de Título, como autores, uma ou mais das pessoas ou entidades responsá-
veis pela autoria das modificações na Versão Modificada, conjuntamente com pelo menos cinco
dos autores principais do Documento (todos os seus autores principais, se ele tiver menos que
cinco);
C. Colocar na Página de Título o nome do editor da Versão Modificada, como o editor;
D. Preservar todas as notas de copyright do Documento;
E. Adicionar uma nota de copyright apropriada para suas próprias modificações adjacente às
outras notas de copyright;
F. Incluir, imediatamente depois das notas de copyright, uma nota de licença dando ao público
o direito de usar a Versão Modificada sob os termos desta Licença, na forma mostrada no tópico
abaixo;
G. Preservar nessa nota de licença as listas completas das Seções Invariantes e os Textos de
Capa requeridos dados na nota de licença do Documento;
H. Incluir uma cópia inalterada desta Licença;
I. Preservar a seção entitulada "Histórico", e seu título, e adicionar à mesma um item dizendo
pelo menos o título, ano, novos autores e editor da Versão Modificada como dados na Página de
Título. Se não houver uma sessão denominada "Histórico"no Documento, criar uma dizendo o
título, ano, autores, e editor do Documento como dados em sua Página de Título, então adicionar
um item descrevendo a Versão Modificada, tal como descrito na sentença anterior;
J. Preservar o endereço de rede, se algum, dado no Documento para acesso público a uma
cópia Transparente do Documento, e da mesma forma, as localizações de rede dadas no Docu-
mento para as versões anteriores em que ele foi baseado. Elas podem ser colocadas na seção
"Histórico". Você pode omitir uma localização na rede para um trabalho que tenha sido publicado
pelo menos quatro anos antes do Documento, ou se o editor original da versão a que ela se refira
der sua permissão;
K. Em qualquer seção entitulada "Agradecimentos"ou "Dedicatórias", preservar o título da
14
16. CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
seção e preservar a seção em toda substância e fim de cada um dos agradecimentos de contri-
buidores e/ou dedicatórias dados;
L. Preservar todas as Seções Invariantes do Documento, inalteradas em seus textos ou em
seus títulos. Números de seção ou equivalentes não são considerados parte dos títulos da seção;
M. Apagar qualquer seção entitulada "Endossos". Tal sessão não pode ser incluída na Versão
Modificada;
N. Não reentitular qualquer seção existente com o título "Endossos"ou com qualquer outro
título dado a uma Seção Invariante.
Se a Versão Modificada incluir novas seções iniciais ou apêndices que se qualifiquem como
Seções Secundárias e não contenham nenhum material copiado do Documento, você pode optar
por designar alguma ou todas aquelas seções como invariantes. Para fazer isso, adicione seus
títulos à lista de Seções Invariantes na nota de licença da Versão Modificada. Esses títulos preci-
sam ser diferentes de qualquer outro título de seção.
Você pode adicionar uma seção entitulada "Endossos", desde que ela não contenha qual-
quer coisa além de endossos da sua Versão Modificada por várias pessoas ou entidades - por
exemplo, declarações de revisores ou de que o texto foi aprovado por uma organização como a
definição oficial de um padrão.
Você pode adicionar uma passagem de até cinco palavras como um Texto de Capa da Frente
, e uma passagem de até 25 palavras como um Texto de Quarta Capa, ao final da lista de Textos
de Capa na Versão Modificada. Somente uma passagem de Texto da Capa da Frente e uma de
Texto da Quarta Capa podem ser adicionados por (ou por acordos feitos por) qualquer entidade.
Se o Documento já incluir um texto de capa para a mesma capa, adicionado previamente por
você ou por acordo feito com alguma entidade para a qual você esteja agindo, você não pode
adicionar um outro; mas você pode trocar o antigo, com permissão explícita do editor anterior que
adicionou a passagem antiga.
O(s) autor(es) e editor(es) do Documento não dão permissão por esta Licença para que seus
nomes sejam usados para publicidade ou para assegurar ou implicar endossamento de qualquer
Versão Modificada.
COMBINANDO DOCUMENTOS
Você pode combinar o Documento com outros documentos publicados sob esta Licença, sob
os termos definidos na seção 4 acima para versões modificadas, desde que você inclua na com-
binação todas as Seções Invariantes de todos os documentos originais, sem modificações, e liste
todas elas como Seções Invariantes de seu trabalho combinado em sua nota de licença.
O trabalho combinado precisa conter apenas uma cópia desta Licença, e Seções Invariantes
Idênticas com multiplas ocorrências podem ser substituídas por apenas uma cópia. Se houver
múltiplas Seções Invariantes com o mesmo nome mas com conteúdos distintos, faça o título de
15
17. CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
cada seção único adicionando ao final do mesmo, em parênteses, o nome do autor ou editor
origianl daquela seção, se for conhecido, ou um número que seja único. Faça o mesmo ajuste
nos títulos de seção na lista de Seções Invariantes nota de licença do trabalho combinado.
Na combinação, você precisa combinar quaisquer seções entituladas "Histórico"dos diver-
sos documentos originais, formando uma seção entitulada "Histórico"; da mesma forma combine
quaisquer seções entituladas "Agradecimentos", ou "Dedicatórias". Você precisa apagar todas as
seções entituladas como "Endosso".
COLETÂNEAS DE DOCUMENTOS
Você pode fazer uma coletânea consitindo do Documento e outros documentos publicados
sob esta Licença, e substituir as cópias individuais desta Licença nos vários documentos com
uma única cópia incluida na coletânea, desde que você siga as regras desta Licença para cópia
exata de cada um dos Documentos em todos os outros aspectos.
Você pode extrair um único documento de tal coletânea, e distribuí-lo individualmente sob
esta Licença, desde que você insira uma cópia desta Licença no documento extraído, e siga esta
Licença em todos os outros aspectos relacionados à cópia exata daquele documento.
AGREGAÇÃO COM TRABALHOS INDEPENDENTES
Uma compilação do Documento ou derivados dele com outros trabalhos ou documentos se-
parados e independentes, em um volume ou mídia de distribuição, não conta como uma Ver-
são Modificada do Documento, desde que nenhum copyright de compilação seja reclamado pela
compilação. Tal compilação é chamada um "agregado", e esta Licença não se aplica aos outros
trabalhos auto-contidos compilados junto com o Documento, só por conta de terem sido assim
compilados, e eles não são trabalhos derivados do Documento.
Se o requerido para o Texto de Capa na seção 3 for aplicável a essas cópias do Documento,
então, se o Documento constituir menos de um quarto de todo o agregado, os Textos de Capa
do Documento podem ser colocados em capas adjacentes ao Documento dentro do agregado.
Senão eles precisarão aparecer nas capas de todo o agregado.
TRADUÇÃO
Tradução é considerada como um tipo de modificação, então você pode distribuir traduções
do Documento sob os termos da seção 4. A substituição de Seções Invariantes por traduções
requer uma permissão especial dos detentores do copyright das mesmas, mas você pode incluir
traduções de algumas ou de todas as Seções Invariantes em adição às versões orignais dessas
Seções Invariantes. Você pode incluir uma tradução desta Licença desde que você também in-
clua a versão original em Inglês desta Licença. No caso de discordância entre a tradução e a
16
18. CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
versão original em Inglês desta Licença, a versão original em Inglês prevalecerá.
TÉRMINO
Você não pode copiar, modificar, sublicenciar, ou distribuir o Documento exceto como expres-
samente especificado sob esta Licença. Qualquer outra tentativa de copiar, modificar, sublicen-
ciar, ou distribuir o Documento é nula, e resultará automaticamente no término de seus direitos
sob esta Licença. Entretanto, terceiros que tenham recebido cópias, ou direitos de você sob esta
Licença não terão suas licenças terminadas, tanto quanto esses terceiros permaneçam em total
acordo com esta Licença.
REVISÕES FUTURAS DESTA LICENÇA
A Free Software Foundation pode publicar novas versões revisadas da Licença de Documen-
tação Livre GNU de tempos em tempos. Tais novas versões serão similares em espirito à versão
presente, mas podem diferir em detalhes ao abordarem novos porblemas e preocupações. Veja
http://www.gnu.org/copyleft/.
A cada versão da Licença é dado um número de versão distinto. Se o Documento especificar
que uma versão particular desta Licença "ou qualquer versão posterior"se aplica ao mesmo, você
tem a opção de seguir os termos e condições daquela versão específica, ou de qualquer versão
posterior que tenha sido publicada (não como rascunho) pela Free Software Foundation. Se o
Documento não especificar um número de Versão desta Licença, você pode escolher qualquer
versão já publicada (não como rascunho) pela Free Software Foundation.
ADENDO: Como usar esta Licença para seus documentos
Para usar esta Licença num documento que você escreveu, inclua uma cópia desta Licença
no documento e ponha as seguintes notas de copyright e licenças logo após a página de título:
Copyright (c) ANO SEU NOME.
É dada permissão para copiar, distribuir e/ou modificar este documento sob os termos da Licença
de Documentação Livre GNU, Versão 1.1 ou qualquer versão posterior publicada pela Free Soft-
ware Foundation; com as Seções Invariantes sendo LISTE SEUS TÍTULOS, com os Textos da
Capa da Frente sendo LISTE, e com os Textos da Quarta-Capa sendo LISTE. Uma cópia da li-
cença está inclusa na seção entitulada "Licença de Documentação Livre GNU".
Se você não tiver nenhuma Seção Invariante, escreva "sem Seções Invariantes"ao invés de
dizer quais são invariantes. Se você não tiver Textos de Capa da Frente, escreva "sem Textos de
Capa da Frente"ao invés de "com os Textos de Capa da Frente sendo LISTE"; o mesmo para os
Textos da Quarta Capa.
Se o seu documento contiver exemplos não triviais de código de programas, nós recomenda-
mos a publicação desses exemplos em paralelo sob a sua escolha de licença de software livre,
17
19. CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
tal como a GNU General Public License, para permitir o seu uso em software livre.
18
21. Capítulo 1
O que é o curso de Acessibilidade para
WebDesigners?
Garantir que sua página Web seja acessível já não é somente uma questão de justiça social.
O conceito de acessibilidade pode ser simultaneamente:
• estratégia de negócio;
• necessidade;
• adequação às leis;
• adequação às diretrizes internacionais.
Este curso explicará o porquê disso e ensinará alguns cuidados que devem ser tomados para
manter sua página acessível, levando já em consideração algumas diretivas para a web semân-
tica. O curso possui duas semanas, começando na Segunda-Feira e terminando no Domingo.
Todo o conteúdo estará disponível a partir da data de início. Para começar o curso, você deve ler
o Guia do Aluno e o Plano de Ensino.
20
22. Capítulo 2
Plano de ensino
2.1 Objetivo
Capacitar o usuário para o desenvolvimento de páginas Web considerando as diretrizes bási-
cas de acessibilidade.
2.2 Público Alvo
Webdesignes ou programadores que desejam produzir um conteúdo Web acessível.
2.3 Pré-requisitos
Os usuários deverão ser, necessariamente, funcionários públicos e ter conhecimentos básicos
para operar um computador. Conhecimento inicial de HTML e CSS também são requeridos.
2.4 Descrição
O curso será realizado na modalidade Educação à Distância e utilizará a Plataforma Moodle
como ferramenta de aprendizagem. O curso tem duração de uma semana e possui um conjunto
de atividades (lições, fóruns, glossários, questionários e outros) que deverão ser executadas de
acordo com as instruções fornecidas. O material didático estará disponível on-line de acordo com
as datas pré-estabelecidas em cada tópico. O avaliador adotado é o "da Silva", disponível na
página <http://www.dasilva.org.br/>.
2.5 Metodologia
O curso está dividido da seguinte maneira:
21
23. CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
2.6 Cronograma
Cronograma Descrição das atividades
Lição 1 - Introdução;
Primeira semana Lição 2 - Projeto inicial de uma página acessível;
Lição 3 - Testando a sua página;
Lição 4 - Acessibilidade em softwares existentes.
Lição 5 - Técnicas, parte 1;
Segunda semana Lição 6 - Técnicas, parte 2;
Lição 7 - Técnicas, parte 3;
Segunda semana, Quinta-Feira a Domingo Avaliação final
Avaliação do curso
As lições contêm o conteúdo principal. Elas poderão ser acessadas quantas vezes forem ne-
cessárias, desde que esteja dentro da semana programada. Ao final de uma lição, você receberá
uma nota de acordo com o seu desempenho. Responda com atenção às perguntas de cada li-
ção, pois elas serão consideradas na sua nota final. Caso sua nota numa determinada lição seja
menor do que 6.0, sugerimos que você faça novamente esta lição.
Ao final do curso será disponibilizada a avaliação referente ao curso. Tanto as notas das lições
quanto a da avaliação serão consideradas para a nota final. Todos os módulos ficarão visíveis
para que possam ser consultados durante a avaliação final.
Aconselhamos a leitura da "Ambientação do Moodle"para que você conheça a plataforma de
Ensino à Distância, evitando dificuldades advindas do "desconhecimento"sobre a mesma.
Os instrutores estarão à sua disposição ao longo de todo curso. Qualquer dúvida deverá ser
enviada ao fórum. Diariamente os monitores darão respostas e esclarecimentos.
2.7 Programa
O curso Acessibilidade oferecerá o seguinte conteúdo:
• Introdução à Acessibilidade Web;
• Projetando e testando uma página acessível;
• Acessibilidade em softwares no mercado;
• Técnicas para um WebDesign acessível.
2.8 Avaliação
Toda a avaliação será feita on-line.
Aspectos a serem considerados na avaliação:
• Iniciativa e autonomia no processo de aprendizagem e de produção de conhecimento;
22
24. CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
• Capacidade de pesquisa e abordagem criativa na solução dos problemas apresentados.
Instrumentos de avaliação:
• Participação ativa nas atividades programadas;
• Avaliação ao final do curso;
• O participante fará várias avaliações referentes ao conteúdo do curso. Para a aprovação
e obtenção do certificado o participante deverá obter nota final maior ou igual a 6.0 de
acordo com a fórmula abaixo:
• Nota Final = ((ML x 7) + (AF x 3)) / 10 = Média aritmética das lições;
• AF = Avaliações.
2.9 Bibliografia
• Página oficial do Acessibilidade Brasil: http://www.acessobrasil.org.br/
• Página oficial do WAI: http://www.w3.org/WAI/
• Apostila do Curso Estuda Silva, Acessibilidade Brasil.
• Símbolo de Acessibilidade à Web: http://ncam.wgbh.org/webaccess/symbolwinner.html
• Curso de Acessibilidade, CDTC: http://www.cursos.cdtc.org.br
23
25. Capítulo 3
Introdução à Acessibilidade Web
Nesta seção, abordaremos as idéias gerais sobre a acessibilidade. Conceitos como a inclusão
digital, usabilidade, legislação e Projeto Universal (Universal Design) serão abordados aqui.
3.1 Lição 1 - Introdução
3.1.1 Diversidade no público-alvo
Existe uma grande diversidade nos usuários da Internet. De acordo com a IBGE, no Brasil
existem aproximadamente:
• 20 milhões de pessoas com alguma ocupação, mas com menos de 4 anos de escolaridade;
• 54 milhões de analfabetos funcionais;
• 15 milhões de pessoas com mais de 65 anos, cujo 5,4 milhões já possuem alguma defici-
ência;
• 24,3 milhões de pessoas portadoras de deficiência, cujo 1,4 milhões possuem deficiência
física permanente;
• 16,5 milhões de pessoas com algum tipo de dificudade visual;
• 5,7 milhões de pessoas com algum tipo de dificuldade auditiva.
Com o sucessivo avanço da tecnologia na Internet, muitos dos citados acima obterão con-
dições favoráveis para o acesso à Internet, viabilizando assim a inclusão dessas pessoas como
público-alvo. Excluir esta massa populacional seria uma falha grave para um bom Web Designer,
já que seu trabalho é maximizar o acesso à página!
Viabilizar o acesso desta variedade de pessoas à sua página terá um forte impacto no seu índice
de aceitação. É por isso que a acessibilidade pode ser dita como uma questão estratégica de
negócio.
24
26. CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
3.1.2 Acessibilidade
O termo "acessibilidade"diz respeito à disponibilidade de um local, informação, pro-
duto ou serviço ao maior número (e variedade) possível de pessoas.
Esse fato requer a eliminação de barreiras arquitetônicas, a disponibilidade de comunicação,
de acesso físico, de equipamentos e programas adequados, de conteúdo e apresentação da in-
formação em formatos alternativos. Para as pessoas que possuem opções limitadas de acesso à
informação, garantir a acessibilidade pode ser uma necessidade.
É importante que você, como um projetista de sítios Web, tenha conhecimento desses conceitos.
Ao construir páginas, fique atento se ela é acessível ao maior número possível de pessoas. Isso
requer a análise de diversas situações em que um usuário pode se encontrar.
Algumas organizações internacionais são responsáveis pela criação de padrões e guias sobre
a acessibilidade na web. Abaixo, apresentamos os dois mais conhecidos:
• W3C - World Wide Web Consortium: responsável pelo desenvolvimento de tecnologias
(especificação, guias, softwares e ferramentas) que maximizam o potencial da Web.
• WAI - Web Accessibility Initiative: desenvolve guias, documentos e recursos relacionados à
acessibilidade na Web.
Em particular, a W3C prevê as seguintes situações especiais para os usuários da Internet:
1. Incapacidade de ver, ouvir ou deslocar-se; ou grande dificuldade - quando não a impossibi-
lidade - de interpretar certos tipos de informação;
2. Dificuldade visual para ler ou compreender textos;
3. Incapacidade para usar o teclado ou o mouse, ou não dispor deles;
4. Insuficiência de quadros, apresentando apenas texto ou dimensões reduzidas, ou uma liga-
ção muito lenta à Internet;
5. Dificuldade para falar ou compreender, fluentemente, a língua em que o documento foi
escrito;
6. Ocupação dos olhos, ouvidos ou mãos, por exemplo, ao volante do automóvel a caminho
do emprego, ou no trabalho em ambiente barulhento;
7. Desatualização, pelo uso de navegador com versão muito antiga, ou navegador completa-
mente diferente dos habituais, ou por voz ou sistema operacional menos difundido.
O ideal é que a sua página seja fácil de navegar para as pessoas que correspondem a essas
situações também.
25
27. CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
3.1.3 Inclusão Digital
O termo "Inclusão Digital"diz respeito ao acesso à informação digitalizada e aos produ-
tos e serviços com interface digital para o maior número e variedade possível de pessoas.
Esse acesso deve, na medida do possível, ser em iguais condições.
Outra definição para "Inclusão Digital"seria: gerar igualdade de oportunidades na sociedade
da informação. Então, a "Inclusão Digital"é uma questão de justiça social.
O conceito parte da afirmação de que o acesso à Internet (e os demais modernos meios de
comunicação) gera um diferencial no aprendizado e na capacidade de ascensão financeira para
o indivíduo.
Como muitos brasileiros não têm condições de adquirir a infra-estrutura para o acesso à Internet,
o reconhecimento e o empenho governamental, social, técnico e econômico para garantir o tal
acesso são cada vez maiores.
Com o acesso à Internet, pretende-se gerar um avanço na capacitação e na qualidade de vida da
população, preparando o país para as necessidades futuras.
3.1.4 Usabilidade
A usabilidade é a capacidade de um produto ser usado por usuários específicos para
atingir objetivos específicos com satisfação, em um determinado contexto de uso.
Como alternativas, temos também as seguintes definições para a usabilidade:
• Esforço mental ou atitude do usuário frente ao produto;
• Facilidade de uso e grau de aceitação do produto;
• Contexto de tarefas específicas realizadas em um determinado trabalho;
• Atributo de qualidade dos sistemas interativos, relacionado à facilidade e eficiência de
aprendizado e uso satisfatório pelo usuário.
Originalmente, a Web foi desenvolvida como um ambiente para troca de informações através
de hipertextos. Porém, com o avanço tecnológico, passou a ser usado como uma interface re-
mota de software também.
Esse fato leva-nos à confusão, pois os profissionais tentam adaptar tecnologias para casos que
estão fora do escopo da aplicação inicial. Portanto, para minimizar a confusão, devemos tomar
muito cuidado em manter claro a estrutura geral da página Web. Para isso, é fundamental enten-
der o domínio em que a página é utilizada.
Conhecer o usuário e seu contexto é fundamental para se fazer o design de um sistema
26
28. CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
com alta usabilidade.
Ao cuidar da usabilidade do conteúdo, você possibilita que a Internet seja usada por usuários
novatos, aqueles sem muita instrução escolar, sem muita motivação frente a um computador, cri-
anças e pessoas idosas.
A usabilidade possui forte potencial comercial, já que terá impacto diretamente na acei-
tação da sua página Web.
3.1.5 Projeto Universal
Também conhecido como o Universal Design (Desenho Universal, ou Arquitetura Universal), o
Projeto Universal é um consenso mundial de boa prática no desenvolvimento de sítios Web.
O seu uso é uma adequação às diretrizes internacionais.
São conceitos do Projeto Universal:
• Igualdade na possibilidade de uso: o design é útil para pessoas com diferentes habilida-
des;
• Flexibilidade: atende uma ampla gama de preferências e habilidades;
• Simples e intuitivo: fácil compreensão, independentemente de experiência, formação, idi-
oma ou concentração do usuário;
• Captação eficaz da informação: o design possibilita que a informação seja obtida inde-
pendentemente da capacidade sensorial ou condições ambientais;
• Tolerante a falhas: minimiza o risco (e possíveis efeitos) de ações indesejadas;
• Esforço físico minimizado: conforto e eficiência na utilização;
• Dimensão apropriada para conteúdo interativo: design oferece espaço apropriado para
alcance, manipulação e uso, independentemente de tamanho, postura ou mobilidade do
usuário.
As técnicas abordadas neste curso também se baseiam no Projeto Universal.
3.1.6 Bases Legais
Os primeiros países a idealizar parâmetros de acessibilidade na Internet foram o Canadá, Es-
tados Unidos e Austrália, em 1997.
Em 1999, o WAI (Web Accessibility Initiative - Iniciativa para Acessibilidade Web), criado pelo
27
29. CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
W3C (World Wide Web Consortium - Consórcio Web), lançou 3 diretrizes para a acessibilidade
do conteúdo Web. Hoje, é a principal referência mundial. São eles:
• Web Content Accessibility Guidelines: diretrizes para informações contidas na página, in-
cluindo textos, formulários, imagens, sons e outros;
• Authoring Tool Accessibility Guidelines: diretrizes para softwares que criam conteúdo Web;
• User Agent Accessibility Guidelines: diretrizes para navegadores, media players e tecnolo-
gias de assistência.
Desde 2000, o Brasil vem desenvolvendo legislações, normas e critérios voltados para a aces-
sibilidade das pessoas portadoras de deficiência ou com mobilidade reduzida, atendendo às ba-
ses do Projeto Universal. Dentre eles, podemos destacar:
1. LEI No. 10.098/2000, que estabelece normas gerais e critérios básicos voltados para a
acessibilidade das pessoas portadoras de deficiência ou com mobilidade reduzida;
2. Comitê CB-40 da ABNT, que se dedica à normalização no campo de acessibilidade;
3. Diversas leis estaduais e municipais sobre o assunto.
Como podemos ver, a acessibilidade é uma questão de adequação às leis brasileiras e dire-
trizes internacionais.
28
30. Capítulo 4
Projetando e testando uma página
acessível
Nesta seção, formaremos uma base para projetar páginas acessíveis. Detalhes serão esclare-
cidos na semana seguinte. Adicionalmente, são apresentadas algumas técnicas para validações.
4.1 Lição 2 - Projeto inicial de uma página acessível
4.1.1 Análise do domínio
Para desenvolver sítios Web, é necessário realizar uma análise do domínio de aplicação (con-
texto em que será usado). Nesta análise, é importante levantar os seguintes pontos:
1. Características dos usuários:
• Dados Pessoais:
– Faixa etária;
– Limitações físicas/mentais;
– Habilidades intelectuais;
– Motivações;
– Atitude em relação às tecnologias novas.
• Habilidades técnicas:
– Escolaridade;
– Experiência com computação;
– Experiência com interfaces;
– Experiência profissional;
– Experiência com a atividade.
2. Tipos de tarefas desenvolvidas:
• Detalhes;
• Objetivo;
• Freqüência;
29
31. CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
• Objetivos institucionais;
• Dependência de outras tarefas;
• Riscos e erros associados;
• Flexibilidade.
3. Ambiente:
• Organizacional:
– Objetivos;
– Horas de trabalho;
– Cargo profissional;
– Estrutura gerencial;
– Flexibilidade do trabalho;
– Atividades individuais;
– Atividades em equipe.
• Físico:
– Espaço;
– Condição audio-visual;
– Localidade;
– Segurança.
4. Equipamentos:
• Configurações de softwares e hardwares;
• Materiais necessários.
5. Produto:
• Estratégia de Marketing;
• Público-alvo;
• Retorno dos investimentos.
Essas informações poderão ser importantes para o levantamento dos requisitos que o sítio
Web deve satisfazer.
4.1.2 Regras de ouro da usabilidade
Existem algumas regras recomendadas para redigir bons documentos. Abaixo, apresentare-
mos alguns princípios que devem estar em mente ao projetar inicialmente um sistema para Web.
Regras iniciais:
• Clareza na arquitetura da informação: organizar a informação de forma que o usuário
possa distinguir o que é prioritário e o que não é;
30
32. CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
• Facilidade de navegação: organizar a informação de forma que esteja disponível em pou-
cos cliques;
• Simplicidade: Facilitar para que o usuário encontre o conteúdo desejado rapidamente;
• Relevância do conteúdo: Formatar textos de forma concisa e objetiva. O estilo deve ser
otimizado tanto para leitura em tela quanto para impressão;
• Consistência: Adotar procedimentos padrões de cores e layouts; para que os usuários
possam ter a noção do que irá acontecer, baseado em experiências anteriores;
• Tempo suportável: Projetar páginas que carreguem com pouco tempo. O tempo máximo
que o usuário esperaria sem perder o interesse seria de 15 segundos;
• Foco nos usuários: Focar na atividade dos usuários. Os usuários se interessam nas infor-
mações e serviços disponíveis. Poucos estarão interessados na tecnologia.
A seguir, apresentaremos regras mais elaboradas para projetos mais detalhados.
Regras de projeto:
• Consistência: usar seqüência de ações similares para situações similares. Mesma termi-
nologia em menus e ajudas, utilizar cores, layouts e fontes padões, etc;
• Atalhos para usuários freqüentes: usar teclas especiais, macros e mecanismos simplifi-
cados de navegação para eliminar telas e passos desnecessários. Isso facilita a interação
dos usuários mais experientes que usam o sistema com freqüência;
• Feedback informativo: toda a ação do usuário deve resultar em uma resposta do sistema.
Dependendo do tipo de ação executada, o nível de detalhe das informações retornadas
pode variar;
• Existência de Diálogo de Fim de Ação: a seqüência de respostas do sistema deve ser or-
ganizada de tal maneira que o usuário possa identificar o momento em que um determinado
grupo de ações terminou;
• Prevenção e tratamento de erros: o sistema não deve permitir que o usuário possa come-
ter um erro severo, comprometendo o sistema. Adicionalmente, em caso de erro o sistema
deve fornecer ao usuário instruções para seu tratamento;
• Reversibilidade: se possível, as ações devem ser reversíveis. Isso alivia a ansiedade dos
usuários e os encorajam a explorar o sistema;
• Controle: usuários preferem que o sistema responda às suas ações, não o contrário. Isso
cria uma sensação de que o usuário detém o controle sobre o processamento;
• Baixa carga cognitiva: a capacidade humana de memorização requer que a tela do sis-
tema seja simples, consistente às outras telas do conjunto e que a freqüência de movimen-
tos em cada tela seja reduzida.
31
33. CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
As regras acima evitarão projetos com problemas de usabilidade.
4.1.3 Usando a linguagem acessível
Em muitos casos, a linguagem utilizada na Internet é complexa, impessoal, tecnicista e for-
mal. Esse tipo de linguagem dificulta a compreensão por parte dos usuários que não dominam a
leitura, o conteúdo ou o uso do computador. Isso pode ocorrer muito em analfabetos funcionais,
idosos e portadores de deficiências.
Usar linguagem acessível, clara e objetiva facilita o acesso e a compreensão do conteúdo das
mensagens. Isso pode ser importante até para usuários sem dificuldades especiais, mas que
desejam ganhar tempo, qualidade e satisfação na comunicação.
A linguagem acessível é aquela utilizada corretamente e que é simples, clara e coerente
com o que o autor deseja expressar. Para isso, precisamos usar as regras gramaticais e orto-
gráficas da língua oficial do país.
OBS. A sua página, porém, não deve desprezar a linguagem coloquial, que promove a identi-
ficação entre o emissor e o receptor da mensagem.
4.1.4 Elaboração de textos acessíveis
Para elaborar um texto que comunique exatamente o que se deseja comunicar, é necessário:
• saber o que cada palavra significa e como é escrita;
• selecionar adequadamente as palavras, evitando o uso de expressões da moda, termos
técnicos ou estrangeirismos, que nem sempre são dominados por todas as pessoas;
• evitar palavras repetidas ou de duplo sentido, expressões viciadas que prejudicam a clareza
da mensagem;
• colocar-se no lugar do receptor para avaliar a qualidade e o estilo da mensagem transmitida;
• observar o tamanho das frases utilizadas. Frases longas dificultam a compreensão, mas as
muito resumidas também produzem o mesmo efeito. De modo geral, recomenda-se usar
em torno de vinte palavras sem que ultrapasse três linhas.
Elementos indispensáveis à elaboração de textos
• Organização: evite improvisar. Com a organização, ganhamos tempo, qualidade e confiabi-
lidade. Certifique-se do que vai informar e defina o modo como a mensagem será dada. Em
caso de dúvidas, procure esclarecê-las com a equipe, leia e busque referências. A Internet
permite a construção simultânea de formato e conteúdo da informação;
32
34. CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
• Confiabilidade: não se baseie em boatos ou suposições. Passar a informação com funda-
mento é mais importante do que ser o primeiro a passá-la. Pesquise, e se utilizar trabalhos
de outros autores, inclua créditos para essas fontes;
• Imparcialidade: evite adjetivos, pois eles aumentam inutilmente o texto e indicam a ten-
dência de quem as informam. A mensagem não deve refletir a opinião pessoal de quem a
envia, a não ser que o espaço seja reservado para essa finalidade;
• Apresentação: use textos limpos e bem apresentados para estimular e facilitar a leitura.
Divida a informação em pequenos blocos e use espaços entre eles. Prefira uniformizar
a estrutura dos textos e das imagens. Imagens devem ter legendas curtas e descritivas
para que os usuários que não as enxergam possam compreendê-las. Use títulos sintéticos
relacionados ao conteúdo, para despertar a atenção para a leitura;
• Correção: tome cuidado com pontuações: pontuações erradas podem alterar o sentido da
mensagem. Leia o texto sempre antes de publicá-lo. Um usuário raramente voltará para a
sua página para ler as correções.
Tendo isso em mente, reorganize os seus textos. Isso melhorará significativamente a quali-
dade da sua página Web.
4.1.5 Informações básicas para a construção de sites acessíveis
Abaixo, apresentaremos algumas informações adicionais que servirão de base para as lições
seguintes. Cada tópico será mais detalhado futuramente.
1. Apresentação da Informação: associe cada elemento não textual com um texto de des-
crição. No geral, o atributo "alt"em conjunto com o atributo "title"é suficiente. Essa regra
aplica-se a:
• imagens;
• símbolos e gráficos representando texto;
• regiões de mapa de imagem;
• animações;
• applets e outros programas;
• arte ASCII ("desenhos"compostos por "letras");
• frames;
• programas interpretáveis ou scripts;
• ícones usados em enumerações;
• espaçadores;
• botões gráficos;
• sons, reproduzidos com ou sem interação do usuário;
• arquivos independentes de áudio;
• faixas de áudio em vídeos;
33
35. CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
• trechos de vídeo.
2. Contatos: fornecer uma forma simples e óbvia para contactar a(s) pessoa(s) da organiza-
ção, responsável(is) pela informação e administração do site.
3. Navegação
• Garantir que as ligações (links) textuais sejam palavras ou expressões compreensíveis
fora do contexto. Teste a navegação usando a tecla TAB e leia em voz alta o respectivo
texto para simular o funcionamento de um leitor de tela. Evite usar links do tipo "Clique
aqui", pois elas não esclarecem a informação dos links. Evite também usar textos
iguais para links diferentes, pois isso gera ambigüidade;
• Permitir a ativação dos elementos através do teclado. Nem todas as pessoas utilizam
o mouse.
4. Conformidade
• Implementar a página Web considerando as recomendações de acessibilidade, apre-
sentadas neste curso;
• Testar a página Web. Use avaliadores on-line ou técnicas de inspecções. Ambos são
apresentados durante este curso;
• Colocar o Símbolo de Acessibilidade Web na página de entrada do sítio. O símbolo
internacional se encontra em
<http://ncam.wgbh.org/webaccess/symbolwinner.html>; mas dê preferência à versão
brasileira, que se encontra na página da Acessibilidade Brasil
<http://www.acessobrasil.org.br>.
5. Verificação
• Use o avaliador "Da Silva", apresentado neste curso, para verificar se a página está
dentro das normas de acessibilidade. Outros avaliadores on-line podem ser usados
como alternativa;
• Verifique a sua página em diversos navegadores. Dê preferência àqueles que estejam
dentro das normas do W3C, como Netscape/Mozilla, Opera, Internet Explorer, etc.
6. Noções de HTML
• No geral, utilize letras minúsculas para tags e atributos, pois isso garante a compatibi-
lidade com o XML, que poderá se tornar padrão na futura Web Semântica (Web onde
informações são estruturadas de acordo com o significado dos conteúdos). No XHTML
(HTML extendido), já é padrão usar tags e atributos em letras minúsculas;
• Nunca deixe aberta uma tag. Sempre associe um comando de fechamento a um co-
mando (Ex. <p> </p>), pois isso garante compatibilidade com XML/XHTML, que po-
derá se tornar padrão na futura Web Semântica. Em caso de comando de uma única
linha, como o <br>, use a construção do tipo <br />;
• Conheça a estrutura geral dos documentos HTML que usaremos neste curso.
– <!DOCTYPE HTML PUBLIC -//W3C//DTD/HTML 4.0 Transitional//EN">
<html lang="pt">
<head>
34
36. CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
<title>Título da Página</title>
<link href="estilos.css"type="text/css"rel="stylesheet">
</head>
<body>
Corpo da página
</body>
</html>
• Conheça os elementos HTML para diagramação. Exemplos são:
– Títulos - <h1></h1>;
– Parágrafos - <p></p>;
– Quebra de linha - <br />;
– etc.
• Conheça o padrão para codificação de tabelas que usaremos neste curso. Um exemplo
se encontra abaixo:
– <table width="50%"border="0"cellspacing="0"cellpadding="5"align="CENTER">
<thead>
<tr>
<th> linha 1-célula1</th>
<th> linha 1-célula2 </th>
</tr>
</thead>
<tbody>
<tr>
<th> linha 2-célula1</th>
<th> linha 2-célula2 </th>
</tr>
</tbody>
</table>
7. Noções de CSS - Cascading Style Sheets (Folhas de Estilos em Cascata): tenha co-
nhecimento da CSS, pois isso ajuda na criação de páginas mais flexíveis, leves e dão mais
precisão no aspecto gráfico; melhorando assim a velocidade de produção, consistência e a
facilidade de manutenção.Legibilidade de cores. Exemplos que ilustram sua sintaxe básica
estão abaixo:
• A estrutura geral das linhas de configuração é: nome_do_seletor propriedades:valores;
. O "nome_do_seletor"pode ser uma tag existente no HTML ou um nome qualquer
(nesse caso, o nome deve ser precedido de "."). Exemplos se encontram abaixo:
– p color: black;
35
37. CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
body
color: blue
font-family: cursive;
font-size: 16px;
.minhaconf color: green;
• Recomenda-se salvar as configurações de estilo em um arquivo texto à parte, como
meucss.css. Isso facilitará na organização e alterações;
• No arquivo HTML onde serão utilizadas as configurações de estilo, insira no <head> o
vínculo com o arquivo CSS.
– Ex:
<head>
<title>Meu título</title>
<link href="meucss.css"type="text/css"
rel="stylesheet"/>
</head>
• Aplique a configuração no HTML usando o nome_do_seletor definido no arquivo CSS
de configuração:
– <body>
<p>
<span class="minhaconf">Meu texto</span>
</p>
</body>
8. Noções de cores legíveis: use cores que facilitem a identificação, discriminação e absor-
ção do texto com sucesso. A cor é uma propriedade estética, sensitiva e informativa. Cores
usadas indiscriminadamente podem ter efeitos negativos e podem dificultar na compreen-
são. Verifique os seguintes aspectos de legibilidade:
• Fontes: prefira usar fontes sem serifas. Apesar de facilitar na leitura para pessoas
com visões normais, pessoas com baixa visão perceberão um embaralhamento entre
o final de uma letra com o começo da seguinte. Por exemplo, as letras "IVI"("i", "v"e
"i"em maiúscula) podem ser confundidos com a letra "M";
• Espaçamentos: cuide das entrelinhas, espaçamento entre caracteres e espaçamento
entre palavras. Frases escritas com a primeira letra de cada palavra em maiúscula
podem ser lidas com mais facilidade (Ex. Web Content Acessibility Guidelines). O
alinhamento de textos à esquerda favorece a leitura e cria espaços uniformes entre
palavras;
• Contraste: verifique se há contraste favorável entre o texto e o fundo. Usuários daltô-
nicos podem ter dificuldade na distinção da gama de cores. Verifique também se o
texto pode ser lido em monitores monocromáticos. Verifique o círculo cromático (figura
4.1.5) abaixo para ter uma idéia sobre cores com contraste. De forma geral, as cores
que se situam no lado oposto do círculo são complementares. Apesar de geralmente
36
38. CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
Figura 4.1: Círculo cromático.
as cores complementares ajudarem na legibilidade, algumas combinações de cores
podem causar mal-estar aos usuários. Por exemplo, as combinações vermelho/verde,
azul/vermelho e amarelo/roxo não são recomendadas.
4.2 Lição 3 - Testando a sua página
4.2.1 Inspeção por heurística
Depois de construído, o sistema estará pronto para a publicação. Antes de sua publicação,
precisamos avaliar a usabilidade da sua interface. Aqui, apresentaremos um método conhecido
como inspeção por heurística.
Heurísticas são regras gerais que descrevem propriedades que ocorrem em comum em
uma determinada entidade. No nosso caso, usaremos as heurísticas conhecidas como Heurís-
ticas de Nielsen, que descrevem propriedades que devem ocorrer em um sistema Web de alta
usabilidade.
Heurísticas de Nielsen:
• Visibilidade do estado do sistema: o sistema precisa usar feedbacks para manter o usuá-
rio informado sobre o que está acontecendo. Tópicos que devem ser abordados são:
– Onde estou?
– O que este portal faz?
– Para onde posso ir?
– Você está aqui.
– Mapa de navegação.
37
39. CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
• Compatibilidade do sistema com o mundo real: o sistema precisa falar a linguagem do
usuário com palavras, expressões e conceitos familiares;
• Controle e liberdade do usuário: usuários fazem ações indesejadas e precisam encontrar
rapidamente uma forma de sair do estado indesejado. Cuidados que devem ser tomados
são:
– Possibilitar retorno à página anterior;
– Possibilitar a interrupção ou cancelamento do processo.
• Consistência e padrões: usuários não precisam adivinhar que diferentes palavras ou
ações significam o mesmo em diferentes contextos. Tópicos que devem ser abordados
são:
– Denominação;
– Localização;
– Formato;
– Cor;
– Linguagem;
– Contextos e situações semelhantes devem ter tratamentos e apresentações semelhan-
tes.
• Prevenção de erros: design que faz a prevenção de erros é melhor do que mensagens de
erro. Cuidados que devem ser tomados são:
– Não usar páginas com a expressão "em construção";
– Atualizar periodicamente os conteúdos das páginas, principalmente se eles acompa-
nham algum evento;
– Oferecer páginas de ajuda para usuários inexperientes;
– Não utilizar mapas de imagem que exijam precisão no clique.
• Reconhecimento ao invés de lembrança: o usuário não deve ter a necessidade de lem-
brar de uma informação durante o percurso pelo sistema;
• Flexibilidade e eficiência de uso: usuários experientes podem ter uma forma de "cortar o
caminho"em ações freqüentes. Cuidados que devem ser tomados são:
– Não usar páginas sem conteúdo útil;
– Utilizar termos que exprimam o conteúdo das páginas correspondentes;
– Usar tamanhos relativos (porcentagem) em vez de tamanhos fixos, por exemplo, para
fontes ou monitores.
• Estética e design minimalista: diálogos não devem conter informações irrelevantes ou
raramente necessárias. As seguintes propriedades que devem ser satisfeitos são:
– Ocupar menos de 50% com conteúdo;
– Ocupar menos de 20% com navegação;
– Evitar frames e cores berrantes;
38
40. CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
– Evitar textos animados, imagens tridimensionais e caracteres piscando.
• Ajudar os usuários a reconhecer, diagnosticar e corrigir erros: o usuário deve ter infor-
mações suficientes para identificar e saber como se recuperar de um erro;
• Ajudas (Help) e documentação: o usuário deve encontrar, de maneira fácil e focalizada,
ajuda e documentação online.
Se o seu sistema não mostra as propriedades acima, então existem problemas de usabili-
dade. Recomendamos reavaliar sua interface.
4.2.2 Simulando a deficiência de cores
Verificar se seu conteúdo é visível por pessoas com deficiência de cores é crucial para manter
sua página web acessível. Para se ter uma idéia, 1 a cada 12 pessoas possui algum tipo de
inconsistência na percepção da cor.
Algumas ferramentas on-line podem ajudar a ter uma idéia de como pessoas com deficiência
de visualização de cores vêem a sua página. Abaixo, apresentamos dois exemplos:
Color Vision
Disponível em <http://www.iamcal.com/toys/colors/>
39
41. CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
Esta ferramenta ajuda a verificar como as diferentes gamas de cores seriam vistas por pes-
soas portadoras de deficiência visual de cor. Apesar da página ser em inglês (restringindo então
a acessibilidade), ele é bem útil para a verificação.
Para usá-lo, selecione as cores de fundo e texto usando as paletas de cores na esquerda. Pos-
teriormente, teste as diversas opções de anomalia de cor (recomendamos principalmente testar
as opções "monochromat") e verifique alterações na gama de cores presentes na paleta da
esquerda. Essas alterações de cores serão visíveis na área de texto "Sample Text"na direita;
assim, pode-se analisar quais combinações de cores de fundo e texto são visíveis por pessoas
portadoras de tais anomalias.
Vischeck
Disponível em <http://www.vischeck.com/vischeck/vischeckURL.php> para verificação de pá-
ginas web e
<http://www.vischeck.com/vischeck/vischeckImage.php> para verificação de imagens.
Essa página pode ser especialmente útil para pessoas que precisam verificar imagens ou pá-
ginas completas. Basicamente, você envia uma imagem ou a URL da página que deseja testar
e ele retorna a imagem/URL com as cores que simulam a visão das pessoas com deficiência na
percepção de cor.
40
42. CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
A versão que simula as cores para páginas ainda não possui suporte para algumas tecnolo-
gias. Por exemplo, páginas com flash ou applets podem retornar erros.
Veja o exemplo abaixo para verificar como a página do GOOGLE apareceria para pessoas com
déficit em cores verde/amarelo:
4.2.3 Usando o avaliador brasileiro Da Silva
O "Da Silva"é um software avaliador que detecta um código HTML e faz uma análise do seu
conteúdo, verificando se está ou não dentro de um conjunto de regras.
Para uma avaliação automatizada da acessibilidade de sua página web, podemos usar a fer-
ramenta "da Silva", que está disponível on-line pela página da Acessibilidade Brasil. Para usar a
ferramenta, acesse "Serviços>Avaliador da Silva". Você pode acessá-lo diretamente pelo ende-
reço
<http://www.dasilva.org.br>.
Veja abaixo o aspecto visual dessa ferramenta Web.
41
43. CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
Para usá-lo, simplesmente digite o endereço da sua página WEB no campo de texto situado
na parte superior, onde se pede o endereço (URL) da página, e pressione o botão ao lado. Em
alguns segundos (dependendo da velocidade de sua conexão), o seu código HTML será avaliado
e um relatório será gerado.
O relatório conterá recomendações e técnicas para que a sua página fique de acordo com as
diretivas internacionais de acessibilidade. A ferramenta permite que você selecione entre duas
diretivas: o WCAG (Web Content Acessibility Guidelines) da W3C e a E-GOV, uma diretiva espe-
cializada para o governo eletrônico.
O relatório é dividido em 3 partes de acordo com a prioridade. As prioridades consideram os
pontos abaixo:
1. Pontos que os criadores de conteúdo Web devem satisfazer inteiramente. Se não o fize-
rem, um ou mais grupos de usuários ficarão impossibilitados de acessar as informações
contidas no documento. A satisfação desse tipo de pontos é um requisito básico para que
determinados grupos possam acessar documentos disponíveis na Web;
2. Pontos que os criadores de conteúdos na Web deveriam satisfazer. Se não o fizerem, um
ou mais grupos de usuários terão dificuldades em acessar as informações contidas no do-
cumento. A satisfação desse tipo de pontos promoverá a remoção de barreiras significativas
ao acesso a documentos disponíveis na Web;
42
44. CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
3. Pontos que os criadores de conteúdos na Web podem satisfazer. Se não o fizerem, um ou
mais grupos poderão se deparar com algumas dificuldades em acessar informações conti-
das nos documentos. A satisfação deste tipo de pontos irá melhorar o acesso a documentos
armazenados na Web.
Essas prioridades foram definidas pela W3C como padrões de acessibilidade WEB.
O "da Silva"permite que alguns desses relatórios sejam desabilitados. Para isso, simplesmente
desmarque os respectivos campos onde se pede as "prioridades a serem avaliadas em seu site".
Infelizmente, a versão atual (verificado em Setembro de 2006) só permite a avaliação de ape-
nas 1 (uma) página por vez.
43
45. Capítulo 5
Acessibilidade em softwares no
mercado
Aqui, mostraremos algumas informações breves sobre recursos de acessibilidade em alguns
softwares proprietários ou livres.
5.1 Lição 4 - Acessibilidade em softwares existentes
5.1.1 Acessibilidade em alguns softwares livres
Apresentaremos aqui alguns programas que estão relacionados à acessibilidade e, adicional-
mente, apresentaremos alguns atalhos de teclado comuns em navegadores em ambiente Linux.
Como o conteúdo abordado nesta lição não é o foco do nosso curso, somente apresentaremos
informações superficiais. Todavia, essas informações podem ser importantes para a análise do
domínio de uso do seu sistema.
Leitores de tela
São programas que "leêm"os dados contidos na tela. Podem também traduzir gráficos quando
existem textos alternativos ligados à imagem. São normalmente usados em conjunto com sin-
tetizadores de voz, que são programas que emitem voz.
Selecionamos aqui dois exemplos. São eles:
Emacspeak:
44
46. CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
É uma ótima ferramenta para os derivados do UNIX. Já está na versão 24.0 (verificado em se-
tembro de 2006). Maiores informações podem ser acessadas na página <http://emacspeak.sourceforge.net/>.
É um software grátis, mas não é livre. Informações sobre os seus direitos estão em
<http://emacspeak.sourceforge.net/COPYRIGHT>
Gnopernicus:
É um leitor de tela para o ambiente gráfico Gnome e faz parte do Gnome Acessibility Project e
do Gnome Assistive Technology Project. Além de ser um leitor de tela, é uma lupa de ampliação
de tela. Maiores informações podem ser acessadas na página
<http://www.baum.ro/gnopernicus.html>.
Compreender a utilidade dos leitores de tela nos ajudam a projetar uma página mais acessí-
vel, pois podemos criar páginas que são mais fáceis de compreender quando lidos nesses tipos
de programa. Por exemplo, agora sabemos que não devemos usar links como
45
47. CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
<Clique aqui!> ou usar imagens sem sua descrição, pois isso dificultaria MUITO a compreensão
pelos usuários de leitores de tela. Evite também usar "símbolos"como:
; - ) ;
: P ou
: - D
em situações desnecessárias.
Maiores detalhes sobre técnicas para criar códigos HTML que possam ser lidos por leitores de
tela são apresentadas mais adiante.
Teclados Virtuais
O teclado virtual é um software que permite a entrada de texto de maneira alternativa ao te-
clado convencional. A maioria se baseia em cliques do mouse sobre uma imagem de um teclado.
São também úteis quando necessitamos de segurança em informações textuais, pois são mais
difíceis de serem registrados por keyloggers (programas que registram entradas em teclado - são
muito usados para roubar senhas).
Um exemplo de um teclado virtual muito usado no Gnome é o GOK (Gnome Onscreen Key-
board). Maiores informações sobre o GOK podem ser encontradas na página
<http://www.gok.ca/>.
Atalhos de teclado
Atalhos de teclado são muito úteis quando estamos usando um ambiente gráfico e não temos
acesso ao mouse. Abaixo, apresentaremos alguns atalhos muito comuns em navegadores que
rodam em Linux.
Teclas Funções
ALT + Tecla Acessa a barra de menu da aplicação.
Setas Navega no menu.
ESC Sair do menu.
ENTER / RETURN Executar a seleção.
ALT + F4 Fechar a aplicação.
TAB Selecionar o próximo controle/link.
SHIFT + TAB Selecionar o controle/link anterior.
ALT + TAB Alternar entre janelas abertas.
SHIFT + Setas Selecionar.
CTRL + C / CTRL + INSERT Copiar.
CTRL + V / SHIFT + INSERT Colar.
CTRL + X Cortar.
ALT + Seta para Esquerda Voltar de página.
ALT + Seta para Direita Avançar de página (desfaz a volta de página).
46
48. CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
O conhecimento desses comandos de teclado são úteis para entender o padrão de navega-
ção dos usuários.
5.1.2 Acessibilidade em alguns softwares proprietários
Apresentaremos aqui alguns aspectos de acessibilidade em softwares proprietários muito co-
muns em conteúdos WEB. São eles o Flash e o Acrobat da Macromedia / Adobe.
Adicionalmente, apresentaremos alguns atalhos de teclado úteis para usuários de Windows e
Internet Explorer. O estudo desses atalhos pode ser útil para analisar o padrão de comporta-
mento dos usuários desses sistemas quando o mouse não é utilizado.
Acessibilidade no Flash
A Macromedia desenvolveu algumas opções de acessibilidade a partir da versão 6.0 do Flash.
O arquivo exportado não pode ser lido por todos os tipos de leitores de tela. Para lê-lo, o arquivo
exportado deverá ser lido por um leitor de tela recomendado pela Macromedia/Adobe, como o
"Window-Eyes"(proprietário). Detalhes sobre o "Window-Eyes"podem ser encontrado na página
<http://www.gwmicro.com/Window-Eyes/>.
Essas opções de acessibilidade somente podem ser aplicadas a "símbolos"(elementos que a
biblioteca do Flash interpreta como uma entidade única e independente). Para que esses símbo-
los sejam úteis, eles devem ser convertidos para "movie clips"(o principal objeto manuseado pelo
Flash), "botões"ou "objetos de formulário".
Para editar as opções de acessibilidade, acesse "windows > other panels > accessibility". Isso
abrirá a janela de descrição de objeto, que também pode ser acessada através da tecla de atalho
"ALT + F2". Nesta janela, informações como o nome do objeto, sua descrição, atalhos e a ordem
de seleção (pela tecla TAB) poderão ser configuradas.
Acessibilidade com o Adobe Acrobat Reader
Em versões acima do 5.5, o Acrobat permite a geração documentos PDF com suporte a textos
adicionais legíveis por leitores de tela. Para usar esse recurso, podemos passar pelas seguintes
etapas:
1. Abrir o documento e acessar a opção "View > Navigation Tabs > Tags";
47
49. CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
2. Com a ferramenta "TouchUp Text"(disponível na barrra de ferramentas de edição avançada),
clique no texto com o botão da direita do mouse e vá até a opção "Create Artifacts". Isso irá
dividir seu texto em blocos;
3. Selecione o bloco de texto e, com o botão direito do mouse, selecione "Properties";
4. Aberto a janela de propriedades "TouchUp", selecione a aba "Tag". Como tipo de tag,
selecione preferencialmente o "span"e complete as descrições exigidas pelo formulário;
5. Teste a acessibilidade do documento gerado. Para isso, acesse na barra de ferramentas o
"Advanced > Accessibility > Full Check"e execute o teste com as opções desejadas.
Alguns comandos de atalho no Windows
Abaixo, apresentaremos algumas teclas de atalho que são bastante usados quando quere-
mos acessar as funcionalidades do Windows sem o mouse.
Teclas Funções
ALT Acessar a barra de menu da aplicação.
CTRL + ESC ou a
tecla WINDOWS
Abrir o menu de inicialização do Windows.
Setas Navegar no menu.
ESC Sair do menu ou voltar um nível no menu.
F1 Ajuda do Windows.
ENTER Executar a aplicação selecionada.
ALT + F4 Sair de uma aplicação.
TAB Selecionar o próximo controle.
SHIFT + TAB Selecionar o controle anterior.
APPLICATIONS
ou SHIFT + F10
Exibir o menu de contexto (o que aparece com o cli-
que do botão direito do mouse).
ALT + ENTER Exibir as propriedades do objeto.
WINDOWS + M Minimizar todas as janelas.
WINDOWS + E Abrir o Windows Explorer.
ALT + TAB Alternar entre janelas abertas.
SHIFT + Setas Selecionar.
CTRL + C Copiar.
CTRL + V Colar.
CTRL + X Cortar.
Alguns comandos de atalho do Internet Explorer
Abaixo, apresentaremos algumas teclas de atalho que são bastante usados quando quere-
mos acessar as funcionalidades do Internet Explorer sem o mouse.
48
50. CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
Teclas Funções
CTRL + O Ir para a barra de endereço.
TAB Selecionar o próximo link.
SHIFT + TAB Selecionar o link anterior.
ENTER Ativar o link selecionado.
ALT + Seta para a esquerda Voltar para a página anteriormente carregada.
ALT + Seta para a direita Avançar para a próxima página, desfazendo a volta de página.
49
51. Capítulo 6
Técnicas para um WebDesign acessível
Aqui está o núcleo do curso. Nesta seção, apresentaremos técnicas importantes para criar e
manter sua página Web acessível.
6.1 Lição 5 - Técnicas, parte 1
6.1.1 Fornecer alternativas ao conteúdo sonoro e visual
Forneça um equivalente textual a cada elemento não textual
Usar atributos como "alt", "title"ou "longdesc"em tags HTML ou incorporar a descrição no pró-
prio conteúdo da página. Essa regra se aplica aos seguintes elementos:
Imagens e botões
Para uma imagem simples, decorativa ou acidental, fazer apenas uma breve descrição com o
atributo "alt".
<img src="access2.0.gif"alt="Símbolo da acessibilidade web"title="Símbolo da
acessibilidade web"/>
Se a imagem constituir um link, descrever o destino ou seu propósito.
50
52. CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
<a href="http://ncam.wgbh.org /webaccess/symbolwinner.html">
<img src="access2.0.gif"alt="link para a página de símbolos da
acessibilidade web."title="link para a página
de símbolos da acessibilidade web."/>
</a>
Se a imagem precisar de descrições longas, crie um arquivo HTML com as descrições e use
o atributo "longdesc".
<img src="access2.0.gif" longdesc="http://ncam.wgbh.org/webaccess/symbolwinner.html"
alt="Símbolo da acessibilidade web" title="Símbolo da acessibilidade web"/>
Se você utiliza a tag "object", inclua o texto alternativo no conteúdo da tag object.
<object data="access2.0.gif"type="image/gif"height=100 width=100 >
Coloque aqui uma descrição ou um link para o arquivo contendo a descrição.
</object>
Representações gráficas de texto
Para imagens que são simplesmente mapas de bits de texto, seja por que o objetivo é usar
tipos de letra especiais ou outro tipo de transformação difícil ou impossível de ser feito com folhas
de estilo, forneça o respectivo texto equivalente. Por exemplo:
51
53. CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
<img src="face_CDTC.jpg"alt="Logo CDTC"title="Logo CDTC">
Regiões da mapa de imagem
Uma página que utilize um mapa de imagens como único meio de suporte à navegação po-
derá ser bastante inacessível para usuários que utilizem navegadores não gráficos ou alguém
que não use um dispositivo tradicional como mouse ou tela touch-screen.
Você dispõe de um conjunto de técnicas que asseguram que o seu mapa de imagens seja aces-
sível. Essas técnicas envolvem o fornecimento de um equivalente textual para as funcionalidades
críticas existentes no mapa como, por exemplo, nomear as áreas ativas que representam links
para outra informação.
Animações
O exemplo acima possui a seguinte construção de código.
52
54. CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
<img src="bouncing_pepper.gif" alt="Animação de um pimentão que quica." ti-
tle="Animação de um pimentão que quica.">
Applets e objetos programáveis
O elemento applet está ultrapassado em HTML 4.0, embora continue a ser utilizado. Para
substitui-lo, comece a usar o novo elemento object.
Se você está modificando um applet para torná-lo mais acessível, use o atributo alt para uma
breve descrição da sua ação ou propósito. Caso queira ajudar o público a compreender o pro-
pósito do applet, inclua uma descrição mais detalhada no conteúdo do elemento applet, por
exemplo, entre as expressões <applet> e </applet>.
O código a seguir será produzido independentemente da versão ou da capacidade do seu na-
vegador para mostrá-lo.
<appletcode="Blink.class"width"500"height="40" alt="Applet Java: texto dançante."
title="Applet Java: texto dançante.">
Se estiver usando um navegador com suporte a Java, você poderá ver o texto
"Ser ou não ser, eis a questão. Ou seria a questão ser ou não ser...",
flutuando ao longo da tela, em vez deste parágrafo.
</applet>
Arte ASCII
Exemplo 1:
Veja dois gráficos criados para o relatório explicativo de um processo de produção, nos quais
pode ser visualizada a relação existente entre custos e tempo.
O gráfico feito com caracteres ASCII tem maior significado para usuários com leitores de tela,
principalmente para quem usa linha Braille. O segundo parágrafo mostra a mesma informação,
em uma imagem do tipo bitmap criada a partir de um simples programa de desenho. Apesar desta
última imagem ser inacessível a usuários com leitores de tela, você pode adicionar equivalente
textual usando os atributos alt ou longdesc para obter o efeito.
Exemplos: gráfico arte ASCII (esquerda) e gráfico bitmap (direita):
53
55. CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
Exemplo 2:
Se a imagem construída em arte ASCII não contiver informação de extrema relevância, utilize
uma simples descrição:
: - ) Sorriso
A imagem que se segue, feita em arte ASCII, é da silhueta de uma pessoa com um chapéu.(Saltar
a arte ASCII).Silhueta de uma pessoa com chapéu, desenhada com caracteres ASCII.
<a href="#salto"></a>
<a name="salto"></a>
Note que o link permite à pessoa que utiliza um leitor de tela passar por cima do ASCII e chegar
logo à legenda.
Frames
54
56. CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
Use o "title"e se necessário, o atributo "longdesc"no elemento frame para descrever mais
detalhes sobre o frame ou as suas relações com outros frames. Veja mais detalhes na lição 7.
Exemplo:
<frame src="principal.html" longdesc="descricao.html" title="Frame com o conteúdo principal">
Scripts
Use o elemento noscript para descrever a ação ou substituir a funcionalidade de qualquer
script que integre na página.
Por exemplo, para escrever um script que produza uma animação apresentando um novo pai-
nel sempre que o usuário clicar numa dada região da tela ou pressionar um tecla, use o elemento
no script para fornecer uma alternativa textual que descreva inteiramente a ação:
<script type="text/javascript">
...script para mostrar e substituir painéis de acordo com a seleção do usuário...
</script>
<noscript>
No primeiro painel, Lucy segura em uma bola de futebol.
No segundo painel, Charlie Brown está a ver futebol.
E assim sucessivamente...
</noscript>
Imagens usadas em substituição dos "bullets"das listas
Observe uma lista não ordenada que faz uso de gráficos em substituição das "bullets"de lista
criados por efeito pelo elemento <ul>:
• Maneiro;
• Pensativo;
• Sonolento.
55
57. CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
O exemplo em código apresenta três maneiras diferentes, mas apropriadas, de utilização do
atributo alt como legenda para os marcadores:
<img src="cool.gif"alt="Item: "title="Item: "> Maneiro; <br />
<img src="thoughtful.gif"alt="* "title="* "> Pensativo; <br />
<img src="sleepy.gif"alt= title= > Sonolento; <br />
• Para salientar o item ou qualquer outro texto simples, deve ser usado "item", especialmente
se não existirem muitas entradas na lista;
• Para fornecer uma alternativa textual idêntica ao bullet (marcador gráfico) deve ser usado
um asterisco "*"ou um hífen -";
• Para uma lista com grande número de ítens, é mais apropriado colocar um espaço em
branco entre aspas do atributo alt. Isto poupa o usuário de leitor de tela de ouvir, repetida-
mente, a indicação "Item...".
Imagens usadas como espaçadores
A criação de um arquivo de imagem muito pequeno e transparente é um truque de layout
utilizado por muitos autores. Isto força espaços em branco entre outros objetos, especificando a
altura e a largura, ou os atributos hspace e vspace do elemento img.
O equivalente textual apropriado para um espaçador(spacer) é simplesmente nada, ou seja, um
espaço em branco:
<img src="spacer.gif"hspace="100"vspace="10"alt= title= >
ou
<img src="spacer.gif"width="5"height = "200"alt= title= >
Observe que existe um espaço em branco entre as marcas de aspas no atributo alt. É prefe-
rível, contudo, que para definir seu layout, seja feito uso de notação para folhas de estilo.
Sons reproduzidos com ou sem interação do usuário
Se você produziu um script que faz com que um aviso sonoro toque caso o visitante da sua
página tente enviar um formulário antes dos campos requeridos estarem preenchidos, coloque no
seu programa ( ou script ) a capacidade de escrever uma mensagem na tela que diga algo como:
"Você tentou submeter um formulário incompleto. Preencha, por favor, os campos necessários."
56
58. CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
Arquivos de áudio
Exemplo 1:
Se o arquivo de áudio for pequeno, inclua o equivalente textual no atributo alt em uma imagem
que acompanha o link para o arquivo de áudio.
<a href="work-e.wav>
<img src="audio.gif"
alt="Arquivo de som: Venha trabalhar conosco na CDTC."
title="Arquivo de som: Venha trabalhar conosco na CDTC."/>
Escute uma mensagem deixada pelo autor.
</a>
Exemplo 2:
Se o arquivo de áudio for muito grande, crie um link para um arquivo que contenha uma trans-
crição integral do arquivo. Por exemplo, se um link referencia um arquivo de música "A Festa do
Santo Reis"de Tim Maia, então deve existir um link para uma página que contenha o seguinte
texto:
A Festa do Santo Reis, de Tim Maia
Hoje é dia de Santo Reis
Ainda meio esquecido
Mas é o dia da festa de Santo Reis
Eles chegam tocando sanfona e violão
Os pandeiros de fitas
Carregam sempre na mão
57
59. CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
Eles vão levando
Levando o que pode
Sem deixar com eles
Eles levam até os bodes
Os bodes, mé
Hoje é dia de Santo Reis
Hoje é dia
Santo Reis
Faixas de áudio ou vídeo
Um equivalente textual para a faixa de áudio é similar à transcrição de um discurso gravado
em um arquivo de áudio. Pode ser um equivalente textual sincronizado, que é o método preferido,
ou um simples arquivo de texto, como o exemplo a seguir.
spielfilm.de: Os aficionados dos seus filmes gostam de etiquetá-lo como poeta, filó-
sofo e visionário. Saberia o que fazer com a etiqueta?
Werner: Pouco. Eu nunca olhei para mim mesmo. Nunca estive ligado a esse fenô-
meno pouco sadio, um fenômeno da moda, ser obrigado a analisar a mim mesmo. Eu
não sei nem sequer a cor dos meus olhos. Até olho para o espelho toda manhã e fico
atento, mas só para não me cortar ao fazer a barba. Porém prefiro não me olhar nos
olhos. Eu não sei, e Deus é minha testemunha, a cor dos meus olhos.
spielfilm.de: Azul-claro, como se constata.
Werner: Tudo bem. Você bem que poderia ter dito "verde", "castanho"ou "preto".(ri)De
qualquer modo, não acredito em nada do que você diz. Mas, desta vez vou ficar com
o boato.
Trechos de vídeo
Trata-se da descrição das cenas e ações no vídeo mas não dos diálogos. No exemplo a se-
guir, a descrição do que se passa no vídeo é interligada com o equivalente textual dos diálogos.
O método preferido é a integração sincronizada de equivalente textual do vídeo no próprio clip do
filme.
Description
58
60. CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
A title: On-air Science and Math Fair. Math is Everywhere."
Caption :
Man: Go long, way out.
Description:
A man throws a football.
Caption:
Professor: Submitted for your consideration: the ball has been thrown, and you want
to catch it. But how do you know where it will go so you can be there when it comes
down? One way is to use this formula.
Description:
The professor scribbles numbers on a blackboard.
Caption:
It factors in velocity, acceleration and time to calculate the distance the ball will go.
But then, you knew that. Your brain estimates all of these values in the first seconds of
the ball’s flight to calculate where you have to go to catch the ball.
Description:
A beach ball bounces off his head. He tries to catch it.
Caption:
This math equation helps us understand the physical world and how we function in
it. Whether you do it on the board or on the field, they boot work. So, next time you go
out for that long pass, remember: Math is everywhere.
Math is everywhere!
Description:
59
61. CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF
A title: "Math is Everywhere."
Fornecer links de texto redundantes relativos a cada região ativa de um mapa de imagem
armazenado no servidor.
Providencie links de texto redundantes para cada região ativa de um mapa de imagens "server-
side".
Os mapas de imagem "server-side", ou seja, os que usam o atributo <ismap> em vez do ele-
mento <img>, não fazem ou não podem habitualmente fornecer qualquer informação textual so-
bre os links que se encontram codificados dentro do mapa.
Se o seu mapa de imagens "sever-side"possuir links para as seções A, B e C do seu site, forneça
um texto alternativo na página.
Por exemplo, o código "server-side":
<a href="img/imgmap1.map">
<img ismap src="mapa_imagem.jpg"alt="Use por favor os links
que se seguem em vez dos que se encontram neste mapa de imagens."
title="Use por favor os links
que se seguem em vez dos que se encontram neste mapa de imagens."/>
</a>
<br />
[ <a href="pimentao.htm">Seção A</a> | <a href="vine.htm">Seção B</a>
|<a href="explosao.htm">Seção C</a> ]
produz o seguinte mapa de imagens server-side e correspondente equivalente textual:
60
