Acessibilidade Web e Design Mobile, tudo junto e misturado... Apresentação utilizada na TablelessConf em São Paulo - maio de 2013.

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

2. Contexto da
Acessibilidade na Web

3. Acessibilidade?
O que é

4. Usabilidade?
O que é

5. Qual é o relacionamento
entre a acessibilidade
e usabilidade?

7. Acessibilidade:
quem precisa?

8. ALGUMAS pessoas
precisam de
acessibilidade em
TODOS os
momentos.

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

10. Mark, tetraplégico, interage com os olhos

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

12. Para os usuários cegos.
Fotos de três cegos trabalhando no
computador utizando um programa
leitor de telas

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

14. OUTRAS pessoas
precisam de
acessibilidade em
MUITOS os
momentos.

15. Isaias à esquerda, conduzindo o Januário para um chopinho
após curso de acessibilidade Web.
Por exemplo, o Isaias,
que é designer e
daltônico.

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

17. TODAS as pessoas
precisam de
acessibilidade em
ALGUM momento.

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

19.
• 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).

20. E usando
dispositivos
móveis com
telas pequenas.

24. Acessibilidade
para
quantos
no
BRASIL?

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

26. 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%)

27. 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%)

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

29. Contexto do
Design Mobile

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

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

32. hgp://www.slideshare.net/HubSpot/50-­‐mobilefactsdeck

37. hgp://www.slideshare.net/HubSpot/50-­‐mobilefactsdec

39. Estatísticas Brasil

40. GIF
animado...

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

42. No mundo

43. Vários GIFs
animados...

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

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

49. capacidades/
vantagens
do mobile

50. GPS

51. Acelerômetro

52. Giroscópio

53. Bluetooth

54. Bluetooth

55. Áudio, vídeo e imagem

57. NFC

58. Sensores multitoque

59. Em qualquer hora e local.

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

61. Boa compatibilidade entre
navegadores Mobile e HTML5

62. Atualizações frequentes...

64. limitações/restrições
do mobile

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

66. @lukew

67. ‘Desktop is like “diving”…

68. …while mobile is like “snorkling.”’
by Hinman at Nokia
hgp://www.slideshare.net/Rache

69. @lukew
desktop

70. @lukew
tela grande

71. @lukew
tela grande
energia

72. @lukew
tela grande
energia
rede consistente

73. @lukew
tela grande
energia
rede consistente
teclado

74. @lukew
tela grande
energia
rede consistente
teclado
mouse

75. @lukew
tela grande
energia
rede consistente
teclado
mouse
cadeira

76. @lukew
tela grande
energia
rede consistente
teclado
mouse
cadeira
mesa

77. tela grande
energia
rede consistente
teclado
mouse
cadeira
mesa
caneca de café
@lukew

79. @lukew
mobile

80. tela pequena
@lukew

81. tela pequena
bateria
@lukew

82. tela pequena
bateria
rede inconsistente
@lukew

83. tela pequena
bateria
rede inconsistente
dedo gordo
@lukew

84. tela pequena
bateria
rede inconsistente
dedo gordo
sensores
@lukew

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

86. Como o Luli disse no Digitalks no Rio:
“Nesse mundo Mobile, somos
todos daltónicos e sofremos
do Mal de Parkinson”

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

90. perda de 80% do espaço

91. @lukew

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

93. te força a priorizar...
te força a manter o foco…

94. Alguém conhece algum site
que gostaria que 80% do seu
conteúdo/itens/elementos
fosse retirado da interface?

95. Flickr desktop
60 opções de menu...

96. @lukew

97. Flickr mobile
7 opções de menu...

98. Less is more...

99. @lukew

100. Conhecimento profundo da
audiência, o que fazem, por
que vieram e por que se
importam com o Flickr...

101. Qual desses Desktops oferecia a
melhor experiência?

102. E qual desses controles?

103. Restrições são boas para o
design, pois te forçam a
priorizar, a manter o foco

104. mas cuidado…

105. no ponto…

109. Os detalhes do
comprador não
podem ser
visualizados na
versão mobile.

114. Como anda as soluções
acessibilidade digital no
Brasil?
E os sites/sistemas Mobile?

121. Uma alternativa…

122. Uma alternativa…
Accessibility First!
Mobile First!

123. Mobile
First
Luke
Wroblewski
Livro:
hgp://www.abookapart.com/products/mobile-­‐first

124. Paradoxo da escolha

126. Um probema comum
em projetos Web

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

128. Copia e cola quase tudo...

130. “Todo negócio é único e
fundamentalmente
diverso de qualquer
outro, por maiores que
sejam suas
similaridades.“
O tiro e o alvo – aforismo 54

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

132. Código de barras

134. X

135. Artigo
CAPTCHA: herói ou vilão?
http://acessodigital.net/art_captcha-heroi-ou-vilao.html

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

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

138. Captcha
(solução inacessível e insegura)
(http://www.webvisum.com/en/main/download)

139. Menu DropDown

141. X

142. Clique aqui!

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

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

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

146. Ou ainda as mais recentes
modinhas como paralax,
modal, one single page , etc…

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

149. Mas por quê?

150. Porque está na moda, todo mundo
usa, porque não temos tempo e
somos reativos...
REWORK:
Business
book
from
37si

151. Mas por que?
Porque não temos tempo, porque somos
reativos e dá muito trabalho…

152. Debate:
Quais são as
principais barreiras?