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

desenvolvedorafrontend

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

XML

CSS

XHTML


Brasil


http://conferenciaweb.w3c.br/


http://conferenciaweb.w3c.br/#/page/1




http://premio.w3c.br




Brasil

Web para todos, em qualquer dispositivo, em qualquer lugar, segura e

confiável!


??quarta-feira, 6 de novembro de 13

+

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


?+

Você sabia que o Ebay é um dos filiados 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 BrasilCenso 2010 - IBGE


Acessibilidade Web

Por que?

35.791.488Pessoas com deficiência

visual no BrasilCenso 2010 - IBGE


Acessibilidade Web

Pessoas com deficiência visual no Brasil

Não consegue enxergar

528.624

Grande dificuldade

6.056.684

Alguma dificuldade

29.206.180


Acessibilidade Web

Pessoas com deficiência visual no Brasil

Não consegue enxergar

528.624

Grande dificuldade

6.056.684

Alguma dificuldade

29.206.180

Censo 2010 - IBGE


Acessibilidade Web

Pesquisas do CETIC sobre ecommerce

http://www.cetic.br


http://www.cetic.br/


Acessibilidade Web

Motivos para não comprar pela Internet nos últimos 12 meses

http://www.cetic.br

Não tem interesse ou “necessidade”

Não confia no produto que irá receber

Falta de habilidade com computador ou internet

Não conseguiu realizar a compra





Acessibilidade Web

31%

http://www.cetic.br

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




Acessibilidade WebQuem 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/quarta-feira, 6 de novembro de 13

http://validator.w3.org/

http://validator.w3.org/

Valide seu código

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

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

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

Valide a acessibilidade

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

http://wave.webaim.org/

http://wave.webaim.org/


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

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

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


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

http://www.tawdis.net/

http://www.tawdis.net/


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






Validação Manual: Leitores de tela

NVDA



JAWS



DOSVOX



Voice Over



Orca


Magento

Onde fica a acessibilidade?

Frontend! UX

HTML 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

the web video text track formats

WebVTT


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 aria-required


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


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.


MuitoObrigada!


@vanessametonini

[email protected]

W3C Brasil

14/10/2013


mailto:[email protected]

mailto:[email protected]

acessibilidade no comércio eletrônico, custo ou benefício?

Technology