Planejando interfaces Web acessíveis

1,837 views
1,765 views

Published on

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,837
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide
  • 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>

    ×