Tecnicas de Acessibilidade Web

Técnicas de Acessibilidade
Criando uma web para todos
Jalves Mendonça Nicácio

UNIVERSIDADE FEDERAL DE ALAGOAS
Reitora
Ana Dayse Rezende Dorea
Vice-reitor
Eurico de Barros Lôbo Filho
Diretora da Edufal
Sheila Diab Maluf
Conselho Editorial
Sheila Diab Maluf (Presidente)
Cícero Péricles de Oliveira Carvalho
Elton Casado Fireman Capa:
Roberto Sarmento Lima Carlos Eduardo do Nascimento Araújo
Iracilda Maria de Moura Lima Revisão:
Lindemberg Medeiros de Araújo Marcus de Melo Braga
Leonardo Bittencourt Diagramação:
Eurico Eduardo Pinto de Lemos Jalves Mendonça Nicácio
Antonio de Pádua Cavalcante Supervisão Gráfica:
Cristiane Cyrino Estevão Oliveira Márcio Roberto Vieira de Melo
Catalogação na fonte
Universidade Federal de Alagoas
Biblioteca Central - Divisão de Tratamento Técnico
Bibliotecária Responsável: Helena Cristina Pimentel do Vale
N582t Nicácio, Jalves Mendonça.

Técnicas de acessibilidade : criando uma web para todos / Jalves Mendonça
Nicácio. - Maceió : EDUFAL, 2010.
100 p. : il.
Inclui bibliografia.
O projeto da 1ª edição (2007) foi financiado pelo Banco do Nordeste do Brasil.
1. Internet (Redes de computadores). 2. World Wide Web (Sistema de recu-

peração da informação). 3. Interação homem-máquina. 4. Informática.
I. Título.
CDU: 004.5
Direitos desta edição reservados à Editora afiliada:

Edufal - Editora da Universidade Federal de Alagoas
Campus A. C. Simões, BR 104, Km 97,6 - Fone/Fax: (82) 3214.1111
Tabuleiro do Martins - CEP: 57.072-970 - Maceió - Alagoas
E-mail: edufal@edufal.ufal.br - Site: www.edufal.ufal.br
A Web acessível como um caminho para auxiliar na
Educação Inclusiva
Desde 1999 o SENAI Nacional desenvolve com sucesso, at ravés da

Unidade de Educação Profi ssional - UNI EP, Program a SENAI de Ações I nclusi-
vas - PSAI , que est abeleceu o am plo at endim ent o a pessoas com defi ciência
física, int elect ual, audit iva, visual ou m últ ipla, bem com o, superdot ados ( alt as
habilidades) nas unidades operacionais dos seus 27 Depart am ent os Regio-
nais. O PSAI , além de at ender ao cont ingent e de pessoas com necessidades
especiais, prom ove o acesso aos cursos do SENAI para m ulheres, negros e
índios e a re- qualifi cação profi ssional de pessoas idosas.
O grande foco do PSAI é oport unizar a educação profi ssional para

t odos os cidadãos que por algum m ot ivo sócio- cult ural, econôm ico ou por
preconceit o, são t olhidos de exercer est e direit o const it ucional.
No que se refere à inclusão digit al de pessoas com necessidades

especiais, o Brasil t em adot ado um a polít ica favorável a ações que procuram
prom over a educação inclusiva, am plam ent e defendida pela legislação brasi-
leira. Dest a form a, o SENAI Nacional, at ravés do PSAI , vem capacit ando seus
docent es para ut ilização dos “ soft wares leit ores de t ela” m ais usados no Bra-
sil. Tais soft wares são ut ilizados pelas pessoas cegas em sua int eração com o
com put ador e a inform át ica. Assim , os docent es do SENAI foram habilit ados
para receber, nos cursos de inform át ica, alunos defi cient es visuais, t ornando
possível para essas pessoas o acesso a m ídias digit ais com o a Web.
Em Alagoas, o SENAI vem desenvolvendo com sucesso várias ações

dent ro do PSAI desde 2002. Além de oferecer cursos de capacit ação profi ssio-
nal para pessoas com defi ciência física ou sensorial, o SENAI / AL t em am pliado
suas ações no sent ido de aum ent ar a part icipação dessas pessoas no m ercado
de t rabalho. Um dos m aiores exem plos dest a at uação é a publicação do Guia
Alagoas I nclusiva, um a cart ilha inform at iva com pergunt as e respost as para
orient ação de em pregadores na cont rat ação de pessoas com defi ciência.
No âm bit o da inform ação digit al, o SENAI / AL, num a prom oção da
Rede de I nclusão Social da Pessoa com Defi ciência em Alagoas, criou o sit e
Alagoas I nclusiva, que t raz inform ações e serviços para em presas e com uni-
dade. O Sit e cont a com um banco de profi ssionais com post o por pessoas com
defi ciência que foram qualifi cadas e cert ifi cadas pelo SENAI e out ras inst it ui-
ções de educação que com põem a Rede de I nclusão Social.
No ent ant o, m esm o diant e de t odas as iniciat ivas j á m encionadas,

fazem - se necessários a difusão e o ensino de t écnicas que viabilizem a cons-
t rução e publicação na Web de páginas com cont eúdo acessível, preparando
dest a form a os fut uros const rut ores de páginas da I nt ernet na perspect iva da
inclusão.
A edição especial desse livro, pat rocinada pelo SENAI em parceria

com a EDUFAL e o Banco do Nordest e do Brasil, com a devida anuência do
aut or e t am bém colaborador do SENAI em Alagoas, Jalves Mendonça Nicácio,
é m ais um a et apa dessa est rat égia educat iva. É im prescindível pensar num a
Web que possibilit e o acesso a qualquer pessoa, independent e de suas lim it a-
ções. Mais ainda: cont ribuir para que est e ideal se realize deve ser considera-
do um a obrigação de t odos que queiram com part ilhar inform ações at ravés de
um a página na I nt ernet .
Ent endem os que com a publicação dest a edição especial, o SENAI

rat ifi ca seu com prom isso com a const rução da cidadania, por int erm édio da
educação profi ssional, e oport uniza a qualifi cação não apenas dos seus edu-
candos, m as t am bém do seu quadro docent e, que faz a diferença no processo
de inclusão de pessoas com necessidades especiais.
M a r be n M on t e n e gr o Lou r e ir o
Diret or Regional do SENAI / AL
Sumário
Apresentação x
Introdução
Do que trata este livro? xii
1. O problema da inacessibilidade à páginas de Web ...... xiii
Caso 1: ................................................................................................xiii
Caso 2: ................................................................................................xiii
Caso 3: ................................................................................................xiv
2. Quem deveria ler este livro?...................................... xv
Capítulo 1
O mínimo que você deve saber... 18
1. Afinal, o que é “Web Acessível”?................................ 19
O que quer dizer Web? ........................................................................ 19
O que quer dizer acessível? ................................................................ 21
O que quer dizer Web acessível? ........................................................ 22
2. Sobre a Web e seus componentes. .............................. 23
Sumário
Capítulo 2
Diretrizes para construção de conteúdo aces-
sível 28
1. Diretrizes W3C ........................................................ 29
2. Diretrizes Brasileiras: E-MAG .................................... 31
3. Diretrizes WCAG Samurai .......................................... 32
Capítulo 3
Regras simples, ótimos resultados! 34
1. Identificando a linguagem utilizada ........................... 37
2. Trabalhando com texto alternativo ............................. 38
3. Trabalhando com CSS ............................................... 40
Um exemplo prático: ........................................................................... 42
4. Trabalhando com medidas relativas ........................... 49
5. Pensando na estrutura da página .............................. 52
Descrição de página ............................................................................ 54
6. Tabelas .................................................................. 56
Como um leitor de tela deve ler uma tabela: ...................................... 57
7. Formulários ............................................................ 61
8. Acrônimos e Abreviações........................................... 65
vii
Sumário
Capítulo 4
Técnicas para aplicação de acessibilidade 68
1. Teclas de Atalho....................................................... 70
2. Skip links ............................................................... 72
3. Controle do tamanho da letra .................................... 79
4. Problemas de acessibilidade com CAPTCHA.................. 85
5. Breadcrumbs Trail .................................................. 89
6. Menu de Acessibilidade ............................................ 91
Capítulo 5
Cinto de Utilidades! 94
1. Ferramentas de avaliação/validação de acessibilidade . 95
2. Softwares para avaliação de acessibilidade ................. 95
3. Ferramentas validadoras de HTML/CSS ....................... 96
- Validadores de sintaxe HTML/XHTML ................................................ 96
-Validadores de CSS............................................................................. 96
4. Softwares leitores de tela ......................................... 97
5. Complementos de acessibilidade para Firefox .............. 97
6. Ferramentas que úteis para teste e desenvolvimento .... 98
7. Ítens de leitura Obrigatória....................................... 98
8. Ítens de leitura recomendada .................................... 98
viii
Apresentação
Alguns sonhos que conseguim os realizar em nossas vidas são, m ui-
t as vezes, vist os com o m eras fant asias nossas, diant e de t odos os obst áculos
que t erem os que enfrent ar para t orná- los algo real, concret o. O present e
livro que m e cabe agora apresent ar é um bom exem plo disso. Nasceu de um a
propost a de t rabalho de conclusão de curso que gerou um a iniciat iva de um
proj et o de acessibilidade para o sit e da edit ora da Universidade Federal de
Alagoas e que, no seu decorrer, criou as condições necessárias à realização
desse proj et o.
Acessibilidade é um t em a ainda pouco explorado e de bibliografi a

escassa, apesar da sua inegável relevância. Est á int im am ent e ligado à ques-
t ão da inclusão digit al e da at enção às pessoas, ao ser hum ano de um a form a
geral. Sob esse pont o de vist a, o present e t rabalho revest e- se de um a nat u-
reza alt ruíst a em querer buscar difundir o uso de t écnicas e ferram ent as que
prom ovam a acessibilidade para esse inst rum ent o fant ást ico e ent usiást ico
que hoj e é a Web.
Trat a- se de um t ext o que, apesar de abordar quest ões t écnicas,

dest inadas a um público especializado, cum pre sua m issão com um a lingua-
gem sim ples e acessível, com o deve ser o t om de um a obra que pret ende
abordar t al t em a. Nele, o leit or é conduzido desde aos conceit os básicos da
acessibilidade, sua m ot ivação e im port ância, at é às t écnicas e ferram ent as
avançadas para a sua ut ilização plena por especialist as, ou at é m esm o por
pessoas que não t enham t ant a experiência em desenvolvim ent o de aplicações
para a Web, m as que pret endam publicar algo, desde um sim ples blog at é um
sit e m ais com plexo.
Com a disponibilização de ferram ent as ext rem am ent e fáceis para

publicação de cont eúdo na Web, pessoas sem m uit a experiência de progra-
m ação de com put adores podem m arcar presença, cada vez m ais, no cont ext o
Apresentação
global que a I nt ernet criou, divulgando seus produt os, serviços ou at é m esm o
pensam ent os, nessa grande rede. Para t odo esse público, a present e obra
pode cont ribuir com valiosas inform ações, com o int uit o de possibilit ar a cria-
ção de espaços na Web que possam ser acessados com a m aior abrangência
possível.
Am pliar a acessibilidade das inform ações disponíveis na rede im -

plica o aum ent o de visit as e, logicam ent e, de possíveis usuários ou client es
adicionais, gerando result ados e cont ribuindo para um a m aior inclusão social.
A adesão ao t em a aqui abordado é um dos raros exem plos em que t odos saem
ganhando. Mas, apesar de ser um a ferram ent a út il para t odos, pouco se faz
em t erm os de acessibilidade no cenário global. Há out ro sonho incubado nes-
sa obra: de que um dia a Web sej a am plam ent e acessível, incluindo j ovens e
idosos, pessoas carent es de at enção e aquelas m ais aut oconfi ant es. O livro é
a cont ribuição do seu aut or, j ovem idealist a e visionário, para a t ransform ação
de um a realidade, para m udar o m undo. É a sua decisão pessoal de int erferir
nessa realidade, opt ando por t ent ar fazer algum a diferença nesse universo
m idiát ico, em que a Web se t ransform ou.
Por t odas essas quest ões, est a obra t em um m érit o louvável. É o

prim eiro livro no cenário nacional sobre esse assunt o e, com o t oda iniciat iva
pioneira, abre espaço para novas pesquisas e t rabalhos no t em a abordado.
Pode ser adot ado com o livro t ext o para cursos de desenvolvim ent o de apli-
cações para a Web e, at é m esm o, para cursos de graduação em Sist em as de
I nform ação e Ciências da Com put ação.
Espera- se que o leit or não se det enha apenas a conhecer os recur-

sos de acessibilidade aqui t rat ados e que se una a um grupo cada vez m aior
de profi ssionais que t rabalham para m elhorar as condições de acesso ao con-
t eúdo da Web. Se cada um de nós der um sim ples passo nessa cam inhada,
a sinergia gerada pelos pequenos esforços individuais poderá cont ribuir para
um considerável aum ent o do núm ero de pessoas que podem t irar proveit o de
t odas as t ecnologias inclusivas que j á exist em e que est ão à nossa disposição,
para const ruir um m undo cada vez m ais acessível a t odos nós.
M ARCUS D E M ELO BRAGA
xi
INTRODUÇÃO
Do que trata este livro?
I nt ernet , e- m ail, sit e, hom e page, servidor, navega-

dor, links por t oda part e! Quem nunca fi cou confuso com t oda
est a t ecnologia? Mesm o quem j á nasceu na geração “ on- line”,
algum as vezes pode se sent ir perdido, at é porque est a é um a
t ecnologia em const ant e desenvolvim ent o desde sua criação.
Na verdade, desde a prim eira vez que o m undo ou-

viu falar de Web, nada t em sido com o ant es. A I nt ernet , e
a Web por sua vez, vem a cada ano provocando m udanças
radicais na m aneira com o os hom ens se relacionam , t rocam
inform ações, resolvem problem as, est udam ou sim plesm ent e
se divert em . Muit as vezes, a Web subst it ui ant igos serviços
conhecidos pelo hom em , com o os correios e o t elefone. Dest a
form a, não há com o negar a im port ância da Web nos dias de
hoj e.
Capítulo INTRODUÇÃO - Do que trata este livro?
1. O problema da inacessibilidade à páginas de

Web
Est e é um problem a que não passa despercebido para
um grupo de pessoas que t ent am se benefi ciar das vant agens
dos serviços oferecidos pela Web. Por diversas razões, m uit as
vezes um det erm inado serviço ou página da Web poderá est ar
inacessível a um a pessoa ou grupos de pessoas.
Por exem plo, im agine os seguint es casos:
Caso 1:
João quer fazer um as com pras num sit e de vendas
on- line. Nada com plicado: ele quer adquirir uns CD’s e alguns
livros. No sit e, ele encont ra inst ruções explicando que preços
com descont o est ão em verm elho. Tudo est aria m uit o bem ,
a não ser por um det alhe: João é dalt ônico e não consegue
dist inguir a cor verm elha. A sit uação se com plica quando João
se depara com um form ulário onde os cam pos obrigat órios
t am bém são dest acados dos dem ais pela cor verm elha.
Caso 2:
Toda vez que Sandra precisa ir sozinha ao superm er-
cado ela fi ca afl it a. Sandra t em síndrom e de Dow n e t em di-
fi culdade com leit ura, cálculos m at em át icos e conceit os abs-
t rat os. Na hora de escolher um produt o, ela fi ca confusa com
as diversas opções e acaba perdendo o cont role de quant o ela
est á gast ando.
xiii
Um a vez um am igo dela a apresent ou a um sit e onde

