TablelessConf  –  São  Paulo  (maio  2013)      

Acessibilidade  Web    e  Design  Mobile:    

tudo  junto  e  misturado      

Horácio  Pastor  Soares    horacio.soares@acessodigital.net  

@horaciosoares  (21)  9925-­‐5404  

Contexto da Acessibilidade na Web

Acessibilidade? O que é

Usabilidade? O que é

Qual é o relacionamento entre a acessibilidade

e usabilidade?

Acessibilidade: quem precisa?

ALGUMAS pessoas precisam de

acessibilidade em TODOS os momentos.

ALGUMAS  pessoas  precisam  de  acessibilidade  em  TODOS  os  momentos.  

João que é tetraplégico (foto de Maíra Soares )

   

Por  exemplo,  pessoas    com  restrição  de  movimento  nos  

membros  superiores.  

Mark, tetraplégico, interage com os olhos

Tião tem grandes dificuldades motoras e interage com teclado utilizando seu dedo mindinho…

Para os usuários cegos.

Fotos de três cegos trabalhando no computador utizando um programa

leitor de telas

Marcos, com baixa visão, utiliza um dispositivo que amplia os textos de um livro.

OUTRAS pessoas precisam de

acessibilidade em MUITOS os momentos.

Isaias à esquerda, conduzindo o Januário para um chopinho após curso de acessibilidade Web.  

Por exemplo, o Isaias, que é designer e

daltônico.

Outros  exemplos:  •   Pessoas  surdas;  •   Com  deficiência  audiVva;  •   Com  déficit  de  atenção;  •   Com  dislexia;  •   Com  déficit  cogniVvo.  

TODAS as pessoas precisam de

acessibilidade em ALGUM momento.

Exemplos:    •  Em  ambientes  com  más  condições  de  luminosidade;  

•  Com  tendinite  ou  fratura  no  braço  dominante;  

•  Tendo  as  mãos,  olhos  ou  ouvidos  ocupados  em  outra  tarefa.  

 

 

•  Com  pouca  fluência  na  linguagem  do  documento  que  se  deseja  pesquisar;  

•  Usando  sistemas  de  busca  (que  só  indexam  texto);  

•  Com  pouca  experiência  (todos  fomos  algum  dia);  

•  Com  idade  avançada  (todos  seremos,  na  melhor  das  hipóteses).  

E usando dispositivos móveis com

telas pequenas.

Acessibilidade  para    quantos  no  BRASIL?  

Segundo  IBGE  no  Brasil  (2010):  •  População  total:  190  milhões  (100,0%)    

 

Segundo  IBGE  no  Brasil  (2010):  •  População  total:  190  milhões  (100,0%)  

•  Pelo  menos  uma  das  deficiências  invesVgadas:  45  milhões  (23,9%)  

Segundo  IBGE  no  Brasil  (2010):  •  População  total:  190  milhões  (100,0%)  

•  Pelo  menos  uma  das  deficiências  invesVgadas:  45  milhões  (23,9%)  

•  Idosos:  19  milhões  (10%)  

Segundo  IBGE  no  Brasil  (2010):  •  População  total:  190  milhões  (100,0%)  

•  Pelo  menos  uma  das  deficiências  invesVgadas:  45  milhões  (23,9%)  

•  Idosos:  19  milhões  (10%)  

•  Analfabetos  funcionais:  38  milhões  (20,4%)    

Fontes:                                                                hgp://censo2010.ibge.gov.br/    ip://ip.ibge.gov.br/Trabalho_e_Rendimento/Pesquisa_Nacional_por_Amostra_de_Domicilios_anual/2011/Sintese_Indicadores/sintese_pnad2011.pdf    

Contexto do Design Mobile

hgp://thenextweb.com/apple/2012/01/25/there-­‐are-­‐now-­‐more-­‐iphones-­‐sold-­‐than-­‐babies-­‐born-­‐in-­‐the-­‐world-­‐every-­‐day/  

hgp://zeldman.com/2012/07/09/mobile-­‐to-­‐the-­‐future-­‐luke-­‐wroblewski/  

hgp://www.slideshare.net/HubSpot/50-­‐mobilefactsdeck62812  -­‐  Slide  4  

hgp://www.slideshare.net/HubSpot/50-­‐mobilefactsdeck62812    -­‐  slide  6  

Estatísticas Brasil

GIF animado...

http://imasters.com.br/noticia/smartphones-terao-50-do-mercado-brasileiro-em-2013/

No mundo

Vários GIFs animados...

http://www.slideshare.net/HubSpot/50-mobilefactsdeck62812 - slide 18

http://www.slideshare.net/HubSpot/50-mobilefactsdeck62812 - slide 36

capacidades/vantagens do mobile

GPS

Acelerômetro

