design de interfaces e acessibilidade: você está fazendo isso errado... até agora
DESCRIPTION
Palestra ministrada na Campus Party 2013, palco MichelangeloTRANSCRIPT
Talita Pagani - @talitapagani
MStech
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.b
aurusp.com.br/receita.php?menu=no
@liviagabos @reinaldoferraz @horaciosoares
O que irei abordar
Aspectos de acessibilidade para o design de interfaces
Princípios de legibilidade,
cores, tipografia
Organização de conteúdo
Ferramentas para avaliar
acessibilidade
O que não irei abordar
Acessibilidade a nível de
código
WAI-ARIA
Detalhamento do WCAG
“Acessibilidade significa não apenas permitir que pessoas
com deficiências ou mobilidade reduzida participem de
atividades que incluem o uso de produtos, serviços e
informação, mas a inclusão e extensão do uso destes por
todas as parcelas presentes em uma determinada
população. visando sua adaptação e locomoção, eliminando
as barreiras.”
- http://pt.wikipedia.org/wiki/Acessibilidade
Permitir que as pessoas possam
utilizar o seu sistema sem se
preocupar com a dificuldade
que 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; ele nã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 Ainda
Porque 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 escrito
http://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 for
dyslexics are also easy for others to use and
navigate.”
http://www.dyslexia.com/library/webdesign.htm#ixzz2JkiE7N8D
http://www.miauk.com/default.aspx
“Design Universal (Universal Design),é o
design de produtos e deambientes para
serem usados por todas as pessoas, na maior
extensão possível, sem a necessidade de
adaptação ou design especializado”
(Connell et al,1997).
O DU são produtos ou ambientes que o maior
número de pessoas possível possam utilizar
sem nenhuma restrição. É uma flexibilidade
das interfaces para que qualquer pessoa
possa utilizar.
O design é útil e comercializável às pessoas com
habilidades 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 de experiência, nível de formação, conhecimento do idioma ou da capacidade de concentração do usuário.
O design comunica eficazmente ao usuário as informações necessárias, independentemente de sua capacidade sensorial ou de condições ambientais.
O design minimiza o risco e as conseqüências adversas
de ações involuntárias ou imprevistas.
O design pode ser utilizado com um mínimo de
esforço, de forma eficiente e confortável.
O design oferece espaços e dimensões apropriados para interação, alcance, manipulação e uso, independentemente de tamanho, 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.com\talitapagani