ela poderia fazer as m esm as com pras que ela fazia no super-
m ercado pela int ernet . Ela t ent ou usar o sit e algum as vezes
e logo descobriu um a série de difi culdades: o sit e nunca dei-
xava claro em que seção ela est ava, nem com o encont rar um
det erm inado produt o. Em algum as seções o layout da página
m uda com plet am ent e e a Sandra fi ca na dúvida se ainda est á
no m esm o sit e ou não.
Caso 3:
A prim eira vez que o Henrique usou um program a
leit or de t ela foi um a com oção só! Pela prim eira vez em m uit o
t em po ele sent ia que poderia fazer algum a coisa sem aj uda
de ninguém . Henrique é cego e acabou de ser apresent ado
a um program a capaz de ler t odo t ext o que se encont ra na
t ela.
I m aginem quant a coisa agora ele será capaz de fa-

zer! At ravés da t ecla TAB do t eclado ele pode navegar de link
em link e encont rar o que desej a. Com est e program a, agora
ele poderá acessar os serviços da Web, ele pode pagar suas
cont as, com prar produt os, fazer pesquisas, m andar e- m ails,
et c.
Mas sua fascinação não durou m uit o t em po. Logo

Marcos descobriu que nem t odos os sit es perm it iam que o
leit or de t elas acessasse adequadam ent e seu cont eúdo.
Todos est es exem plos servem para evidenciar um a
xiv
realidade vivida por m ilhões de pessoas em t odo m undo.

Quando privam os est as pessoas do acesso aos serviços e in-
form ações que circulam na Web, est am os criando um sério
problem a de exclusão social e digit al. Encare da seguint e for-
m a: Para pessoas sem defi ciência, sist em as da Web facilit am
a vida, m as para quem não pode ver ou ouvir ou andar, est es
m esm os sist em as são m ais do que facilit adores. Para essas
pessoas, t er acesso a esses sist em as, m uit as vezes signifi ca
t ornar possível a realização de t arefas que, de out ra form a,
exigiriam um esforço im enso ou at é m esm o seriam im possí-
veis de serem realizadas.
Ent ão, o que podem os fazer para que o cont eúdo das
páginas e sist em as da Web sej a acessível a pessoas port ado-
ras de necessidades especiais? É exat am ent e disso que t rat a
est e livro. Abordarem os aqui os principais conceit os que pre-
cisam os saber para t ornar ou const ruir sit es acessíveis.
2. Quem deveria ler este livro?

Nem t odas as pessoas que publicam algum cont eúdo
na Web est ão ligadas à área de I nform át ica e, por isso, não
necessariam ent e t em conhecim ent o das t ecnologias ut ilizadas
para const ruir sit es. Cont udo, t odas as pessoas que publicam
cont eúdos na Web, sej a t ext o, áudio ou vídeo, deveriam se
preocupar com a quest ão da acessibilidade.
Ent ão, m esm o que você não ent enda nada de HTML,
CSS ou qualquer out ra t ecnologia da Web, ainda assim você
pode com preender quais são os pont os crít icos na acessibi-
xv
lidade de um sit e, pode aprender a realizar t est es de usa-

bilidade e acessibilidade ou pode realizar a nobre m issão de
inform ar as out ras pessoas que ainda não despert aram para
est e problem a que at inge a m aioria esm agadora dos sit es da
Web.
Gerent es de Tecnologia da I nform ação, gerent es de

m arket ing e desenvolvedores de negócios t am bém deveriam
ler est e livro. Cada um dent ro de sua área e por razões dife-
rent es deveriam se preocupar em garant ir acesso aos produ-
t os que desenvolvem . Tal at it ude t raria diversos benefícios,
além de criar novas oport unidades de negócios.
Program adores, w eb m ast ers, w eb designers, consul-

t ores de usabilidade, pessoas que possuem ou adm inist ram
sit es e est udant es de inform át ica devem se preocupar em
aprender com o garant ir acesso a pessoas com variadas ne-
cessidades especiais. Mais fácil do que consert ar um sit e que
não est á acessível é j á const ruí- lo levando- se em considera-
ção que pessoas com defi ciências, sej am elas t em porárias ou
perm anent es, vão querer acessar est e sit e.
xvi
O mínimo que você
1
deve saber...
Para que você ent enda claram ent e do que est am os

t rat ando aqui, é necessário que prim eiro com preenda alguns
conceit os básicos. De nada vai adiant ar com eçarm os a expli-
car a aplicação de algum as t écnicas em códigos de páginas
da Web sem ant es defi nirm os alguns t erm os que geralm ent e
causam bast ant e confusão.
Tais conceit os são m uit o im port ant es para que você

possa t er um a visão am pla sobre porque alguns sit es são ina-
cessíveis para algum as pessoas e o que j á t em sido feit o para
resolver est e problem a.
Capítulo 1 - O mínimo que você deve saber...
1. Afinal, o que é “Web Acessível”?

O que quer dizer Web?
Para com eçar, não confunda m ais I nt ernet com Web.
Apesar de serem ext rem am ent e ligadas, são coisas bem dis-
t int as e t em propósit os diferent es. Quem veio prim eiro na
hist ória foi a I nt ernet , criada inicialm ent e para fi ns m ilit ares.
Sua função era, e ainda é, conect ar com put adores. A I nt ernet
fez isso t ão bem que hoj e t em os um a rede m undial de com pu-
t adores. Alias, “ rede m undial de com put adores” defi ne m uit o
bem o que é I nt ernet .
Um a vez que j á t em os um a rede de com unicação

bem est rut urada ent re com put adores, agora precisam os de
program as que perm it am a t roca de m ensagens ent re esses
com put adores. Assim , surgiram os servidores de e- m ail e os
program as client es de e- m ail. Basicam ent e funcionam com o
o sist em a de correio convencional, só que ao invés de t erm os
agência de correios, t em os servidores de e- m ail. No lugar do
cart eiro, t em os a int ernet com t odo seu cabeam ent o e prot o-
colos, e os rem et ent es e dest inat ários são sem pre com put a-
dores.
Mas t rocar inform ações por e- m ails não era sufi cien-
t e. At é ent ão, em t erm os prát icos, a I nt ernet era pouco m ais
do que um a ferram ent a para t roca de correspondências e dis-
ponibilização de arquivos. Além disso, não havia com pat ibi-
lidade ent re os diversos sist em as de inform ação ut ilizados.
O problem a era: dado às circunst âncias, com o com part ilhar
19
publicações e t ecnologias ent re pessoas geografi cam ent e dis-

t ant es, facilit ando o acesso a qualquer t ipo de inform ação?
Nos anos 80, O Cent ro Europeu de Pesquisa Nucle-

ar ( CERN) est ava part icularm ent e int eressado em solucionar
est a quest ão. Para t ant o cont ou com a colaboração de Tim
Berners- Lee, um engenheiro de sist em as com larga experi-
ência em t elecom unicações. Tim prim eiram ent e criou um t ipo
padrão de docum ent o elet rônico e, com isso, resolveu o pro-
blem a de incom pat ibilidade ent re arquivos disponibilizados na
int ernet .
Segundo a solução de Tim , os arquivos seriam dispo-

nibilizados na int ernet seguindo um a idéia parecida com a de
t roca de e- m ails: at ravés de um program a servidor ( respon-
sável por disponibilizar o docum ent o) e program as client es
( que fariam a solicit ação dest e docum ent o ao servidor) .
Mas o que foi realm ent e genial na solução de Tim

Berners- Lee foi a ut ilização de URL’s ( endereços de páginas)
para acesso aos diversos docum ent os e a possibilidade de
vincular esses docum ent os. Funciona assim : cada docum en-
t o, sej a t ext o, im agem , som ou vídeo, t eria um a URL própria.
Para abrir qualquer um dest es docum ent os, bast ava solicit ar
ist o no program a client e, que hoj e conhecem os pelo nom e de
navegador. Dent ro do próprio docum ent o de t ext o exist em
links para out ros docum ent os.
A possibilidade de vincular um docum ent o a out ro ( e

est e segundo docum ent o a um t erceiro, e assim por diant e)
20
nos dá um a sensação de que est am os lidando com algo que

pode fugir ao cont role. A gent e vai seguindo os links e, quan-
do m enos esperam os, volt am os para a prim eira página, de
onde saím os inicialm ent e. Se form os pensar em um gráfi co
ilust rando esse em aranhado de links, esse gráfi co seria algo
parecido com um a t eia de aranha ( em inglês, w eb) . Daí o
nom e dado à invenção de Tim Berners- Lee.
Enfi m , a Web nada m ais é do que est e m ar de links,

sit es e sist em as on- line onde m ilhões de pessoas diariam ent e
navegam e procuram encont rar t udo aquilo que desej am . É
um a t ecnologia criada para t ornar qualquer t ipo de inform a-
ção ou serviço acessível a qualquer hora do dia ou da noit e.
O que quer dizer acessível?

Geralm ent e, quando ouvim os falar que algo é “Aces-
sível”, nós prim eiram ent e pensam os em defi cient es físicos.
Você provavelm ent e j á ouviu alguém dizer: “ aquela passarela
nova é acessível” ou “ aquele ônibus é acessível”. Mas com
um a olhadinha rápida no Aurélio, logo descobrim os que algo
é acessível quando é fácil de aproxim ar, t rat ar ou obt er. I st o
sem dúvida m elhora a com preensão do que é “ ser acessível”,
ou sej a, é bem m ais do que pensávam os inicialm ent e.
Por exem plo: nem t udo que é fácil para um adult o

norm al é fácil para um a criança, ou um idoso, ou um defi cien-
t e físico e assim por diant e. Nem t udo que é acessível para
um cego é t am bém acessível para um paraplégico ou sim ples-
m ent e para alguém com a perna engessada. Cada pessoa,
21
independent e de ser defi cient e física ou não, possui um grau

diferent e de necessidade para poder acessar algum a coisa.
Quando dizem os, port ant o, que algo é acessível, ist o

deveria signifi car que qualquer pessoa, independent e de sua
necessidade, t erá facilidade em ent rar, aproxim ar, subir, ut i-
lizar, et c.
O que quer dizer Web acessível?

Web acessível é a represent ação de um a Web ideal,
onde t odas as pessoas t eriam acesso ao seu cont eúdo. Não só
pessoas, m as t am bém sist em as, um a vez que sist em as t am -
bém acessam cont eúdos de páginas na int ernet para algum
propósit o, dependendo do sist em a.
Um exem plo: o sist em a de buscas m ais ut ilizado no

m undo e que vale m ais de dois bilhões de dólares, o Google.
Ele garim pa t oda a Web procurando os result ados m ais rele-
vant es para um a busca. Alguém aí pode est ar se pergunt ando
“ com o o Google faz isso?”. Bom , um a form a de se fazer isso é
ent rar em cada página e “ ler ” seu cont eúdo, da m esm a form a
que os leit ores de t elas ut ilizados por cegos. Quando o sist e-
m a não consegue acessar algum a página ou sit e, est e ou é
indexado de m aneira equivocada ou é sim plesm ent e deixado
de lado.
Acessibilidade Web t am bém est á ligada a diversos

disposit ivos. Hoj e em dia, páginas da w eb t am bém podem ser
exibidas em celulares, palm t ops e at é em t elevisão. Se não
22
houver um a preocupação em com o as inform ações do sit e se-

rão exibidas nest es disposit ivos, há um a fort e possibilidade de
que seu cont eúdo não sej a disponibilizado adequadam ent e.
Exist em vários fat ores que podem im possibilit ar ou

difi cult ar o acesso ao cont eúdo de um a página. Na int rodu-
ção dest e livro vim os alguns casos que relat am a difi culdade
que algum as pessoas encont ram para acessar inform ações
devido a det erm inadas caract eríst icas de um sit e. O que vere-
m os m ais adiant e é com o podem os det ect ar pont os crít icos de
acessibilidade e com o poderem os corrigir o problem a.
Cont udo, ainda precisarem os explicar m ais alguns

det alhes sobre o funcionam ent o da Web, o que farem os no
próxim o t ópico.
2. Sobre a Web e seus componentes.

Para que a Web funcione, ela depende de cert os com -
ponent es; o m ais óbvio deles é a própria I nt ernet , ou sej a,
t oda est a est rut ura de cabos, placas de redes, prot ocolos,
fi bra ópt ica e com put adores. A I nt ernet é a plat aform a onde
a Web funciona.
A Web é com post a por docum ent os e sist em as. Ou

sej a, páginas da Web, sist em as de w ebm ails, sist em as de
busca e t udo m ais que roda na Web são out ro t ipo de com po-
nent e da Web, e nós cham arem os de Cont eúdo.
Nenhum cont eúdo exist iria se não houvesse quem o
23
criasse. Port ant o, aqui ent ram os Desenvolvedores de w ebsi-

t es e sist em as Web com o o t erceiro com ponent e essencial da
Web.
Mas t odo desenvolvedor ut iliza program as que o aj u-

dam a criar cont eúdo para a Web: são os soft wares de criação
de cont eúdo. Além desses, os desenvolvedores t am bém ut ili-
zam soft wares de validação, que validam o código criado pelo
desenvolvedor e avaliam a acessibilidade do cont eúdo. Muit as
vezes essas duas ferram ent as são int egradas em um a só ou
t rabalham em parceria. Tais soft wares são nosso quart o grupo
de com ponent es essenciais da Web. Nós poderem os cham a-
los de ferram ent as de criação e validação.
Se t iverm os quem cria cont eúdo com o um com po-

nent e da Web, ent ão t erem os t am bém o usuário da Web com o
out ro com ponent e. Usuário é t oda e qualquer pessoa que na-
vega, acessa e lê cont eúdos publicados na Web.
Mas para navegar pela Web, é preciso que o usuá-

rio possua t am bém um navegador, com o o I nt ernet Explorer,
Opera ou Firefox. Algum as vezes é possível que um usuá-
rio não est ej a acessando a Web at ravés de um navegador
convencional com o est es ant eriorm ent e cit ados. Um usuário
pode acessar cont eúdos da Web at ravés de um a TV digit al,
por exem plo. Ent ão, cham arem os de Agent es de Usuários
t odo sist em a ou disposit ivo capaz de requisit ar acesso a qual-
quer cont eúdo da Web e est e será o sext o com ponent e.
Não podem os nos esquecer que m uit os usuários não
24
podem acessar cont eúdos da Web diret am ent e pelo agent e de

usuário. Usuários cegos, por exem plo, se ut ilizam de leit ores
de t elas ou de didposit ivos especiais que reproduzem o cont e-
údo de um a página da Web em braille. Essas ferram ent as que
auxiliam usuários que possuem algum t ipo de necessidade
especial são cham ados de ferram ent as assist ivas, nosso ult i-
m o grupo de com ponent es da Web.
A fi gura abaixo foi ret irada do sit e I niciat iva de Aces-

sibilidade Web 1 ( sigla em inglês: WAI ) , que est á vinculado ao
W3C, um a organização presidida pelo invent or da Web e que
se preocupa em criar padrões para as t ecnologias ut ilizadas
na Web. A fi gura represent a t odos est es com ponent es e com o
eles se relacionam ent re si.
Figura 1. Com ponent es da Web e seus relacionam ent os
É exat am ent e aí, ent re o usuário e o cont eúdo, que
1 http://www.w3c.org/WAI
25
o problem a da falt a de acessibilidade aparece. E se o usuário

for cego? E se for surdo? E se não t iver um a das m ãos, ou
est iver t em porariam ent e incapacit ado?
Foi por causa das necessidades especiais dest as pes-

soas que as ferram ent as assist ivas foram criadas. A t endên-
cia, nesse pont o, é pensar: “ Ent ão, se exist em as ferram ent as
assist ivas, logo est á t udo resolvido. Todas as pessoas podem
navegar pela int ernet .” Mas não é bem assim .
O fat o é que só se pode garant ir um a boa acessibili-

