Conscientização sobre acessibilidade e checklist básico para melhorar a experiência de cegos no ecommerce. Palestra dada em outubro de 2016 na Webbr (conferência do W3C).

1. JULIANA FERNANDES
Outubro / 2016
COMPRAS ONLINE E
ACESSIBILIDADE
MELHORANDO A EXPERIÊNCIA DE USUÁRIOS
DE LEITORES DE TELA

2. JULIANA FERNANDES
UX DESIGNER NA F.BIZ
@julianafrost
www.vivendoporai.com.br
slideshare.net/julianafrost

3. POR QUE PRECISAMOS
FALAR SOBRE
ACESSIBILIDADE?

4. NO BRASIL, 23,9% DA
POPULAÇÃO TEM ALGUM TIPO
DE DEFICIÊNCIA*.
Ou seja: 45,6 milhões de brasileiros.
*Dados do Censo Demográfico 2010.

5. OLHE AO REDOR.
QUASE NADA ATENDE PESSOAS
COM DETERMINADAS
NECESSIDADES.

6. SERÁ QUE TEM CARDÁPIO EM BRAILE?

7. SERÁ QUE A CALÇADA TEM RAMPA?

8. SERÁ QUE ESSA ESCOLA ESTÁ PREPARADA PARA RECEBER
UM ALUNO COM DEFICIÊNCIA COGNITIVA?

9. Infelizmente, o mundo está feito para quem:
•ENXERGA SEM DIFICULDADE
•SE LOCOMOVE SEM DIFICULDADE
•OUVE SEM DIFICULDADE
•COMPREENDE SEM DIFICULDADE

10. MAS E AÍ?
JÁ SE COLOCOU
NO LUGAR DO
OUTRO HOJE?

11. E SE...?

12. VOCÊ FOSSE CADEIRANTE E
QUISESSE IR NO MOTEL?

13. VOCÊ FOSSE SURDO E
QUISESSE IR NO CINEMA?

14. VOCÊ FOSSE CEGO,
PRECISSE DE UM REMÉDIO E
A EMBALAGEM NÃO FOSSE
EM BRAILE?

15. QUAL O RESULTADO DISSO
PARA QUEM TEM DEFICIÊNCIA?

16. FALTA DE
AUTONOMIA.

17. E QUANDO O ASSUNTO É
DINHEIRO?

18. COM INTERNET É FÁCIL COMPRAR.
VÁRIAS LOJAS VIRTUAIS VENDEM
TODO TIPO DE COISA. É SÓ
COMPRAR E RECEBER.

19. MAS É SIMPLES
ASSIM PRA TODO
MUNDO?

20. E SE VOCÊ FOSSE
CEGO?

21. SENDO UMA PESSOA CEGA
QUE USA INTERNET, VOCÊ
PRECISARIA DE 2 COISAS PARA
EXERCER SUA AUTONOMIA:

22. LEITOR DE TELA NO
COMPUTADOR OU
SMARTPHONE
SITES CONSTRUÍDOS
DE FORMA ACESSÍVEL

23. MOMENTO DÚVIDA
VOCÊ SABE COMO UM LEITOR
DE TELA FUNCIONA?

24. FIZ UMA EXPERIÊNCIA COM LEITOR DE TELA.
TENTEI GASTAR MEU DINHEIRO
NA INTERNET, COMPRANDO
UMA COISA QUE PRECISAVA.

25. TAREFA:
COMPRAR UM INALADOR NOVO
PARA USAR NOS MEUS ANIMAIS
DE ESTIMAÇÃO.

27. CENÁRIO:
1. ENCONTRAR UM INALADOR BOM COM O MENOR
PREÇO POSSÍVEL (CUSTO BENEFÍCIO)
2. QUE NEBULIZE DE 1,0ML A 1,5ML POR MINUTO
3. QUE SEJA SILENCIOSO PARA NÃO ACORDAR OS
VIZINHOS NEM ESTRESSAR OS ANIMAIS

29. 1ª TENTATIVA
1. PESQUISEI NO GOOGLE ESCOLHI
UM RESULTADO DO GOOGLE
SHOPPING.

32. 1ª TENTATIVA
CHEGUEI RAPIDAMENTE NO PREÇO E DESCRIÇÃO DO
PRODUTO, MAS A DESCRIÇÃO ERA APENAS
PROMOCIONAL.

