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.

6. Foto: http://www.flickr.com/photos/santheo/2438840018/in/photostream/

7. Foto: http://www.flickr.com/photos/usembassyta/8147385353/in/photostream/

8. Foto: http://www.flickr.com/photos/ytueresburroyyomemonto/2848997619/in/photostream/

9. Foco da palestra: Acessibilidade para quem utiliza leitor de tela.

10. Para construir sites acessíveis, temos que entender como as pessoas que precisam de acessibilidade navegam na internet. Antes de tudo

11. Principais leitores de tela NVDA www.nvaccess.org/download/ JAWS www.freedomscientific.com/products/fs/jaws-product-page.asp

12. Mas como os leitores de tela funcionam? ?

13. Quais os principais problemas de acessibilidade? Como resolvê-los?

14. ACESSIBILIDADE E IDIOMA Foto: http://www.flickr.com/photos/joshua/3318674106/in/photostream/

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. ACESSIBILIDADE E IMAGENS Foto: http://www.flickr.com/photos/danzen/1172367594/in/photostream/

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. 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. ACESSIBILIDADE E LINKS Foto: http://www.flickr.com/photos/agentkramer/8164840482/in/photostream/

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. 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. ACESSIBILIDADE E FONTE Foto: http://www.flickr.com/photos/revdancatt/5558653828/in/photostream/

23. 4. Acessibilidade e fonte Problema: texto ilegível Errado Fonte equivalente a 12px Certo Fonte equivalente a PELO MENOS 16px

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. ACESSIBILIDADE E NAVEGAÇÃO RÁPIDA + LANDMARKS Foto: http://www.flickr.com/photos/shanepope/2375499336/

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. 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. 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. 5. Acessibilidade e navegação rápida + landmarks Problema: falta de ladmarks Principais landmarks banner navigation main complementary contentinfo form search application

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. 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. 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. 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. ACESSIBILIDADE E SEMÂNTICA Foto: http://www.flickr.com/photos/nolanus/5848333881/in/photostream/

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. 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. ACESSIBILIDADE E FORMULÁRIOS

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. 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. 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. 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. 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. 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. 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. ACESSIBILIDADE E MENUS

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. ACESSIBILIDADE E CORES Foto: http://www.flickr.com/photos/ngdx/9103091527/in/photostream/

48. 9. Acessibilidade e cores Problema: constraste ruim

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. 9. Acessibilidade e cores Problema: contraste ruim

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. 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. 9. Acessibilidade e cores Problema: cores e daltonismo

54. 9. Acessibilidade e cores Problema: cores e daltonismo

55. Problema: cores e daltonismo http://colororacle.org/ Color Oracle Ferramenta para simular tipos de daltonismo. 9. Acessibilidade e cores

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. Obrigada! @julianafrost juliana@vivendoporai.com.br www.vivendoporai.com.br www.slideshare.com/julianafrost Foto:http://theberry.com/