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