1. TablelessConf
–
São
Paulo
(maio
2013)
Acessibilidade
Web
e
Design
Mobile:
tudo
junto
e
misturado
Horácio
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. mitos = verdades

9. X

10. mitos

11. mitos
X

12. mitos

13. mitos

14. mitos
V

15. em acessibilidade

16. difícil

17. é caro

18. limitador

19. feio

20. é demorado

21. é irrelevante

22. Será?

24. Acessibilidade:
quem precisa?

25. Mas ALGUMAS
pessoas precisam de
acessibilidade em
TODOS os
momentos.

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

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

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

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

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

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

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

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

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

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

36. Com
idade
avançada

37.
• 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);

38. • Com
tendinite
ou
fratura
no
braço
dominante;
• Tendo
as
mãos,
olhos
ou
ouvidos
ocupados
em
outra
tarefa.

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

41. Acessibilidade
para
quantos
no
BRASIL?

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

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

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

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

46. Contexto do
Design Mobile

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

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

54. Estatísticas Brasil

55. GIF
animado...

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

57. No mundo

58. Vários GIFs
animados...

61. capacidades/
vantagens
do mobile

62. GPS

63. Acelerômetro

64. Giroscópio

65. Bluetooth

66. Bluetooth

67. Áudio, vídeo e imagem

68. NFC

69. Sensores multitoque

70. Em qualquer hora e local.

71. Boa compatibilidade entre
navegadores Mobile e HTML5

72. Atualizações frequentes...

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

75. @lukew

76. ‘Desktop is like “diving”…

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

78. @lukew
desktop

79. @lukew
tela grande

80. @lukew
tela grande
energia

81. @lukew
tela grande
energia
rede consistente

82. @lukew
tela grande
energia
rede consistente
teclado

83. @lukew
tela grande
energia
rede consistente
teclado
mouse

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

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

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

87. @lukew
mobile

88. tela pequena
@lukew

89. tela pequena
bateria
@lukew

90. tela pequena
bateria
rede inconsistente
@lukew

91. tela pequena
bateria
rede inconsistente
dedo gordo
@lukew

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

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

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

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

98. perda de 80% do espaço

99. @lukew

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

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

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

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

104. @lukew

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

106. Less is more...

107. @lukew

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

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

110. E qual desses controles?

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

112. mas cuidado…

113. no ponto…

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

122. Desktop
Site

124. Mobile Site

128. Como anda a
qualidade dos
nossos sites nas
versões desktop?

129. Brad Frost

130. BULLSHIT

132. Será?

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

154. Uma alternativa…

155. Uma alternativa…
Accessibility First!
Mobile First!

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

157. Paradoxo da escolha

159. Um probema comum
em projetos Web

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

161. Copia e cola quase tudo...

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

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

165. Código de barras

167. X

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

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

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

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

172. Menu DropDown

174. X

175. Clique aqui!

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

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

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

179. <a title=“redundante”>
Redundante
</a>

181. X

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

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

185. Mas por quê?

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

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