Acessibilidade na Web: Principais problemas e Soluções - FISL14
•
27 likes•9,088 views
1. O documento discute os principais problemas de acessibilidade na web e soluções, cobrindo tópicos como idioma, imagens, links, fontes, navegação, semântica e formulários. 2. Problemas comuns incluem falta de atributos alt em imagens, links sem texto descritivo, fontes pequenas e baixo contraste de cores. 3. Soluções como adicionar atributos alt, usar texto descritivo para links, aumentar o tamanho da fonte e garantir bom contraste de cores podem resolver esses problemas e
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Acessibilidade na Web: Principais problemas e Soluções - FISL14
Similar to Acessibilidade na Web: Principais problemas e Soluções - FISL14 (20)
Recently uploaded
Recently uploaded (6)
Acessibilidade na Web: Principais problemas e Soluções - FISL14
- 1. ACESSIBILIDADE NA WEB PRINCIPAIS PROBLEMAS E SOLUÇÕES JULHO DE 2013
- 2. Quem eu sou? @julianafrost juliana@vivendoporai.com.br vivendoporai.com.br Juliana Fernandes Arquiteta da Informação na Alligo
- 3. O que veremos? Acessibilidade e... Idioma Imagens Links Fontes Navegação rápida Landmarks Semântica Formulários Menus Cores
- 4. Mas quem é que precisa de acessibilidade ?
- 5. TODO MUNDO. Alguns por um período, outros o tempo todo.
- 10. Foco da palestra: Acessibilidade para quem utiliza leitor de tela.
- 11. Para construir sites acessíveis, temos que entender como as pessoas que precisam de acessibilidade navegam na internet. Antes de tudo
- 13. Mas como os leitores de tela funcionam? ?
- 14. Quais os principais problemas de acessibilidade? Como resolvê-los?
- 16. 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
- 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 Foto: http://www.flickr.com/photos/35597202@N02/4424721119/
- 19. 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/
- 20. ACESSIBILIDADE E LINKS Foto: http://www.flickr.com/photos/agentkramer/8164840482/in/photostream/
- 21. 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)
- 22. 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
- 24. 4. Acessibilidade e fonte Problema: texto ilegível Errado Fonte equivalente a 12px Certo Fonte equivalente a PELO MENOS 16px
- 25. 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.
- 26. ACESSIBILIDADE E NAVEGAÇÃO RÁPIDA + LANDMARKS Foto: http://www.flickr.com/photos/shanepope/2375499336/
- 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
- 28. 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.
- 29. 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.
- 30. 5. Acessibilidade e navegação rápida + landmarks Problema: falta de ladmarks Principais landmarks banner navigation main complementary contentinfo form search application
- 31. 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.
- 32. 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.
- 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.
- 34. 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
- 36. ACESSIBILIDADE E SEMÂNTICA Foto: http://www.flickr.com/photos/nolanus/5848333881/in/photostream/
- 37. 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>
- 38. 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>
- 40. 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">
- 41. 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>
- 42. 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>
- 43. 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"/>
- 44. 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">
- 45. 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
- 46. 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.
- 48. 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
- 50. 9. Acessibilidade e cores Problema: constraste ruim
- 51. 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
- 52. 9. Acessibilidade e cores Problema: contraste ruim
- 53. 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
- 54. 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
- 55. 9. Acessibilidade e cores Problema: cores e daltonismo
- 56. 9. Acessibilidade e cores Problema: cores e daltonismo
- 57. Problema: cores e daltonismo http://colororacle.org/ Color Oracle Ferramenta para simular tipos de daltonismo. 9. Acessibilidade e cores
- 58. 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