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 Al...
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.
An...
Principais
leitores de tela
NVDA
www.nvaccess.org/download/
JAWS
www.freedomscientific.com/products/fs/jaws-product-page.a...
Mas como os leitores
de tela funcionam?
?
Quais os principais
problemas de acessibilidade?
Como resolvê-los?
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">...
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://exe...
Problema: imagens sem atributo alt
Errado
<img src="http://exemplo.com/psUakw12948
001938.jpg">
Certo
<img src="http://exe...
ACESSIBILIDADE E
LINKS
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 m...
Problema: navegando pelos links através do tab
(ou: em que link eu tô?)
3. Acessibilidade e links
Como fazer?
a:focus {
ou...
ACESSIBILIDADE E
FONTE
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 16...
4. Acessibilidade e fonte
Problema: texto ilegível
Errado
Fonte equivalente a 12px
Certo
Fonte equivalente a PELO MENOS 16...
ACESSIBILIDADE E
NAVEGAÇÃO RÁPIDA +
LANDMARKS
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
...
5. Acessibilidade e navegação rápida +
landmarks
Problema: falta de atalho para ir direto ao conteúdo
que interessa
Certo
...
5. Acessibilidade e navegação rápida +
landmarks
Problema: falta de ladmarks
Landmarks são marcações adicionais no HTML
qu...
5. Acessibilidade e navegação rápida +
landmarks
Problema: falta de ladmarks
Principais landmarks
banner
navigation
main
c...
5. Acessibilidade e navegação rápida +
landmarks
banner
navigation
Coleção de elementos navegacionais, geralmente links. E...
5. Acessibilidade e navegação rápida +
landmarks
complementary
contentinfo
Área que contém informações sobre o documento p...
5. Acessibilidade e navegação rápida +
landmarks
search
application
Região que contém alguma aplicação que interage com o ...
5. Acessibilidade e navegação rápida +
landmarks
search
application
Região que contém alguma aplicação que interage com o ...
ACESSIBILIDADE E
SEMÂNTICA
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...
7. Acessibilidade e semântica
Problema: falta de listas
Errado
<a href="#link">Item 1</a>
<a href="#link"> </a>
<a href="#...
ACESSIBILIDADE E
FORMULÁRIOS
8. Acessibilidade e formulários
Problema: campos sem identificação
Errado
<p>Nome</p>
<input type="text" name="nome">
Cert...
8. Acessibilidade e formulários
Problema: campos sem identificação
Errado
<input type="checkbox" name="rato"/>Ratos albino...
8. Acessibilidade e formulários
Problema: campos sem identificação
Errado
<input type="radio" name="ubuntu"/>Ubuntu
Certo
...
8. Acessibilidade e formulários
Problema: campos genéricos
Errado
<label for="mail">E-mail</label>
<input type="text" name...
8. Acessibilidade e formulários
Problema: preenchimento obrigatório mal indicado
Errado
<p>Os campos com asterisco são obr...
8. Acessibilidade e formulários
Problema: usabilidade ruim no feedback
Certo
Feedback que direcione
o usuário para o campo...
8. Acessibilidade e formulários
Problema: usabilidade ruim no feedback
Certo
Feedback que direcione
o usuário para o campo...
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...
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 é 1...
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 é 14...
Problema: contraste ruim
http://www.snook.ca/technical/colour_contrast/colour.html
Colour Contrast Check
Ferramenta para v...
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. Acessibi...
Bônus!
http://wave.webaim.org/
WAVE Web Accessibility Tool
Ferramenta para avaliar a acessibilidade do site com base
nos p...
Obrigada!
@julianafrost
juliana@vivendoporai.com.br
www.vivendoporai.com.br
www.slideshare.com/julianafrost
Foto:http://th...
Acessibilidade na Web: Principais problemas e Soluções - FISL14
Acessibilidade na Web: Principais problemas e Soluções - FISL14
Próximos SlideShares
Carregando em…5
×

Acessibilidade na Web: Principais problemas e Soluções - FISL14

7.521 visualizações

Publicada em

Palestra dada no FISL14 sobre acessibilidade na web, que aborda os principais problemas encontrados na web e como resolvê-los.

Vídeo da palestra:
http://www.youtube.com/watch?v=yFeOdjCU8rU

Post no blog:
http://www.vivendoporai.com.br/acessibilidade-web-principais-problemas-solucoes-fisl14/

Publicada em: Tecnologia
2 comentários
26 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
7.521
No SlideShare
0
A partir de incorporações
0
Número de incorporações
1.271
Ações
Compartilhamentos
0
Downloads
216
Comentários
2
Gostaram
26
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Acessibilidade na Web: Principais problemas e Soluções - FISL14

  1. 1. ACESSIBILIDADE NA WEB PRINCIPAIS PROBLEMAS E SOLUÇÕES JULHO DE 2013
  2. 2. Quem eu sou? @julianafrost juliana@vivendoporai.com.br vivendoporai.com.br Juliana Fernandes Arquiteta da Informação na Alligo
  3. 3. O que veremos? Acessibilidade e... Idioma Imagens Links Fontes Navegação rápida Landmarks Semântica Formulários Menus Cores
  4. 4. Mas quem é que precisa de acessibilidade ?
  5. 5. TODO MUNDO. Alguns por um período, outros o tempo todo.
  6. 6. Foto: http://www.flickr.com/photos/santheo/2438840018/in/photostream/
  7. 7. Foto: http://www.flickr.com/photos/usembassyta/8147385353/in/photostream/
  8. 8. Foto: http://www.flickr.com/photos/ytueresburroyyomemonto/2848997619/in/photostream/
  9. 9. Foco da palestra: Acessibilidade para quem utiliza leitor de tela.
  10. 10. Para construir sites acessíveis, temos que entender como as pessoas que precisam de acessibilidade navegam na internet. Antes de tudo
  11. 11. Principais leitores de tela NVDA www.nvaccess.org/download/ JAWS www.freedomscientific.com/products/fs/jaws-product-page.asp
  12. 12. Mas como os leitores de tela funcionam? ?
  13. 13. Quais os principais problemas de acessibilidade? Como resolvê-los?
  14. 14. ACESSIBILIDADE E IDIOMA Foto: http://www.flickr.com/photos/joshua/3318674106/in/photostream/
  15. 15. 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
  16. 16. ACESSIBILIDADE E IMAGENS Foto: http://www.flickr.com/photos/danzen/1172367594/in/photostream/
  17. 17. 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/
  18. 18. 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 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/
  19. 19. ACESSIBILIDADE E LINKS Foto: http://www.flickr.com/photos/agentkramer/8164840482/in/photostream/
  20. 20. 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)
  21. 21. 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
  22. 22. ACESSIBILIDADE E FONTE Foto: http://www.flickr.com/photos/revdancatt/5558653828/in/photostream/
  23. 23. 4. Acessibilidade e fonte Problema: texto ilegível Errado Fonte equivalente a 12px Certo Fonte equivalente a PELO MENOS 16px
  24. 24. 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.
  25. 25. ACESSIBILIDADE E NAVEGAÇÃO RÁPIDA + LANDMARKS Foto: http://www.flickr.com/photos/shanepope/2375499336/
  26. 26. 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
  27. 27. 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ê pode deixar o link invisível com CSS que o leitor de tela o lerá de qualquer forma.
  28. 28. 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.
  29. 29. 5. Acessibilidade e navegação rápida + landmarks Problema: falta de ladmarks Principais landmarks banner navigation main complementary contentinfo form search application
  30. 30. 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.
  31. 31. 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.
  32. 32. 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.
  33. 33. 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: Pesquise sobre landmarks na documentação oficial do W3C. http://www.w3.org/TR/wai- aria
  34. 34. ACESSIBILIDADE E SEMÂNTICA Foto: http://www.flickr.com/photos/nolanus/5848333881/in/photostream/
  35. 35. 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>
  36. 36. 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>
  37. 37. ACESSIBILIDADE E FORMULÁRIOS
  38. 38. 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">
  39. 39. 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>
  40. 40. 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>
  41. 41. 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"/>
  42. 42. 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">
  43. 43. 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
  44. 44. 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 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.
  45. 45. ACESSIBILIDADE E MENUS
  46. 46. 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
  47. 47. ACESSIBILIDADE E CORES Foto: http://www.flickr.com/photos/ngdx/9103091527/in/photostream/
  48. 48. 9. Acessibilidade e cores Problema: constraste ruim
  49. 49. 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
  50. 50. 9. Acessibilidade e cores Problema: contraste ruim
  51. 51. 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
  52. 52. 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
  53. 53. 9. Acessibilidade e cores Problema: cores e daltonismo
  54. 54. 9. Acessibilidade e cores Problema: cores e daltonismo
  55. 55. Problema: cores e daltonismo http://colororacle.org/ Color Oracle Ferramenta para simular tipos de daltonismo. 9. Acessibilidade e cores
  56. 56. 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
  57. 57. Obrigada! @julianafrost juliana@vivendoporai.com.br www.vivendoporai.com.br www.slideshare.com/julianafrost Foto:http://theberry.com/

×