Nesta palestra apresentada no Meet Magento Brasil 2013, fiz uma breve apresentação do W3C e do trabalho do W3C no Brasil. Mostrei a relação do Ebay (atual mantenedor do Magento) ao W3C. Também foi exibido como anda o patamar da deficiência no país quanto ao uso do Web para compras e seus principais problemas. Por fim falo sobre os padrões de acessibilidade web do W3C e como podem ser encaixados em ambientes de comércio eletrônico, como na plataforma Open Source Magento.

1. Vanessa Me Tonini
Acessibilidade para
Comércio Eletrônico:
Custo ou Benefício?
quarta-feira, 6 de novembro de 13

2. sobre
mim...
Essa sou eu, pra quem me conheceu no
Meet Magento BR 2012.
quarta-feira, 6 de novembro de 13

3. sobre
mim...
Agora estou assim...
;-)
quarta-feira, 6 de novembro de 13

4. sobre
mim...
desenvolvedora
frontend
desde 2006...
quarta-feira, 6 de novembro de 13

5. sobre
mim...
trabalhei com Magento alguns anos
desde 2010...
quarta-feira, 6 de novembro de 13

6. sobre
mim...
ministrei cursos e palestras sobre temas
para Magento
quarta-feira, 6 de novembro de 13

7. sobre
mim...
fundei o blog Magefront, onde escrevo
dicas para frontend para Magento
quarta-feira, 6 de novembro de 13

8. sobre
mim...
sou moderadora do fórum da comunidade
Magento
quarta-feira, 6 de novembro de 13

9. sobre
mim...
atualmente no W3C Brasil: open web e
acessibilidade
Brasil
quarta-feira, 6 de novembro de 13

10. Consórcio fundado em
1994 pelo criador da web,
Sir Tim Berners-Lee.
quarta-feira, 6 de novembro de 13

11. Formado por organizações filiadas, uma
equipe em tempo integral e o público.
Qualquer um pode participar da criação dos
padrões para a Web.
quarta-feira, 6 de novembro de 13

12. Publicou mais de 100 padrões para web
HTML
CSS
XML
quarta-feira, 6 de novembro de 13
XHTML

13. Brasil
quarta-feira, 6 de novembro de 13

14. quarta-feira, 6 de novembro de 13

15. quarta-feira, 6 de novembro de 13

16. quarta-feira, 6 de novembro de 13

17. http://conferenciaweb.w3c.br/
quarta-feira, 6 de novembro de 13

18. http://premio.w3c.br
quarta-feira, 6 de novembro de 13

19. Brasil
Web para todos, em
qualquer dispositivo, em
qualquer lugar, segura e
confiável!
quarta-feira, 6 de novembro de 13

20. ?
quarta-feira, 6 de novembro de 13
?

21. Você sabia que o Ebay é um dos filiados ao W3C?
+
quarta-feira, 6 de novembro de 13

22. Você sabia que o Ebay é um dos filiados ao W3C?
+
quarta-feira, 6 de novembro de 13

23. E quer saber mais?
sabe que dia comemoramos hoje?
14 de outubro
quarta-feira, 6 de novembro de 13

24. Dia Mundia da Padronização!
quarta-feira, 6 de novembro de 13

25. Acessibilidade Web
O que é?
quarta-feira, 6 de novembro de 13

26. Acessibilidade Web
Por que?
45.623.910
24%
Pessoas com deficiência no Brasil
Censo 2010 - IBGE
quarta-feira, 6 de novembro de 13

27. Acessibilidade Web
Por que?
35.791.488
Pessoas com deficiência
visual no Brasil
Censo 2010 - IBGE
quarta-feira, 6 de novembro de 13

28. Acessibilidade Web
Pessoas com deficiência visual no Brasil
Não consegue
enxergar
Grande
dificuldade
Alguma
dificuldade
528.624
6.056.684
29.206.180
quarta-feira, 6 de novembro de 13

