Este relatório descreve um projeto de acessibilidade visual para o site da Escola de Artes, Ciências e Humanidades da USP. Foram realizados um levantamento de dados através de questionário com usuários com deficiência visual e análise do site original, identificando problemas. Em seguida, o site foi reestruturado e modificado para melhor atender as necessidades desses usuários, de acordo com as diretrizes de acessibilidade. Os resultados são avaliados por meio de leitor de tela.

1. UNIVERSIDADE
DE
SÃO
PAULO
–
ESCOLA
DE
ARTES,
CIÊNCIAS
E
HUMANIDADES
Relatório
da
Disciplina
“Resolução
de
Problemas
II”
Turma
L4
-­‐
Grupo
Acessibilidade
Visual
Jessica
Bazilio,
Lucas
Machado,
Patrícia
Giovedi
Tutor:
Prof.º
Drº.
Clodoaldo
Moraes
Lima
Novembro
de
2010

2. UNIVERSIDADE
DE
SÃO
PAULO
ESCOLA
DE
ARTES,
CIÊNCIAS
E
HUMANIDADES
S U M Á R I O
Lista
de
Figuras
...............................................................................................................................................
2
Lista
de
Símbolos
e
Abreviaturas
............................................................................................................
3
Lista
de
Tabelas
e
Anexos
...........................................................................................................................
4
Resumo
...............................................................................................................................................................
5
Abstract
..............................................................................................................................................................
5
Capítulo
1
-­‐
Introdução
................................................................................................................................
6
Introdução
e
Justificativa
........................................................................................................................
6
Pergunta
....................................................................................................................................................
6
Hipótese
.....................................................................................................................................................
7
1.1
Objetivos
................................................................................................................................................
7
1.2
Material
e
Métodos
............................................................................................................................
7
1.3
Forma
de
Análise
dos
Resultados
...............................................................................................
8
1.4
Descrição
dos
Capítulos
................................................................................................................
10
Capítulo
2
-­‐
Levantamento
de
Dados
..................................................................................................
11
2.1
Descrição
do
formulário
...............................................................................................................
11
2.2
Descrição
dos
Dados
......................................................................................................................
11
Questão
1
-­‐
Qual
o
seu
curso?
.......................................................................................................
11
Questão
2
–
Qual
seu
tipo
de
deficiência
visual?
...................................................................
12
Questão
3
-­‐
Você
utiliza
a
internet
com
qual
frequência
diariamente?
......................
12
Questão
4
-­‐
Qual
sua
principal
dificuldade
ao
navegar
pela
internet?
........................
13
Questão
5
-­‐
Você
considera
o
site
da
EACH
acessível?
.......................................................
13
Questão
6
-­‐
Se
não,
quais
problemas
de
acesso
você
encontrou?
.................................
14
Questão
7
-­‐
O
que
você
gostaria
que
fosse
modificado
no
site
da
EACH
para
facilitar
o
seu
acesso?
.......................................................................................................................
14
Número
de
respostas
diárias
........................................................................................................
15
2.3
Análise
dos
Resultados
.................................................................................................................
15
Capítulo
3
–
Desenvolvimento
do
site
................................................................................................
16
3.1
Descrição
do
Site
..............................................................................................................................
16
3.2
Descrição
do
Funcionamento
.....................................................................................................
19
3.3
Análise
via
leitor
de
tela
...............................................................................................................
21
Capítulo
4
-­‐
Conclusões
e
Perspectivas
Futuras
.............................................................................
24
Bibliografia
.....................................................................................................................................................
25
Anexos
..............................................................................................................................................................
25
A C H 2 0 4 2
–
R E S O L U Ç Ã O
D E
P R O B L E M A S
I I
–
T U R M A
L 4
–
G R U P O
A C E S S I B I L I D A D E
V I S U A L
1

3. UNIVERSIDADE
DE
SÃO
PAULO
ESCOLA
DE
ARTES,
CIÊNCIAS
E
HUMANIDADES
L I S T A
D E
F I G U R A S
Figura
2.1-­‐
Gráfico
da
questão
1
...........................................................................................................
11
Figura
2.2-­‐
Gráfico
da
questão
2
...........................................................................................................
12
Figura
2.3-­‐
Gráfico
da
questão
3
...........................................................................................................
12
Figura
2.4-­‐
Gráfico
da
questão
4
...........................................................................................................
13
Figura
2.5-­‐
Gráfico
da
questão
5
...........................................................................................................
13
Figura
2.6-­‐
Gráfico
da
questão
6
...........................................................................................................
14
Figura
2.7-­‐
Gráfico
da
questão
7
...........................................................................................................
14
Figura
2.8-­‐
Gráfico
da
quantidade
de
respostas
ao
questionário
por
período
.................
15
Figura
3.9
-­‐
Captura
de
tela
do
site
da
EACH
original,
do
dia
5/11/2010
..........................
16
Figura
3.10
-­‐
Site
da
EACH
dividido
em
seções
lógicas
...............................................................
17
Figura
3.11
–
Captura
de
tela
do
site
da
EACH
depois
de
alterado
........................................
19
Figura
3.12-­‐
Imagens
como
marcadores
de
listas
.........................................................................
21
A C H 2 0 4 2
–
R E S O L U Ç Ã O
D E
P R O B L E M A S
I I
–
T U R M A
L 4
–
G R U P O
A C E S S I B I L I D A D E
V I S U A L
2

4. UNIVERSIDADE
DE
SÃO
PAULO
ESCOLA
DE
ARTES,
CIÊNCIAS
E
HUMANIDADES
L I S T A
D E
S Í M B O L O S
E
A B R E V I A T U -­‐
R A S
} ASCII
–
Acrônimo
para
American
Standard
Code
for
Information
Interchange,
que
em
português
significa
"Código
Padrão
Americano
para
o
Intercâmbio
de
Informação.”.
} CSS
–
(Cascading
Style
Sheets),
linguagem
de
estilo
utilizada
para
definir
a
apresentação
de
documentos
escritos
em
uma
linguagem
de
marcação,
como
HTML
ou
XML.
Seu
principal
benefício
é
prover
a
separação
entre
o
formato
e
o
conteúdo
de
um
documento.
} EACH
–
Escola
de
Artes,
Ciências
e
Humanidades.
} E-­‐MAG
–
Modelo
de
Acessibilidade
do
Governo
Eletrônico.
} HTML
–
Acrônimo
para
a
expressão
inglesa
HyperText
Markup
Language,
que
significa
Linguagem
de
Marcação
de
Hipertexto.
É
uma
linguagem
de
marcação
utilizada
para
produzir
páginas
na
Web.
} RP
–
Resolução
de
Problemas.
} USP
–
Universidade
de
São
Paulo.
A C H 2 0 4 2
–
R E S O L U Ç Ã O
D E
P R O B L E M A S
I I
–
T U R M A
L 4
–
G R U P O
A C E S S I B I L I D A D E
V I S U A L
3

