Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
PALESTRA Acessibilidade Web
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
ACESSIBILIDADE
NA WEB
PRINCIPAIS PROBLEMAS
E SOLUÇÕES
JULHO DE 2013
Quem eu sou?
@julianafrost
juliana@vivendoporai.com.br
vivendoporai.com.br
Juliana Fernandes
Arquiteta da Informação na Alligo
O que veremos?
Acessibilidade e...
Idioma
Imagens
Links
Fontes
Navegação rápida
Landmarks
Semântica
Formulários
Menus
Cores
Mas quem é
que precisa de
acessibilidade?
TODO MUNDO.
Alguns por um período,
outros o tempo todo.
Foto:
http://www.flickr.com/photos/santheo/2438840018/in/photostream/
Foto:
http://www.flickr.com/photos/usembassyta/8147385353/in/photostream/
Foto:
http://www.flickr.com/photos/ytueresburroyyomemonto/2848997619/in/photostream/
Foco da palestra:
Acessibilidade para quem
utiliza leitor de tela.
Para construir sites acessíveis,
temos que entender como as pessoas que
precisam de acessibilidade navegam na internet.
Antes de tudo
Principais
leitores de tela
NVDA
www.nvaccess.org/download/
JAWS
www.freedomscientific.com/products/fs/jaws-product-page.asp
Mas como os leitores
de tela funcionam?
?
Quais os principais
problemas de acessibilidade?
Como resolvê-los?
#1
ACESSIBILIDADE E
IDIOMA
Foto:
http://www.flickr.com/photos/joshua/3318674106/in/photostream/
Problema: páginas sem a declaração do idioma
Certo
Declarar o idioma na estrutura do site.
Como fazer?
<html lang="pt-br">
1. Acessibilidade e idioma1. Acessibilidade e idioma
#2
ACESSIBILIDADE E
IMAGENS
Foto:
http://www.flickr.com/photos/danzen/1172367594/in/photostream/
Problema: imagens sem atributo alt
Errado
<img src="http://exemplo.com/psUakw12948
001938.jpg">
Certo
<img src="http://exemplo.com/psUakw12948
001938.jpg" alt= Dois ratos brancos, um
em cima do outro, adormecendo numa rede >
"
"
2. Acessibilidade e imagens
Foto:
http://www.flickr.com/photos/35597202@N02/4424721119/
Problema: imagens sem atributo alt
Errado
<img src="http://exemplo.com/psUakw12948
001938.jpg">
Certo
<img src="http://exemplo.com/psUakw12948
001938.jpg" alt= Dois ratos brancos, um
em cima do outro, adormecendo numa rede >
"
"
2. Acessibilidade e imagens
Dica:
Se a exis
tência da
imagem é
apenas e
stética
e não com
plementa
o conteúd
o, deixe o
alt
vazio.
Foto:
http://www.flickr.com/photos/35597202@N02/4424721119/
ACESSIBILIDADE E
LINKS
#3 Foto:http://www.flickr.com/photos/agentkramer/8164840482/in/photostream/
3. Acessibilidade e links
Problema: navegando pelos links através do tab
(ou: que link é esse?)
Errado
Clique aqui
Saiba mais
Leia mais
Download
Certo
Veja fotos de ratos albinos
Leia mais sobre truques para ensinar
ao seu ratinho
Faça download do guia “Como cuidar
do seu rato de estimação” em PDF (1mb)
Problema: navegando pelos links através do tab
(ou: em que link eu tô?)
3. Acessibilidade e links
Como fazer?
a:focus {
outline:1px solid #000;
}
Certo
ACESSIBILIDADE E
FONTE
#4 Foto:http://www.flickr.com/photos/revdancatt/5558653828/in/photostream/
4. Acessibilidade e fonte
Problema: texto ilegível
Errado
Fonte equivalente a 12px
Certo
Fonte equivalente a PELO MENOS 16px
4. Acessibilidade e fonte
Problema: texto ilegível
Errado
Fonte equivalente a 12px
Certo
Fonte equivalente a PELO MENOS 16px
Dica:
Se não pu
der aume
ntar
a fonte, c
oloque um
controlad
or de tam
anho.
ACESSIBILIDADE E
NAVEGAÇÃO RÁPIDA +
LANDMARKS
#5 Foto:http://www.flickr.com/photos/shanepope/2375499336/
5. Acessibilidade e navegação rápida +
landmarks
Problema: falta de atalho para ir direto ao conteúdo
que interessa
Certo
Colocar um link “Pular
para o conteúdo principal”
no começo da página
5. Acessibilidade e navegação rápida +
landmarks
Problema: falta de atalho para ir direto ao conteúdo
que interessa
Certo
Colocar um link “Pular
para o conteúdo principal”
no começo da página
Dica:
Você pod
e deixar o
link
invisível c
om CSS q
ue o
leitor de t
ela o lerá
de qualqu
er forma.
5. Acessibilidade e navegação rápida +
landmarks
Problema: falta de ladmarks
Landmarks são marcações adicionais no HTML
que indicam que tipo de conteúdo existe numa
determinada parte da página e ajudam
o usuário a chegar rapidamente nela.
5. Acessibilidade e navegação rápida +
landmarks
Problema: falta de ladmarks
Principais landmarks
banner
navigation
main
complementary
contentinfo
form
search
application
5. Acessibilidade e navegação rápida +
landmarks
banner
navigation
Coleção de elementos navegacionais, geralmente links. Ex.: menus ou links
que permitem o usuário navegar pelo documento. Permitido + de 1 por pág.
main
Região que contém informações relacionadas ao site e não a página em si.
Ex.: marca, nome do site, caixa de pesquisa, etc. Somente 1 por página.
Principal conteúdo da página. Equivalente ao conteúdo que o link “pular para
o conteúdo principal” levaria. Somente 1 por página.
5. Acessibilidade e navegação rápida +
landmarks
complementary
contentinfo
Área que contém informações sobre o documento pai. Ex.: copyright, sobre o
autor, etc.
form
Seção que complementa o role=”main”, mas que possui significado se isolado.
Ex.: posts relacionados, sidebar, etc. Permitido + de 1 por página.
Somente 1 por página.
Área com um conjunto de itens que compõe um formulário. Permitido + de 1
por página.
5. Acessibilidade e navegação rápida +
landmarks
search
application
Região que contém alguma aplicação que interage com o teclado, onde o
leitor de telas deve devolver o controle do teclado à aplicação. Ex.: jogos,
alguns webmails, etc.
Área que contém alguma ferramenta que auxilia a pesquisa dentro do site.
Permitido + de 1 por página.
5. Acessibilidade e navegação rápida +
landmarks
search
application
Região que contém alguma aplicação que interage com o teclado, onde o
leitor de telas deve devolver o controle do teclado à aplicação. Ex.: jogos,
alguns webmails, etc.
Área que contém alguma ferramenta que auxilia a pesquisa dentro do site.
Permitido + de 1 por página. Dica:
Pesquis
e sobre
landmar
ks
na docu
mentaçã
o oficial
do W3C
.
http://ww
w.w3.org
/TR/wai-
aria
ACESSIBILIDADE E
SEMÂNTICA
#7 Foto:http://www.flickr.com/photos/nolanus/5848333881/in/photostream/
7. Acessibilidade e semântica
Problema: falta de cabeçalhos e parágrafo
Errado
<div class="titulo-primario">Como Cuidar de Ratos</div>
<div class="texto">Os ratos têm requisitos nutricionais...</div>
<div class="titulo-secundario">Alimentação</div>
Certo
<h1>Como Cuidar de Ratos</h1>
<h2>Alimentação</h2>
<p>Os ratos têm requisitos nutricionais...<p>
7. Acessibilidade e semântica
Problema: falta de listas
Errado
<a href="#link">Item 1</a>
<a href="#link"> </a>
<a href="#link"> </a>
Item 2
Item 3
Certo
<ul>
<li><a href="#link">Item 1</li>
<li><a href="#link">Item 2</a></li>
<li><a href="#link">Item 3</a></li>
</ul>
#8
ACESSIBILIDADE E
FORMULÁRIOS
8. Acessibilidade e formulários
Problema: campos sem identificação
Errado
<p>Nome</p>
<input type="text" name="nome">
Certo
<label for="nome">Nome</label>
<input type="text" name="nome" id="nome">
8. Acessibilidade e formulários
Problema: campos sem identificação
Errado
<input type="checkbox" name="rato"/>Ratos albinos
Certo
<input type="checkbox" name="rato" id="rato"/>
<label for="rato">Ratos albinos</label>8. Acessibilidade e formulários
Problema: campos sem identificação
Errado
<input type="radio" name="ubuntu"/>Ubuntu
Certo
<input type="radio" name="ubuntu" id="ubuntu"/>
<label for="ubuntu">Ubuntu</label>
8. Acessibilidade e formulários
Problema: campos genéricos
Errado
<label for="mail">E-mail</label>
<input type="text" name="mail" id="mail"/>
Certo
<label for="mail">E-mail</label>
<input type="email" name="mail" id="mail"/>
8. Acessibilidade e formulários
Problema: preenchimento obrigatório mal indicado
Errado
<p>Os campos com asterisco são obrigatórios</p>
<label for="nome">Nome*</label>
<input type="text" name="nome" id="nome">
Certo
<p>Os campos com asterisco são obrigatórios</p>
<label for="nome">Nome*</label>
<input type="text" name="nome" id="nome" aria-required="true">
8. Acessibilidade e formulários
Problema: usabilidade ruim no feedback
Certo
Feedback que direcione
o usuário para o campo
a ser corrigido, através
de um link
Como fazer?
Foram encontrados 2 erros
no formulário preenchido:
1.
2.
Informe seu nome
Informe um e-mail válido
Nome
8. Acessibilidade e formulários
Problema: usabilidade ruim no feedback
Certo
Feedback que direcione
o usuário para o campo
a ser corrigido, através
de um link
Como fazer?
Foram encontrados 2 erros
no formulário preenchido:
1.
2.
Informe seu nome
Informe um e-mail válido
Nome
Dica:
Utilize ta
bindex=
"-1" no
<p> que
contém
o
feedbac
k da val
idação,
para que
o usuár
io vá
direto a
ele após
o envio
do formu
lário.
#9
ACESSIBILIDADE E
MENUS
9. Acessibilidade e menus
Problema: submenus invisíveis
Certo
Os menus devem se abrir após o tab, deixando os
submenus visíveis e navegáveis via teclado
Como fazer?
Utilizando CSS + JavaScript. Exemplo para estudo em:
http://tinyurl.com/menuacessivel
#9
ACESSIBILIDADE E
CORES
Foto:
http://www.flickr.com/photos/ngdx/9103091527/in/photostream/
9. Acessibilidade e cores
Problema: constraste ruim
9. Acessibilidade e cores
Problema: constraste ruim
Diferença de cor:
Diferença de brilho:
deveria ser maior que 500 e é 114
deveria ser maior que 125 e é 32
9. Acessibilidade e cores
Problema: contraste ruim
9. Acessibilidade e cores
Problema: contraste ruim
Diferença de cor:
Diferença de brilho:
deveria ser maior que 500 e é 141
deveria ser maior que 125 e é 43
Problema: contraste ruim
http://www.snook.ca/technical/colour_contrast/colour.html
Colour Contrast Check
Ferramenta para verificar contraste de cores.
8. Acessibilidade e cores
9. Acessibilidade e cores
Problema: cores e daltonismo
9. Acessibilidade e cores
Problema: cores e daltonismo
Problema: cores e daltonismo
http://colororacle.org/
Color Oracle
Ferramenta para simular tipos de daltonismo.
9. Acessibilidade e cores
Bônus!
http://wave.webaim.org/
WAVE Web Accessibility Tool
Ferramenta para avaliar a acessibilidade do site com base
nos padrões WCAG 2.0.
Validador de acessibilidade
Obrigada!
@julianafrost
juliana@vivendoporai.com.br
www.vivendoporai.com.br
www.slideshare.com/julianafrost
F
o
t
o
:
h
t
t
p
:
/
/
t
h
e
b
e
rr
y
.c
o
m
/
Página 1
Página 2
Página 3
Página 4
Página 5
Página 6
Página 7
Página 8
Página 9
Página 10
Página 11
Página 12
Página 13
Página 14
Página 15
Página 16
Página 17
Página 18
Página 19
Página 20
Página 21
Página 22
Página 23
Página 24
Página 25
Página 26
Página 27
Página 28
Página 29
Página 30
Página 31
Página 32
Página 33
Página 34
Página 35
Página 36
Página 37
Página 38
Página 39
Página 40
Página 41
Página 42
Página 43
Página 44
Página 45
Página 46
Página 47
Página 48
Página 49
Página 50
Página 51
Página 52
Página 53
Página 54
Página 55
Página 56
Página 57
Página 58
Página 59Materiais relacionados
85 pág.
74 pág.
Perguntas relacionadas
Compartilhar