29. Acessibilidade Web
Pessoas com deficiência visual no Brasil
Não consegue
enxergar
Grande
dificuldade
Alguma
dificuldade
528.624
6.056.684
29.206.180
Censo 2010 - IBGE
quarta-feira, 6 de novembro de 13

30. Acessibilidade Web
Pesquisas do CETIC sobre ecommerce
http://www.cetic.br
quarta-feira, 6 de novembro de 13

31. Acessibilidade Web
Motivos para não comprar pela Internet nos
últimos 12 meses
Não confia no produto
que irá receber
Não tem interesse ou
“necessidade”
Falta de habilidade com
computador ou internet
Não conseguiu
realizar a compra
http://www.cetic.br
quarta-feira, 6 de novembro de 13

32. Acessibilidade Web
31%
dos usuários de internet que realizaram
alguma compra nos últimos 12 meses
http://www.cetic.br
quarta-feira, 6 de novembro de 13

33. Acessibilidade Web
Quem se benefícia com isto?
quarta-feira, 6 de novembro de 13

34. Acessibilidade Web
Quem se benefícia com isto?
quarta-feira, 6 de novembro de 13

35. Acessibilidade Web
Quem se benefícia com isto?
quarta-feira, 6 de novembro de 13

36. Acessibilidade Web
Quem se benefícia com isto?
quarta-feira, 6 de novembro de 13

37. Acessibilidade Web
Quem se benefícia com isto?
quarta-feira, 6 de novembro de 13

38. Acessibilidade Web
Quem se benefícia com isto?
quarta-feira, 6 de novembro de 13

39. Acessibilidade Web
Quem se benefícia com isto?
quarta-feira, 6 de novembro de 13

40. Acessibilidade Web
Quem se benefícia com isto?
quarta-feira, 6 de novembro de 13

41. Acessibilidade Web
Quem se benefícia com isto?
quarta-feira, 6 de novembro de 13

42. Acessibilidade Web
Quem se benefícia com isto?
quarta-feira, 6 de novembro de 13

43. Acessibilidade Web
Quem se benefícia com isto?
quarta-feira, 6 de novembro de 13

44. Acessibilidade Web
Quem se benefícia com isto?
quarta-feira, 6 de novembro de 13

45. Acessibilidade Web
Quem se benefícia com isto?
quarta-feira, 6 de novembro de 13

46. Acessibilidade Web
Quem se benefícia com isto?
quarta-feira, 6 de novembro de 13

47. http://www.youtube.com/watch?v=hFI4CuxQjSA
quarta-feira, 6 de novembro de 13

48. quarta-feira, 6 de novembro de 13

49. Como começar a fazer
acessibilidade web?!
quarta-feira, 6 de novembro de 13

50. Conheça os padrões de
acessibilidade W3C
Web Content Accessibility Guidelines (WCAG) 2.0
Diretrizes de Acessibilidade para Conteúdo Web
Accessible Rich Internet Applications Suite (WAI-ARIA)
Suíte de aplicações acessíveis para internet rica
quarta-feira, 6 de novembro de 13

51. Valide seu código
http://validator.w3.org/
quarta-feira, 6 de novembro de 13

52. Valide seu código
http://jigsaw.w3.org/css-validator/
quarta-feira, 6 de novembro de 13

53. Valide a acessibilidade
http://wave.webaim.org/
quarta-feira, 6 de novembro de 13

54. Valide a acessibilidade
http://www.acessibilidade.gov.pt/accessmonitor/
quarta-feira, 6 de novembro de 13

55. Valide a acessibilidade
http://www.tawdis.net/
quarta-feira, 6 de novembro de 13

56. Valide a acessibilidade
http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG/ases-avaliador-esimulador-de-acessibilidade-sitios
quarta-feira, 6 de novembro de 13

57. Valide a acessibilidade
http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG/ases-avaliador-esimulador-de-acessibilidade-sitios
quarta-feira, 6 de novembro de 13

58. Valide a acessibilidade
http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG/ases-avaliador-esimulador-de-acessibilidade-sitios
quarta-feira, 6 de novembro de 13