dade a um det erm inado sit e quando t odos esses com ponent es
est ão bem relacionados ent re eles. Não pode haver um a boa
acessibilidade se um det erm inado brow ser ( navegador) não
der suport e a nenhum leit or de t ela, por exem plo. Tam bém
não haveria m ot ivação para um desenvolvedor program ar algo
que facilit asse o acesso a um a página Web se as ferram ent as
de criação ou os agent es de usuário não derem suport e para
t al facilidade que o desenvolvedor desej a program ar.
É m uit o com um encont ram os desenvolvedores de

cont eúdo que não est ão preocupados se algum defi cient e fí-
sico vai t ent ar acessar a página que ele criou. O que geral-
m ent e acont ece é que m uit as páginas da Web não podem ser
acessadas pelas ferram ent as assist ivas, causando t ranst orno
para aqueles que dependem de t ais ferram ent as.
Um exem plo claro de inacessibilidade é o sim ples fat o

de perm it ir a navegação num sit e som ent e pelo m ouse. I st o
j á é sufi cient e para deixar de lado t odas as pessoas que, por
26
algum m ot ivo, não podem ut ilizar est e disposit ivo e navegam

at ravés do t eclado.
Se você ainda não se deu cont a, pessoas que pos-

suem som ent e defi ciência na visão, apesar de geralm ent e
não apresent arem nenhum problem a nos braços e nas m ãos,
t am bém est ão incapacit adas de ut ilizar o m ouse por um m o-
t ivo sim ples: m ouse é um disposit ivo que, para ser ut ilizado,
precisa da m ão e dos olhos do usuário. Faça um t est e e t ent e
usar o m ouse com os olhos fechados.
27
Diretrizes para
construção de
2
conteúdo acessível
At é agora, pudem os perceber que o problem a da

falt a de acesso a páginas Web ocorre j ust am ent e ent re os
com ponent es Usuário e Cont eúdo. Tal difi culdade é um re-
fl exo de um relacionam ent o fraco ent re out ros dois ou m ais
com ponent es da Web. Por exem plo, um fraco vínculo ent re o
desenvolvedor e a ferram ent a de criação pode acarret ar num
cont eúdo m al form ado.
O quadro piora se as ferram ent as de validação de

cont eúdo não se basearem em regras claras para poder ava-
liar o cont eúdo adequadam ent e. Por est e m ot ivo, a m elhor
solução para garant ir que t odos os com ponent es funcionem
harm oniosam ent e bem é est ipular conj unt os de regras que
m ost rem claram ent e os pont os crít icos de acessibilidade.
Capítulo 2 - Diretrizes para construção de conteúdo acessível
Exist em at ualm ent e vários docum ent os int ernacio-

nais que propõem regras de acessibilidade para Web com
o propósit o de orient ar desenvolvedores de ferram ent as de
criação, ferram ent as de avaliação e desenvolvedores de con-
t eúdo. Todos, no ent ant o, baseiam - se em diret rizes do W3C.
Por esse m ot ivo, iniciarem os est e capít ulo ent endendo com o
as diret rizes do W3C est ão organizadas e depois seguirem os
analisando out ras diret rizes que possuem relevância dent ro
da realidade brasileira.
1. Diretrizes W3C
O World Wide Web Consort ium ( W3C) é um a orga-
nização m undialm ent e conhecida por elaborar docum ent os
de especifi cação de t ecnologias especialm ent e criadas para a
Web, t ais com o o HTML, XHTML, CSS, dent re m uit as out ras.
O W3C procura desenvolver padrões de t ecnologias

para Web de form a que possibilit e a criação e int erpret ação
dos cont eúdos para Web. A idéia é que sit es desenvolvidos se-
gundo t ais padrões possam ser acessados por qualquer pes-
soa ou t ecnologia, independent e de qual hardware ou soft -
ware sej a ut ilizado.
Por int erm édio da iniciat iva WAI ( Web Accessibilit y

I nit iat ive) , o W3C desenvolve diret rizes para acessibilidade
Web. Exist em diret rizes específi cas para diferent es grupos de
com ponent es:
• ATAG (Aut horing Tool Accessibilit y Guidelines) – é
29
dest inada para fabricant es de ferram ent as de criação de con-

t eúdo. Ela orient a os fabricant es a im plem ent arem funcionali-
dades em seu produt o que aj ude ao desenvolvedor de cont e-
údo a obedecer as recom endações descrit as na WCAG.
• WCAG (Web Cont ent Accessibilit y Guidelines) – é

dest inada para cont eúdo das páginas Web, e é ut ilizada por
desenvolvedores de páginas Web. Fabricant es de ferram ent as
de criação e ferram ent as de avaliação t am bém consult am est e
docum ent o com o obj et ivo de refi nar m elhor o funcionam ent o
de seus produt os e criar um a aderência m elhor ao t rabalho
realizado pelo desenvolvedor de cont eúdo.
• UAAG (User Agent Accessibilit y Guidelines) – é des-

t inada para desenvolvedores de w eb brow sers e players de
m ídia, incluindo t am bém alguns aspect os das t ecnologias as-
sist ivas.
Todas essas diret rizes foram fundam ent adas nas es-
pecifi cações t écnicas da Web ( HTML, XML, CSS, SVG, SMI L,
et c.) , que t am bém são desenvolvidas pela W3C.
A prim eira versão da WCAG fi cou pront a em 1999 e

desde ent ão t em sido largam ent e ut ilizada, reproduzida e re-
ferenciada por diversos docum ent os sobre o assunt o.
A WCAG possui 14 diret rizes e cada diret riz se desdo-

bra em alguns pont os de verifi cação. Com o é um docum ent o
um pouco ext enso, para facilit ar o ent endim ent o dessas di-
ret rizes, a WAI organizou a WCAG em níveis de prioridade.
30
Dessa form a, cada pont o de verifi cação est á associado a um

nível de prioridade, que pode ser 1, 2 ou 3.
Os pont os de verifi cação de prioridade UM devem ser

sat isfeit os para que t odos os grupos de usuários t enham a
possibilidade de acessar as inform ações cont idas no docu-
m ent o.
Os pont os de verifi cação de prioridade DOI S deve-

riam ser sat isfeit os. Caso cont rário, um ou m ais grupos de
usuários t erão difi culdades em acessar as inform ações cont i-
das no docum ent o.
Os pont os de verifi cação de prioridade TRÊS podem

ser sat isfeit as e exist em para evit ar que alguns grupos de
usuários sint am algum a difi culdade em acessar as inform a-
ções cont idas no docum ent o.
Exist e um a versão m ais recent e da WCAG ( versão

2.0) que recom enda acessibilidade num sent ido m ais am plo
que a versão ant erior. Enquant o a WCAG est á m ais focada
em acessibilidade para defi cient es físicos, a segunda versão
dest e docum ent o foi desenvolvida para aplicação à diferent es
t ecnologias da Web.
2. Diretrizes Brasileiras: E-MAG

A part ir de um a iniciat iva do Minist ério do Planej a-
m ent o, o Brasil, assim com o em out ros países, t am bém criou
o seu m odelo de acessibilidade. O Modelo de Acessibilidade
31
do Governo Brasileiro ( E- MAG) est á organizado em dois docu-

m ent os: A Cart ilha t écnica ( ou visão t écnica) cont ém as dire-
t rizes de adequação de cont eúdo da Web, sendo direcionada
para profi ssionais de inform át ica, e o Modelo de Acessibilida-
de ( ou visão do cidadão) cont ém orient ações que auxiliam na
im plem ent ação das diret rizes e procura facilit ar o ent endi-
m ent o do m odelo.
O m odelo brasileiro foi elaborado com base nas nor-

m as adot adas em out ros países e, foi principalm ent e baseada
na WCAG, porém , segundo o próprio m odelo, t udo foi feit o de
form a que fi casse coerent e com as necessidades brasileiras.
O e- MAG adot ou os m esm os níveis de prioridade das

recom endações est abelecidas pelo WAI e defi niu t am bém t rês
níveis de acessibilidade.
Para quem nunca chegou a ler um docum ent o de

orient ação de acessibilidade, o e- MAG é um bom com eço. A
organização da cart ilha t écnica facilit a bast ant e a com preen-
são das diret rizes e t odas as recom endações de acessibilidade
do docum ent o se assem elham m uit o aos pont os de verifi ca-
ção adot ados pela WCAG 1.0.
3. Diretrizes WCAG Samurai

WCAG Sam urai é um grupo de desenvolvedores que
não possuem nenhum a ligação com o W3C e que est avam
insat isfeit os com algum as caract eríst icas da WCAG 2.0. Por
isso propuseram um a list a de correções para a WCAG 1.0
32
e disponibilizaram est e docum ent o com o um a alt ernat iva à

WCAG 2.0. O docum ent o WCAG Sam urai errat a est á disponí-
vel desde fevereiro de 2008.
Afi nal o que há de errado com WCAG 2.0? O grande

problem a dest e docum ent o é seu t am anho. A WCAG 2.0 é
grande dem ais para t ranm it ir, de um a m aneira fácil de com -
preender, as idéias sobre acessibilidade na Web. Procurando
reduzir sua com plexidade, m uit os desenvolvedores sugeriram
a criação de um a versão com pact a. Mas a difi culdade para a
criação dest a versão m ais com pact a est á na escolha de qual
seria seu conj unt o de regras apropriado.
O docum ent o WCAG Sam urai Errat a, na verdade

procura fazer um a correção de algum as recom endações da
versão 1.0 da WCAG. O m ot ivo pra isso é sim ples: m uit as
recom endações escrit as na WCAG 1.0 são consideradas desa-
t ualizadas por que est e docum ent o foi publicado em 1999 e
m uit a coisa m udou nesses 9 anos, principalm ent e por causa
da absorção de novos conceit os por part e dos desenvolvedo-
res, t ais com o padrões Web, desenvolvim ent o em cam adas,
Web 2.0 e Web sem ânt ica.
33
Regras simples,
3
ótimos resultados!
Nunca se falou t ant o em acessibilidade quant o nos

últ im os anos, e ist o não é um a realidade exclusivam ent e bra-
sileira. Muit os países reform aram sua legislação para que ela
englobasse os últ im os conceit os sobre o assunt o, incluindo aí
os m ais at ualizados padrões de acessibilidade para a t ecnolo-
gia da inform ação.
Toda est a m obilização dos países é em polgant e e ser-

viu para que m uit as pessoas que est ão de algum a form a en-
volvidas com proj et os Web obt ivessem conhecim ent o sobre
acessibilidade, ou na pior das hipót eses, pelo m enos ouviram
falar.
Ainda assim , o núm ero de sit es que se preocuparam

em t ornar seu cont eúdo acessível é quase inexpressivo pert o
Capítulo 3 - Regras simples, ótimos resultados!
da quant idade de sit es que não se preocuparam com isso.

Mas se nós j á t em os um a Lei 1 que t rat a sobre o assunt o e se
nós j á t em os diret rizes que orient am com o devem os proceder
ent ão o que est á falt ando?
Lêda Spelt a procurou explicar isso em seu art igo “ Set e

Mit os e Um Equívoco” 2 . A base de t odo problem a se encont ra
na t ot al falt a de conhecim ent o sobre o que é m it o e o que é
realidade quando o assunt o é sit es acessíveis. Muit os proj e-
t ist as de sit es, sem um a base concret a, acredit am que fazer
um sit e acessível é um t rabalho m uit o dem orado e cust oso.
Out ros acredit am que é um a t arefa difícil de ser realizada.
Mas em m uit os casos, não é nem um a coisa nem ou-

t ra. Se a acessibilidade de um sit e for planej ada j unt o com o
desenvolvim ent o do próprio sit e, além de não at rasar o anda-
m ent o do proj et o, a acessibilidade poderia t er um cust o baixo
ou at é nulo.
Um a difi culdade m aior poderia aparecer quando o sit e

j á exist e e precise ser adequado, m as ainda assim o result ado
fi nal dest e t rabalho com pensaria o esforço.
Em t odo caso, sem pre podem os t om ar alguns cuida-

dos que j á m elhorariam a acessibilidade do sit e. São coisas
1 Decreto-lei 5296 de 2 de dezembro de 2004
2 Publicado no site Acesso Digital. Di
sponível em:
http://acessodigital.net/art_acessibilidade-web-7-mitos-e-um-equivoco.html
35
sim ples de serem feit as, m as que fazem um a grande diferen-

ça, principalm ent e se o sit e for t ot alm ent e inacessível. Ent ão,
o m ínim o que você pode fazer pela acessibilidade de um a
página é ist o:
1) Mant enha o HTML de sua página sem ant ica-

m ent e corret o e válido – por exem plo, use sem pre “ h1”, “ h2”
para t ít ulos e “ p” para parágrafos. Sem pre valide seu HTML.
2) Organize o cont eúdo de sua página de form a

que ele faça sent ido quando for lido – um a boa dica aqui é de-
sabilit ar o css de sua página para verifi car com o o navegador
renderiza seu código HTML.
3) Sem pre disponibilize t ext o alt ernat ivo para

qualquer cont eúdo visual – nós verem os com o fazer isso ain-
da nest e capít ulo.
4) Verifi que se t odos os seus t ít ulos e t ext os de

links fazem sent ido, m esm o quando são lidos fora do cont ex-
t o.
Você pode encarar est as quat ro orient ações com o um

pont o de part ida para acessibilidade do cont eúdo. No ent ant o,
seguir som ent e est as quat ro prem issas não garant e um a vali-
dação do cont eúdo, nem hum ana nem por sist em a avaliador.
Passar pelas validações de acessibilidade vai exigir do

proj et ist a m ais at enção às diret rizes adot adas, sej a WCAG, e-
36
MAG, WCAG- Sam urai ou qualquer out ra. Mas nem por isso o
t rabalho se t orna de difícil com preensão e execução.
A seguir discut irem os um a list a de orient ações cria-

das a part ir das diret rizes WCAG 1.0 e que pode ser bast an-
t e út il caso você ainda est ej a dando seus prim eiros passos.
Perceba que nenhum a dessas orient ações exige um nível de
conhecim ent o m uit o aprofundado sobre HTML e CSS.
1. Identificando a linguagem utilizada

Essa é um a das prim eiras coisas que t odos deveriam
checar quando criam um a página. Aliás, ident ifi car idiom a
principal ut ilizado num docum ent o faz t odo sent ido e é um a
coisa m uit o sim ples de fazer.
A razão pela qual est a ident ifi cação é im port ant e é

que, em prim eiro lugar, isso aj uda os sit es de busca a indexar
m elhor a página quant o à língua em que ela foi escrit a. Além
disso, est a ident ifi cação auxilia os soft wares leit ores de t ela a
decidir em que língua o cont eúdo dest a página será falado.
Com o foi dit o ant es, ident ifi car o idiom a de um docu-

m ent o é m uit o sim ples e vai depender apenas do t ipo docu-
m ent o que você est á criando e a alt eração vai ocorrer j ust a-
m ent e na linha que ident ifi ca o t ipo de docum ent o.
Por exem plo, na t abela abaixo nós podem os ver com o

fi ca a declaração de t ipo de docum ent o quando o idiom a é
port uguês do Brasil:
37
D e cla r a çã o pa r a idiom a
Tipo de D ocu m e n t o
pt - br
HTML <html lang=”pt-br”>
XHTML ( t ransit ional) <html xmlns=”http://
www.w3.org/1999/
xhtml” xml:lang=”pt-br”
lang=”pt-br”>
XML e XHTML ( st rict ) <html xmlns=”http://
www.w3.org/1999/
xhtml” xml:lang=”pt-br”
lang=”pt-br”>
Um a observação im port ant e aqui é os leit ores

de t ela m ais avançados conseguem fazer um a ident ifi cação
aut om át ica do idiom a. Cont udo ainda exist em no m ercado
m uit os soft wares leit ores de t ela que não possuem est a faci-
lidade.
2. Trabalhando com texto alternativo

“Alt ” é um parâm et ro encont rado em algum as m ar-
cações de HTML e XHTML, principalm ent e naquelas que re-
present am algum elem ent o não t ext ual. Por exem plo, a m ar-
cação de im agem , com o é m ost rado no fragm ent o de código
abaixo:
<img src=”/imagem/imagem1.jpg” />
38
Est a m arcação seria passada para o navegador, que