33. 1ª TENTATIVA
3. NAVEGUEI PELOS CABEÇALHOS
PROCURANDO POR INFOS TÉCNICAS
QUERIA INFORMAÇÕES TÉCNICAS E NÃO ENCONTREI. MAIS DE
60 CABEÇALHOS E NENHUM SOBRE O QUE EU PRECISAVA.

34. 1ª TENTATIVA
4. ABRI UMA NOVA ABA E REINICIEI A
PESQUISA
DESISTI E FUI BUSCAR OUTRA LOJA.

35. 2ª TENTATIVA

36. 2ª TENTATIVA
1. ESCOLHI UM RESULTADO
ORGÂNICO

39. 2ª TENTATIVA
2. NAVEGUEI PELOS CABEÇALHOS PARA
ENCONTRAR OPÇÕES DE FILTRAGEM
CAI EM UMA LISTAGEM DE INALADORES. PRECISAVA DEIXAR A
BUSCA MAIS OBJETIVA, POR ISSO PROCUREI POR ALGO COMO
“FILTRO” NOS CABEÇALHOS, MAS NÃO ENCONTREI NADA.

40. 2ª TENTATIVA
3. COGITEI NAVEGAR POR LINKS PARA
ENCONTRAR OS FILTROS
IMPOSSÍVEL PARA UMA PÁGINA COM MAIS DE 600 LINKS.

41. 2ª TENTATIVA
4. NAVEGUEI DE NOVO PELOS
CABEÇALHOS NA TENTATIVA DE ACHAR
RESULTADOS DIFERENCIADOS
NO CABEÇALHO “DESTAQUES DE NEBULIZADOR / INALADOR”
ENCONTREI INALADORES QUE VALIAM A PENA OLHAR.

43. 2ª TENTATIVA
5. NA PÁGINA DO PRODUTO, BUSQUEI
POR ALGUM CABEÇALHO SOBRE
INFORMAÇÕES DO INALADOR
ENCONTREI TODAS AS INFORMAÇÕES QUE PRECISAVA, TANTO
PROMOCIONAIS QUANTO TÉCNICAS.

44. 2ª TENTATIVA
6. PROCUREI SOBRE AVALIAÇÕES DO
PRODUTO NOS CABEÇALHOS
NÃO ACHEI, MAS SABIA QUE O ECOMMERCE TINHA ESSE TIPO
CONTEÚDO.

45. 2ª TENTATIVA
7. USEI O RECURSO DE BUSCA DO
BROWSER PARA ENCONTRAR A PALAVRA
“AVALIAÇÕES”
ENCONTREI, MAS PODERIA TER SIDO MENOS TRABALHOSO.

47. 2ª TENTATIVA
8. DECIDI COMPRAR E PROCUREI PELO
LINK “COMPRAR”
FUI PARA O CABEÇALHO “Inalador a Ar comprimido Inalamax Plus -
NS Inaladores” E NAVEGUEI POR LINKS ATÉ OUVIR O TEXTO
“COMPRAR”.

49. 2ª TENTATIVA
9. CAÍ NUMA PÁGINA DESCONHECIDA.
TENTEI NAVEGAR PELOS CABEÇALHOS
PARA DESCOBRIR ONDE ESTAVA
ESPERAVA CAIR NO CARRINHO, MAS FUI LEVADA PARA UMA PÁGINA
COM TÍTULO GENÉRICO. NÃO HAVIA NENHUM CABEÇALHO.

50. 2ª TENTATIVA
10. TENTEI NAVEGAR PELOS LINKS ATÉ
OUVIR ALGO QUE FIZESSE SENTIDO
HAVIAM MAIS DE 350 LINKS NA PÁGINA, E TODOS ELES ERAM
SOBRE TIPOS DE PRODUTOS (NOTEBOOKS, SOFÁS, PNEUS...)

51. 2ª TENTATIVA
11. NAVEGUEI POR ELEMENTOS DE
FORMULÁRIO
ESPERAVA QUE A SAÍDA FOSSE ATRAVÉS DE UM BOTÃO.
NAVEGANDO POR ELEMENTOS DE FORMULÁRIO ENCONTREI 2
BOTÕES COM O NOME “ENVIAR” E 1 COM “OK”.

53. 2ª TENTATIVA
12. DESISTI DA COMPRA
NÃO SABIA ONDE ESTAVA E NEM COMO PROSSEGUIR. DEPOIS
DE MUITO ESFORÇO, DESISTI DA COMPRA PELA INTERNET.

54. RESULTADO:
SOFRI
HORRORES
E NÃO QUERIA MAIS
TENTAR.