5. UNIVERSIDADE
DE
SÃO
PAULO
ESCOLA
DE
ARTES,
CIÊNCIAS
E
HUMANIDADES
L I S T A
D E
T A B E L A S
E
A N E X O S
Tabela
2.1-­‐
Dados
da
Questão
1
............................................................................................................
11
Tabela
2.2-­‐
Dados
da
Questão
2
............................................................................................................
12
Tabela
2.3-­‐
Dados
da
Questão
3
............................................................................................................
12
Tabela
2.4-­‐
Dados
da
Questão
4
............................................................................................................
13
Tabela
2.5-­‐
Dados
da
Questão
5
............................................................................................................
13
Tabela
2.6-­‐
Dados
da
Questão
6
............................................................................................................
14
Tabela
2.7-­‐
Dados
da
Questão
7
............................................................................................................
14
Tabela
3.8
-­‐
Problemas
Identificados
no
site
da
EACH
...............................................................
18
Anexo
1
-­‐
Código
fonte
HTML
original
do
site
da
EACH
em
5/11/2010
.............................
25
Anexo
2
-­‐
Código
Fonte
JavaScript
original
do
site
da
EACH
de
5/11/2010
.....................
29
Anexo
3
-­‐
Código
Fonte
CSS
original
do
site
da
EACH
de
5/11/2010
..................................
29
Anexo
4
-­‐
Código
Fonte
HTML
alterado
da
página
da
EACH
....................................................
30
Anexo
5
-­‐
Código
Fonte
JavaScript
alterado
do
site
da
EACH
..................................................
34
Anexo
6
-­‐
Código
Fonte
CSS
alterado
do
site
da
EACH
................................................................
35
Anexo
7-­‐
Tabela
de
dados
completa
do
questionário
aplicado
...............................................
36
A C H 2 0 4 2
–
R E S O L U Ç Ã O
D E
P R O B L E M A S
I I
–
T U R M A
L 4
–
G R U P O
A C E S S I B I L I D A D E
V I S U A L
4

6. UNIVERSIDADE
DE
SÃO
PAULO
ESCOLA
DE
ARTES,
CIÊNCIAS
E
HUMANIDADES
R E S U M O
São
muitas
as
barreiras
que
os
deficientes
visuais
enfrentam
diariamente,
porém
eles
estão
cada
vez
ganhando
mais
autonomia
para
desempenhar
uma
vida
sem
limitações.
Um
desses
ganhos
são
os
leitores
de
telas
de
computador:
Um
software
que
converte
o
texto
em
voz
sintetizada
e
permite
que
deficientes
visuais
totais
possam
navegar
pelo
ciberespaço
ouvindo
o
conteúdo
da
WEB.
Infelizmente
esse
enorme
avanço
da
tecno-­‐
logia
possui
as
suas
limitações.
Para
que
esse
software
possa
funcionar
de
maneira
efetiva,
as
páginas
da
WEB
devem
ser
criadas
seguindo
os
padrões
de
acessibilidade.
Sem
dúvida,
atualmente
a
Internet
desempenha
um
papel
fundamental
no
cotidiano
das
pessoas
com
deficiência,
é
fonte
de
informação,
de
novas
oportunidades
de
traba-­‐
lho,
de
diversão
e
facilita
as
atividades
triviais,
como
pagar
contas
pela
internet,
sem
ter
a
necessidade
de
se
deslocar
até
um
banco.
Com
o
nosso
trabalho
da
disciplina
Resolução
de
Problemas
II
pesquisamos
os
pa-­‐
drões
de
acessibilidade,
analisamos
se
o
site
da
EACH
possui
os
mesmos,
fizemos
pes-­‐
quisas
de
campo
com
deficientes
visuais
e
a
elaboramos
um
protótipo
acessível
da
pagína
inicial
do
site
da
EACH.
A B S T R A C T
There
are
many
barriers
that
visually
impaired
people
face
daily,
but
they
are
increas-­‐
ingly
gaining
more
autonomy
to
perform
a
life
without
limitations.
One
of
these
gains
is
the
computer
screen
readers:
Software
that
converts
text
into
synthesized
speech
and
enables
totally
visual
impaired
people
to
navigate
through
cyberspace
hearing
the
con-­‐
tents
of
the
WEB.
Unfortunately,
this
huge
advancement
in
technology
has
its
limitations.
For
this
software
to
function
effectively,
the
Web
pages
should
be
created
following
the
standards
of
accessibility.
No
doubt,
today
the
internet
plays
a
key
role
in
the
daily
lives
of
people
with
disabilities,
is
a
source
of
information,
new
job
opportunities,
entertainment
activities
and
facilitates
the
trivial
activities,
such
as
paying
bills
online,
without
having
the
need
to
move
up
to
a
bank.
With
our
work
of
the
discipline
‘Resolução
de
Problemas
II’,
we
searched
for
the
acces-­‐
sibility
standards,
analyzed
if
the
EACH
site
has
them,
did
surveys
with
visually
impaired
people
and
developed
an
accessible
prototype
of
the
EACH
home
page.
A C H 2 0 4 2
–
R E S O L U Ç Ã O
D E
P R O B L E M A S
I I
–
T U R M A
L 4
–
G R U P O
A C E S S I B I L I D A D E
V I S U A L
5

7. UNIVERSIDADE
DE
SÃO
PAULO
ESCOLA
DE
ARTES,
CIÊNCIAS
E
HUMANIDADES
C A P Í T U L O
1
-­‐
I N T R O D U Ç Ã O
INTRODUÇÃO
E
JUSTIFICATIVA
A
questão
da
acessibilidade
é
definida
como
um
dos
grandes
desafios
da
pesquisa
em
computação
no
Brasil
no
decênio
2006-­‐2016
(SBC,
2006),
e
vem
ganhando
cada
vez
mais
influência
e
importância
no
desenvolvimento
e
manutenção
tanto
de
sistemas
e
espaços
físicos
quanto
virtuais
(sistemas
de
informação).
Acessibilidade
à
WEB
signi-­‐
fica
que
pessoas
portadoras
de
algum
tipo
de
deficiência,
(nesse
trabalho
foi
conside-­‐
rado
mais
precisamente
apenas
os
deficientes
visuais
totais)
possam
navegar
pelo
ciberespaço
de
forma
efetiva,
isso
quer
dizer
sem
encontrar
barreiras,
ou
seja,
Acessi-­‐
bilidade
significa
não
apenas
permitir
que
pessoas
com
deficiências
participem
de
atividades
que
incluem
o
uso
de
produtos,
serviços
e
informação,
mas
a
inclusão
e
ex-­‐
tensão
do
uso
destes
por
todas
as
parcelas
presentes
em
uma
determinada
população,
com
restrições
as
mínimas
possíveis
(Easylogics,
2009).
Exemplos
cotidianos
de
ado-­‐
ção
dessas
idéias
podem
ser
observados
nos
ônibus
adaptados
com
rampas
ou
piso
baixo,
nos
elevadores
em
edifícios,
piso
táctil
em
calçadas
e
caminhos,
maior
disponi-­‐
bilidade
de
informações
em
Braille
e
sonoras.
A
internet
atualmente
desempenha
um
papel
fundamental
na
sociedade,
é
fonte
de
informação,
meio
de
comunicação,
entretenimento
entre
outras
funções.
A
WEB
aces-­‐
sível
significa
democratizar
essa
ferramenta
cada
vez
mais
usada
na
atualidade.
Segundo
dados
do
censo
do
IBGE
do
ano
de
2000,
entre
16,5
milhões
de
pessoas
com
deficiência
visual,
existiam
cerca
de
160
mil
pessoas
incapazes
de
enxergar
(Comunicação
Social
-­‐
IBGE,
2002).
Visando
abranger
esse
relevante
e
atual
tema,
nosso
grupo
da
disciplina
Resolução
de
Problemas
II
escolheu
por
estudar
os
padrões
e
aspectos
técnicos
relacionados
à
cons-­‐
trução
de
sites
acessíveis
aos
deficientes
visuais,
analisando
a
webpage
do
instituto
Escola
de
Artes,
Ciências
e
Humanidades
da
Universidade
de
São
Paulo
quanto
ao
aten-­‐
dimento
desses
critérios.
Indo
ainda
mais
além
nessa
inspiração,
analisamos
prioritariamente
quais
são
os
pro-­‐
blemas
de
acesso
para
deficientes
visuais
no
mesmo
site
e
como
os
mesmos
poderiam
ser
solucionados,
pesquisamos
diretamente
com
os
usuários
quais
suas
principais
di-­‐
ficuldades
e
quais
melhorias
poderiam
ser
implementadas
a
fim
de
tornar
a
navegação
mais
fácil,
e
por
fim,
elaboramos
e
propomos
um
protótipo
completamente
acessível
da
página
inicial
do
site
da
EACH
utilizando
uma
versão
salva
de
5
de
novembro
de
2010.
PERGUNTA
“O
site
da
EACH
é
acessível
a
deficientes
visuais?”.
Ou
seja,
partindo
da
premissa
de
que
se
dispõe
de
um
computador,
acesso
à
internet
e
os
recursos
de
utilização
neces-­‐
sários
adaptados
ao
usuário,
o
site
da
EACH
pode
ser
completamente
acessado
e
utili-­‐
zado
por
um
deficiente
visual
(incapaz
de
enxergar,
daltônico
e/ou
pessoas
com
visão
reduzida?).
A C H 2 0 4 2
–
R E S O L U Ç Ã O
D E
P R O B L E M A S
I I
–
T U R M A
L 4
–
G R U P O
A C E S S I B I L I D A D E
V I S U A L
6