ent enderia que precisa carregar a im agem ‘im agem 1.j pg’ nes-
t a página. O problem a é que a inform ação cont ida na im agem
só est aria disponível para aqueles que conseguem enxergar.
Com o poderem os saber o que a im agem est á ret rat ando sem ,
cont udo, visualizar a im agem ? Bom , nós podem os vincular a
im agem a um t ext o alt ernat ivo, da seguint e form a:
<img src=”/imagem/imagem1.jpg” alt=”capa do livro:

O silêncio da alma”/>
Dessa form a, agora j á t em os um a idéia do que se

t rat a a im agem que est á na página. O program a leit or de t ela,
ao se deparar com est a m arcação irá procurar se exist e algum
“ alt ” declarado para poder ler. Sist em as que fazem busca por
im agem , t am bém se ut ilizam do t ext o alt ernat ivo para poder
indexar as im agens cont idas em w ebsit es.
Porém nem t odas as im agens que est ão num a página

precisam ser descrit as. Algum as im agens só t êm propósit os
decorat ivos e não possuem nenhum a relevância para o con-
t eúdo da página. Nest es casos, declare um “ alt ” com espaço
em branco:
<img src=”/imagem/bullet.gif” alt=” “/>
39
A m aioria dos usuários da Web t em pressa de encon-

t rar o que desej am em um a det erm inada página, por isso,
difi cilm ent e eles lêem um a página da Web linha por linha at é
que encont rem o que est ão procurando. Usuários que ut ilizam
program as leit ores de t ela não são diferent es nest e pont o.
Eles t am bém t êm pressa em encont rar o que desej am e não
querem ler t odas as palavras de um a página.
A diferença é que usuários cegos não lêem o cont eú-

do, eles escut am . Com o eles querem encont rar a inform ação
procurada o m ais rápido possível, ent ão eles não param para
ouvir t odas as palavras. Geralm ent e eles vão pulando para o
próxim o link, próxim o parágrafo at é chegarem ao pont o que
desej am . Muit os usuários de leit ores de t ela t êm o cost um e
de confi gurar a voz do sint et izador em um a velocidade alt a
para ganhar t em po enquant o ouvem o cont eúdo.
Alguns desenvolvedores de cont eúdo para a Web

acham equivocadam ent e que declarar um t ext o alt ernat ivo
para t odas as im agens de um a página aj uda àqueles que não
podem ou t em difi culdade de enxergar e colocam t ext os alt er-
nat ivos inclusive em im agens decorat ivas: “ aqui é um a bola”,
“ im agem de arredondam ent o de cant o”, “ um a linha pra sepa-
rar o rodapé”, et c. Perda de t em po! I sso só difi cult a m ais a
leit ura do docum ent o.
3. Trabalhando com CSS

Quando com ecei a criar páginas para a Web, ninguém
falava ainda em CSS. Tudo era feit o usando o HTML e Ja-
40
vascript , para criar algum dinam ism o na página. Um a página

com m uit os det alhes de layout era sinônim o de um a página
com m uit as t abelas aninhadas, ou sej a, t abela dent ro de t a-
bela. Quant o m ais t abelas nós t ínham os no docum ent o, m ais
m arcações < TR> < TD> t eríam os para gerenciar.
Tam bém t oda inform ação de cor, t am anho, font e,

t udo enfi m deveria est ar no HTML. O result ado dist o: um do-
cum ent o alt am ent e confuso e difícil de m anusear. Era im pos-
sível abrir m ão de um bom program a de edição de código
HTML t ipo WYSI WYG ( What You See I s What You Get ) , com o
o Macrom edia Dream w eaver.
Nest e cenário caót ico, o CSS aparece com o um fort e

aliado, t ornando possível separar de um a vez por t odas o con-
t eúdo de um a página de sua est rut ura e apresent ação. Dessa
form a, t oda est rut ura e cont eúdo de um a página devem fi car
no HTML, enquant o o CSS se encarrega de sua apresent a-
ção.
Ent enda por apresent ação t oda inform ação de t am a-

nho, largura, alt ura, t ipo de font e, alt ura de linha, cores, po-
sicionam ent o na página, t udo que faça referência a com o o
cont eúdo deve ser apresent ado na t ela. Est a t écnica ou m e-
t odologia de criar um a página Web separando- a em cam adas
é conhecida com o t ableless. A m et odologia Tableless recebeu
est e nom e por não perm it ir, no HTML, a ut ilização de t abelas
para m ont agem de apresent ação de cont eúdo.
Exist em m uit as vant agens na ut ilização de CSS para
41
apresent ação de um a det erm inada página da Web. Um a das

m ais fort es é que o HTML agora fi ca livre de t abelas aninhadas
e de elem ent os que só são ut ilizados para apresent ação de
cont eúdo, com o o elem ent o < font > . Dessa form a, fi ca m uit o
m ais sim ples fazer qualquer m anut enção no cont eúdo dest a
página.
Do pont o de vist a da acessibilidade, um a vez que t o-

dos os dados da apresent ação do cont eúdo est ão separados
em um arquivo CSS, é m uit o sim ples fazer alt erações na apre-
sent ação dest e cont eúdo e at é m esm o criar apresent ações
diferent es para t ipos de m ídia diferent es. Assim , você pode
criar, por exem plo, um conj unt o de regras CSS para apresen-
t ação na t ela do com put ador e out ro conj unt o para im pressão
do cont eúdo, elim inando algum as inform ações desnecessá-
rias na im pressão.
Um exemplo prático:
Perdido no m eio de t ant os conceit os? Ent ão vam os
m elhorar um pouco as coisas com um exem plo bast ant e prá-
t ico. Quem t rabalha com desenvolvim ent o para a Web, ao
m enos um a vez j á precisou m ont ar um layout de página com
t rês colunas. Quase inst ant aneam ent e pensam os: “ Sim ples!
Bast a criar um a t abela, inserir as t rês colunas e est á feit o o
layout .” Realm ent e parece sim ples, não? Vam os ver com o fi ca
o código HTML para a solução apresent ada:
42
<table width=”95%” border=”0”>

<tr>
<td colspan=”5”>
<h1 align=”center”><font
face=”Verdana, Arial, Helvetica, sansserif”> Layout
com 3 Colunas</font></h1>
</td>
</tr>
<tr>
<td valign=”top”><div align=”justify”>
<font face=”Arial, Helvetica,
sansserif”>Conteúdo da esquerda Lorem ipsum
dolor sitamet, consectetuer adipiscing elit. Ut vo-
lutpat. Nulla pellentesque. In sed neque.</font></
div>
</td>
<td><img src=”spacer.gif” /></td>
<td valign=”top”>
<p align=”justify”><font
face=”Arial, Helvetica, sans-serif”>Escreve alguma
coisa...</font></p>
O código acim a é som ent e um fragm ent o de t odo t ra-

balho que t erem os que realizar para criar e m ant er um sit e
ut ilizando a t écnica convencional. Perceba que no t recho de
código, além de ut ilizarm os t abelas para criar a disposição do
cont eúdo, t am bém abusam os no uso da t ag <font>. O que
acont eceria se est a página fi zesse part e de um port al com
m ais de 100 páginas com o est a? E se precisássem os alt erar o
43
t ipo de font e ou a cor da font e em t odas as páginas?
Apesar do código est ar bast ant e poluido com os ele-

m ent os de t abela, a renderização dest e HTML é bast ant e sim -
ples. Com est e código, o navegador sim plesm ent e vai dist ri-
buir a inform ação em 3 colunas, conform e a im agem abaixo:
Figura 2. Exem plo de layout com 3 colunas
Quando ut ilizam os a m et odologia Tableless, a prim ei-

ra coisa que fazem os e elim ar a t abela. No lugar dela, ut ili-
zarem os a t ag <div>, conform e m ost ra o t recho de código a
seguir:
44
<body>
<div id=”geral”>
<h1>Layout com 3 Colunas</h1>
<div id=”esquerda” class=”coluna”>Conteúdo da colu-
na da esquerda...</div>
<div id=”conteudo” class=”coluna”>
<p>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Ut volutpat. Nulla
pellentesque. In sed
neque. Integer facilisis, lorem ac malesuada dig-
nissim, eros metus posuere urna, et vestibulum urna
justo ac enim. Ut
</p>
<p> Maecenas congue, ipsum et ele-
mentum ullamcorper, urna velit ultrices massa, in
accumsan velit
ligula id purus. Sed metus elit, blandit nec, ul-
trices id,scelerisque ultrices, augue. Phasellus
accumsan. Cras porta.
</p>
<p> Proin in eros at justo lacinia
varius. Proin nulla dui, euismod sit amet, lobortis
non, porta vel,
ipsum. Fusce malesuada accumsan tellus. Sed tinci-
dunt justo a magna. In a nunc. Suspendisse place-
rat, quam a euismod
</p>
</div>
<div id=”direita” class=”coluna”> Con-
teúdo da Direita Lorem ipsum dolor sit</div>
</div>
</body>
45
A est rut ura é bem sim ples. Para cada coluna ut iliza-
se um a t ag e ident ifi ca- se cada um a delas com os at ribut os
id e class. Observe que agora o código est á livre não só da
t abela, m as t am bém de t odos os elem ent os de form at ação de
font e ( <font>) .
At é est e m om ent o, nenhum a form at ação foi dada ao

código do exem plo. Cont udo, a m aneira com o o cont eúdo foi
est rut urado aqui nos perm it irá criar regras de CSS bast ant e
consist ent es e assim poderem os const ruir o layout . Com o ain-
da não criam os a folha de est ilo para a página do exem plo, ela
seria renderizada no brow ser da seguint e form a:
Figura 3. Página HTML sem a form at ação de folha de est ilos
Criar as regras CSS para est e código t am bém não é

um a t arefa de grande com plexidade, m as exige um m ínim o
46
de conhecim ent o sobre com o m anipular folhas de est ilo. Nes-

t e pont o, a prim eira coisa que você deve fazer é criar um link
ent re a folha de est ilo e seu código HTML. I st o é feit o dent ro
da declaração <head> do seu docum ent o. Assim :
<head>
...
<link href=”estilo.css” rel=”stylesheet”
type=”text/css” media=”screen” />
</head>
Est ilo.css é seu arquivo que defi ne as regras que se-

rão aplicadas ao docum ent o. Mas est as regras só serão apli-
cadas para um cert o t ipo de m ídia, que é defi nido no at ribut o
media. Nest e caso, est a folha de est ilo serve som ent e para
m onit ores ( screen) . Exist em out ras m edias para as quais você
t am bém pode criar folhas de est ilo. As m ais com uns são:
screen, print e handheld.
Para o nosso exem plo, que querem os const ruir um

layout de 3 colunas, a folha de est ilo poderia ser defi nida da
seguint e form a:
47
h1{
font-family: Verdana, Arial, Helvetica, sans-
serif;
font-size: 2em;
font-weight: bold;
}
#geral{
width:710px;
text-align: center;
position: absolute;
left: 50%;
margin-left: -355px;
}
#esquerda, #direita {
width:150px;
}
.coluna {
font-family: Verdana, Arial, Helvetica, sans-
serif;
font-size: 70%;
text-align: justify;
float:left;
margin:2.5px;
padding:2.5px;
}
Toda regra CSS é form ada por um Selet or, proprieda-

des e valores. Propriedades e valores sem pre fi cam ent re as
chaves e o selet or é a part e que defi ne em qual elem ent o est a
regra será aplicada. Por exem plo, a prim eira regra do código
CSS descrit o ant eriorm ent e será aplicado a qualquer elem en-
t o h1 exist ent e no HTML e as alt erações que h1 irá sofrer se
encont ram ent re as chaves: m udança de t ipo, t am anho e lar-
48
gura de font e.
E as t rês colunas do layout ? Quem vai defi nir isso

no CSS de exem plo? É exat am ent e a últ im a regra do nosso
exem plo, que será aplicada a qualquer elem ent o que pert ença
a classe coluna. O pont o ( .) ant es da palavra “ coluna” indi-
ca que est a palavra est á se referindo a um a classe. Se você
olhar novam ent e o código HTML, vai perceber que exist em 3
elem ent os <div> que pert encem a est a classe “ coluna”. Est a
regra se aplica exat am ent e a esses t rês elem ent os. E, m ais
precisam ent e, a regra float:left é que faz com que os t rês
elem ent os <div> se posicionem um ao lado do out ro, criando
assim o layout de 3 colunas.
A Web est á replet a de inform ações que orient am com o

os desenvolvedores podem ut ilizar HTML e CSS em conj unt o.
Um ót im o com eço para quem desej a aprender m ais sobre o
assunt o é fazer um a pesquisa na Web por “ Tableless”. Cont u-
do, no capít ulo 7 você encont rará um a list a de ót im os art igos
disponíveis na Web sobre o est a m et odologia.
4. Trabalhando com medidas relativas

Quando t rabalham os com CSS, t em os à disposição
várias unidades de m edidas: pixel, pont os, cent ím et ro, m i-
lím et ro, em s, porcent agem , dent re out ras. Essas unidades
dividem - se em absolut as ou relat ivas.
49
Unidades Absolutas Unidades Relativas
Polegadas (in) Pixel (px)

Centímetros (cm) Ems (em)
Milímetros (mm) Ex (ex)
Pontos (pt) Porcentagem (%)
Picas (pc)
Qualquer elem ent o que possuir algum a de suas di-

m ensões declarada com o relat iva sem pre vai t om ar com o re-
ferência as dim ensões de algum out ro elem ent o, dependendo
da unidade de m edida.
No caso da unidade em , usa- se com o referência o

t am anho da font e do selet or em que ela foi declarada. Por
exem plo, observe a seguint e regra CSS:
P {
Font-size:14px;
Line-heigth: 1em;
}
Declaram os para a alt ura da linha do parágrafo ( line-

heigt h) um valor relat ivo ( 1 em ) . Para calcular quant o é est e
valor em pixel, bast a verifi car qual é o t am anho da font e de-
clarada para est e m esm o selet or ( 14px) e m ult iplica- lo pelo
valor relat ivo declarado ( 14 * 1 = 14px) . Assim , o valor em
pixels da alt ura da linha para a regra acim a será 14. Observe
50
que, se line- heigt h fosse declarado com o valor 0.5em , a al-

t ura da linha m ediria a m et ade de font - size.
Caso a regra não defi na qual é o valor de font - size,

ent ão o valor que seria t om ado com o referência seria o font -
size do elem ent o pai. Caso est a regra se refi ra ao elem ent o
HTML ou BODY, o valor t om ado por referência é o valor de
font - size padrão do navegador.
Muit os aut ores classifi cam a m edida pixel com o abso-

lut a. I st o acont ece porque pixel só depende da resolução de
t ela e do t ipo de sist em a operacional, ou sej a, a não ser que
o usuário t roque sua resolução de t ela ou seu sist em a ope-
racional, ele não t erá cont role sobre os elem ent os declarados
com px.
Para ilust rar, considere o elem ent o parágrafo ( P) do

exem plo ant erior que foi declarado com t am anho de font e
14px. Se o usuário est iver ut ilizando o I nt ernet Explorer para
navegar nest a página e t ent ar aum ent ar o t am anho do t ext o 3 ,
ele não vai conseguir.
Quando levam os em consideração a acessibilidade de

um a página, t rabalhar com m edidas relat ivas é m uit o m ais
apropriado. São as m edidas relat ivas que nos perm it e criar
layout s de página t ot alm ent e elást icos, podendo se adapt ar a
t am anhos de t ela variados e garant indo ao usuário um a expe-
riência confort ável ao visualizar o cont eúdo de um a página.
3 Podemos fazer isso clicando no menu exibir > tamanho do texto >
maior
51
5. Pensando na estrutura da página