55. CHECKLIST BÁSICO DE
ECOMMERCE
O QUE FAZER PARA TORNAR O ECOMMERCE MAIS
ACESSIVEL PARA USUARIOS DE LEITOR DE TELA?

56.  O MENU É ACESSÍVEL VIA
TECLADO?
ATRAVÉS DO TECLADO CONSIGO ACESSAR SUBMENUS?
CHECKLIST

57.  CORRIGI INTERAÇÕES QUE
DEPENDAM DO MOUSE?
ELIMINEI INTERAÇÕES CRÍTICAS QUE DEPENDEM DE
MOUSEOVER OU DRAG-AND-DROP?
CHECKLIST

58.  O TITULO DA PÁGINA É
ESCLARECEDOR?
ATRAVÉS DELE É POSSÍVEL SABER SE ESTOU NUMA LISTAGEM DE
RESULTADOS, DETALHE DE PRODUTO, ATENDIMENTO OU ONDE
FOR?
CHECKLIST

59.  AS IMAGENS TEM ALT
SIGNIFICATIVOS?
A DESCRIÇÃO DO ALT É ENRIQUECEDORA E AJUDA VISUALIZAR
DETALHES DO PRODUTO, FORMAS DE USO OU OUTRAS INFOS QUE
ME FAZEM ENXERGAR O QUE ESTÁ SENDO VENDIDO?
CHECKLIST

60.  A PÁGINA TEM CABEÇALHOS?
OS CABEÇALHOS POSSUEM UMA HIERARQUIA LÓGICA E
TRANSMITEM COM CLAREZA O CONTEÚDO DENTRO DELES?
CHECKLIST

61.  AS LISTAGENS DE PRODUTOS PODEM
SER FILTRADAS FACILMENTE?
POSSO FILTRAR OS RESULTADOS POR PREÇO, TIPO DE MATERIAL,
TAMANHO, ETC?
CHECKLIST

62.  GARANTI O MÍNIMO POSSÍVEL DE
LINKS PARA UM MESMO DESTINO?
A QUANTIDADE DE LINKS ESTÁ OTIMIZADA, DIMINUINDO O
ESFORÇO PARA CHEGAR NO LUGAR CERTO?
CHECKLIST

63.  LINKS E BOTÕES TEM NOMES QUE
INDIQUEM CLARAMENTE A AÇÃO?
SABEREI EXATAMENTE O QUE VAI ACONTECER OU PARA ONDE
IREI QUANDO INTERAGIR COM ELES?
CHECKLIST

64.  OS TEXTOS ESTÃO FORA DE
IMAGENS?
INFORMAÇÕES DE OFERTAS, PREÇOS OU QUAIQUER OUTROS
TEXTOS ESTÃO DENTRO DO HTML E NÃO DE IMAGENS?
CHECKLIST

65.  O PRODUTO TEM DESCRIÇÃO?
CONSIGO ENCONTRAR INFORMAÇÕES DETALHADAS SOBRE O
QUE ESTOU COMPRANDO?
CHECKLIST

66.  EXISTE CÁLCULO DE FRETE NA
PÁGINA DO PRODUTO?
ANTES DE CHEGAR NO CARRINHO, CONSIGO DESCOBRIR SE
ENTREGAM NA MINHA REGIÃO E QUAL O VALOR DO FRETE?
CHECKLIST

67.  EXISTEM INFOS DE PAGAMENTO
NA PÁGINA DO PRODUTO?
ANTES DE FINALIZAR O PAGAMENTO, CONSIGO DESCOBRIR SE
TEM ALGUM DESCONTO À VISTA OU EM QUANTAS VEZES POSSO
PARCELAR?
CHECKLIST

68.  OS CAMPOS DE FORMULÁRIO
ESTÃO ASSOCIADOS A UM LABEL?
O LABEL ME ESCLARECE O QUE PREENCHER NO CAMPO E REDUZ
AS CHANCES DE ERRO?
CHECKLIST

69.  FOI TESTADO COM CONSUMIDORES
CEGOS OU PELO MENOS VALIDADO
COM FERRAMENTAS?
VALIDAR COM FERRAMENTAS É MELHOR QUE NADA, MAS NÃO É ASSERTIVO
COMO TESTAR COM CONSUMIDORES REAIS.
CHECKLIST

70. OBRIGADA!
UM AGRADECIMENTO ESPECIAL AOS AMIGOS USUÁRIOS DE
LEITOR DE TELA, QUE COMPARTILHARAM SUAS
EXPERIÊNCIAS :)
@julianafrost / www.vivendoporai.com.br