8. UNIVERSIDADE
DE
SÃO
PAULO
ESCOLA
DE
ARTES,
CIÊNCIAS
E
HUMANIDADES
HIPÓTESE
“O
site
da
EACH
não
foi
desenvolvido
de
acordo
com
os
padrões
que
permitem
a
sua
acessibilidade
às
pessoas
com
deficiência
visual.”
Isto
é,
pessoas
que
apresentam
defi-­‐
ciências
visuais
podem
não
conseguir
acessar
todos
os
conteúdos
e/ou
informações
contidas
nas
páginas
do
site.
1.1
OBJETIVOS
O
objetivo
principal
deste
trabalho
é
verificar
se
o
site
da
EACH
é
acessível
a
defici-­‐
entes
visuais
(cegos,
daltônicos
e
pessoas
com
visão
reduzida).
Para
alcançar
este
objetivo
central
e
um
aprendizado
das
técnicas
utilizadas
na
web
para
deficientes
vi-­‐
suais,
os
seguintes
sub-­‐objetivos
serão
necessários:
1. Estudar
os
padrões
(linguagens
e
ferramentas)
e
aspectos
técnicos
relaciona-­‐
dos
à
construção
de
sites
acessíveis
aos
deficientes
visuais.
2. Analisar
quais
são
os
problemas
para
deficientes
visuais
no
site
da
EACH.
3. Pesquisar
quais
recursos
os
deficientes
visuais
gostariam
que
houvesse
no
site,
baseado
em
suas
dificuldades.
4. Elaboração
de
um
protótipo
de
um
site
acessível
a
deficientes
visuais.
1.2
MATERIAL
E
MÉTODOS
Ao
longo
do
trabalho
foram
definidos
passos
fundamentais
que
nortearam
nossos
es-­‐
forços
para
atingir
nossos
objetivos.
1. Análise
bibliográfica.
2. Comparação
do
site
da
EACH
com
os
padrões
de
acessibilidade.
3. Pesquisa
de
campo
com
questionário.
4. Análise
do
questionário.
5. Criação
de
protótipo
de
site
acessível.
A
análise
bibliográfica
abrangeu
pesquisas
em
fontes
oficiais
na
Internet,
como
sites
de
governo,
boas
práticas
e
padrões
internacionais.
A
comparação
do
site
da
EACH
com
os
padrões
de
acessibilidade
foi
realizada
por
meio
de
ferramentas
online
disponíveis
para
este
fim.
Foi
realizada
uma
análise
no
site
dasilva
(http://www.dasilva.org.br/),
além
de
check-­‐lists
dispo-­‐
níveis
no
site
do
governo
federal
sobre
acessibilidade
(http://www.governoeletronico.gov.br/acoes-­‐e-­‐projetos/e-­‐MAG
).
Para
a
realização
da
pesquisa
de
campo
com
questionário,
inicialmente
procu-­‐
ramos
dados
sobre
se
há
deficientes
visuais
no
universo
‘Escola
de
Artes,
Ciên-­‐
cias
e
Humanidades’.
O
questionário
aplicado
obteve
dados
sobre
os
hábitos
de
utilização
de
tecnologia
(computadores)
por
deficientes,
bem
como
quais
seri-­‐
am
as
principais
melhorias
sugeridas
aos
sistemas
de
acessibilidade
e
se
os
mesmos
atendem
às
suas
necessidades
de
utilização.
A
Análise
do
questionário
envolveu
o
levantamento
dos
dados
mais
importan-­‐
tes
obtidos,
e
a
conclusão
de
hipóteses
levantadas
sobre
a
eficácia,
a
importân-­‐
cia,
e
o
nível
de
desenvolvimento
da
acessibilidade
em
sites
da
Internet.
Depois
de
elaboradas,
discutidas
e
compreendidas
as
questões
teóricas
e
técni-­‐
cas
pelo
grupo,
salvamos
as
páginas
do
sítio
http://each.uspnet.usp.br/each/,
e
com
base
nas
mesmas,
realizamos
a
adaptação
em
todos
os
critérios
necessá-­‐
A C H 2 0 4 2
–
R E S O L U Ç Ã O
D E
P R O B L E M A S
I I
–
T U R M A
L 4
–
G R U P O
A C E S S I B I L I D A D E
V I S U A L
7

9. UNIVERSIDADE
DE
SÃO
PAULO
ESCOLA
DE
ARTES,
CIÊNCIAS
E
HUMANIDADES
rios
para
que
a
página
fique
em
cumprimento
com
todos
os
requisitos
de
aces-­‐
sibilidades
definidos
pelos
check-­‐lists
e
análises
online
de
páginas
(ferramenta
dasilva).
A
versão
final
do
protótipo
acessível
foi
publicada
no
endereço
http://siteeach.110mb.com.
A
adaptação
de
sites
envolve
a
alteração
do
código
HTML
por
meio
da
inserção
ou
alteração
de
atributos
e
tags,
além
de
fatores
como
posicionamento
dos
elementos,
e
recursos
especiais
como
teclas
de
atalho
(Acessibilidade
Brasil).
Para
esse
trabalho
de
edição
de
código
primariamente
optamos
pelo
programa
Microsoft
FrontPage,
que
possui
uma
interface
relativamente
simples
de
utili-­‐
zar
e
nos
foi
disponibilizado
gratuitamente
através
de
parcerias
acadêmicas
da
Universidade
de
São
Paulo
com
a
Microsoft.
Podemos
citar
outros
programas
interessantes
e
com
igual
finalidade
e
desempenho
–
porém
que
possam
exigir
uma
curva
de
aprendizagem
maior
sem
que
o
mesmo
impacte
na
função
básica
da
edição
de
código
–
para
esse
trabalho,
como
o
Adobe
Dreamweaver
e
o
Mi-­‐
crosoft
Expression
Web,
e
até
mesmo
editores
de
texto
básicos,
como
o
Note-­‐
pad++,
e
o
EditPad,
que
também
poderiam
ser
utilizados.
Para
testes
de
acessibilidade,
além
da
revisão
pelos
já
citado
avaliador
online,
será
realizada
um
teste
manual,
com
um
programa
leitor
de
tela
acessando
os
sites.
O
programa
MicroPower
Virtual
Vision
responde
por
mais
de
75%
do
mercado
brasileiro
(SANTAROSA
&
SONZA,
2003)
e,
portanto,
o
teste
deverá
ser
feito
pelo
mesmo.
Como
o
navegador
de
internet
também
influencia
no
pro-­‐
grama
leitor
de
tela
e
na
própria
interpretação
e
formatação
da
página,
para
os
testes
foi
padronizado
o
uso
no
browser
Mozilla
Firefox,
que
é
portável
para
qualquer
sistema
operacional
e
quase
todos
os
tipos
de
dispositivo,
além
de
conseguir
renderizar
mais
elementos
que
o
Internet
Explorer,
utilizado
por
cerca
de
60%
dos
usuários
da
Internet
(NET
APPLICATIONS,
2010).
Pela
com-­‐
patibilidade
do
programa
leitor
de
tela,
utilizamos
como
ambiente
de
sistema
operacional
o
Microsoft
Windows.
1.3
FORMA
DE
ANÁLISE
DOS
RESULTADOS
Existem
critérios
que
podem
ser
utilizados
para
classificar
o
nível
de
acessibilidade
de
sites
da
web.
Esses
critérios
se
dividem
em
diretrizes
de
níveis
de
prioridades
depen-­‐
dendo
do
impacto
que
podem
causar
na
navegação
do
usuário.
Essas
diretrizes
estão
bem
definidas
em
um
documento
elaborado
pelo
Ministério
do
Planejamento
(Ministério
do
Planejamento,
Orçamento
e
Gestão),
Orçamento
e
Gestão
do
Brasil,
pa-­‐
ra
o
Modelo
de
Acessibilidade
do
Governo
Eletrônico
(e-­‐MAG).
A
diretriz
de
nível
de
prioridade
um
compreende
as
alterações
mais
importantes
e
fundamentais
para
que
uma
página
possa
ser
considerada
acessível.
Nesse
nível,
a
recomendação
é:
• Incluir
atributos
nas
tags
HTML,
como
alt
(texto
alternativo)
em
imagens
e
title
em
botões,
formulários,
campos
e
links;
• Criar
atalhos
de
teclado
que
apontem
para
links
importantes
da
página/site;
• Descrever
imagens,
e
elementos
visuais
e
de
realce
como
cores,
negrito,
itálico,
títulos,
etc.;
• Identificar
mudanças
no
idioma
de
um
texto
por
meio
do
atributo
lang;
• Assegurar
que
a
página
possa
ser
lida
sem
o
uso
de
folhas
de
estilo
(CSS);
A C H 2 0 4 2
–
R E S O L U Ç Ã O
D E
P R O B L E M A S
I I
–
T U R M A
L 4
–
G R U P O
A C E S S I B I L I D A D E
V I S U A L
8

10. UNIVERSIDADE
DE
SÃO
PAULO
ESCOLA
DE
ARTES,
CIÊNCIAS
E
HUMANIDADES
• Evitar
páginas
com
atualização
de
conteúdos
dinâmicos
ou
com
intermitência
na
tela;
• Utilizar
a
linguagem
mais
clara
e
simples
possível;
• Agrupar
imagens
com
links
num
bloco
quando
relacionados;
• Identificar
os
cabeçalhos
de
linhas
e
colunas
em
cada
célula
de
uma
tabela,
mesmo
com
vários
níveis
lógicos
(nesse
caso,
identificar
todos
os
cabeçalhos);
• Assegurar
que
a
página
possa
ser
utilizada
mesmo
com
controles
desativados
como
Javascript
ou
applets.
No
nível
de
prioridade
dois,
são
identificadas
e
recomendadas
correções
de
menor
impacto
que
no
nível
um,
mas
ainda
assim
importantes
para
maior
abrangência
do
grupo
que
será
beneficiado
pela
acessibilidade.
Estão
definidos:
• Assegurar
que
o
texto
possui
bom
contraste
com
a
cor/plano
de
fundo;
• Utilizar
Doctypes;
• utilizar
unidades
relativas,
e
não
absolutas,
na
construção
visual
da
página;
• Utilizar
elementos
de
cabeçalho
de
estrutura
de
texto
de
acordo
com
as
especi-­‐
ficações;
• Marcar
citações,
se
presentes
no
texto;
• Marcar
corretamente
listas
e
pontos
de
enumeração;
• Não
criar
páginas
que
se
atualizem
ou
redirecionem-­‐se
automaticamente;
• Não
criar
janelas
de
sobreposição,
nem
modificar
o
conteúdo
da
página
sem
que
o
usuário
seja
informado
disso;
• Dividir
grandes
blocos
de
informação
em
blocos
lógicos;
• Identificar
claramente
o
destino
de
cada
hyperlink;
• Fornecer
metadados
para
acrescentar
informações
semânticas
às
páginas;
• Dar
informações
sobre
a
organização
do
site
por
meio
de
um
mapa
ou
sumário;
• Evitar
uso
de
tabelas
(exceto
para
dados
tabulares);
• Assegurar
a
existência
de
rótulos
em
controles
de
formulários;
• Criar
programas
e
applets
diretamente
acessíveis
pelas
tecnologias
de
acessibi-­‐
lidade.
Por
último,
temos
o
nível
de
prioridade
três,
que
tem
por
diretrizes:
• Especificar
o
significado
de
siglas
e
abreviaturas
nos
documentos,
bem
como
o
idioma
utilizado
no
texto;
• Criar
uma
sequência
lógica
de
tabulação
para
acessar
os
itens
do
site
(atributo
tabindex);
• Inserir
espaços
entre
links
adjacentes;
• Fornecer
diversos
tipos
de
formatos
de
documentos
(pdf,
doc,
etc);
• Não
utilizar
arte
ASCII.
Com
base
nessas
diretrizes,
podemos
analisar
e
classificar
um
site
de
acordo
com
seu
nível
de
atendimento
às
recomendações
de
acessibilidade.
Para
a
elaboração
de
nosso
protótipo
de
site
acessível
a
partir
do
site
da
EACH,
tere-­‐
mos
como
mote
o
atendimento
ao
nível
um
das
prioridades
e
observações,
tornando
assim
nossa
produção
com
elementos
acessíveis
e
padronizada
para
grende
parte
dos
deficientes,
sem
prejudicar
a
estética
e
conteúdo
da
página.
A C H 2 0 4 2
–
R E S O L U Ç Ã O
D E
P R O B L E M A S
I I
–
T U R M A
L 4
–
G R U P O
A C E S S I B I L I D A D E
V I S U A L
9

11. UNIVERSIDADE
DE
SÃO
PAULO
ESCOLA
DE
ARTES,
CIÊNCIAS
E
HUMANIDADES
1.4
DESCRIÇÃO
DOS
CAPÍTULOS
Esta
dissertação
foi
estruturada
em
quatro
capítulos:
CAPÍTULO
1:
Apresenta
uma
breve
explanação
sobre
a
questão
da
acessibilidade
à
WEB,
a
impor-­‐
tância
da
internet
na
sociedade
moderna,
os
objetivos
que
pretendemos
alcançar
se-­‐
gundo
a
pergunta
“O
site
da
EACH
é
acessível
a
deficientes
visuais?”
e
os
materiais
e
métodos
que
nos
guiarão.
CAPÍTULO
2:
Descrição
do
questionário
aplicado
aos
alunos
da
EACH
e
análise
das
respostas
obti-­‐
das.
CAPÍTULO
3:
Análise
do
funcionamento
do
site
original
e
seus
problemas,
e
análise
do
protótipo
da
página
inicial
da
EACH.
CAPÍTULO
4:
Apresenta
a
conclusão
e
perspectivas
fiuturas.
A C H 2 0 4 2
–
R E S O L U Ç Ã O
D E
P R O B L E M A S
I I
–
T U R M A
L 4
–
G R U P O
A C E S S I B I L I D A D E
V I S U A L
10

12. UNIVERSIDADE
DE
SÃO
PAULO
ESCOLA
DE
ARTES,
CIÊNCIAS
E
HUMANIDADES
C A P Í T U L O
2
-­‐
L E V A N T A M E N T O
D E
D A D O S
2.1
DESCRIÇÃO
DO
FORMULÁRIO
O
questionário
era
composto
por
sete
perguntas
que
visavam
basicamente
conhecer
o
tipo
de
deficiência,
entre
as
opções
de
resposta
estavam:
visão
totalmente/
parcial-­‐
mente
reduzida
ou
daltonismo,
pois
esses
são
tipos
de
deficiência
visual
relevantes
no
nosso
trabalho,
já
que
o
indivíduo
que
possui
algum
desses
tipos
de
deficiência
encon-­‐
tra
barreiras
na
hora
de
acessar
um
site
que
não
foi
desenvolvido
seguindo
os
padrões
de
acessibilidade.
As
principais
dificuldades
encontradas
ao
acessar
o
site
da
EACH,
se
o
site
é
incompreensível
a
leitores
de
telas,
há
problemas
com
o
tamanho
do
tex-­‐
to/com
o
contraste
de
fundo
e
o
texto
ou
há
uma
grande
quantidade
de
links
e
menus
até
o
conteúdo.
E
o
que
poderia
ser
modificado
no
site
para
facilitar
o
seu
acesso,
onde
haviam
três
opções
de
resposta
:
tamanho
da
fonte,
compatibilidade
com
leitores
de
tela,
quantidade
de
links/
menus
até
o
conteúdo
principal,
e
um
espaço
para
que
fos-­‐
sem
escritas
sugestões.
O
questionário
foi
enviado
por
e-­‐mail
através
do
link
https://spreadsheets.google.com/viewform?formkey=dGdNZWloU1hya0NSMFQxMH
BFQjZzV0E6MQ
,
que
foi
aplicado
entre
os
dias
28/10/2010
e
01/11/2010
para
todos
os
alunos
da
Escola
de
Artes
Ciências
e
Humanidades.
2.2
DESCRIÇÃO
DOS
DADOS
QUESTÃO
1
-­‐
QUAL
O
SEU
CURSO?
Questão
1
TABELA
2.1-­‐
DADOS
DA
QUESTÃO
1
Sistemas
de
Informação
2
7%
SI
2
Marketing
2
7%
MKT
2
Licenciatura
em
Ciências
7
23%
LCN
7
da
Natureza
GA
4
Gestão
Ambiental
4
13%
TM
0
Têxtil
e
Moda
0
0%
Gestão
de
Políticas
Públicas
5
17%
GPP
5
Lazer
e
Turismo
4
13%
LZT
4
Ciências
da
Atividade
Física
2
7%
CAF
2
Gerontologia
1
3%
GER
1
Obstetrícia
2
7%
OBS
2
Nenhuma
das
Anteriores/
1
3%
N/A
1
Não
estudo
na
EACH
0
2
4
6
8
FIGURA
2.1-­‐
GRÁFICO
DA
QUESTÃO
1
A
Figura
2.1
apresenta
a
quantidade
de
pessoas
por
curso
que
respondeu
o
questionário.
O
resultado
obtido
foi:
Sistemas
de
Informação
(2),
Marketing
(2),
Licenciatura
em
Ciências
da
Natureza
(7),
Gestão
Ambiental
(4),
Têxtil
e
Moda
(0),
A C H 2 0 4 2
–
R E S O L U Ç Ã O
D E
P R O B L E M A S
I I
–
T U R M A
L 4
–
G R U P O
A C E S S I B I L I D A D E
V I S U A L
11

13. UNIVERSIDADE
DE
SÃO
PAULO
ESCOLA
DE
ARTES,
CIÊNCIAS
E
HUMANIDADES
Gestão
de
Políticas
Públicas
(5),
Lazer
e
Turismo
(4),
Ciências
da
Atividade
Física
(2),
Gerontologia
(1),
Obstetrícia
(2)
e
Nenhuma
das
anteriores/não
estudo
na
EACH
(1).
QUESTÃO
2
–
QUAL
SEU
TIPO
DE
DEFICIÊNCIA
VISUAL?
Questão
2
TABELA
2.2-­‐
DADOS
DA
QUESTÃO
2
Visão
totalmente
1
3%
reduzida
1
6
Visão
parcialmente
23
77%
Totalmente
reduzida
reduzida
(que
apresente
dificul-­‐
Parcialmente
dades
relevantes
Reduzida
para
o
acesso
a
web)
Daltonismo
Daltonismo
6
20%
23
FIGURA
2.2-­‐
GRÁFICO
DA
QUESTÃO
2
Na
Figura
2.2,
o
gráfico
representa
a
quantidade
de
pessoas
por
deficiência.
Apenas
1
pessoa
possui
visão
reduzida,
enquanto
23
apresentam
dificuldades
relevantes
para
acessar
a
WEB
e
6
possuem
daltonismo.
QUESTÃO
3
-­‐
VOCÊ
UTILIZA
A
INTERNET
COM
QUAL
FREQUÊNCIA
DIARIAMENTE?
Questão
3
TABELA
2.3-­‐
DADOS
DA
QUESTÃO
3
N/A
1
N/A
1
3%
até
meia
hora
1
3%
até
30min
1
até
uma
hora
5
17%
até
1h
5
até
duas
horas
6
20%
até
2h
6
três
horas
ou
17
57%
mais
até
3h
ou
mais
17
0
5
10
15
20
FIGURA
2.3-­‐
GRÁFICO
DA
QUESTÃO
3
Na
Figura
2.3,
é
apresentada
a
frequência
de
utilização
da
internet,
que
está
dividida
em
não
acesso(1),
acesso:
até
meia
hora(0),
até
uma
hora(5),
até
duas
horas
(6),
ou
até
três
horas(17).
A C H 2 0 4 2
–
R E S O L U Ç Ã O
D E
P R O B L E M A S
I I
–
T U R M A
L 4
–
G R U P O
A C E S S I B I L I D A D E
V I S U A L
12

14. UNIVERSIDADE
DE
SÃO
PAULO
ESCOLA
DE
ARTES,
CIÊNCIAS
E
HUMANIDADES
QUESTÃO
4
-­‐
QUAL
SUA
PRINCIPAL
DIFICULDADE
AO
NAVEGAR
PELA
INTERNET?
Questão
4
TABELA
2.4-­‐
DADOS
DA
QUESTÃO
4
Não
possuo
dificuldades
13
Não
possuo
dificul-­‐ 13
43%
dades
Tamanho
do
texto
6
Tamanho
do
texto
6
20%
Contraste
entre
texto
2
7%
Contraste
2
e
fundo
Site
incompreensível
por
Site
incompreensível
3
10%
3
por
leitor
de
tela
leitor
de
tela
Grande
quantidade
2
7%
QuanOdade
de
links
2
de
links/menus
até
o
conteúdo
Outros
4
Outros
4
13%
0
5
10
15
FIGURA
2.4-­‐
GRÁFICO
DA
QUESTÃO
4
Na
Figura
2.4,
são
apresentadas
as
principais
dificuldades
encontradas
ao
navegar
pela
internet
e
os
resultados
obtidos:
12
pessoas
não
possuem
dificuldades,
6
consideram
o
tamanho
do
texto
um
problema,
2
responderam
que
há
um
desajuste
com
o
contraste
entre
o
texto
e
o
fundo,
3
afirmam
que
o
site
é
imcompreensível
a
leitores
de
tela,
2
assinalaram
que
há
uma
grande
quantidade
de
links/
menus
até
o
contéudo,
e
4
alegaram
possuir
outros
problemas.
QUESTÃO
5
-­‐
VOCÊ
CONSIDERA
O
SITE
DA
EACH
ACESSÍVEL?
Questão
5
TABELA
2.5-­‐
DADOS
DA
QUESTÃO
5
Não
14
Sim
16
53%
Não
14
47%
Sim
16
0
5
10
15
20
FIGURA
2.5-­‐
GRÁFICO
DA
QUESTÃO
5
Na
figura
2.5,
é
retratado
que
16
pessoas
consideraram
o
site
da
EACH
acessível,
enquanto
14
não
o
consideraram
acessível.
A C H 2 0 4 2
–
R E S O L U Ç Ã O
D E
P R O B L E M A S
I I
–
T U R M A
L 4
–
G R U P O
A C E S S I B I L I D A D E
V I S U A L
13

15. UNIVERSIDADE
DE
SÃO
PAULO
ESCOLA
DE
ARTES,
CIÊNCIAS
E
HUMANIDADES
QUESTÃO
6
-­‐
SE
NÃO,
QUAIS
PROBLEMAS
DE
ACESSO
VOCÊ
ENCONTROU?
TABELA
2.6-­‐
DADOS
DA
QUESTÃO
6
Questão
6
Contraste
entre
fun-­‐
2
15%
do
e
cores
Contraste
2
Tamanho
do
texto
6
46%
Site
é
parcialmente
2
15%
Tamanho
do
Texto
6
ilegível
por
leitor
de
tela
Parcialmente
ilegível
por
2
Site
é
totalmente
1
8%
leitor
de
tela
ilegível
por
leitor
de
Totalmente
ilegível
por
1
tela
leitor
de
tela
Grande
quantidade
7
54%
QuanOdade
de
links
7
de
links/menus
até
o
conteúdo
principal
Outros
2
Outros
2
15%
As
pessoas
podem
marcar
mais
de
uma
0
2
4
6
8
caixa
de
seleção,
então
a
soma
das
percen-­‐
tagens
pode
ultrapassar
100%.
FIGURA
2.6-­‐
GRÁFICO
DA
QUESTÃO
6
Na
Figura
2.6,
são
apresentados
os
problemas
que
o
site
da
EACH
possui
e
os
resultados
apresentados:
contraste
entre
fundo
e
cores
(2),
tamanho
do
texto
(6),
site
parcialmente
ilegível
por
leitor
de
tela
(2),
site
totalmente
ilegível
por
leitor
de
tela
(1),
grande
quantidade
de
links/menus
até
o
conteúdo
principal
(7),
e
outro
(2).
QUESTÃO
7
-­‐
O
QUE
VOCÊ
GOSTARIA
QUE
FOSSE
MODIFICADO
NO
SITE
DA
EACH
PARA
FACILITAR
O
SEU
ACESSO?
Questão
7
TABELA
2.7-­‐
DADOS
DA
QUESTÃO
7
Tamanho
da
fon-­‐
11
55%
te
(textos)
Tamanho
do
texto
11
Compatibilidade
7
35%
com
leitores
de
CompaObilidade
com
tela
7
leitores
de
tela
Quantidade
de
9
45%
links/menus
até
QuanOdade
de
links
9
o
conteúdo
prin-­‐
cipal
Outros
7
Outros
7
35%
As
pessoas
podem
marcar
mais
de
uma
caixa
de
seleção,
então
a
soma
das
0
2
4
6
8
10
12
percentagens
pode
ultrapassar
100%.
FIGURA
2.7-­‐
GRÁFICO
DA
QUESTÃO
7
Na
figura
2.7,
é
apresentado
o
que
as
pessoas
gostariam
que
fosse
modificado
no
site
da
EACH,
essa
pergunta
admitia
mais
de
uma
resposta.
Entre
elas
estavam:
tamanho
da
fonte
(10),
compatibilidade
com
leitores
de
tela
(6),
quantidade
de
links/menus
até
o
conteúdo
principal
(8)
e
outros
(6).
A C H 2 0 4 2
–
R E S O L U Ç Ã O
D E
P R O B L E M A S
I I
–
T U R M A
L 4
–
G R U P O
A C E S S I B I L I D A D E
V I S U A L
14

16. UNIVERSIDADE
DE
SÃO
PAULO
ESCOLA
DE
ARTES,
CIÊNCIAS
E
HUMANIDADES
NÚMERO
DE
RESPOSTAS
DIÁRIAS
FIGURA
2.8-­‐
GRÁFICO
DA
QUANTIDADE
DE
RESPOSTAS
AO
QUESTIONÁRIO
POR
PERÍODO
Na
Figura
2.8,
é
apresentada
a
quantidade
diária
de
respostas.
2.3
ANÁLISE
DOS
RESULTADOS
Observamos
que
algumas
respostas
do
questionário
aplicado
aos
alunos
da
EACH
apresentaram
inconsistências,
como
é
o
caso
de
uma
pessoa
que
respondeu
que
pos-­‐
sui
visão
totalmente
reduzida,
e
que
alguns
dos
problemas
do
site
da
EACH
são
o
con-­‐
traste
entre
fundo
e
cores
e
o
tamanho
da
fonte
em
textos,
assim
conjeturamos
que
a
pessoa
não
prestou
atenção
na
palavra
“totalmente”.
Outra
incoerência
está
na
questão
5,
onde
52%
das
pessoas
que
a
responderam
consi-­‐
deram
o
site
acessível.
Esse
número
pode
ser
justificado,
pois
22
das
30
pessoas
que
responderam
o
questionário
possuem
visão
parcialmente
reduzida,
o
que
implica
di-­‐
zer
que
talvez
elas
não
utilizem
e
não
saibam
como
funciona
um
leitor
de
tela
e
que
consideram
como
acessível
um
lugar
ou
site
que
se
pode
alcançar,
pelo
simples
fato
de
conseguir
entrar
no
site,
já
o
considera
acessível.
Um
dos
maiores
problemas
encontrados
pelos
alunos
que
responderam
o
questioná-­‐
rio
é
o
tamanho
da
fonte.
Portanto
o
tamanho
dos
textos
apresentou
maior
porcenta-­‐
gem
de
respostas
na
questão
7
“O
que
você
gostaria
que
fosse
modificado
no
site
da
EACH
para
facilitar
o
seu
acesso?”
A C H 2 0 4 2
–
R E S O L U Ç Ã O
D E
P R O B L E M A S
I I
–
T U R M A
L 4
–
G R U P O
A C E S S I B I L I D A D E
V I S U A L
15

17. UNIVERSIDADE
DE
SÃO
PAULO
ESCOLA
DE
ARTES,
CIÊNCIAS
E
HUMANIDADES
C A P Í T U L O
3
–
D E S E N V O L V I M E N T O
D O
S I T E
3.1
DESCRIÇÃO
DO
SITE
O
site
da
EACH
pode
ser
acessado
através
do
link
‘http://each.uspnet.usp.br’.
É
o
por-­‐
tal
de
acesso
às
notícias,
serviços,
informações
e
contatos
da
Escola
de
Artes,
Ciências
e
Humanidades
(EACH)
da
Universidade
de
São
Paulo
(USP).
A
Figura
3.9
mostra
uma
captura
de
tela
do
site
da
EACH
que
foi
salvo
no
dia
5
de
novembro
de
2010
e
utiliza-­‐
mos
como
base
para
elaborar
nosso
protótipo
de
site
acessível.
FIGURA
3.9
-­‐
CAPTURA
DE
TELA
DO
SITE
DA
EACH
ORIGINAL,
DO
DIA
5/11/2010
A C H 2 0 4 2
–
R E S O L U Ç Ã O
D E
P R O B L E M A S
I I
–
T U R M A
L 4
–
G R U P O
A C E S S I B I L I D A D E
V I S U A L
16

18. UNIVERSIDADE
DE
SÃO
PAULO
ESCOLA
DE
ARTES,
CIÊNCIAS
E
HUMANIDADES
O
site
da
EACH
pode
ser
dividido
em
algumas
seções
lógicas
para
melhor
compreen-­‐
são
e
análise
de
sua
estrutura
(ver
Figura
3.10):
• Cabeçalho:
Parte
no
início
da
página,
que
contém
imagens
com
links
para
o
si-­‐
te
da
USP
e
da
EACH,
além
do
título
do
site.
• Menu:
Sistema
de
navegação
pelo
site
dividido
em
seções
específicas
e
bem
de-­‐
finidas.
Também
inclui
após
os
links
uma
imagem
do
campus
da
EACH
e
uma
caixa
de
texto
para
efetuar
pesquisas
no
site
por
um
mecanismo
do
Google.
• Corpo:
Contém
o
conteúdo
principal
do
site,
isto
é,
notícias,
informações,
tex-­‐
tos
e
links.
• Rodapé:
Faixa
decorativa
que
contém
somente
o
endereço
do
campus
da
EACH.
FIGURA
3.10
-­‐
SITE
DA
EACH
DIVIDIDO
EM
SEÇÕES
LÓGICAS
Dentro
dessa
divisão,
ao
analisar
comparativamente
o
site
com
os
padrões
de
acessibi-­‐
lidade
(ver
1.3
Forma
de
Análise
dos
Resultados),
enumeramos
os
problemas
e
difi-­‐
culdades
possíveis
de
ser
encontrados
por
um
deficiente
visual
no
site
da
EACH
e
sua
descrição
segue
na
Tabela
3.8.
A C H 2 0 4 2
–
R E S O L U Ç Ã O
D E
P R O B L E M A S
I I
–
T U R M A
L 4
–
G R U P O
A C E S S I B I L I D A D E
V I S U A L
17

19. UNIVERSIDADE
DE
SÃO
PAULO
ESCOLA
DE
ARTES,
CIÊNCIAS
E
HUMANIDADES
TABELA
3.8
-­‐
PROBLEMAS
IDENTIFICADOS
NO
SITE
DA
EACH
Cabeçalho
As
imagens
de
logotipo
da
USP
e
da
EACH
não
são
lidas
corretamente
pelo
leitor
de
tela,
pois
faltam
atributos
‘alt’
e
‘title’
em
suas
tags
HTML.
Menu
O
menu
de
links
foi
construído
de
forma
a
ser
navegável
apenas
por
um
dispositivo
apontador
na
tela
(com
propriedades
definidas
em
JavaS-­‐
cript
e
CSS
‘onmouseover’
e
‘hover’),
inviabilizando
determinantemente
o
acesso
pelo
teclado
aos
submenus.
A
caixa
de
pesquisa
do
Google
e
sua
imagem
correspondente
não
pos-­‐
suem
o
atributo
‘title’,
fazendo
com
que
sejam
incompreensíveis
na
na-­‐
vegação
por
leitor
de
tela.
Corpo
•As
imagens
presentes
na
seção
‘destaques’
não
são
lidas
corretamente
pelo
leitor
de
tela,
pois
faltam
atributo
‘alt’
e
‘title’
em
suas
tags
HTML.
•Para
evitar
repetição
de
links,
deve
haver
apenas
uma
tag
HTML
de
link
(‘<a>’)
que
compreende
a
imagem
e
o
texto
descritivo
juntos,
ao
invés
de
dois
links
separados.
•Foram
utilizadas
imagens
como
marcadores
de
listas
no
corpo.
Isso
não
é
recomendado
pois
o
leitor
de
tela
pode
tratar
essas
imagens
como
objetos
em
separado
e
tentar
ler
as
mesmas,
tornando
a
navega-­‐
ção
mais
confusa
e
extensa.
•Existem
partes
textuais
com
a
tag
‘<blink>’,
que
faz
o
texto
literalmen-­‐
te
piscar
na
tela
(Isso
foi
utilizado
para
destacar
as
palavras
“novo”
junto
a
links
novos).
O
uso
dessa
tag
não
é
recomendado
e
pode
gerar
problemas
na
leitura
por
um
leitor
de
tela.
•É
recomendado
inserir
o
atributo
‘title’
em
todos
os
links
presentes,
com
uma
descrição
que
seja
adequada
para
a
navegação
‘somente
tex-­‐
to’
(leitor
de
tela).
Rodapé
O
rodapé
está
de
acordo
com
os
padrões
de
acessibilidade.
A
ordem
de
leitura
do
site
por
um
navegador
de
texto
ou
por
um
leitor
de
tela
(ver
3.2
Descrição
do
Funcionamento)
segue
a
ordem
‘cabeçalho
–
menu
–
corpo
–
rodapé’,
logo,
outro
problema
identificado
é
a
existência
de
uma
grande
quantidade
de
links
que
tem
de
ser
percorridos
no
menu
até
que
se
consiga
acessar
o
conteúdo
principal
da
página,
isto
é,
o
corpo.
Analisando
ainda
o
código
fonte
da
página,
podemos
observar
que
o
site
foi
construído
em
sua
estrutura
e
conteúdo
em
HTML,
com
sua
estilização
feita
a
partir
de
dois
ar-­‐
quivos
externos
CSS
(estilos.css
e
estilos-­‐menu-­‐ddown-­‐new.css)
e
com
seu
funciona-­‐
mento
auxiliado
por
um
arquivo
externo
JavaScript
(script-­‐ddown-­‐new.js).
Desses
ar-­‐
quivos,
o
estilos.css
é
responsável
por
estilizar
todo
o
site,
exceto
pelo
menu
de
nave-­‐
gação,
que
é
estilizado
pelo
estilos-­‐menu-­‐ddown-­‐new.css.
O
arquivo
script-­‐ddown-­‐new.js
possui
apenas
a
função
de
fazer
o
menu
de
navegação
funcionar.
A
alteração
realizada
no
site
objetivava
que
o
mesmo
ficasse
esteticamente
igual
ao
original,
e
os
resultados
podem
ser
conferidos
na
Figura
3.11.
A C H 2 0 4 2
–
R E S O L U Ç Ã O
D E
P R O B L E M A S
I I
–
T U R M A
L 4
–
G R U P O
A C E S S I B I L I D A D E
V I S U A L
18

20. UNIVERSIDADE
DE
SÃO
PAULO
ESCOLA
DE
ARTES,
CIÊNCIAS
E
HUMANIDADES
FIGURA
3.11
–
CAPTURA
DE
TELA
DO
SITE
DA
EACH
DEPOIS
DE
ALTERADO
3.2
DESCRIÇÃO
DO
FUNCIONAMENTO
A
acessibilidade
em
sites
da
web
é
atingida
por
meio
de
alterações
em
sua
estrutura
e
conteúdo.
Toda
página
web
é
formada
pelo
código
de
marcação
HTML,
no
qual
os
objetos,
textos,
imagens
e
animações
são
definidos
por
tags
HTML
e
ajustados
e/ou
customizados
por
atributos
dentro
dessas
tags.
Um
exemplo
de
tag
HTML
para
um
parágrafo
de
texto
com
cor
vermelha,
é
“<p style=’color:red’>Texto</p>”,
que
produziria
o
resultado
“Texto”.
Analisando
esse
trexho
de
código,
temos
‘p’
como
o
nome
da
tag,
e
em
seguida
‘style’
como
um
atributo,
que
nesse
caso
define
formatação
CSS
de
estilo
para
o
conteúdo,
recebendo
o
valor
‘color:red’,
que
define
a
cor
de
um
objeto.
A C H 2 0 4 2
–
R E S O L U Ç Ã O
D E
P R O B L E M A S
I I
–
T U R M A
L 4
–
G R U P O
A C E S S I B I L I D A D E
V I S U A L
19

21. UNIVERSIDADE
DE
SÃO
PAULO
ESCOLA
DE
ARTES,
CIÊNCIAS
E
HUMANIDADES
Esse
nome
de
tag
e
seus
atributos,
que
podem
ser
tantos
quanto
necessários,
ficam
dentro
dos
sinais
‘<’
e
‘>’
representam
a
tag
de
abertura
HTML,
sendo
que
após
a
mesma
vem
o
conteúdo
para
o
qual
a
tag
e
as
propriedades
serão
aplicadas.
Quando
este
conteúdo
chega
ao
fim,
utiliza-­‐se
a
tag
de
fechamento
HTML,
que
é
simplesmente
o
mesmo
nome
da
tag
de
abertura,
mas
sem
atributos
e
com
uma
barra
após
o
sinal
‘<’.
Para
o
uso
desse
trabalho,
destaca-­‐se
a
inclusão
de
atributos
title
e
alt
dentro
de
tags
HTML
(sendo
o
alt
exclusivo
para
as
tags
de
imagem
–
img).
Esses
atributos
incluem
uma
propriedade
de
descrição
textual
alternativa
no
elemento
em
que
foram
inseri-­‐
das,
isto
é,
imagens
podem
ser
representadas
e
lidas
como
textos,
e
objetos
e
links
po-­‐
dem
possuir
uma
descrição
sobre
como
funcionam
ou
qual
sua
função.
Quanto
à
estrutura
de
uma
página,
uma
vez
que
a
navegação
pelo
teclado
é
feita
de
forma
linear
como
se
toda
a
página
fosse
um
texto,
devem
ser
prestadas
atenções
quanto
à
quantidade
de
links,
menus,
imagens
e
objetos
que
devem
ser
percorridos
até
chegar-­‐se
ao
conteúdo
principal.
Uma
solução
possível
para
casos
onde
obrigatori-­‐
amente
há
essa
grande
quantidade
de
objetos
(o
que
ocorre
na
maioria
absoluta
dos
sites),
é
a
inclusão
de
links
invisíveis
logo
após
o
cabeçalho
da
página
(no
início
da
tag
‘<body>’).
Esses
links
são
construídos
como
um
link
comum
(com
a
tag
de
abertura
‘<a>’,
e
a
de
fechamento
‘</a>’),
porém
não
possuem
nada
entre
suas
tags
de
abertu-­‐
ra
e
fechamento,
possuem
o
atributo
‘href’
ajustado
como
‘#link’
(onde
‘link’
é
o
nome
da
âncora,
ou
seja,
para
que
parte
da
página
o
link
levará),
e
o
atributo
‘title’
ajustado
por
exemplo
como
‘Ir
para
link’.
Deve-­‐se
ainda,
incluir
um
atribudo
‘id’
com
o
nome
‘link’
na
tag
que
representa
o
local
desejado.
Como
exemplo,
podemos
ter
o
seguinte
código:
<a href=”#menu” title=”Ir para menu”></a>
<table id=”menu”>Menu principal</table>
Esse
código
seria
traduzido
pelo
leitor
de
tela
como
“Ir
para
o
menu”,
e
um
acesso
ao
mesmo
faria
com
que
o
foco
se
deslocasse
até
o
menu
da
página
–
Nesse
caso
a
tabela
com
o
‘id=”menu”’.
Para
que
as
imagens
e
objetos
sejam
considerados
acessíveis,
deve-­‐se
fornecer
aos
mesmos
os
atributos
‘alt’
e
‘title’,
que
atribuem
um
texto
alternativo
descriti-­‐
vo.
A
linguagem
utilizada
nesse
texto
deve
ser
clara
e
autoexplicativa.
Para
efeito
de
exemplo,
considere
a
inserção
desses
atributos
numa
imagem
que
representa
uma
fotografia
de
um
prédio
numa
avenida:
<img src=”foto.jpg” alt=”Foto de um prédio cinza com quatro
andares numa avenida movimentada” title=”Foto de um prédio
cinza com quatro andares numa avenida movimentada”>
Com
essa
tag,
seria
exibido
o
arquivo
‘foto.jpg’,
que
quando
focado
por
um
leitor
de
tela
ou
pelo
mouse,
exibiria
o
texto
alternativo
“Foto
de
um
prédio
cinza
com
quatro
andares
numa
avenida
movimentada”.
É
recomendável
inserir
tanto
o
atributo
title
quanto
o
alt
nas
imagens,
sendo
que
os
demais
objetos
e
tags
aceitam
apenas
o
title.
Quanto
a
um
menu
de
links
com
submenus,
seu
código
deve
ser
previamente
idealiza-­‐
do
de
forma
a
comportar
a
acessibilidade
no
que
tange
ao
acesso
aos
links
dos
subme-­‐
nus.
A
maioria
dos
sites
que
possuem
menus
com
submenus
e
não
são
acessíveis
utili-­‐
za
o
foco
do
mouse
como
evento
para
mostrar
ou
ocultar
os
submenus
e
seus
links,
inviabilizando
um
acesso
pelo
teclado.
A C H 2 0 4 2
–
R E S O L U Ç Ã O
D E
P R O B L E M A S
I I
–
T U R M A
L 4
–
G R U P O
A C E S S I B I L I D A D E
V I S U A L
20