Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora

9,767 views

Published on

Palestra ministrada na Campus Party 2013, palco Michelangelo

Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora

  1. 1. Talita Pagani - @talitapaganiMStech
  2. 2.  Bauruense Bacharel em Ciência da Computação  Pós-graduanda em Gerenciamento de Projetos Programadora e Tester na Mstech  Projetos Educacionais  Acessibilidade  Pesquisa sobre novas tecnologias Articulista do Tableless Palestrante em eventos de desenvolvimento web e curadora do FrontInterior
  3. 3. http://whttp://www.sanduiche.baurusp.com.br/receita.php?menu=noww.sanduiche.baurusp.com.br/receita.php?menu=no
  4. 4. @liviagabos @reinaldoferraz @horaciosoares
  5. 5. O que irei O que não abordar irei abordar Aspectos de Acessibilidade acessibilidade a nível de para o design código de interfaces Princípios de legibilidade, WAI-ARIA cores, tipografia Organização de Detalhamento conteúdo do WCAG Ferramentas para avaliar acessibilidade
  6. 6. “Acessibilidade significa não apenas permitir que pessoascom deficiências ou mobilidade reduzida participem deatividades que incluem o uso de produtos, serviços einformação, mas a inclusão e extensão do uso destes portodas as parcelas presentes em uma determinadapopulação. visando sua adaptação e locomoção, eliminandoas barreiras.”- http://pt.wikipedia.org/wiki/Acessibilidade
  7. 7. Permitir que as pessoas possamutilizar o seu sistema sem sepreocupar com a dificuldadeque elas possuem.
  8. 8. 1. Acessibilidade Web é só para deficientes visuais;2. Na prática, o número de usuários beneficiados com a acessibilidade é relativamente muito pequeno;3. Fazer um site acessível demora e custa caro;4. É melhor fazer uma página especial para os deficientes visuais;5. Um site acessível a deficientes visuais não é bonito;6. Vamos por partes: primeiro fazemos o site, depois fazemos acessibilidade;7. A gente sabe o que é bom para o usuário.Equívoco: Meu site é direcionado a um público específico; elenão interessa a todos os grupos de usuários.http://acessodigital.net/art_acessibilidade-web-7-mitos-e-um-equivoco.html
  9. 9.  Deficiências definitivas ou temporárias  Visual, auditiva, motora, cognitiva, etc... Habilidade motora  Canhoto, destro, ambidestro Diversidade de dispositivos  Acesso via celular ou smartphone Diferentes públicos  Idosos  Crianças Letramento  Analfabetismo funcional SEO também!
  10. 10. http://www.netmagazine.com/features/simple-introduction-web-accessibility
  11. 11. “Dos cerca de 190 milhões de brasileiros,aqueles com pelo menos uma deficiência,seja visual, auditiva, motora ou mental,somam 45 milhões (23,9%).”- http://www.slideshare.net/horacio.soares/frontend-com-acessibilidade-frontinsampa-nov-2012
  12. 12.  Decreto Lei nº 5.296 (dez/04) Decreto Lei nº 6.949 (ago/09) WCAG E-Mag
  13. 13. “ ” Qual o botão certo do elevador?
  14. 14. http://24ways.org/2012/colour-accessibility/ http://wearecolorblind.com/
  15. 15.  Tratar baixa acuidade visual Contraste suficiente entre fonte e fundo Cuidado com certas combinações  Epilepsia
  16. 16. http://drupal.org/node/946344
  17. 17. http://www.lighthouse.org/accessibility/design/accessible-print-design/effective-color-contrast
  18. 18. Botão Hipster Botão Mais Hipster AindaPorque o Google Faz Assim
  19. 19. http://arquiteturadeinformacao.com
  20. 20.  Escolha as cores de forma prudente e valide o contraste! Evite associar informações apenas com cores  Combine ícones ou textos
  21. 21.  http://colorschemedesigner.com/ http://www.coloradd.net/ http://color.method.ac/ http://snook.ca/technical/colour_contrast/colour.html
  22. 22.  Espaçamento Fonte Tamanho da fonte Altura da linha
  23. 23. http://commguide.asu.edu/standards/typography
  24. 24. http://commguide.asu.edu/standards/typography
  25. 25. http://commguide.asu.edu/standards/typography
  26. 26. http://www.lighthouse.org/accessibility/design/accessible-print-design/making-text-legible
  27. 27. http://www.lighthouse.org/accessibility/design/accessible-print-design/making-text-legible
  28. 28.  Deficiências cognitivas Dificuldade de aprendizado Dislexia Déficit de atenção Letramento
  29. 29.  Leitura Memória Resolução de problemas Foco Realização de cálculos Dificuldade com material escritohttp://dev.opera.com/articles/view/cognitive-disability-learning-difficulty/
  30. 30.  Fontes maiores e mais legíveis Ícones claros e objetivos Evitar elementos que possam distrair o usuário Parágrafos mais curtos e objetivos Layout consistente entre diferentes áreas do site Evitar imagens de fundo atrás do texto Linguagem objetiva Abreviações, acrônimos e termos técnicos devem possuir explicação e, quando possível, serem evitados
  31. 31. “Sites that are designed to be easy fordyslexics are also easy for others to use andnavigate.”http://www.dyslexia.com/library/webdesign.htm#ixzz2JkiE7N8D
  32. 32. http://www.miauk.com/default.aspx
  33. 33. “Design Universal (Universal Design),é odesign de produtos e deambientes paraserem usados por todas as pessoas, na maiorextensão possível, sem a necessidade deadaptação ou design especializado”(Connell et al,1997).
  34. 34. O DU são produtos ou ambientes que o maiornúmero de pessoas possível possam utilizarsem nenhuma restrição. É uma flexibilidadedas interfaces para que qualquer pessoapossa utilizar.
  35. 35. O design é útil e comercializável às pessoas comhabilidades diferenciadas.
  36. 36. O design atende a uma ampla gama de indivíduos,preferências e habilidades.
  37. 37. O uso do design é de fácil compreensão, independentemente deexperiência, nível de formação, conhecimento do idioma ou dacapacidade de concentração do usuário.
  38. 38. O design comunica eficazmente ao usuário asinformações necessárias, independentemente de suacapacidade sensorial ou de condições ambientais.
  39. 39. O design minimiza o risco e as conseqüências adversasde ações involuntárias ou imprevistas.
  40. 40. O design pode ser utilizado com um mínimo deesforço, de forma eficiente e confortável.
  41. 41. O design oferece espaços e dimensões apropriados parainteração, alcance, manipulação e uso, independentemente detamanho, postura ou mobilidade do usuário.
  42. 42.  Estruturar corretamente os elementos da página Use os espaços em branco a favor do usuário Imagens sempre acompanhadas de um texto alternativo  E, não, texto alternativo não é “Ícone”, “Imagem Home”, “Imagem de ilustração”, descreva o que tem na imagem! Evite textos relevantes em imagens Legendas para conteúdo multimídia Tabelas não são inimigas, basta usar de forma correta
  43. 43.  DaSilva  www.dasilva.org.br WARAU  http://warau.nied.unicamp.br/ ASES  http://www.governoeletronico.gov.br/acoes-e-projetos/e- MAG/ases-avaliador-e-simulador-de-acessibilidade-sitios
  44. 44.  http://brasilmedia.com/Daltonismo.html#.UQ0P4r90NTk http://www.456bereastreet.com/archive/200709/10_col our_contrast_checking_tools_to_improve_the_accessibili ty_of_your_design/ http://webaim.org/resources/contrastchecker/ http://webstyleguide.com/wsg2/interface/access.html
  45. 45.  http://arquiteturadeinformacao.com/2012/10/01/uma- fonte-para-ajudar-quem-tem-dislexia-a-ler-textos-extensos/ http://dev.opera.com/articles/view/cognitive-disability- learning-difficulty/ http://www.w3.org/2009/cheatsheet/#wcag2 http://www.acessobrasil.org.br/index.php?itemid=42 http://24ways.org/2007/css-for-accessibility/
  46. 46. @talitapagani | facebook.comtalitapagani

×