Vanessa Me Tonini

Acessibilidade para
Comércio Eletrônico:
Custo ou Benefício?

quarta-feira, 6 de novembro de 13
sobre
mim...

Essa sou eu, pra quem me conheceu no
Meet Magento BR 2012.

quarta-feira, 6 de novembro de 13
sobre
mim...

Agora estou assim...
;-)

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

desde 2006...

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

desde 2010...

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

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

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

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

Brasil

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

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

CSS
XML

quarta-feira, 6 de novembro de 13

XHTML
Brasil

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

quarta-feira, 6 de novembro de 13
Brasil

Web para todos, em
qualquer dispositivo, em
qualquer lugar, segura e
confiável!

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

?
Você sabia que o Ebay é um dos filiados ao W3C?

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

+
quarta-feira, 6 de novembro de 13
E quer saber mais?

sabe que dia comemoramos hoje?

14 de outubro

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

quarta-feira, 6 de novembro de 13
Acessibilidade Web

O que é?
quarta-feira, 6 de novembro de 13
Acessibilidade Web
Por que?
45.623.910

24%
Pessoas com deficiência no Brasil
Censo 2010 - IBGE

quarta-feira, 6 de novemb...
Acessibilidade Web
Por que?

35.791.488
Pessoas com deficiência
visual no Brasil
Censo 2010 - IBGE

quarta-feira, 6 de nov...
Acessibilidade Web
Pessoas com deficiência visual no Brasil

Não consegue
enxergar

Grande
dificuldade

Alguma
dificuldade...
Acessibilidade Web
Pessoas com deficiência visual no Brasil

Não consegue
enxergar

Grande
dificuldade

Alguma
dificuldade...
Acessibilidade Web
Pesquisas do CETIC sobre ecommerce

http://www.cetic.br

quarta-feira, 6 de novembro de 13
Acessibilidade Web
Motivos para não comprar pela Internet nos
últimos 12 meses
Não confia no produto
que irá receber

Não ...
Acessibilidade Web

31%
dos usuários de internet que realizaram
alguma compra nos últimos 12 meses

http://www.cetic.br
qu...
Acessibilidade Web
Quem se benefícia com isto?

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

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

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

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

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

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

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

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

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

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

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

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

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

quarta-feira, 6 de novembro de 13
http://www.youtube.com/watch?v=hFI4CuxQjSA
quarta-feira, 6 de novembro de 13
quarta-feira, 6 de novembro de 13
Como começar a fazer
acessibilidade web?!

quarta-feira, 6 de novembro de 13
Conheça os padrões de
acessibilidade W3C
Web Content Accessibility Guidelines (WCAG) 2.0
Diretrizes de Acessibilidade para...
Valide seu código

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

http://jigsaw.w3.org/css-validator/
quarta-feira, 6 de novembro de 13
Valide a acessibilidade

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

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

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

http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG/ases-avaliador-esimulador-de-acessibil...
Valide a acessibilidade

http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG/ases-avaliador-esimulador-de-acessibil...
Valide a acessibilidade

http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG/ases-avaliador-esimulador-de-acessibil...
Validação Manual:
Leitores de tela

NVDA

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

JAWS

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

DOSVOX

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

Voice Over

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

Orca

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

quarta-feira, 6 de novembro de 13

UX
Tema!
Magento
Vem acessível?
Como posso melhorar a
acessibiliade da minha loja?

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

quarta-feira, 6 de novembro de 13
idioma do conteúdo

atributo lang

quarta-feira, 6 de novembro de 13
imagens com texto alternativo

atributo alt
quarta-feira, 6 de novembro de 13
videos com legenda

WebVTT
the web video text track formats
quarta-feira, 6 de novembro de 13
links: evitar a repetição

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

quarta-feira, 6 de novembro de 13
links: saltar para conteúdo

<a href=”#conteudo”>
<div id=”conteudo”>

quarta-feira, 6 de novembro de 13
fontes
tamanho adequado

contraste adequado

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

atributo role

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

quarta-feira, 6 de novembro de 13
Navegação:
desabilite o
CSS e as
imagens

teste tudo isso
utilizando somente
teclado!

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

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

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

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

a cor vermelha pode
ser imperceptível para
daltônicos

quarta-feira, 6 de no...
mensagens de feedback

aria-live
:focus

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

quarta-feira, 6 de novembro de 13
cores e contrastes

utilizar
símbolos junto
a cores

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

Ajax Cart
Lytebox
ZipCode
Sort Order (product list)
Endless scroll (product list)
One Step ...
•

