• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora
 

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

on

  • 3,727 views

Palestra ministrada na Campus Party 2013, palco Michelangelo

Palestra ministrada na Campus Party 2013, palco Michelangelo

Statistics

Views

Total Views
3,727
Views on SlideShare
1,389
Embed Views
2,338

Actions

Likes
15
Downloads
67
Comments
0

7 Embeds 2,338

http://www.uxdesign.blog.br 2307
https://twitter.com 17
http://www.linkedin.com 9
http://cloud.feedly.com 2
https://twimg0-a.akamaihd.net 1
http://feeds.feedburner.com 1
https://translate.googleusercontent.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

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

  • Talita Pagani - @talitapaganiMStech
  •  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
  • http://whttp://www.sanduiche.baurusp.com.br/receita.php?menu=noww.sanduiche.baurusp.com.br/receita.php?menu=no
  • @liviagabos @reinaldoferraz @horaciosoares
  • 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
  • “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
  • Permitir que as pessoas possamutilizar o seu sistema sem sepreocupar com a dificuldadeque elas possuem.
  • 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
  •  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!
  • http://www.netmagazine.com/features/simple-introduction-web-accessibility
  • “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
  •  Decreto Lei nº 5.296 (dez/04) Decreto Lei nº 6.949 (ago/09) WCAG E-Mag
  • “ ” Qual o botão certo do elevador?
  • http://24ways.org/2012/colour-accessibility/ http://wearecolorblind.com/
  •  Tratar baixa acuidade visual Contraste suficiente entre fonte e fundo Cuidado com certas combinações  Epilepsia
  • http://drupal.org/node/946344
  • http://www.lighthouse.org/accessibility/design/accessible-print-design/effective-color-contrast
  • Botão Hipster Botão Mais Hipster AindaPorque o Google Faz Assim
  • http://arquiteturadeinformacao.com
  •  Escolha as cores de forma prudente e valide o contraste! Evite associar informações apenas com cores  Combine ícones ou textos
  •  http://colorschemedesigner.com/ http://www.coloradd.net/ http://color.method.ac/ http://snook.ca/technical/colour_contrast/colour.html
  •  Espaçamento Fonte Tamanho da fonte Altura da linha
  • http://commguide.asu.edu/standards/typography
  • http://commguide.asu.edu/standards/typography
  • http://commguide.asu.edu/standards/typography
  • http://www.lighthouse.org/accessibility/design/accessible-print-design/making-text-legible
  • http://www.lighthouse.org/accessibility/design/accessible-print-design/making-text-legible
  •  Deficiências cognitivas Dificuldade de aprendizado Dislexia Déficit de atenção Letramento
  •  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/
  •  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
  • “Sites that are designed to be easy fordyslexics are also easy for others to use andnavigate.”http://www.dyslexia.com/library/webdesign.htm#ixzz2JkiE7N8D
  • http://www.miauk.com/default.aspx
  • “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).
  • 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.
  • O design é útil e comercializável às pessoas comhabilidades diferenciadas.
  • O design atende a uma ampla gama de indivíduos,preferências e habilidades.
  • 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.
  • O design comunica eficazmente ao usuário asinformações necessárias, independentemente de suacapacidade sensorial ou de condições ambientais.
  • O design minimiza o risco e as conseqüências adversasde ações involuntárias ou imprevistas.
  • O design pode ser utilizado com um mínimo deesforço, de forma eficiente e confortável.
  • O design oferece espaços e dimensões apropriados parainteração, alcance, manipulação e uso, independentemente detamanho, postura ou mobilidade do usuário.
  •  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
  •  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
  •  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
  •  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/
  • @talitapagani | facebook.comtalitapagani