Post on 12-Jan-2015
description
ACESSIBILIDADENA WEBPRINCIPAIS PROBLEMASE 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 deacessibilidade?
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 quemutiliza leitor de tela.
Para construir sites acessíveis,temos que entender como as pessoas queprecisam de acessibilidade navegam na internet.
Antes de tudo
Principaisleitores de tela
NVDAwww.nvaccess.org/download/
JAWSwww.freedomscientific.com/products/fs/jaws-product-page.asp
Mas como os leitoresde tela funcionam?
?
Quais os principaisproblemas de acessibilidade?
Como resolvê-los?
#1
ACESSIBILIDADE EIDIOMA
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 EIMAGENS
Foto:http://www.flickr.com/photos/danzen/1172367594/in/photostream/
Problema: imagens sem atributo alt
Errado
<img src="http://exemplo.com/psUakw12948001938.jpg">
Certo
<img src="http://exemplo.com/psUakw12948001938.jpg" alt= Dois ratos brancos, umem 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/psUakw12948001938.jpg">
Certo
<img src="http://exemplo.com/psUakw12948001938.jpg" alt= Dois ratos brancos, umem cima do outro, adormecendo numa rede >
""
2. Acessibilidade e imagens
Dica:
Se a existência da
imagem é apenas estética
e não complementa
o conteúdo, deixe o alt
vazio.Foto:http://www.flickr.com/photos/35597202@N02/4424721119/
ACESSIBILIDADE ELINKS
#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 ensinarao seu ratinho
Faça download do guia “Como cuidardo 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 EFONTE
#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 puder aumentar
a fonte, coloque um
controlador de tamanho.
ACESSIBILIDADE ENAVEGAÇÃ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údoque interessa
Certo
Colocar um link “Pularpara 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údoque interessa
Certo
Colocar um link “Pularpara o conteúdo principal”no começo da página
Dica:
Você pode deixar o link
invisível com CSS que o
leitor de tela o lerá
de qualquer 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 ajudamo 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
navigationColeçã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
applicationRegiã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
applicationRegiã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:
Pesquise sobre landmarks
na documentação oficial
do W3C.
http://www.w3.org/TR/wai-
aria
ACESSIBILIDADE ESEMÂ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 EFORMULÁ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ésde 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 direcioneo usuário para o campoa ser corrigido, atravésde 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 tabindex="-1" no
<p> que contém o
feedback da validação,
para que o usuário vá
direto a ele após o envio
do formulário.
#9
ACESSIBILIDADE EMENUS
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 ECORES
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.htmlColour 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 basenos padrões WCAG 2.0.
Validador de acessibilidade
Obrigada!
@julianafrost
juliana@vivendoporai.com.br
www.vivendoporai.com.br
www.slideshare.com/julianafrost
Foto
: htt
p:/
/theberr
y.c
om
/