Se preocupar com a organização e est rut ura da pá-
gina de Web é um a obrigação do bom proj et ist a. Ele deve
pensar em com o organizar o cont eúdo na página de m aneira
que est a faça sent ido, m esm o quando o usuário não possa
ut ilizar CSS.
Lem bre- se que:
1) Nem t odo usuário navega ut ilizando o m ouse.

2) Nem t odo usuário pode ver sua página.
Pensar na est rut ura da página é com o criar um a plan-

t a- baixa da sua página. Você deve planej ar o lugar onde cada
elem ent o vai aparecer e m ant er essa inform ação consist ent e
em t odo o sit e.
1) Onde vai fi car o sist em a de navegação?

2) Que inform ações vão aparecer no t opo da pági-
na?
3) Onde vou exibir o cont eúdo propriam ent e dit o?
4) Vou precisar de um a navegação local? Onde
vou colocar?
Todas essas indagações e out ras adicionais devem

ser respondidas no m om ent o em que se planej a com o as in-
form ações e links vão ser dispost os na página. Qualquer que
sej a a decisão t om ada sobre est a organização, sua página
sem pre deve perm it ir um a navegação pelo t eclado sem ne-
nhum a rest rição.
52
Deve- se levar em consideração que, quando se na-

vega pelo t eclado, o deslocam ent o é feit o at ravés da t ecla
TAB e das t eclas de direção, sem pre de cim a para baixo e da
esquerda para a direit a. Não é aconselhável alt erar est e fl uxo
de deslocam ent o por um m ot ivo sim ples: pessoas com defi -
ciência visual j á esperam que o deslocam ent o ocorra nest e
sent ido. Leve em consideração que pessoas cegas não podem
ver com o sua página est á organizada.
A fi gura abaixo é um a dem onst ração de com o um a

página pode ser est rut urada. Para est e exem plo foram leva-
dos em consideração as áreas: t opo, navegação global, nave-
gação local, cont eúdo e rodapé.
Figura 4. Est rut ura básica de um sit e
53
Algum as vezes, por algum m ot ivo, os links ou ele-

m ent os de form ulário em seu HTML são escrit os em um a
ordem que não segue um a seqüência lógica. Nest es casos,
use o at ribut o “ tabindex” para defi nir a ordem de acesso. O
exem plo abaixo dem onst ra com o podem os fazer ist o:
<a TABINDEX=”10” href=”página.html” title=”Alguma

página”>ir para página</a>
Descrição de página
Quando você ent ra num sit e pela prim eira vez, quan-
t o t em po você leva pra aprender a navegar por est e sit e?
Em quant o t em po você consegue encont rar o que est á pro-
curando? Se o sit e est iver bem organizado, bast am alguns
segundos.
Acont ece dest a form a por que quando ent ram os em

um sit e pela prim eira vez, a prim eira coisa que fazem os é dar
um a olhada geral, procurando por algum a coisa que nos dê
vont ade de clicar: pode ser um link de um a not ícia, pode ser
um a opção de m enu, ou pode ser um form ulário de pesquisa
no sit e. I st o depende do perfi l de cada usuário.
O fat o é que sem pre est am os procurando por algo e,

quando fazem os isso, cont am os com um aliado fort íssim o: a
nossa visão. At ravés da nossa visão t em os acesso à página
54
int eira, m esm o ant es clicar em qualquer coisa. Se pudésse-

m os perceber com o as inform ações que são t ransm it idas pela
nossa visão são processadas pelo nosso cérebro, poderia ser
algo assim :
“ Bom , deixe- m e ver... Ali est á a logom arca, legal.

Mas onde será que eles colocaram a cessão de CD’s? Será
que é aqui? Não deve ser... Est e sit e não t em busca? Pode
ser ali. Será que dá pra clicar ali? Ah, olha ali o m enu...aqui!
Pront o! Achei!”
Não dá pra negar, a visão realm ent e aj uda m uit o em

algum as t arefas. Mas nem t odas as pessoas podem cont ar
com ela. E o que acont ece com pessoas que não podem en-
xergar? Vam os im aginar o m esm o cenário descrit o ant erior-
m ent e, só que agora o usuário é cego.
Quer t er um a idéia de com o um a pessoa se sent e

num a sit uação dest as? Ent ão faça o seguint e: faça um a busca
na int ernet , pode ser qualquer coisa. Depois clique em qual-
quer um dos links que veio no result ado, m as t em que ser um
sit e que você nunca t enha visit ado ant es. Desligue o m onit or
ant es que a página carregue e t ent e navegar. A sensação é de
que caím os de pára- quedas em algum lugar com plet am ent e
desconhecido, t ot alm ent e no escuro.
Nest es casos, exist em várias form as de t razer algum a

orient ação. Dependendo do sit e, se ele for sim ples, com pou-
cas opções, um m apa do sit e j á seria sufi cient e. Mas quando o
sit e é de um a com plexidade considerável, ent ão um a solução
55
seria criar um a página com um a descrição t ext ual de com o o

sit e est á organizado. Você pode aproveit ar e colocar t am bém
nest a página um a list a de at alhos para diversos links no seu
sit e.
6. Tabelas
Em 1994, o elem ent o TABLE ent rava defi nit ivam ent e
na especifi cação do HTML, cuj a versão na época era a 2.0. O
TABLE foi int roduzido para at ender um a dem anda por um a re-
present ação específi ca para dados t abulados ou cruzam ent o
de dados, t ipo: t abela de preços, t abela de m edidas, et c.
Ninguém im aginava, at é ent ão, que os desenvolve-

dores iriam descobrir um a out ra função para est e elem ent o.
Eles descobriram que as t abelas t am bém poderiam cont rolar
o layout e a apresent ação das inform ações em um a página
da Web.
A Web ent ão, ent ra num a nova fase, replet a de sit es

com layout de alt a com plexidade e recheadas de t abelas ( e
t abelas dent ro de t abelas) que não passavam nenhum a infor-
m ação, só est avam lá para aj ust ar a apresent ação da página.
O código HTML passou ent ão a cum prir duas m issões: dispo-
nibilizar cont eúdo e aj ust ar a apresent ação do docum ent o.
Cont udo, o uso de t abelas para const ruir o layout

pode causar sérios problem as à acessibilidade. Com t oda
essa m ist ura ent re apresent ação e cont eúdo, m uit as vezes
um program a leit or de t ela fi ca im possibilit ado de acessar o
56
cont eúdo, com prom et endo o am plo ent endim ent o da infor-
m ação daquela página.
Na verdade as t abelas, quer sej am usadas para da-

dos t abulares ou para const rução de layout , se não forem
bem est rut uradas, os leit ores de t ela acabam fazendo um a
grande confusão ao ler os dados para os seus usuários, t or-
nando a t abela im possível de ser ent endida.
Não é fácil criar t abelas t ot alm ent e acessíveis por que

depende de um a série de coisas. Prim eiro, depende da própria
dest reza do desenvolvedor para ut ilizar o m áxim o de recursos
disponíveis para t orná- la acessível. Depende t am bém da pró-
pria aplicação que lê a t ela, que deve possuir a capacidade de
acessar os dados da t abela de diversas form as. Quant o m ais
com plexa for a t abela, m ais cuidado o desenvolvedor deverá
t er ao const ruir a t abela.
Um bom pont o de part ida é com preender com o um

leit or de t ela lê a t abela. Na m aioria dos casos, os leit ores
possuem um a série de at alhos pelo t eclado que perm it em o
acesso a um a linha ou a um a célula. Um a observação im por-
t ant e é que o leit or de t ela deve ser capaz de associar o ca-
beçalho de um a linha ou coluna à célula que est á sendo lida.
Sem isso, é im possível para um defi cient e visual ent ender de
que se t rat a a inform ação que est á sendo lida.
Como um leitor de tela deve ler uma tabela:

Para com eçar, um leit or de t ela não lê ( lit eralm ent e)
57
a t ela, com o o nom e sugere. Os leit ores de t ela vão diret o

para o código HTML dos docum ent os, por que, para eles o que
int eressa realm ent e é ext rair o cont eúdo que est á lá. Pouco
im port a para o soft ware leit or com o aquelas inform ações es-
t ão sendo diagram adas na t ela.
No leit or de t ela Jaw s, que é um dos m ais fam osos,

a prim eira coisa que é lida num a t abela é seu t ít ulo, depois é
lido o sum ário, se est iver disponível. O t erceiro passo é posi-
cionar o cursor de leit ura na prim eira célula da t abela. Após
isso, o leit or de t ela aguarda os com andos de navegação na
t abela para cont inuar a leit ura, que vai depender do desej o do
usuário: lê a linha, lê som ent e a célula at ual, lê a célula com
seu cabeçalho correspondent e, et c.
Para fi car m ais claro, observe a t abela da fi gura abai-

xo. É um a t abela sim ples de ser ent endida e consegue t rans-
m it ir sem nenhum problem a as inform ações que nela est ão
cont idas. Não há nenhum a difi culdade, por exem plo, em des-
cobrir que o preço do prat o individual do yakisoba cust a R$
11,00.
Figura 5. Exem plo de t abela
58
O código HTML para est a t abela seria assim :
<table border=”1” summary=”Tabela com um nível de

cabeçalho horizontal”>
<caption>Tabela de preços dos pratos do res-
taurante chinês</caption>
<tr>
<th id=”nomeprato”>Nome do Prato</th>
<th id=”individual”>Valor Individual</th>
<th id=”duplo”>Valor duplo</th>
</tr>
<tr>
<td headers=”nomeprato”>Yakisoba</td>
<td headers=”individual”>11,00</td>
<td headers=”duplo”>20,00</td>
</tr>
<tr>
<td headers=”nomeprato”>Yakimeshi</td>
</tr>
<tr>
<td headers=”nomeprato”>Yakibifum</td>
</tr>
</table>
Observe que no código dest a t abela foram ut ilizados

algum as t ags e at ribut os de t abela do HTML que são pouco
conhecidos: sum m ary, capt ion, t h e headers. Vam os descre-
ve- las agora.
59
• Su m m a r y – é um at ribut o de t able que não

aparece na t ela, m as é lido pelo soft ware leit or. Ele serve para
que o desenvolvedor possa descrever algum a part icularidade
da t abela.
• Ca pt ion – Deve ser declarado im ediat am ent e

abaixo da t ag < t able> . Fornece um t ít ulo para a t abela e é
exibido na t ela logo acim a da t abela. Tam bém é lido pelo leit or
de t ela.
• Th – Marca um a célula de cabeçalho. É m uit o
im port ant e que o cabeçalho de um a t abela sej a corret am ent e
m arcado no HTML, para que o leit or de t ela reconheça quais
células são dados e quais são cabeçalho.
• H e a de r s – est e at ribut o de < t d> ( célula de
dado) vincula um a det erm inada célula a um cabeçalho exis-
t ent e. Em headers é declarado o id do cabeçalho correspon-
dent e.
Exist em out ras m aneiras de m ont ar est a m esm a t a-

bela e chegar a result ados parecidos ao que chegam os aqui.
De qualquer form a, o m ais im port ant e é que a t abela sem pre
sej a const ruída de m aneira que perm it a ao soft ware leit or de
t ela o m áxim o de acesso aos dados da t abela.
Assim , para que o desenvolvedor crie t abelas bem

est rut uradas é necessário:
1) Fornecer o t ít ulo da t abela at ravés do elem ent o

CAPTI ON
2) Para m elhor com preensão de t abelas, forne-
cer um resum o inform ando o propósit o da t abela at ravés do
60
at ribut o SUMMARY no elem ent o TABLE. Vale salient ar que o

resum o não fi ca visível na página, m as o leit or de t ela o des-
creve.
3) Ut ilizar TH para ident ifi car os cabeçalhos de li-
nhas e colunas e TD para ident ifi car as células com dados.
4) Associar, de algum a form a, os dados TD aos
seus respect ivos cabeçalhos TH.
7. Formulários
Os form ulários HTML são est rut uras que perm it em
que usuários subm et am dados a um a página. É um a das for-
m as m ais sim ples e efi cient es de int eragir com o usuário. Por
est e m ot ivo, o form ulário acabou se t ransform ando num a m a-
t éria de ext rem a im port ância no HTML.
O Form ulário é com post o basicam ent e por t rês par-

t es:
• OCont ainer
• A ent rada de dados
• Os bot ões
Os cont roles de ent rada de dados e bot ões fi cam den-

t ro do cont ainer do form ulário, que é defi nido no HTML at ra-
vés da t ag < form > . O elem ent o < form > possui at ribut os es-
pecífi cos que inform am para o navegador para onde e de que
form a devem ser enviados os dados digit ados no form ulário.
Os cont roles que perm it em a ent rada de dados va-
61
riam , de acordo com o t ipo de dado. Os elem ent os básicos

que perm it em a ent rada de dados são:
• I NPUT: que especifi ca vários t ipos de cam pos

com o t ext , subm it , but t on e radio.
• SELECT: Ut ilizado para list as selecionáveis
( com o um m enu) .
• TEXTAREA: cam po de t ext o m ult i- linha, com o
observações e com ent ários;
A fi gura 6 ilust ra um form ulário com cont roles de en-

t rada de t ext o, radio ( com as opções “ m asculino” e “ fem ini-
no” ) e um bot ão para envio das inform ações.
Figura 6. Exem plo de Form ulário
Um a coisa que a m aioria dos desenvolvedores des-

conhece é que exist e um a ordem cert a nos navegadores e
leit ores de t ela para exibição e leit ura dos elem ent os de um
form ulário. Por exem plo, quando um navegador encont ra um
cont role <input type= “text”>, ele espera que o rót ulo para
est e cont role est ej a ant es do cont role. Já para os cam pos do
t ipo <input type= “radio”>, o navegador espera encont rar
62
o rót ulo depois do cam po.
A t abela abaixo m ost ra um a relação ent re o cont role

e seu rót ulo.
Posiçã o do
Con t r ole Ex e m plo
Rót u lo
<input type= Ant es Nome:<br />
“text”> <input type=”text”
name=”nome” />
<input type= Ant es Senha:<br/> <input

“password”> type=”password”
name=”senha” />
<input type= Depois <input type=”radio”
“radio”> name=”estcivil”
value=”1” />casado<br
/>
<input type= Depois <input type=”checkbox”

“chekbox”> name=”chkassinar”
value=”Assinar” />
Assinar a revista
Select Ant es Tratamento<br />

<select
name=”tratamento”>
<option>Sr.</option>
...
</select>
63
Posiçã o do
Con t r ole Ex e m plo
Rót u lo
Textarea ant es Comentários<br />
<textarea
name=”txtComments”></
textarea>
Rót ulos são sem pre im port ant es, t ant o para nave-
gadores com uns quant o para leit ores de t ela. São os rót ulos
que ident ifi cam o que deve ser preenchido em cada cam po
do form ulário e, em m uit os casos, inform am ao usuário se o
preenchim ent o de det erm inado cam po é obrigat ório.
Por cont a disso, a m elhor form a de prom over aces-

sibilidade em form ulários HTML é fort alecendo est e vínculo
ent re rót ulo e cam po de preenchim ent o de dados. Para ist o,
ut ilizam os o elem ent o < label> do HTML. Para ent enderm os
seu uso, vam os t om ar com o exem plo o form ulário da fi gura X.
O código HTML para o prim eiro cam po seria assim :
<LABEL for=”primeironome”>Primeiro nome:

<INPUT type=”text” id=”primeironome”>
</LABEL>
O at ribut o FOR do elem ent o LABEL associa explicit a-

m ent e um rót ulo a um cont role. O valor at ribuído a FOR deve
ser o m esm o valor do at ribut o I D do cont role associado. Nes-
t e exem plo, o elem ent o LABEL est á associado ao elem ent o
I NPUT at ravés do at ribut o FOR de LABEL que possui o m esm o
64
valor do at ribut o I D do elem ent o I NPUT.
Exist em out ros elem ent os do HTML que auxiliam na

