Talita Pagani é uma programadora e testadora da Mstech com formação em Ciência da Computação e pós-graduação em Gerenciamento de Projetos. Ela também é articulista do site Tableless e palestrante em eventos sobre desenvolvimento web e acessibilidade digital.

1. Talita Pagani - @talitapagani
MStech

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. http://whttp://www.sanduiche.baurusp.com.br/receita.php?menu=noww.sanduiche.b
aurusp.com.br/receita.php?menu=no

4. @liviagabos @reinaldoferraz @horaciosoares

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

7. “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

8. Permitir que as pessoas possam
utilizar o seu sistema sem se
preocupar com a dificuldade
que elas possuem.

9. 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

11.  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!

13. http://www.netmagazine.com/features/simple-introduction-web-accessibility

15. “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

17.  Decreto Lei nº 5.296 (dez/04)
 Decreto Lei nº 6.949 (ago/09)
 WCAG
 E-Mag

19. “
”
Qual o botão certo do elevador?

24. http://24ways.org/2012/colour-accessibility/ http://wearecolorblind.com/

26.  Tratar baixa acuidade visual
 Contraste suficiente entre fonte e fundo
 Cuidado com certas combinações
 Epilepsia

28. http://drupal.org/node/946344

29. http://www.lighthouse.org/accessibility/design/accessible-print-design/effective-
color-contrast

30. Botão Hipster
Botão Mais Hipster Ainda
Porque o Google Faz Assim

31. http://arquiteturadeinformacao.com

33.  Escolha as cores de forma prudente e valide o
contraste!
 Evite associar informações apenas com cores
 Combine ícones ou textos

34.  http://colorschemedesigner.com/
 http://www.coloradd.net/
 http://color.method.ac/
 http://snook.ca/technical/colour_contrast/colour.html

36.  Espaçamento
 Fonte
 Tamanho da fonte
 Altura da linha

37. http://commguide.asu.edu/standards/typography

38. http://commguide.asu.edu/standards/typography

39. http://commguide.asu.edu/standards/typography

41. http://www.lighthouse.org/accessibility/design/accessible-print-design/making-text-
legible

42. http://www.lighthouse.org/accessibility/design/accessible-print-design/making-text-
legible

43.  Deficiências cognitivas
 Dificuldade de aprendizado
 Dislexia
 Déficit de atenção
 Letramento

44.  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/

45.  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

46. “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

47. http://www.miauk.com/default.aspx

53. “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).

54. 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.

56. O design é útil e comercializável às pessoas com
habilidades diferenciadas.

57. O design atende a uma ampla gama de indivíduos,
preferências e habilidades.

58. 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.

59. O design comunica eficazmente ao usuário as
informações necessárias, independentemente de sua
capacidade sensorial ou de condições ambientais.

60. O design minimiza o risco e as conseqüências adversas
de ações involuntárias ou imprevistas.

61. O design pode ser utilizado com um mínimo de
esforço, de forma eficiente e confortável.

62. 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.

64.  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

65.  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

67.  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

68.  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/

69. @talitapagani | facebook.comtalitapagani