A realização da acessibilidade não
depende só de mudanças estruturais
mas principalmente de uma mudança
cultural.

quar...
A diferença não deve ser vista nunca
como um problema.
•

As pessoas diferentes são uma
contribuição pra sociedade.

quart...
•

Qualquer pessoal em algum
momento da vida vai precisar de
acessibilidade.

• Por isso tornar o mundo acessível é
um com...
Muito
Obrigada!
quarta-feira, 6 de novembro de 13
@vanessametonini
vanessa@nic.br
W3C Brasil
14/10/2013

quarta-feira, 6 de novembro de 13
Upcoming SlideShare
Loading in...5
×

Acessibilidade no Comércio Eletrônico, custo ou benefício?

512

Published on

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.

Published in: Technology

Acessibilidade no Comércio Eletrônico, custo ou benefício?

  1. 1. Vanessa Me Tonini Acessibilidade para Comércio Eletrônico: Custo ou Benefício? quarta-feira, 6 de novembro de 13
  2. 2. sobre mim... Essa sou eu, pra quem me conheceu no Meet Magento BR 2012. quarta-feira, 6 de novembro de 13
  3. 3. sobre mim... Agora estou assim... ;-) quarta-feira, 6 de novembro de 13
  4. 4. sobre mim... desenvolvedora frontend desde 2006... quarta-feira, 6 de novembro de 13
  5. 5. sobre mim... trabalhei com Magento alguns anos desde 2010... quarta-feira, 6 de novembro de 13
  6. 6. sobre mim... ministrei cursos e palestras sobre temas para Magento quarta-feira, 6 de novembro de 13
  7. 7. sobre mim... fundei o blog Magefront, onde escrevo dicas para frontend para Magento quarta-feira, 6 de novembro de 13
  8. 8. sobre mim... sou moderadora do fórum da comunidade Magento quarta-feira, 6 de novembro de 13
  9. 9. sobre mim... atualmente no W3C Brasil: open web e acessibilidade Brasil quarta-feira, 6 de novembro de 13
  10. 10. Consórcio fundado em 1994 pelo criador da web, Sir Tim Berners-Lee. quarta-feira, 6 de novembro de 13
  11. 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. 12. Publicou mais de 100 padrões para web HTML CSS XML quarta-feira, 6 de novembro de 13 XHTML
  13. 13. Brasil quarta-feira, 6 de novembro de 13
  14. 14. quarta-feira, 6 de novembro de 13
  15. 15. quarta-feira, 6 de novembro de 13
  16. 16. quarta-feira, 6 de novembro de 13
  17. 17. http://conferenciaweb.w3c.br/ quarta-feira, 6 de novembro de 13
  18. 18. http://premio.w3c.br quarta-feira, 6 de novembro de 13
  19. 19. Brasil Web para todos, em qualquer dispositivo, em qualquer lugar, segura e confiável! quarta-feira, 6 de novembro de 13
  20. 20. ? quarta-feira, 6 de novembro de 13 ?
  21. 21. Você sabia que o Ebay é um dos filiados ao W3C? + quarta-feira, 6 de novembro de 13
  22. 22. Você sabia que o Ebay é um dos filiados ao W3C? + quarta-feira, 6 de novembro de 13
  23. 23. E quer saber mais? sabe que dia comemoramos hoje? 14 de outubro quarta-feira, 6 de novembro de 13
  24. 24. Dia Mundia da Padronização! quarta-feira, 6 de novembro de 13
  25. 25. Acessibilidade Web O que é? quarta-feira, 6 de novembro de 13
  26. 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. 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. 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. 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. 30. Acessibilidade Web Pesquisas do CETIC sobre ecommerce http://www.cetic.br quarta-feira, 6 de novembro de 13
  31. 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. 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. 33. Acessibilidade Web Quem se benefícia com isto? quarta-feira, 6 de novembro de 13
  34. 34. Acessibilidade Web Quem se benefícia com isto? quarta-feira, 6 de novembro de 13
  35. 35. Acessibilidade Web Quem se benefícia com isto? quarta-feira, 6 de novembro de 13
  36. 36. Acessibilidade Web Quem se benefícia com isto? quarta-feira, 6 de novembro de 13
  37. 37. Acessibilidade Web Quem se benefícia com isto? quarta-feira, 6 de novembro de 13
  38. 38. Acessibilidade Web Quem se benefícia com isto? quarta-feira, 6 de novembro de 13
  39. 39. Acessibilidade Web Quem se benefícia com isto? quarta-feira, 6 de novembro de 13
  40. 40. Acessibilidade Web Quem se benefícia com isto? quarta-feira, 6 de novembro de 13
  41. 41. Acessibilidade Web Quem se benefícia com isto? quarta-feira, 6 de novembro de 13
  42. 42. Acessibilidade Web Quem se benefícia com isto? quarta-feira, 6 de novembro de 13
  43. 43. Acessibilidade Web Quem se benefícia com isto? quarta-feira, 6 de novembro de 13
  44. 44. Acessibilidade Web Quem se benefícia com isto? quarta-feira, 6 de novembro de 13
  45. 45. Acessibilidade Web Quem se benefícia com isto? quarta-feira, 6 de novembro de 13
  46. 46. Acessibilidade Web Quem se benefícia com isto? quarta-feira, 6 de novembro de 13
  47. 47. http://www.youtube.com/watch?v=hFI4CuxQjSA quarta-feira, 6 de novembro de 13
  48. 48. quarta-feira, 6 de novembro de 13
  49. 49. Como começar a fazer acessibilidade web?! quarta-feira, 6 de novembro de 13
  50. 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. 51. Valide seu código http://validator.w3.org/ quarta-feira, 6 de novembro de 13
  52. 52. Valide seu código http://jigsaw.w3.org/css-validator/ quarta-feira, 6 de novembro de 13
  53. 53. Valide a acessibilidade http://wave.webaim.org/ quarta-feira, 6 de novembro de 13
  54. 54. Valide a acessibilidade http://www.acessibilidade.gov.pt/accessmonitor/ quarta-feira, 6 de novembro de 13
  55. 55. Valide a acessibilidade http://www.tawdis.net/ quarta-feira, 6 de novembro de 13
  56. 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. 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. 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. 59. Validação Manual: Leitores de tela NVDA quarta-feira, 6 de novembro de 13
  60. 60. Validação Manual: Leitores de tela JAWS quarta-feira, 6 de novembro de 13
  61. 61. Validação Manual: Leitores de tela DOSVOX quarta-feira, 6 de novembro de 13
  62. 62. Validação Manual: Leitores de tela Voice Over quarta-feira, 6 de novembro de 13
  63. 63. Validação Manual: Leitores de tela Orca quarta-feira, 6 de novembro de 13
  64. 64. Magento Onde fica a acessibilidade? Frontend! HTML quarta-feira, 6 de novembro de 13 UX Tema!
  65. 65. Magento Vem acessível? Como posso melhorar a acessibiliade da minha loja? quarta-feira, 6 de novembro de 13
  66. 66. Getting started with accessibility on Magento! quarta-feira, 6 de novembro de 13
  67. 67. idioma do conteúdo atributo lang quarta-feira, 6 de novembro de 13
  68. 68. imagens com texto alternativo atributo alt quarta-feira, 6 de novembro de 13
  69. 69. videos com legenda WebVTT the web video text track formats quarta-feira, 6 de novembro de 13
  70. 70. links: evitar a repetição quarta-feira, 6 de novembro de 13
  71. 71. links: destacar o foco :hover :focus quarta-feira, 6 de novembro de 13
  72. 72. links: saltar para conteúdo <a href=”#conteudo”> <div id=”conteudo”> quarta-feira, 6 de novembro de 13
  73. 73. fontes tamanho adequado contraste adequado quarta-feira, 6 de novembro de 13
  74. 74. Navegação: por ARIA Landmarks atributo role quarta-feira, 6 de novembro de 13
  75. 75. Navegação: por HTML headers <h1> <h2> <h3> quarta-feira, 6 de novembro de 13
  76. 76. Navegação: desabilite o CSS e as imagens teste tudo isso utilizando somente teclado! quarta-feira, 6 de novembro de 13
  77. 77. Monitor desligado, você consegue? quarta-feira, 6 de novembro de 13
  78. 78. formulários: labels e ariarequired quarta-feira, 6 de novembro de 13
  79. 79. formulários: identificar campos obrigatórios * quarta-feira, 6 de novembro de 13
  80. 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. 81. mensagens de feedback aria-live :focus quarta-feira, 6 de novembro de 13
  82. 82. menus “invisíveis” quarta-feira, 6 de novembro de 13
  83. 83. cores e contrastes utilizar símbolos junto a cores quarta-feira, 6 de novembro de 13
  84. 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. 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. 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. 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. 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. 89. Muito Obrigada! quarta-feira, 6 de novembro de 13
  90. 90. @vanessametonini vanessa@nic.br W3C Brasil 14/10/2013 quarta-feira, 6 de novembro de 13
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×