const rução de um form ulário bem organizado e acessível. Por
exem plo, os elem ent os:
• <fieldset> - pode agrupar um conj unt o de cont ro-

les de form ulário de acordo com a nat ureza dos dados. Por
exem plo: dados pessoais e dados profi ssionais.
• <legend> - Fornece um t ít ulo para um det erm inado
fi eldset .
O desenvolvedor deve ut ilizá- los sem pre que achar

necessário e convenient e, de form a a facilit ar o ent endim ent o
das solicit ações do form ulário.
8. Acrônimos e Abreviações
Muit a gent e desconhece, m as exist em dois elem en-
t os do HTML criados para serem usados em acrônim os e abre-
viações. Est es elem ent os execut am dois papéis im port ant es:
1) Provê um a defi nição dos t erm os at ravés do

at ribut o t it le, com o por exem plo:
<acronym title=”Estados Unidos da América”>EUA</

acronym>
<abbr title=”Cascading style sheets”>CSS</abbr>
Est a função, além de aj udar os usuários leit ores de
65
t ela que podem desconhecer o t erm o, t am bém pode ser bas-

t ant e út il para sist em as de buscas.
2) Providencia um a form a de soft wares leit ores de

t ela det erm inarem se o t erm o deve ser pronunciado ou so-
let rado. I sso pode ser feit o de duas m aneiras: ou você deixa
que o soft ware leit or de t ela decida se deve ler ou solet rar,
dependendo de qual elem ent o foi ut ilizado, ou ent ão você de-
fi ne isso usando CSS, com o nas regras abaixo:
abbr {speak:spell-out;}
acronym {speak:normal;}
Com o a fi nalidade aqui é assegurar que um docu-

m ent o sej a acessível da m elhor m aneira possível e para um
m aior núm ero de pessoas, ent ão é m uit o im port ant e que você
possa com preender quando deve usar abbr e quando deve
usar acronym .
Um a abreviação é um a form a encurt ada de um a pa-

lavra ou frase ut ilizada para represent ar a form a com plet a.
Por exem plo:
- Sr. É a abreviação de senhor

- Av. é abreviação de avenida.
A form a m ais com um de abreviação é geralm ent e um

conj unt o de let ras seguidas de um pont o. Porém exist em ou-
t ros t ipos diferent es de abreviação:
66
• I nicialism o – são aquelas form adas pela prim ei-

ra let ra de cada palavra do t erm o represent ado. Quem t raba-
lha com inform át ica j á deve est ar bast ant e fam iliarizado com
est e t ipo de abreviação. Por exem plo: HTML, CSS, EUA
• Cont ração – é m uit o com um no idiom a inglês.

Tant o pode ser um a form a encurt ada de um a palavra t erm i-
nando com a últ im a let ra dest a palavra, com o t am bém pode
ser duas palavras encurt adas j unt as, m as separadas por um
apóst rofo. Exem plos:
- Pagt o – Abreviação de pagam ent o

- Can’t – Abreviação de can not em inglês
- D’água – abreviação de ‘de água´ .
• Acronism o – é um t ipo de abreviação cuj o con-

j unt o de let ras que form am o acrônim o pode ser pronunciado,
com o se fosse um a palavra. Por exem plo:
- NASA – Nat ional Aeronaut ics and Space Adm inis-

t rat ion
- OTAN – Organização do Trat ado do At lânt ico Nort e.
Não exist e no HTML um a form a corret a de se m arcar

um a cont ração. De qualquer form a, com o seu uso geralm ent e
é m uit o com um , difi cilm ent e um a cont ração irá m erecer um a
m arcação especial.
No ent ant o deve- se m arcar os dem ais t ipos de abre-

viações. Som ent e ut ilize a m arcação < acronym > para acrô-
nim os.
67
Técnicas para aplicação
de acessibilidade
4
Já algum t em po not a- se um a preocupação crescent e
por part e da sociedade em geral em t ornar o acesso a lugares
e a inform ação ao m enos um pouco m elhor do que eram an-
t es. Na fi la de um banco pode- se perceber no chão, um a t rilha
de um m at erial em borrachado form ado por linhas e por pon-
t os. Depois descobre- se que era um t ipo de assoalho especial
para aj udar na orient ação de defi cient es visuais. No m esm o
dia, no caixa aut om át ico, havia um a ent rada para fones de
ouvido e o t eclado num érico t inha bot ões em alt o relevo.
As propagandas polít icas agora sem pre vêm acom -

panhadas por legenda sim ult ânea das falas e narrações. Em
vários pont os da cidade percebi ram pas para acesso às cal-
çadas.
Capítulo 4 - Técnicas para aplicação de acessibilidade
Todos est es recursos que são inst alados pela cidade

e facilit am o acesso de pessoas defi cient es são cham ados de
disposit ivos de acessibilidade.
Na verdade, o conceit o de disposit ivos de acessibi-

lidade é ainda m ais abrangent e. Tudo que é const ruído ou
fabricado com a int enção de m elhorar, facilit ar ou prom over
acesso a algum a coisa ou algum lugar é um disposit ivo de
acessibilidade.
Dest a form a a list a de disposit ivos de acessibilidade

aum ent a consideravelm ent e, e pode ir de um a sim ples ben-
gala a um a passarela const ruída sobre um a avenida.
Na Web t am bém podem os const ruir disposit ivos de

acessibilidade que facilit am o acesso de pessoas defi cient es.
Os recursos que vam os apresent ar nest e capít ulo são t écnicas
de acessibilidade que se forem bem aplicadas podem fazer
diferença quando um dado usuário t ent a acessar o cont eúdo
de algum sit e.
Um a coisa im port ant e sobre est e capít ulo é que ele

vai exigir de você um pouco de conhecim ent o sobre CSS,
HTML, Javascript e Tableless.
Um a vez que nosso foco aqui é est udarm os as t éc-

nicas de acessibilidade exist ent es e que perm it em prom over
acessibilidade at ravés da Web, não irem os aqui nos prender
a det alhes sobre est as linguagens e m et odologia. Cont udo,
você encont rará no capít ulo 5 um a list a de art igos, sit es e
69
m at erial para est udo.
1. Teclas de Atalho
Ut ilizar t ecla de at alho é a form a m ais rápida de aces-
sar algum as part es de um a página. De um m odo geral os
usuários conhecem t eclas de at alho, e m uit as vezes as ut iliza,
m esm o sem perceber que est ão fazendo isso.
Duas das com binações de t eclas m ais com uns são as

fam osas com binações CONTROL + C ( com ando para copiar)
e CONTROL + V ( com ando para colar) . Não im port a em que
cont ext o elas são aplicadas, m as t eclas de at alho sem pre t êm
um obj et ivo em com um : perm it ir que o usuário acesse pelo
t eclado os com andos m ais im port ant es de um det erm inado
sist em a.
Muit a gent e não sabe, m as é possível colocar em pá-

ginas da Web com andos que perm it am acesso rápido a um
det erm inado recurso. Ut ilizando- se o at ribut o accesskey, você
consegue associar um a det erm inada let ra ou núm ero a um
out ro elem ent o da página, com o no exem plo abaixo:
<a href= “pagina.html” accesskey= “1”>Página</a>
Nest e exem plo nós confi guram os a t ecla 1 para ser

o at alho do link. Para o usuário acessar est e link at ravés da
t ecla de at alho, e se ele est iver ut ilizando o I nt ernet Explorer,
por exem plo, ele t erá que digit ar a com binação ALT + 1.
70
Os elem ent os HTML que dão suport e ao at ribut o ac-

cesskey são t odos os elem ent os do HTML que geralm ent e são
associados a um event o, com o o click do m ouse ou o ent er do
t eclado. Ou sej a, você pode declarar um accesskey para os
seguint es elem ent os: a, área, t ext area, legend, label, input e
but t on.
Os elem ent os Label e Legend, apesar de norm alm en-

t e não serem associados diret am ent e a event os do m ouse
ou t eclado, t am bém fazem part e dest a list a. I st o acont ece
porque eles são elem ent os int im am ent e ligados a cont roles
de ent rada de dados, com o o input . Sem ant icam ent e, não ha-
veria sent ido em ut ilizar esses elem ent os em um docum ent o
HTML se eles não est iverem rot ulando um a ent rada de dados
ou um conj unt o de ent radas.
A ut ilização de t eclas de at alho é um recurso bast an-

t e int eressant e e am plia grandem ent e as chances de sucesso
de um usuário que ut iliza o t eclado para navegar. Cont udo, de
nada adiant a criar t eclas de at alho se o usuário não souber
da exist ência delas. Port ant o, divulgar suas t eclas de at alho é
t ão im port ant e quant o cria- las.
Um a m aneira de divulgar suas t eclas de at alho é em

um docum ent o de descrição do sit e, se ele t iver um , ou ent ão
no m apa do sit e. Tam bém é possível divulga- las diret am ent e
nas páginas onde essas t eclas de at alho aparecem . Cada de-
senvolvedor pode encont rar um a form a criat iva de fazer est a
divulgação, procurando preservar o layout da página.
71
Um a desvant agem do uso das t eclas de at alho é que

cada navegador da w eb ut iliza um a com binação de t ecla dife-
rent e para o m esm o accesskey.
Dest a form a, supondo que você criou um a t ecla de

at alho para um link ut ilizando a t ecla C ( accesskey = “ c” ) .
Dependendo do navegador ut ilizado pelo usuário ele t eria que
digit ar um a com binação específi ca de t eclas. Assim :
Com binação de Te-

Navegador
clas
I nt ernet Explorer ( Windows) ALT + C
I nt ernet Explorer ( MAC) CTRL + C
Firefox, Mozilla, Net scape ALT + SHI FT + C
( Windows)
Firefox, Mozilla, Net scape CTRL + SHI FT + C
( Mac)
Safari, Om niweb ( Mac) CTRL + C
Konqueror ( Linux) CTRL + C
2. Skip links
Os Skip Links, t am bém conhecido com o Jum p Links,
são links para out ra part e da m esm a página. A sua função é
possibilit ar que os usuários possam navegar pela página sal-
t ando algum as part es da m esm a.
Por exem plo, vam os supor que você quer chegar a

um a det erm inada part e de um a página onde se encont ra um
72
form ulário. Mas para chegar ao form ulário, usando som ent e
o t eclado, você t erá que passar prim eiro por alguns links do
t opo da página e depois pela navegação para só ent ão chegar
ao form ulário. A t écnica do skip link é j ust am ent e para evit ar
est e t ipo de problem a. Ut ilizando um skip link, você poderia
salt ar diret o para o form ulário.
Hoj e em dia, é com um em sit es que se preocupam

com acessibilidade encont rarm os no t opo das páginas um link
com o t ext o “ I r para o cont eúdo”, “ Pular navegação” ou algo
parecido. Est es são skip links em ação!
É m uit o sim ples colocar skip links em um a página,

principalm ent e se est a página foi const ruída ut ilizando- se se-
paração de cam adas. A única coisa que vam os precisar para
const ruir est es links é saber para que part e da página o skip
link vai apont ar.
Por exem plo, se no código HTML se est á ut ilizando a

seguint e m arcação para indicar a ent rada de cont eúdo:
<div id=”conteudo”>....</div>
Ent ão pode- se criar no t opo da página um skip link

para o cont eúdo at ravés do seguint e código:
<a href=”#conteudo” title=”Skip Link para o Con-

teúdo”> Ir para o Conteúdo </a>
73
O m ais im port ant e nest a t écnica é com preender que

o skip link serve para pular algum a coisa. De nada adiant a
colocar um link para pular a navegação depois da navegação.
É por isso que os skip links são geralm ent e os prim eiros links
da página. Mas nada im pede que um skip link sej a colocado
no m eio do cont eúdo para pular, por exem plo, um a list a.
No sit e acessodigit al.net podem os encont rar um

exem plo bast ant e claro do uso de skip links. Nest e sit e, est e
disposit ivo est á localizado no t opo à direit a, conform e a fi gura
abaixo:
Figura 7. Exem plo de skip links
Not ou o núm ero ao lado do t ext o? I st o é um a indi-

cação visual de que est es links podem ser acessados diret a-
m ent e at ravés de com binações de t eclas ( accesskey) . I st o
m ost ra que é perfeit am ent e possível com binar skip links com
o at ribut o accesskey. Para o caso dest a página em part icular,
no prim eiro skip link seria defi nido da seguint e form a:
<a href=”#conteudo” accesskey=”1”>pular para o

conteúdo [1]</a>
74
A princípio, skip links eram sem pre usados de form a

visível, ou sej a, os links sem pre faziam part e da apresent a-
ção da página. Cont udo, com o os skip links acabam ocupando
espaço na página, alguns desenvolvedores não gost avam de
exibi- los. Foi assim que surgiu a t écnica de esconder os skips
links at ravés de CSS, ut ilizando a regra display: none.
A idéia era, j á que quem ut iliza skip links são usuá-

rios de leit ores de t ela, ent ão om it im os o skip link visualm en-
t e, m as ele perm anece no código HTML para que o leit or de
t elas possa acessá- lo.
Cont udo est a t écnica não se m ost rou m uit o boa por
dois m ot ivos. Prim eiro porque um dos leit ores de t ela m ais
ut ilizado, o Jaw s, est ava om it indo a leit ura de qualquer ele-
m ent o do código que t ivesse a declaração display: none em
sua regra de apresent ação, o que fazia com que o skip link
não fosse lido.
Além disso, não são só usuários de program as leit ores

de t ela que ut ilizam skip links. Na verdade, qualquer usuário
que navega pelo t eclado pode se benefi ciar dest e disposit ivo.
Um a out ra t écnica desenvolvida para skip links é co-

nhecida com o m ét odo off- left e consist e em ut ilizar a seguint e
regra CSS para o skip link:
.off-left{
Position:absolute;
Left:2000px;
}
75
Est a regra não im pede que os navegadores e leit ores

de t ela carreguem o link, porém ele t am bém não vai aparecer
na t ela por que o link acaba sendo j ogado para um pont o fora
da t ela. É com o se a t ela do com put ador fosse um palco e o
skip link t ivesse sido colocado nos bast idores.
O m ét odo Off- Left resolve o prim eiro problem a ( o

do Jaw s não acessando o link) , m as cont inua prej udicando a
acessibilidade dos dem ais usuários de t eclado.
Por fi m , um a out ra m et odologia foi desenvolvida com

a int esão de solucionar os dois problem as apont ados. Est e
m ét odo se parece bast ant e com o Off- Left , m as com um a di-
ferença: a m edida que o usuário vai apert ando TAB no t eclado,
as opções de skip links vão aparecendo na t ela. Dessa form a,
ora os links est ão escondidos, ora eles est ão na t ela. Est e
m ét odo foi bat izado de skip link off- screen.
I m plem ent ar est e m ét odo é m ais fácil do que parece.

A prim eira coisa a se fazer aqui é criar um a list a com t odos os
skip links. Algo com o:
<ul class=”off-left”>
<li><a href=”#conteudo”>Ir para conteúdo</
a></li>
...
</ul>
O rest ant e será cont rolado at ravés de regras CSS:
76
1. Prim eiro, a t ag < ul> vai receber a classe off-

left da t écnica ant erior para sair de cena;
2. Segundo, a t ag < a> receberá um a regra sobre

seu posicionam ent o que será absolut o. Est a regra é im por-
t ant e para que possam os t er um m aior cont role no posiciona-
m ent o dos links.
a {
position:absolute;
}
3. Depois, vam os criar para as t ags < a> , um a

pseudo- classe que irá descrever o com port am ent o de cada
link quando receberem foco pelo t eclado. Est a regra varia, de
acordo com o navegador ut ilizado pelo usuário. Por exem plo,
para funcionar com I nt ernet Explorer, est a regra deve ser:
a:active{
left: 20100px;
}
Para a m aioria dos out ros navegadores, a regra para

