View
500
Download
2
Category
Preview:
DESCRIPTION
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.
Citation preview
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...
desenvolvedorafrontend
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 padrões para a Web.
quarta-feira, 6 de novembro de 13
Publicou mais de 100 padrões para web
HTML
XML
CSS
XHTML
quarta-feira, 6 de novembro de 13
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
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 BrasilCenso 2010 - IBGE
quarta-feira, 6 de novembro de 13
Acessibilidade Web
Por que?
35.791.488Pessoas com deficiência
visual no BrasilCenso 2010 - IBGE
quarta-feira, 6 de novembro de 13
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
quarta-feira, 6 de novembro de 13
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
quarta-feira, 6 de novembro de 13
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
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
quarta-feira, 6 de novembro de 13
Acessibilidade Web
31%
http://www.cetic.br
dos usuários de internet que realizaram alguma compra nos últimos 12 meses
quarta-feira, 6 de novembro de 13
Acessibilidade WebQuem se benefícia com isto?
quarta-feira, 6 de novembro de 13
Acessibilidade WebQuem se benefícia com isto?
quarta-feira, 6 de novembro de 13
Acessibilidade WebQuem se benefícia com isto?
quarta-feira, 6 de novembro de 13
Acessibilidade WebQuem se benefícia com isto?
quarta-feira, 6 de novembro de 13
Acessibilidade WebQuem se benefícia com isto?
quarta-feira, 6 de novembro de 13
Acessibilidade WebQuem se benefícia com isto?
quarta-feira, 6 de novembro de 13
Acessibilidade WebQuem se benefícia com isto?
quarta-feira, 6 de novembro de 13
Acessibilidade WebQuem se benefícia com isto?
quarta-feira, 6 de novembro de 13
Acessibilidade WebQuem se benefícia com isto?
quarta-feira, 6 de novembro de 13
Acessibilidade WebQuem se benefícia com isto?
quarta-feira, 6 de novembro de 13
Acessibilidade WebQuem se benefícia com isto?
quarta-feira, 6 de novembro de 13
Acessibilidade WebQuem se benefícia com isto?
quarta-feira, 6 de novembro de 13
Acessibilidade WebQuem se benefícia com isto?
quarta-feira, 6 de novembro de 13
Acessibilidade WebQuem 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 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
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-e-simulador-de-acessibilidade-sitios
quarta-feira, 6 de novembro de 13
Valide a acessibilidade
http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG/ases-avaliador-e-simulador-de-acessibilidade-sitios
quarta-feira, 6 de novembro de 13
Valide a acessibilidade
http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG/ases-avaliador-e-simulador-de-acessibilidade-sitios
quarta-feira, 6 de novembro de 13
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! UX
HTML Tema!
quarta-feira, 6 de novembro de 13
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
the web video text track formats
WebVTT
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 aria-required
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 novembro de 13
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, HTML e Javascript
quarta-feira, 6 de novembro de 13
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
• 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
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
• 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
MuitoObrigada!
quarta-feira, 6 de novembro de 13
@vanessametonini
vanessa@nic.br
W3C Brasil
14/10/2013
quarta-feira, 6 de novembro de 13
Recommended