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

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.


sobre
mim...

Agora estou assim...
;-)


sobre
mim...
desenvolvedora
frontend

desde 2006...


sobre
mim...
trabalhei com Magento alguns anos

desde 2010...


sobre
mim...
ministrei cursos e palestras sobre temas
para Magento


sobre
mim...
fundei o blog Magefront, onde escrevo
dicas para frontend para Magento


sobre
mim...
sou moderadora do fórum da comunidade
Magento


sobre
mim...
atualmente no W3C Brasil: open web e
acessibilidade

Brasil


Consórcio fundado em
1994 pelo criador da web,
Sir Tim Berners-Lee.


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.


Publicou mais de 100 padrões para web
HTML

CSS
XML


XHTML

Brasil


http://conferenciaweb.w3c.br/

http://premio.w3c.br


Brasil

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


?

?

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

+

E quer saber mais?

sabe que dia comemoramos hoje?

14 de outubro


Dia Mundia da Padronização!


Acessibilidade Web

O que é?

Acessibilidade Web
Por que?
45.623.910

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


Acessibilidade Web
Por que?

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


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


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


Acessibilidade Web
Pesquisas do CETIC sobre ecommerce

http://www.cetic.br


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

Acessibilidade Web

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

http://www.cetic.br

Acessibilidade Web
Quem se benefícia com isto?


http://www.youtube.com/watch?v=hFI4CuxQjSA

Como começar a fazer
acessibilidade web?!


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


Valide seu código

http://validator.w3.org/

Valide seu código

http://jigsaw.w3.org/css-validator/

Valide a acessibilidade

http://wave.webaim.org/


http://www.acessibilidade.gov.pt/accessmonitor/


http://www.tawdis.net/


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


Validação Manual:
Leitores de tela

NVDA


Validação Manual:
Leitores de tela

JAWS


Validação Manual:
Leitores de tela

DOSVOX


Validação Manual:
Leitores de tela

Voice Over


Validação Manual:
Leitores de tela

Orca


Magento
Onde fica a acessibilidade?
Frontend!
HTML


UX
Tema!

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


Getting started with
accessibility on Magento!


idioma do conteúdo

atributo lang


imagens com texto alternativo

atributo alt

videos com legenda

WebVTT
the web video text track formats

links: evitar a repetição


links: destacar o foco
:hover
:focus


links: saltar para conteúdo

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


fontes
tamanho adequado

contraste adequado


Navegação: por ARIA
Landmarks

atributo role


Navegação: por HTML headers
<h1>
<h2>
<h3>


Navegação:
desabilite o
CSS e as
imagens

teste tudo isso
utilizando somente
teclado!


Monitor desligado, você consegue?


formulários: labels e ariarequired


formulários: identificar campos
obrigatórios

*

formulários: identificar campos
obrigatórios

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


mensagens de feedback

aria-live
:focus


menus “invisíveis”


cores e contrastes

utilizar
símbolos junto
a cores


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


Onde aplicar?
•
•
•
•
•
•
•
•

Ajax Cart
Lytebox
ZipCode
Sort Order (product list)
Endless scroll (product list)
One Step Checkout
Ajax Warnings messages
Search autocomplete


•

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


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

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


•

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

• Por isso tornar o mundo acessível é
um compromisso de todos.


Muito
Obrigada!

@vanessametonini
vanessa@nic.br
W3C Brasil
14/10/2013


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

Mais conteúdo relacionado

Destaque

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

Mais de Vanessa Me Tonini

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