fazer a m esm a coisa é:
a:focus{
left: 20100px;
}
Você t am bém pode criar um a regra m ist a, com binan-
77
do a duas opções:
a:active, a:focus{
left: 20100px;
}
Você pode encont rar est a t écnica aplicada a vários

sit es na int ernet . Na im agem abaixo, por exem plo, est a t éc-
nica é aplicada ao sit e da Unilever. Observe que, at ravés do
CSS, você t em o cont role t ot al de onde e com o os skip links
vão aparecer.
Figura 8. Mét odo Off- screen
Exist e um a preocupação quant o a usabilidade do sit e

que ut iliza o m ét odo off- screen para cont role de apresent ação
de skip links. Segundo alguns especialist as em usabilidade,
não exist e nest e m ét odo clareza sufi cient e para que um visi-
t ant e perceba visualm ent e que o sit e possui skip links e, por
cont a disso, o visit ant e acaba não ut ilizando os links.
Apesar dist o, est e m ét odo é bast ant e int eressant e e,

sendo bem im plem ent ado e at é com binado com out ros dispo-
sit ivos de acessibilidade, pode dar excelent es result ados.
78
3. Controle do tamanho da letra

Nem sem pre o t am anho da let ra ut ilizado no sit e é
adequado para a visão de quem o visit a. Por isso é m uit o in-
t eressant e para a acessibilidade do sit e que est e t am anho de
let ra sej a confi gurável pelo visit ant e. Claro que sem pre exist e
a possibilidade do visit ant e ut ilizar o cont role do próprio na-
vegador para realizar est a t arefa, m as se o sit e não t iver um
layout adequado , esses cont roles podem acabar dist orcendo
a apresent ação do sit e.
Um a form a m elhor de cont rolar ist o é fornecendo no

próprio sit e a opção de aum ent ar ou dim inuir o t am anho da
let ra. Est e recurso é oferecido usando dois links ou duas im a-
gens represent ando bot ões que, quando acionados, fazem
um a cham ada a um a função Javascript . Est a função percorre
t odo o docum ent o e aum ent a ( ou dim inui) o t am anho da let ra
dos cam pos inform ados.
Figura 9. Exem plo de cont role do t am anho de let ra
A vant agem em ut ilizar est a t écnica é que ela perm it e

que desenvolvedor do sit e m ant enha o cont role sobre a apre-
sent ação. O desenvolvedor cont rola quais part es do layout
79
podem t er o t ext o aj ust ado e o quant o a let ra pode aum ent ar

ou dim inuir.
A prim eira coisa que fazem os no código Javascript é

defi nir t odos os t am anhos que poderão ser ut ilizados no sit e
em um vet or. Dest a form a, você pode cont rolar exat am ent e
quais t am anhos de t ext o são perm it idos.
var tamanhos = new Array( ‘9px’,’10px’,’11px’,

’12px’,’13px’,’14px’,’15px’ );
Out ra defi nição im port ant e nest e m om ent o é o t am a-

nho inicial da let ra, o prim eiro t am anho exibido na t ela.
var tamanhoInicial = 2;
Not e que a variável tamanhoInicial não é um valor

pert encent e ao vet or t am anhos, e sim um índice desse vet or.
I sso quer dizer que, quando defi nim os t am anhoI nicial = 2, na
verdade querem os dizer que o prim eiro t am anho de let ra é
11px, j á que no Javascript a prim eira posição de um vet or é
zero.
I niciadas essas duas variáveis, o rest ant e do código

é um a função que recebe com o parâm et ros o id do elem ent o
que t erá o t am anho das let ras alt erado. Est a função t am bém
receberá um valor, que sem pre será + 1 ou - 1, dependendo da
escolha do visit ant e.
80
function mudaTamanho(idName, valor){

tamanho = tamanhoInicial + valor;
if (tamanho < 0){
tamanho = 0;
}
if (tamanho > 6){
tamanho = 6;
}
document.getElementById(idName).style.font-
Size = tamanhos[tamanho];
}
Nest a função, a variável responsável pela m udança

do t am anho é t am anho, que inicialm ent e recebe a som a do
t am anho inicial com o valor passado por parâm et ro. Logo de-
pois é feit o um a verifi cação, para evit ar que t am anho ext ra-
pole os valores perm it idos. Em seguida, a variável t am anho é
aplicada ao t am anho da let ra do elem ent o passado por parâ-
m et ro ( idNam e) .
Para usar est a função, bast a criar um a cham ada onde

os links de alt eração de t am anho aparecem . Por exem plo, os
links poderiam ser escrit os dest a form a:
<a href=”javascript:mudaTamanho(“texto”,
+1);”>[+]</a>
<a href=”javascript:mudaTamanho(“texto”,
-1);”>[-]</a>
81
Cont udo, exist e um grave problem a quant o ao uso de

cham adas a funções Javascript dent ro de links. O que acon-
t ece quando t em os no código HTML algo do t ipo < a href= ” j a
vascript : m udaTam anho( “ t ext o”, + 1) ; ” > [ + ] < / a> , e o brow ser
não t iver suport e a j avascript at ivado?
Na verdade, não acont ece nada! Nem o que se espe-

rava que acont ecesse, que nest e caso, era aum ent ar a let ra.
O que ocorre nest a sit uação é que a falt a de suport e a Ja-
vascript est á im pedindo o bom funcionam ent o da página da
Web e bloqueando o acesso a algum recurso. Tal problem a é
conhecido com o Javascript obst rut ivo.
Nós podem os fazer algum as alt erações na cham ada

da função j avascript m udaTam anho( ) para perm it ir uso não
obst rut ivo dest a função.
Um a form a de solucionar o problem a é criar um a fun-

