Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

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

10.746 Aufrufe

Veröffentlicht am

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

×