Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Planejando interfaces Web acessíveis

2,033 views

Published on

Published in: Technology
  • Be the first to comment

Planejando interfaces Web acessíveis

  1. 1. Planejando interfaces Web acessíveis Simone Villas Boas 9 de outubro de 2007
  2. 2. Simone Villas Boas <ul><li>Desenvolvedora de interfaces e sócia da empresa de consultoria e desenvolvimento Synapsis DI. </li></ul><ul><li>Últimos projetos: </li></ul><ul><ul><li>http://synapsisdi.com.br/portfolio </li></ul></ul><ul><li>Blog: </li></ul><ul><ul><li>http://s1mone.net </li></ul></ul>
  3. 3. Introdução à acessibilidade <ul><li>O que é acessibilidade? </li></ul><ul><ul><li>Não impedir o acesso à informação </li></ul></ul><ul><ul><li>A informação é para todos, independente do tipo de usuário ou de interação. </li></ul></ul><ul><ul><li>Se possível, facilitar o acesso. </li></ul></ul>
  4. 4. Introdução à acessibilidade <ul><li>Acessibilidade não é usabilidade </li></ul><ul><ul><li>Mas, do mesmo modo, deve-se verificar: </li></ul></ul><ul><ul><ul><li>Objetivo </li></ul></ul></ul><ul><ul><ul><li>Público-alvo </li></ul></ul></ul><ul><ul><ul><li>Prazos </li></ul></ul></ul><ul><ul><ul><li>Custos </li></ul></ul></ul>
  5. 5. Introdução à acessibilidade <ul><li>Listas de verificação </li></ul><ul><ul><li>W3C-WAI </li></ul></ul><ul><ul><ul><li>WCAG 1.0: </li></ul></ul></ul><ul><ul><ul><ul><li>Publicado em 1999 </li></ul></ul></ul></ul><ul><ul><ul><li>WCAG 2.0: </li></ul></ul></ul><ul><ul><ul><ul><li>Última revisão do rascunho em maio de 2007 </li></ul></ul></ul></ul><ul><ul><li>WCAG Samurai </li></ul></ul><ul><ul><ul><li>Revisão independente para o WCAG 1.0 </li></ul></ul></ul><ul><ul><ul><li>Última revisão do rascunho em junho de 2007 </li></ul></ul></ul>
  6. 6. Introdução à acessibilidade <ul><li>Decreto N º 5.296 de 2 de dezembro de 2004 </li></ul><ul><ul><li>Se destina a: </li></ul></ul><ul><ul><ul><li>Portadores de deficiência visual </li></ul></ul></ul><ul><ul><li>Se aplica a: </li></ul></ul><ul><ul><ul><li>Telecentros públicos </li></ul></ul></ul><ul><ul><ul><li>Projetos com financiamento público ou incentivo fiscal </li></ul></ul></ul><ul><ul><ul><li>Sites governamentais das três esferas </li></ul></ul></ul><ul><ul><li>Prazo para adequação: </li></ul></ul><ul><ul><ul><li>Até 2 de dezembro de 2005 </li></ul></ul></ul><ul><ul><ul><ul><li>(podendo ser prorrogado por doze meses) </li></ul></ul></ul></ul>
  7. 7. Introdução à acessibilidade <ul><li>Listas de verificação – Como elas podem ser classificadas? </li></ul><ul><ul><li>Modo clássico: por nível de prioridade </li></ul></ul><ul><ul><ul><li>Prioridade 1 Pontos que os criadores de conteúdo Web devem satisfazer inteiramente. </li></ul></ul></ul><ul><ul><ul><li>Prioridade 2 Pontos que os criadores de conteúdos na Web deveriam satisfazer. </li></ul></ul></ul><ul><ul><ul><li>Prioridade 3 Pontos que os criadores de conteúdos na Web podem satisfazer. </li></ul></ul></ul>
  8. 8. Introdução à acessibilidade <ul><li>Listas de verificação – Outros tipos de agrupamentos </li></ul><ul><ul><li>Por guidelines </li></ul></ul><ul><ul><li>Por tipo de elemento utilizado </li></ul></ul><ul><ul><li>Por tipo de interação </li></ul></ul><ul><ul><li>Por tipo de dispositivo de acesso </li></ul></ul><ul><ul><li>Por origem do usuário </li></ul></ul>
  9. 9. Introdução à acessibilidade <ul><li>Verificadores automáticos de acessibilidade </li></ul><ul><ul><li>Bobby – muito completo </li></ul></ul><ul><ul><li>TAW – verificação para várias páginas </li></ul></ul><ul><ul><li>HTML Validator (extensão para Firefox) – prático </li></ul></ul><ul><ul><li>DaSilva – o único para o E-Gov </li></ul></ul>
  10. 10. Desenvolvimento de acordo com os padrões Web <ul><li>Separação de conteúdo, apresentação e comportamento </li></ul><ul><ul><li>HTML semântico </li></ul></ul><ul><ul><li>Todas as decisões de layout ficam em folhas de estilo </li></ul></ul><ul><ul><li>Scripts não intrusivos </li></ul></ul>
  11. 11. Impacto no tempo e custo de produção em cada elemento <ul><li>Baixo </li></ul><ul><ul><li>Textos </li></ul></ul><ul><ul><li>Links </li></ul></ul><ul><ul><li>Imagens </li></ul></ul><ul><ul><li>Tabelas </li></ul></ul>
  12. 12. Impacto no tempo e custo de produção em cada elemento <ul><li>Médio </li></ul><ul><ul><li>JavaScript simples e não intrusivos </li></ul></ul><ul><ul><li>Formulários </li></ul></ul>
  13. 13. Impacto no tempo e custo de produção em cada elemento <ul><li>Alto </li></ul><ul><ul><li>Interfaces com setores relevantes em Flash </li></ul></ul><ul><ul><li>Scripts avançados </li></ul></ul><ul><ul><li>AJAX </li></ul></ul><ul><ul><li>Applets </li></ul></ul><ul><ul><li>Frames </li></ul></ul><ul><ul><li>Multimídia </li></ul></ul><ul><ul><li>Internacionalização </li></ul></ul>
  14. 14. Armadilhas em cada fase do projeto <ul><li>No briefing </li></ul><ul><ul><li>Público-alvo </li></ul></ul><ul><ul><ul><li>Defina o seu público e quais as suas necessidades </li></ul></ul></ul><ul><ul><ul><li>Estabeleça prazos e custos de acordo com cada tipo de usuário e cada tipo de dispositivo de acesso </li></ul></ul></ul><ul><li>Não assuma o compromisso com a acessibilidade como um limitador, mas como uma ampliação do público-alvo </li></ul>
  15. 15. Armadilhas em cada fase do projeto <ul><li>No briefing </li></ul><ul><ul><li>Páginas introdutórias </li></ul></ul><ul><ul><li>Sites inteiramente em Flash </li></ul></ul><ul><ul><li>Sempre opte por sites em código HTML. </li></ul></ul><ul><ul><li>Se não for possível, use alternativas para o conteúdo </li></ul></ul>
  16. 16. Armadilhas em cada fase do projeto <ul><li>No briefing </li></ul><ul><ul><li>Esqueça os blings ! </li></ul></ul><ul><ul><li>Esqueça os banners internos! </li></ul></ul><ul><li>&quot;Coisas piscantes são cafonas... O movimento é tudo!&quot; </li></ul>
  17. 17. Armadilhas em cada fase do projeto <ul><li>No briefing </li></ul><ul><ul><li>Sistemas com uso intensivo de AJAX e outros scripts </li></ul></ul><ul><li>Defina prazos e custos para uma versão não intrusiva do sistema </li></ul>
  18. 18. Armadilhas em cada fase do projeto <ul><li>Na criação do wireframe </li></ul><ul><ul><li>Layouts fixos vs. layouts fluidos </li></ul></ul><ul><ul><li>Altura fixa </li></ul></ul><ul><ul><li>Não amarre o site com guias verticais! </li></ul></ul><ul><ul><li>Permita aumento da fonte. </li></ul></ul>
  19. 19. Armadilhas em cada fase do projeto <ul><li>Na criação do wireframe </li></ul><ul><ul><li>Novas janelas </li></ul></ul><ul><ul><li>Pop-ups </li></ul></ul><ul><ul><li>Não quebre a experiência da navegação! </li></ul></ul><ul><ul><li>Se precisar de novas janelas, use um script não intrusivo. </li></ul></ul>
  20. 20. Armadilhas em cada fase do projeto <ul><li>Na criação do layout </li></ul><ul><ul><li>Tamanho das fontes </li></ul></ul><ul><ul><li>Tamanho dos botões ou de qualquer outro elemento clicável </li></ul></ul><ul><li>Nunca abandone seu público-alvo ou seu estilo </li></ul>
  21. 21. Armadilhas em cada fase do projeto <ul><li>Esquema de cores </li></ul><ul><ul><li>Verifique o contraste de cores </li></ul></ul><ul><ul><ul><li>Dispositivos com saída em preto e branco; </li></ul></ul></ul><ul><ul><ul><li>Usuários portadores de algum tipo de deficiência na percepção de cores. </li></ul></ul></ul>
  22. 22. Armadilhas em cada fase do projeto <ul><li>Esquema de cores – Visão normal </li></ul>
  23. 23. Armadilhas em cada fase do projeto <ul><li>Esquema de cores – Protanopia (vermelho-verde) </li></ul>
  24. 24. Armadilhas em cada fase do projeto <ul><li>Esquema de cores – Tritanopia (azul-amarelo) </li></ul>
  25. 25. Armadilhas em cada fase do projeto <ul><li>Esquema de cores – Acromatopsia (Escala de cinzas) </li></ul>
  26. 26. Armadilhas em cada fase do projeto <ul><li>Esquema de cores – Catarata </li></ul>
  27. 27. Armadilhas em cada fase do projeto <ul><li>Durante o desenvolvimento </li></ul><ul><ul><li>O conteúdo deve continuar legível e as aplicações devem continuar funcionando: </li></ul></ul><ul><ul><ul><li>Sem layout para ajudar na compreensão </li></ul></ul></ul><ul><ul><ul><li>Sem a camada de interação para facilitar o uso </li></ul></ul></ul><ul><li>Teste sem CSS e sem JavaScript durante o desenvolvimento </li></ul><ul><li>Não deixe para o final do projeto! </li></ul>
  28. 28. Armadilhas em cada fase do projeto <ul><li>Durante o desenvolvimento </li></ul><ul><ul><li>Verificação contínua </li></ul></ul><ul><ul><li>Faça uma rotina de teste em diversos ambientes: celulares, folhas impressas, leitores de tela, sem mouse... </li></ul></ul><ul><li>Forneça treinamento adequado em acessibilidade e forneça equipamento para os testes </li></ul>
  29. 29. Armadilhas em cada fase do projeto <ul><li>Nos testes </li></ul><ul><ul><li>Não deixar de incluir os testes de verificação de acessibilidade </li></ul></ul><ul><li>Não permita que a correria de final de projeto </li></ul><ul><li>elimine as últimas rodadas de verificação de acessibilidade </li></ul>
  30. 30. Armadilhas em cada fase do projeto <ul><li>Na pós-produção </li></ul><ul><ul><li>Faça o treinamento dos editores e administradores </li></ul></ul><ul><ul><li>Mantenha o contato com eles </li></ul></ul><ul><ul><li>Estabeleça uma lista de verificação para manutenção do site </li></ul></ul><ul><li>A busca pela acessibilidade de uma interface </li></ul><ul><li>não acaba após a entrega do produto </li></ul>
  31. 31. Armadilhas em cada fase do projeto <ul><li>Faça a sua lista de verificação </li></ul><ul><ul><li>Qual é o melhor verificador para acompanhar? </li></ul></ul><ul><ul><li>Quando verificar? </li></ul></ul><ul><ul><li>Quais são os caminhos no publicador de conteúdo para publicar textos alternativos? </li></ul></ul>
  32. 32. Conclusão <ul><li>Trabalhar para ter interfaces cada vez mais acessíveis para cada vez mais usuários </li></ul><ul><ul><li>Simplicidade </li></ul></ul><ul><ul><li>Empatia </li></ul></ul><ul><ul><li>Curiosidade </li></ul></ul><ul><ul><li>Teste! Teste! Teste! </li></ul></ul>
  33. 33. Referências <ul><li>Recomendações para a acessibilidade do conteúdo da Web – 1.0 http://www.geocities.com/claudiaad/acessibilidade_web.html </li></ul><ul><li>Web Access Centre http://tinyurl.com/7psxk </li></ul><ul><li>Dive into Accessibility http://diveintoaccessibility.org/ </li></ul><ul><li>Victor Tsaran: &quot;An Introduction to Screen Readers&quot; http://video.yahoo.com/video/play?vid=514676 </li></ul><ul><li>Mais atualizações: http://del.icio.us/s1mone/accessibility </li></ul>

×