ção que m anipule event os relacionados aos links que aum en-
t am ou dim inuem o t am anho da let ra 1 . Dest a form a, ut iliza-
m os a seguint e função Javascript :
function manipulaEvento(){
var linkAumenta = document.
getElementById(“aumenta”);
1 Bruno Torres chama esta manipulação de elementos HTML via Javascript

de Camada de Comportamento. Tal camada é responsável por controlar eventos depois que o
código HTML (ou XHTML ou XML) já tiver sido renderizado. Leia mais em: http://www.obasico-
daweb.com/padroes-web-desenvolvimento-em-camadas-camada-de-comportamento
82
var linkDiminui = document.

getElementById(“diminui”);
linkAumenta.onclick = function(){
mudaTamanho(“texto”, +1);
return false;
}
linkDiminui.onclick = function(){
mudaTamanho(“texto”, -1);
return false;
}
Est a função é capaz de det ect ar quando algum click

de m ouse é dado sobre um dos dois links, [ + ] e [ - ] , que est ão
na página da Web. A função manipulaEvento( ) dispensa a
necessidade de um a cham ada diret a a função que cont rola a
alt eração do t am anho de let ra. Dest a form a, os links da pági-
na serão reescrit os sem o uso de j avascript :
<a href=”erroJavascript.html” id=”aumenta”>[+]</

a>
<a href=”erroJavascript.html” id=”diminui”>[-]</
a>
Not e que, se o brow ser não t iver suport e a Javascript ,

um a página cham ada erroJavascript.html é carregada,
procurando dar um t rat am ent o adequado para o problem a.
O próxim o passo é garant ir que o acesso aos links

t am bém possa ser feit o via t eclado. Para que você possa t er
83
um a idéia geral da solução adot ada, a função manipulaEven-

to( ) foi escrit a na ínt egra, logo abaixo:
function manipulaEvento(){
var linkAumenta = document.
getElementById(“aumenta”);
var linkDiminui = document.
getElementById(“diminui”);
linkAumenta.onclick = function(){
mudaTamanho(“texto”, +1);
return false;
}
linkDiminui.onclick = function(){
mudaTamanho(“texto”, -1);
return false;
}
linkAumenta.onkeypress = function(e){
var keynum;
if(window.event){ // para o IE
keynum = window.event.keyCode;
}
else if(e.keyCode){ // Netscape/Firefox/Opera

keynum = e.keyCode;
}
if (keynum == 13) {
mudaTamanho2(‘texto’, +1);
return false;
}
}
linkDiminui.onkeypress = function(e){
var keynum;
if(window.event){ // para o IE
84
keynum = window.event.keyCode;
}
else if(e.keyCode){ // Netscape/Firefox/
Opera
keynum = e.keyCode;
}
if (keynum == 13) {
mudaTamanho2(‘texto’, -1);
return false;
}
}
}
Para que est a t écnica funcione, ainda falt a aj ust ar

um últ im o det alhe: devem os execut ar a função de m anipu-
lação de event o assim que a página sej a carregada. Dest a
form a, est arem os associando os links da página aos event os
im plem ent ados na função j avascript .
<script type=”text/javascript”>
window.onload = manipulaEvento;
</script>
4. Problemas de acessibilidade com CAPTCHA

A palavra CAPTCHA é um acônim o da expressão
“ Com plet ely Aut om at ed Public Turing t est t o t ell Com put ers
and Hum ans Apart ” ( Test e de Turing público com plet am ent e
aut om at izado para diferenciar ent re com put adores e hum a-
nos) .
85
Apesar do nom e com plicado, o uso de CAPTCHA é

bem com um na Web. Desde grandes port ais at é blogs pesso-
ais, est e recurso é ut ilizado com bast ant e freqüência.
Figura 10. Exem plos de CAPTCHA
A m ot ivação para o uso de CAPTCHA` s est á na ne-

cessidade de segurança cont ra invasões de robôs. Por exem -
plo, em presas que oferecem e- m ail grat uit o na Web com o o
Google ou Yahoo, precisam garant ir que quem est á criando
um a cont a de e- m ail é realm ent e um ser hum ano, e não um
program a de com put ador.
Est a dist inção ent re seres hum anos e robôs é feit a

at ravés do t est e de Turing, um t est e capaz de dist inguir ent re
hom ens e m áquinas, baseado na capacidade cognit iva do ser
hum ano.
A fi gura 10 m ost ra exem plos de um t ipo com um de

CAPTCHA, onde o usuário deve ident ifi car as let ras que são
dist orcidas em um a im agem .
Apesar de t odos os esforços para se criar algorit m os

de CAPTCHA cada vez m ais difíceis de quebrar, j á exist em
m uit os casos de robôs que conseguiram responder o t est e
com sucesso. Est e é o caso do algorit m o do CAPTCHA ut ili-
zado pelo Yahoo, o Gim py, que foi quebrado por um grupo
86
de cient ist as at ravés de um m ét odo denom inado por eles de

EZ- Gim py 2 .
Do pont o de vist a da acessibilidade, a ut ilização do

CAPTCHA causa um a série de problem as. Com o a t écnica é
baseada em reconhecim ent o visual e, pela sua própria na-
t ureza, não perm it e que soft wares leit ores de t ela int erpre-
t em seu cont eúdo, o uso de CAPTCHA im possibilit a o acesso
de pessoas com defi ciência visual ou visibilidade reduzida. O
CAPTCHA cria t am bém barreiras para out ros grupos de pes-
soas que podem possuir inabilidades na aprendizagem que
envolve int erpret ação de t ext o.
Dependendo do proj et o do CAPTCHA aplicado, as fa-

lhas podem ser t ão cat ast rófi cas que podem im pedir o acesso
m esm o de pessoas que não possuem nenhum t ipo de defi ci-
ência. Por exem plo, o uso de ‘0’ ( zero) e ‘o’ ( let ra o) podem
confundir o usuário.
At ualm ent e exist e m uit a discussão sobre est e assun-

t o e há um a preocupação por part e de órgãos com o o W3C,
que procuram solucionar est e problem a. Alguns disposit ivos
de acessibilidade foram im plem ent ados com o um recurso au-
xiliar. O próprio W3C publicou um docum ent o 3 com propost as
de solução, porém , at é agora nenhum a delas com plet am ent e
sat isfat órias:
♦ Uso de t e st e s lógicos do t ipo “Qu a n t o é 1 + 1 ?”
2. Veja em: http://www.cs.sfu.ca/~mori/research/gimpy

3 http://www.w3.org/TR/turingtest/#solutions
87
ou “Qu a l é a cor do cé u ?” - est a solução exige

a criação m anual dest es t est es, o que viola um dos
princípios do CAPTCHA, a aut om at ização. Além disso,
algum as pessoas com defi ciência cognit iva poderiam
t er difi culdades em responder est es t est es.
♦ Uso de da dos pr ópr ios do u su á r io, com o n ú m e r o
de ca r t ã o de cr é dit o - A m aioria das pessoas não se
sent iriam a vont ade em fornecer dados pessoais para
poder ingressar em um sit e desconhecido.
♦ Tr a ba lh a r com ope r a dor e s h u m a n os - efi cient e,
m as t em um cust o m uit o alt o. Além disso, nem t odos
os sit es podem , por diversas razões, dispor dest e t ipo
de serviço.
♦ Con fi r m a çã o a t r a vé s de se n h a e n via da por SM S
pa r a o ce lu la r do u su á r io - Est a é um a idéia int e-
ressant e ut ilizada pelo Google em alguns casos. Con-
t udo, ent ram aqui out ras com plicações relacionadas
a acessibilidade de disposit ivos m óveis.
♦ Sa ída son or a - est a é a alt ernat iva m ais bem aceit a
at ualm ent e. São arquivos de som gerados aut om at i-
cam ent e e geralm ent e possuem dist orções para difi -
cult ar a com preensão da m ensagem por robôs. Mas
exist em algum as sit uações onde o uso dest e dispo-
sit ivo é inefi caz. Por exem plo, em am bient es de m ui-
t o barulho, em com put adores sem caixas de som ou
sem plugins para seu corret o funcionam ent o, ou ut i-
lização por pessoas surdas. Um a m aneira de reduzir
as defi ciências dest e m ét odo é disponibilizar o CAP-
TCHA por áudio j unt o com o CAPTCHA visual.
88
5. Breadcrumbs Trail
E lá vão eles, João e sua irm ã Maria, sendo levados
pela m adrast a m alvada para serem abandonados dent ro da
fl orest a. Mas João t inha um plano: para não perder o cam inho
de volt a ele foi deixando pra t rás m igalhas de pão.
Se você conhece est a est ória, ent ão provavelm ent e

você j á sabe o que são breadcrum bs t rail. Aliás, est e dispo-
sit ivo recebeu est e nom e j ust am ent e por causa dest e cont o
de fadas.
Breadcrum bs t rail ( t rilha de m igalhas de pão) é o

nom e em inglês de um a t écnica que perm it e ao usuário se
localizar dent ro de um sit e, m esm o se ele t enha ido parar
em um a página int erna dest e sit e at ravés de um sist em a de
busca, por exem plo.
O form at o convencional de um breadcrum b é um a

linha cont endo links separados pelo sím bolo > . Cada link in-
dica um local por onde o usuário j á passou ou t am bém pode
indicar um a página de um nível acim a, com o podem os ver na
fi gura 11.
Figura 11. Exem plo de breadcrum bs
Todo breadcrum b é m ont ado de form a a fornecer ao
89
usuário um cam inho pelo qual ele pode volt ar sem problem as,
além de inform ar onde o usuário est á.
Exist em t rês t ipos de breadcrum bs:
• Breadcrum b de localização
• Breadcrum b de cam inho
• Breadcrum b de at ribut o
Nos breadcrum bs de localização, as m igalhas são or-

ganizadas por hierarquia. Algo do t ipo:
Página inicial > Seção > Subseção > página atual
A fi gura 12 é um exem plo de breadcrum b de localiza-

ção aplicado em um sit e.
Breadcrum bs de cam inho organizam as m igalhas de

acordo com o cam inho t om ado pelo usuário para chegar onde
est á. Com o breadcrum bs de cam inho depende da escolha de
rot a do usuário, essas m igalhas são geradas dinam icam ent e
at ravés de script s de program ação.
Figura 12. Breadcrum b de localização
Breadcrum bs de at ribut o são m uit o com uns em si-

t es de e- com m erce, onde a m aioria das páginas são geradas
dinam icam ent e. Sua principal caract eríst ica é que eles não
represent am t oda a página, m as at ribut os dela. Eles m os-
90
t ram inform ações de cam inhos que podem ser seguidos para
alcançar um det erm inado recurso do sit e.
Figura 13. Breadcrum b de at ribut o
6. Menu de Acessibilidade
O m enu de acessibilidade é um a form a de aglom erar
os dem ais disposit ivos de acessibilidade em um único disposi-
t ivo. Funciona com o um painel ou barra de acessibilidade.
Pensando som ent e na acessibilidade do sit e, est e não

é um ít em essencial, m as pode aj udar, dependendo do usuá-
rio que visit a o sit e. Sua função é sim plesm ent e organizar es-
t et icam ent e recursos de acessibilidade, t ais com o: skip links,
cont role de t am anhos de let ra, breadcrum bs, esquem as de
cores, et c.
O sit e Acessibilidade Brasil 4 nos dá um exem plo de

um m enu de acessibilidade bast ant e sim ples, porém funcio-
nal. Ele aparece no t opo de cada página com o um painel de
links, conform e você pode ver na fi gura 14. Um recurso int e-
ressant e dest e painel é que ele reconhece aut om át icam ent e o
navegador ut ilizado pelo visit ant e e m odifi ca a orient ação de
ut ilização das t eclas de acesso.
4 http://www.acessobrasil.org.br/
91
Figura 14. Exem plo de m enu de acessibilidade
Já o sit e do I nst it ut o Benj am im Const ant 5 t rabalha

com um m enu de at alhos de navegação est rat egicam ent e lo-
calizado logo abaixo da ident ifi cação do sit e. Além do m enu,
no t opo do sit e, ainda exist em out ros recursos im port ant es,
com o um cam po de busca e um link para a página principal.
Esses elem ent o são im port ant es não só para a acessibilida-
de, m as para a usabilidade do sit e em geral. Ainda no sit e do
inst it ut o, um dest aque especial para os bot ões de cont role
de acessibilidade. Eles servem para cont rolar o t am anho das
let ras e o esquem a de cor e cont rast e.
Figura 15. Menu de acessibilidade usando bot ões
5 http://www.ibc.gov.br/
92
Alguns proj et ist as preferem criar um m enu de aces-

sibilidade com um pouco m ais de com plexidade, incluindo a
opção de exibir ou ocult ar o m enu, dependendo da escolha do
usuário. Um exem plo é o m enu de acessibilidade do sit e do
I nst it ut o Et hos6 . A princípio, o m enu fi ca ocult o, m as quando
o usuário clica na guia m enu de acessibilidade, ele aparece no
t opo da página, deixando à m ost ra t odos os at alhos e bot ões
de acessibilidade.
Figura 16. Menu de acessibilidade do I nst it ut o Et hos
6 http://www.ethos.org.br/
93
Cinto de Utilidades!
5
Est e livro est á longe de esgot ar com plet am ent e t oda
est a discussão sobre acessibilidade a Web. Com cert eza, est e
é um assunt o que est á am adurecendo e cada vez m ais pesso-
as est ão descobrindo o quant o a acessibilidade é im port ant e,
não só para defi cient es físicos, m as para t odo t ipo de usuário
que acessa a Web a part ir dos m ais variados disposit ivos.
Est e capít ulo foi escrit o especialm ent e para você, que
t em realm ent e int eresse em por em prát ica t udo que foi ex-
post o at é est e m om ent o. Aqui você encont rará list as de fer-
ram ent as para t est ar, validar e avaliar seus códigos HTML e
CSS. Encont rará t am bém um a list a de art igos im port ant íssi-
m os, escrit os por pessoas que realm ent e sabem do que est ão
falando. Aproveit e e bom est udo!
Capítulo 5 - Cinto de Utilidades!
1. Ferramentas de avaliação/validação de acessibi-

lidade
Avaliadores de acessibilidade são ferram ent as sem i-
aut om át icas que analisam se o código HTML est á de acordo
com as recom endações de acessibilidade.
♦ Ex a m in a t or - além de avaliar a acessibilidade do

sit e, ele fornece um a not a, de form a que o desenvol-
vedor possa exam inar com o a acessibilidade do sit e
se encont ra. [ w w w .acesso.um ic.pt / w ebax/ exam ina-
t or.php]
♦ Cyn t h ia Sa ys [ ht t p: / / w w w .cynt hiasays.com / ]
♦ W a ve [ ht t p: / / wave.w ebaim .org/ ]
♦ A- pr om pt [ ht t p: / / aprom pt .snow .ut oront o.ca/ ]
♦ D a Silva - Est e é um exam inador brasileiro, m ant ido
pelo grupo Acessibilidade Brasil. No DaSilva a análise
é feit a usando as regras de acessibilidade do WCAG e
E- MAG [ ht t p: / / w w w .dasilva.org.br/ ]
2. Softwares para avaliação de acessibilidade

♦ TAW 3 - Soft ware que analisa a página de acordo
com a WCAG. o TAW gera um relat ório que m ost ra
os problem as encont rados com sua respect iva descri-
ção, o núm ero da linha onde foi det ect ado o proble-
m a de acessibilidade, link para um a página que con-
t ém a explicação do problem a e form as de resolvê- lo.
[ w w w .t aw dis.net / t aw 3/ cm s/ en]
95
♦ ASES - é um soft ware brasileiro, criado pelo e-

Gov para avaliar, sim ular e corrigir a acessibilidade
de sit es. Ent re out ras coisas, avalia acessibilidade,
HTML e CSS. [ w w w .governoelet ronico.gov.br/ acoes-
e- p r oj et os/ e- MAG/ ases- av aliad or - e- sim u lad or - d e-
acessibilidade- sit ios]
♦ Ba r r a de a ce ssibilida de AI S - m ant ida pela Vision
Aust ralia, é um a barra para ser inst alada no I nt ernet
Explorer e pode fazer validações de acessibilidade,
HTML e CSS e realiza out ras t arefas. [ w w w .visionaus-
t ralia.org.au/ info.aspx?page= 614]
3. Ferramentas validadoras de HTML/CSS

As ferram ent as de validação de HTML e CSS avaliam
a sint axe do código HTML e CSS. Exist em várias opções de
validadores, fi que a vont ade para escolher o que m ais se ade-
quar as suas necessidades.
- Validadores de sintaxe HTML/XHTML

♦ W 3 C M a r k u p V a lida t ion Se r vice - validador ofi -
cial do W3C para HTML e XHTML [ ht t p: / / validat or.
w 3.org/ ]
♦ W D G H TM L V a lida t or [ w w w .ht m lhelp.com / t ools/
validat or/ ]
-Validadores de CSS
♦ W 3 C CSS V a lida t ion Se r vice - validador ofi cial do
W3C para CSS. [ ht t p: / / j igsaw.w 3.org/ css- validat or/
96
4. Softwares leitores de tela

♦ Ja w s [ w w w.freedom scient ifi c.com / fs_dow nloads/
j aw s.asp]
♦ V ir t u a l V ision - Nacional, fabricado pela Micropo-
w er. [ w w w .m icropow er.com .br/ v3/ pt / acessibilidade/
index.php]
♦ D osV ox - Grat uit o e em port uguês. Produzido pela
UFRJ [ int ervox.nce.ufrj .br/ dosvox/ ]
♦ N V D A - Leit or de t elas grat uit o e de código abert o
para Window s. Um a excelent e opção para uso e t es-
t es. [ w w w .nvda- proj ect .org]
♦ Or ca - Leit or de t ela para linux [ live.gnom e.org/
Orca] .
5. Complementos de acessibilidade para Firefox

♦ Fa n gs Scr e e n Re a de r Em u la t or - renderiza o con-
t eúdo de um a página sim ulando um leit or de t ela.
[ addons.m ozilla.org/ pt - BR/ fi refox/ addon/ 402]
♦ TAW 3 w it h a click - Perm it e verifi car rapidam ent e
com o anda a acessibilidade do sit e. [ addons.m ozilla.
org/ pt - BR/ fi refox/ addon/ 1158]
♦ W e b D e ve lope r - Não é um a ferram ent a específi ca
de acessibilidade, m as faz validação pela ferram ent a
Cint hiaSays. É m uit o para desenvolvim ent o Web em
geral. [ addons.m ozilla.org/ pt - BR/ fi refox/ addon/ 60]
97
6. Ferramentas que úteis para teste e desenvolvi-

mento
♦ Ly n x V ie w e r - sim ulador de um navegador em m odo
t ext o. [ w w w .delorie.com / w eb/ lynxview .ht m l]
♦ Google Ace ssible Se a r ch - um a busca do google
que prioriza os sit es acessíveis no result ado da bus-
ca. [ ht t p: / / labs.google.com / accessible]
7. Ítens de leitura Obrigatória

♦ W CAG 1 .0 - Não é um a leit ura fácil, m as im port an-
t íssim a se você quiser conhecer a fundo est e assun-
t o. Você pode ler, diret o do W3C, a versão original
em inglês [ w w w .w 3.org/ TR/ WCAG10/ ] , ou pode ler
a t radução de Cláudia Dias [ w w w .geocit ies.com / clau-
diaad/ acessibilidade_w eb.ht m l] .
♦ E- M AG - Acessibilidade do Governo Elet rônico, um a
cart ilha t écnica [ w w w .inclusaodigit al.gov.br/ inclu-
sao/ ar quiv os/ out r os/ docum ent os- ger ais- r efer ncias/
em ag- acessibilidade- de- gov er no- elet r onico- car t ilha-
t ecnica- v20.pdf]
♦ Ca r t ilh a de codifi ca çã o E- GOV - um a cart ilha de
boas prát icas em codifi cação XHTML, CSS e JavaS-
cript [ w w w .governoelet ronico.gov.br/ bibliot eca/ ar-
quivos/ padroes- brasil- e- gov]
♦ W CAG Sa m u r a i - Tradução de Maurício Sam y Silva
[ w w w .m auj or.com / w cagsam urai/ ]
8. Ítens de leitura recomendada
98
♦ Acessibilidade w eb, Usabilidade, Teclado e Leit ores

de Tela - M a r cos An t ôn io de Qu e ir oz [ w w w .benga-
lalegal.com / nocoes.php]
♦ Com o t est ar a acessibilidade em Websit es ( part e
1) - H or á cio Soa r e s [ int ernat iva.com .br/ art igo_
acessibilidade_03_06.ht m l]
♦ Acessibilidade w eb: 7 m it os e um equívoco - Lê da
Spe lt a [ acessodigit al.net / art _acessibilidade- w eb- 7-
m it os- e- um - equivoco.ht m l]
♦ O selo não garant e acessibilidade - H or á cio Soa r e s
[ int ernat iva.com .br/ art igo_acessibilidade_06.ht m l]
♦ Seu m enu dropdow n funciona com o t eclado? - Br u -
n o Tor r e s [ brunot orres.net / seu- m enu- dropdow n-
funciona- com - o- t eclado]
♦ Form ulários acessíveis à prova de spam - t r a du çã o
de M a u r ício Sa m y Silva [ w w w .m auj or.com / t ut o-
rial/ spam - em - form ularios.php]
♦ Navegação Via Teclado - Teclas de At alho ( Jaw s, I E e
FF) - M a r cos An t on io de Qu e ir oz [ w w w .acessibili-
dadelegal.com / 13- at alhos.php]
♦ Usabilidade de I nt erfaces e Arquit et ura da I nform a-
ção: Navegação Est rut ural - Fe lipe M e m ór ia ( o ar-
t igo t rat a sobre breadcrum bs t rail) [ w w w .fm em oria.
com .br/ art igos/ nav_est r.pdf]
♦ Desenvolvendo AJAX acessível aos leit ores de t ela -
t r a du çã o de M a u r ício Sa m y Silva [ w w w .m auj or.
com / t ut orial/ aj ax- screen- readers.php]
99

Tecnicas de Acessibilidade Web

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Tecnicas de Acessibilidade Web

Enviado por

Direitos autorais:

Formatos disponíveis

Técnicas de Acessibilidade

Criando uma web para todos

Jalves Mendonça Nicácio

N582t Nicácio, Jalves Mendonça.

1. Internet (Redes de computadores). 2. World Wide Web (Sistema de recu-

Direitos desta edição reservados à Editora afiliada:

Desde 1999 o SENAI Nacional desenvolve com sucesso, at ravés da

O grande foco do PSAI é oport unizar a educação proﬁ ssional para

No que se refere à inclusão digit al de pessoas com necessidades

Em Alagoas, o SENAI vem desenvolvendo com sucesso várias ações

No ent ant o, m esm o diant e de t odas as iniciat ivas j á m encionadas,

A edição especial desse livro, pat rocinada pelo SENAI em parceria

Ent endem os que com a publicação dest a edição especial, o SENAI

Acessibilidade é um t em a ainda pouco explorado e de bibliograﬁ a

Trat a- se de um t ext o que, apesar de abordar quest ões t écnicas,

Com a disponibilização de ferram ent as ext rem am ent e fáceis para

Am pliar a acessibilidade das inform ações disponíveis na rede im -

Por t odas essas quest ões, est a obra t em um m érit o louvável. É o

Espera- se que o leit or não se det enha apenas a conhecer os recur-

M ARCUS D E M ELO BRAGA

I nt ernet , e- m ail, sit e, hom e page, servidor, navega-

Na verdade, desde a prim eira vez que o m undo ou-

1. O problema da inacessibilidade à páginas de

Por exem plo, im agine os seguint es casos:

Um a vez um am igo dela a apresent ou a um sit e onde

I m aginem quant a coisa agora ele será capaz de fa-

Mas sua fascinação não durou m uit o t em po. Logo

Todos est es exem plos servem para evidenciar um a

realidade vivida por m ilhões de pessoas em t odo m undo.

2. Quem deveria ler este livro?

lidade de um sit e, pode aprender a realizar t est es de usa-

Gerent es de Tecnologia da I nform ação, gerent es de

Program adores, w eb m ast ers, w eb designers, consul-

Para que você ent enda claram ent e do que est am os

Tais conceit os são m uit o im port ant es para que você

1. Aﬁnal, o que é “Web Acessível”?

Um a vez que j á t em os um a rede de com unicação

publicações e t ecnologias ent re pessoas geograﬁ cam ent e dis-

Nos anos 80, O Cent ro Europeu de Pesquisa Nucle-

Segundo a solução de Tim , os arquivos seriam dispo-

Mas o que foi realm ent e genial na solução de Tim

A possibilidade de vincular um docum ent o a out ro ( e

nos dá um a sensação de que est am os lidando com algo que

Enﬁ m , a Web nada m ais é do que est e m ar de links,

O que quer dizer acessível?

Por exem plo: nem t udo que é fácil para um adult o

independent e de ser deﬁ cient e física ou não, possui um grau

Quando dizem os, port ant o, que algo é acessível, ist o

O que quer dizer Web acessível?

Um exem plo: o sist em a de buscas m ais ut ilizado no

Acessibilidade Web t am bém est á ligada a diversos

houver um a preocupação em com o as inform ações do sit e se-

Exist em vários fat ores que podem im possibilit ar ou

Cont udo, ainda precisarem os explicar m ais alguns

2. Sobre a Web e seus componentes.

A Web é com post a por docum ent os e sist em as. Ou

Nenhum cont eúdo exist iria se não houvesse quem o

criasse. Port ant o, aqui ent ram os Desenvolvedores de w ebsi-

Mas t odo desenvolvedor ut iliza program as que o aj u-

Se t iverm os quem cria cont eúdo com o um com po-

Mas para navegar pela Web, é preciso que o usuá-

Não podem os nos esquecer que m uit os usuários não

podem acessar cont eúdos da Web diret am ent e pelo agent e de