Giroscópio

Bluetooth

Bluetooth

Áudio, vídeo e imagem

NFC

Sensores multitoque

Em qualquer hora e local.

Novas maneiras de interação e apresentação

Boa compatibilidade entre

navegadores Mobile e HTML5

Atualizações frequentes...

limitações/restrições do mobile

Muitas vezes, ao interagir com

mobile, as pessoas estão em

modo: “fritando o peixe e

olhando o gato” e com

apenas um dos dedos...

@lukew

‘Desktop is like “diving”…

…while mobile is like “snorkling.”’ by Hinman at Nokia

hgp://www.slideshare.net/Rachel_Hinman  

@lukew

desktop  

@lukew

tela grande  

@lukew

tela grande  

energia  

@lukew

tela grande  

energia  

rede consistente  

@lukew

tela grande  

energia  

rede consistente  

teclado  

@lukew

tela grande  

energia  

rede consistente  

teclado  

mouse  

@lukew

tela grande  

energia  

rede consistente  

teclado  

mouse  

cadeira  

@lukew

tela grande  

energia  

rede consistente  

teclado  

mouse  

cadeira  

mesa  

tela grande  

energia  

rede consistente  

teclado  

mouse  

cadeira  

mesa  caneca de café  

@lukew

@lukew

mobile  

tela pequena  

@lukew

tela pequena  

bateria  

@lukew

tela pequena  

bateria  

rede inconsistente  

@lukew

tela pequena  

bateria  

rede inconsistente  

dedo gordo  

@lukew

tela pequena  

bateria  

rede inconsistente  

dedo gordo  

sensores  

@lukew

Slide  107    http://www.slideshare.net/cxpartners/web-and-mobile-forms-design-userfriendly-2010-workshop

Como o Luli disse no Digitalks no Rio:

“Nesse mundo Mobile, somos todos daltónicos e sofremos

do Mal de Parkinson”

Outras limitações:

•  Capacidade de armazenamento e

processamento reduzido.

•  Uma aplicação em HTML5 para mobile

pode ser até 100 vezes mais lenta que

em desktop. http://spaceport.io/spaceport_perfmarks_2_report_2012_5.pdf

perda de 80% do espaço

@lukew

e isso pode ser ótimo para o negócio...

te força a priorizar...

te força a manter o foco…

Alguém conhece algum site

que gostaria que 80% do seu

conteúdo/itens/elementos

fosse retirado da interface?

Flickr desktop

60 opções de menu...

@lukew

Flickr mobile

7 opções de menu...

Less is more...

@lukew

Conhecimento profundo da

audiência, o que fazem, por

que vieram e por que se

importam com o Flickr...

Qual desses Desktops oferecia a melhor experiência?

E qual desses controles?

Restrições são boas para o

design, pois te forçam a

priorizar, a manter o foco

mas cuidado…

no ponto…

Os detalhes do comprador não

podem ser visualizados na versão mobile.

Como anda as soluções acessibilidade digital no

Brasil?

E os sites/sistemas Mobile?

Uma alternativa…

Uma alternativa…

Accessibility First!

Mobile First!

Mobile  First  Luke  Wroblewski  

 

Livro:  hgp://www.abookapart.com/products/mobile-­‐first  

Paradoxo da escolha

Um probema comum em projetos Web

Na busca de soluções para os problemas, o que maioria faz?

Copia e cola quase tudo...

“Todo negócio é único e fundamentalmente

diverso de qualquer outro, por maiores que

sejam suas similaridades.“

O tiro e o alvo – aforismo 54

Cuidado, o que serve para uma empresa pode não servir para outra...

Código de barras

X

Artigo CAPTCHA: herói ou vilão?

http://acessodigital.net/art_captcha-heroi-ou-vilao.html

Captcha http://sam.zoy.org/pwntcha/

Captcha http://sam.zoy.org/pwntcha/

X

Captcha (solução inacessível e insegura)

(http://www.webvisum.com/en/main/download)

Menu DropDown

X

Clique aqui!

“Clique aqui”, “Saiba mais”, “veja Mais”… 41.700.000 respostas para “clique aqui” no Google.

   

   

Site da Itautec http://www.itautec.com.br (acesso em setembro 2009)

   

Site da Itautec http://www.itautec.com.br (acesso em setembro 2009)

X

Ou ainda as mais recentes modinhas como paralax,

modal, one single page , etc…

http://conversionxl.com/dont-use-automatic-image-sliders-or-carousels-ignore-the-fad/

Mas por quê?

Porque está na moda, todo mundo usa, porque não temos tempo e

somos reativos...

REWORK:  Business  book  from  37signals  

Mas por que? Porque não temos tempo, porque somos

reativos e dá muito trabalho…

   

Debate:

Quais são as principais barreiras?