Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora
-
Upload
talita-pagani -
Category
Documents
-
view
7.791 -
download
0
description
Transcript of Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora
![Page 1: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/1.jpg)
Talita Pagani - @talitapagani
MStech
![Page 2: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/2.jpg)
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
![Page 3: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/3.jpg)
http://whttp://www.sanduiche.baurusp.com.br/receita.php?menu=noww.sanduiche.b
aurusp.com.br/receita.php?menu=no
![Page 4: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/4.jpg)
@liviagabos @reinaldoferraz @horaciosoares
![Page 5: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/5.jpg)
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
![Page 6: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/6.jpg)
![Page 7: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/7.jpg)
“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
![Page 8: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/8.jpg)
Permitir que as pessoas possam
utilizar o seu sistema sem se
preocupar com a dificuldade
que elas possuem.
![Page 9: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/9.jpg)
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
![Page 10: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/10.jpg)
![Page 11: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/11.jpg)
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!
![Page 12: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/12.jpg)
![Page 13: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/13.jpg)
http://www.netmagazine.com/features/simple-introduction-web-accessibility
![Page 14: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/14.jpg)
![Page 15: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/15.jpg)
“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
![Page 16: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/16.jpg)
![Page 17: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/17.jpg)
Decreto Lei nº 5.296 (dez/04)
Decreto Lei nº 6.949 (ago/09)
WCAG
E-Mag
![Page 18: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/18.jpg)
![Page 19: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/19.jpg)
“
”
Qual o botão certo do elevador?
![Page 20: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/20.jpg)
![Page 21: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/21.jpg)
![Page 22: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/22.jpg)
![Page 23: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/23.jpg)
![Page 24: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/24.jpg)
http://24ways.org/2012/colour-accessibility/ http://wearecolorblind.com/
![Page 25: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/25.jpg)
![Page 26: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/26.jpg)
Tratar baixa acuidade visual
Contraste suficiente entre fonte e fundo
Cuidado com certas combinações
Epilepsia
![Page 27: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/27.jpg)
![Page 29: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/29.jpg)
http://www.lighthouse.org/accessibility/design/accessible-print-design/effective-
color-contrast
![Page 30: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/30.jpg)
Botão Hipster
Botão Mais Hipster Ainda
Porque o Google Faz Assim
![Page 32: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/32.jpg)
![Page 33: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/33.jpg)
Escolha as cores de forma prudente e valide o
contraste!
Evite associar informações apenas com cores
Combine ícones ou textos
![Page 34: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/34.jpg)
http://colorschemedesigner.com/
http://www.coloradd.net/
http://color.method.ac/
http://snook.ca/technical/colour_contrast/colour.html
![Page 35: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/35.jpg)
![Page 36: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/36.jpg)
Espaçamento
Fonte
Tamanho da fonte
Altura da linha
![Page 40: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/40.jpg)
![Page 41: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/41.jpg)
http://www.lighthouse.org/accessibility/design/accessible-print-design/making-text-
legible
![Page 42: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/42.jpg)
http://www.lighthouse.org/accessibility/design/accessible-print-design/making-text-
legible
![Page 43: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/43.jpg)
Deficiências cognitivas
Dificuldade de aprendizado
Dislexia
Déficit de atenção
Letramento
![Page 44: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/44.jpg)
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/
![Page 45: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/45.jpg)
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
![Page 46: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/46.jpg)
“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
![Page 47: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/47.jpg)
http://www.miauk.com/default.aspx
![Page 48: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/48.jpg)
![Page 49: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/49.jpg)
![Page 50: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/50.jpg)
![Page 51: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/51.jpg)
![Page 52: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/52.jpg)
![Page 53: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/53.jpg)
“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).
![Page 54: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/54.jpg)
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.
![Page 55: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/55.jpg)
![Page 56: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/56.jpg)
O design é útil e comercializável às pessoas com
habilidades diferenciadas.
![Page 57: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/57.jpg)
O design atende a uma ampla gama de indivíduos,
preferências e habilidades.
![Page 58: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/58.jpg)
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.
![Page 59: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/59.jpg)
O design comunica eficazmente ao usuário as informações necessárias, independentemente de sua capacidade sensorial ou de condições ambientais.
![Page 60: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/60.jpg)
O design minimiza o risco e as conseqüências adversas
de ações involuntárias ou imprevistas.
![Page 61: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/61.jpg)
O design pode ser utilizado com um mínimo de
esforço, de forma eficiente e confortável.
![Page 62: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/62.jpg)
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.
![Page 63: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/63.jpg)
![Page 64: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/64.jpg)
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
![Page 65: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/65.jpg)
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
![Page 66: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/66.jpg)
![Page 67: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/67.jpg)
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
![Page 68: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/68.jpg)
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/
![Page 69: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/69.jpg)
@talitapagani | facebook.com\talitapagani
![Page 70: Design de Interfaces e Acessibilidade: você está fazendo isso errado... até agora](https://reader033.fdocument.pub/reader033/viewer/2022060117/55878ab3d8b42a42318b470b/html5/thumbnails/70.jpg)