59. Validação Manual:
Leitores de tela
NVDA
quarta-feira, 6 de novembro de 13

60. Validação Manual:
Leitores de tela
JAWS
quarta-feira, 6 de novembro de 13

61. Validação Manual:
Leitores de tela
DOSVOX
quarta-feira, 6 de novembro de 13

62. Validação Manual:
Leitores de tela
Voice Over
quarta-feira, 6 de novembro de 13

63. Validação Manual:
Leitores de tela
Orca
quarta-feira, 6 de novembro de 13

64. Magento
Onde fica a acessibilidade?
Frontend!
HTML
quarta-feira, 6 de novembro de 13
UX
Tema!

65. Magento
Vem acessível?
Como posso melhorar a
acessibiliade da minha loja?
quarta-feira, 6 de novembro de 13

66. Getting started with
accessibility on Magento!
quarta-feira, 6 de novembro de 13

67. idioma do conteúdo
atributo lang
quarta-feira, 6 de novembro de 13

68. imagens com texto alternativo
atributo alt
quarta-feira, 6 de novembro de 13

69. videos com legenda
WebVTT
the web video text track formats
quarta-feira, 6 de novembro de 13

70. links: evitar a repetição
quarta-feira, 6 de novembro de 13

71. links: destacar o foco
:hover
:focus
quarta-feira, 6 de novembro de 13

72. links: saltar para conteúdo
<a href=”#conteudo”>
<div id=”conteudo”>
quarta-feira, 6 de novembro de 13

73. fontes
tamanho adequado
contraste adequado
quarta-feira, 6 de novembro de 13

74. Navegação: por ARIA
Landmarks
atributo role
quarta-feira, 6 de novembro de 13

75. Navegação: por HTML headers
<h1>
<h2>
<h3>
quarta-feira, 6 de novembro de 13

76. Navegação:
desabilite o
CSS e as
imagens
teste tudo isso
utilizando somente
teclado!
quarta-feira, 6 de novembro de 13

77. Monitor desligado, você consegue?
quarta-feira, 6 de novembro de 13

78. formulários: labels e ariarequired
quarta-feira, 6 de novembro de 13

79. formulários: identificar campos
obrigatórios
*
quarta-feira, 6 de novembro de 13

80. formulários: identificar campos
obrigatórios
a cor vermelha pode
ser imperceptível para
daltônicos
quarta-feira, 6 de novembro de 13

81. mensagens de feedback
aria-live
:focus
quarta-feira, 6 de novembro de 13

82. menus “invisíveis”
quarta-feira, 6 de novembro de 13

83. cores e contrastes
utilizar
símbolos junto
a cores
quarta-feira, 6 de novembro de 13

84. ARIA
• Promove acesibilidade em aplicações
com conteúdo dinâmico e controles
avançados do usuário, no qual
demandam AJAX, HTML e Javascript
quarta-feira, 6 de novembro de 13

85. Onde aplicar?
•
•
•
•
•
•
•
•
Ajax Cart
Lytebox
ZipCode
Sort Order (product list)
Endless scroll (product list)
One Step Checkout
Ajax Warnings messages
Search autocomplete
quarta-feira, 6 de novembro de 13

86. •
A realização da acessibilidade não
depende só de mudanças estruturais
mas principalmente de uma mudança
cultural.
quarta-feira, 6 de novembro de 13

87. A diferença não deve ser vista nunca
como um problema.
•
As pessoas diferentes são uma
contribuição pra sociedade.
quarta-feira, 6 de novembro de 13

88. •
Qualquer pessoal em algum
momento da vida vai precisar de
acessibilidade.
• Por isso tornar o mundo acessível é
um compromisso de todos.
quarta-feira, 6 de novembro de 13

89. Muito
Obrigada!
quarta-feira, 6 de novembro de 13

90. @vanessametonini
vanessa@nic.br
W3C Brasil
14/10/2013
quarta-feira, 6 de novembro de 13