perda de tempo?
Acessibilidade web
“...não apenas permitir que pessoas
com deficiências ou mobilidade
reduzida participem de atividades que
incluem o uso de ...
permitir o acesso por todos,
independente do tipo de usuário,
situação, condição ou ferramenta
utilizada
ou seja...
Estamos falando de...
❏ Cores do layout e fontes
❏ Distribuição adequada dos espaços
clicáveis
❏ Facilidade de disponibili...
NÃO!!!
Mas e aí, isso se aplica
somente a pessoas com
deficiência?
Fonte: http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
Fonte: http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
Fonte: http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
❏ Navegador
❏ Conexão
❏ Dispositivo
❏ Status social
❏ Se tem ou não deficiência
não interessa...
❏ Incapacidade de ver, ouvir ou
deslocarse
❏ Dificuldade ou impossibilidade de
interpretar certos tipos de
informação.
❏ D...
❏ Só texto
❏ Dimensões reduzidas
❏ Conexão lenta
❏ Diversidade:
❏ Navegador diferente do IE
❏ Por voz
❏ Sistema operaciona...
❏ Sem mouse
❏ Sem teclado
❏ Sem monitor
❏ Sem áudio
❏ Dispositivos diversos
Resumindo...
“Acessibilidade de verdade
é a soma de acessibilidade
+ web standards
+ usabilidade.”
www.acessodigital.net
o que é necessário?!
Vamos ao que
interessa…
Arquitetura
❏ Definição de tamanho e disposição
de elementos de acordo com a
ordem de consumo, fluxo de venda,
etc
❏ Plane...
Design
❏ Visual diferenciado de acordo com
a situação, plataforma e dispositivo
❏ Opção para alto contraste
❏ Design adequ...
Seguir padrões web
Significa desenvolver um código
semântico e sem erros
Exemplo incorreto
Exemplo correto
Conjunto de recomendações:
❏ W3C (WCAG, WAI-ARIA, etc)
❏ e-MAG
Seguir diretrizes de
acessibilidade
❏ Perceptível
A informação e os componentes da
interface de usuário precisam ser
apresentados de forma que eles
possam ser...
❏ Operável
Os componentes da interface do
usuário e a navegação precisam ser
operáveis
❏ Compreensível
A informação e a operação da
interface do usuário têm de ser
compreensíveis
❏ Robusto
Maximizar a compatibilidade com
atuais e futuros navegadores,
incluindo tecnologias de apoio
❏ Nível A - Nível mínimo de
conformidade
❏ Nível AA
❏ Nível AAA
Níveis de Conformidade
❏ Aumentar fonte
❏ Diminuir fonte
❏ Fonte normal
❏ Contraste
❏ Atalhos para Menu, Conteúdo e
Busca
❏ Link para a página de...
❏ Validar os códigos do conteúdo
HTML e das folhas de estilo
❏ Verificar o fluxo de leitura da
página – para tal, utilizar...
❏ Verificar as funcionalidades da barra
de acessibilidade
❏ Realizar a validação automática de
acessibilidade utilizando o...
Nem são tantos erros
Será?
Ferramentas de apoio
Avaliador de acessibilidade
❏ ASES
❏ Da Silva (versão antiga do ASES
online)
❏ Componentes FF
❏ Web developer tool
"Pensar em acessibilidade não é
ser bonzinho, é enxergar no
público não-padrão e com
necessidades especiais,
potenciais co...
http://bengalalegal.com/
http://acessibilidade.bento.ifrs.edu.br/
http://vidamaislivre.com.br/
http://www.parquedossonhos....
Links úteis
Sobre acessibilidade
❏ http://www.acessibilidadelegal.com/
❏ http://www.acessobrasil.org.br/
❏ http://www.gove...
❏ http://pt.wikipedia.org/wiki/Acessibilidade
❏ http://www.acessobrasil.org.br
❏ http://www.acessobrasil.org.br/ciiee/inde...
Acessibilidade web, perda de tempo?
Acessibilidade web, perda de tempo?
Acessibilidade web, perda de tempo?
Acessibilidade web, perda de tempo?
Acessibilidade web, perda de tempo?
Acessibilidade web, perda de tempo?
Acessibilidade web, perda de tempo?
Acessibilidade web, perda de tempo?
Próximos SlideShares
Carregando em…5
×

Acessibilidade web, perda de tempo?

468 visualizações

Publicada em

A acessibilidade na web é perda de tempo? veja porque não é =)

Publicada em: Internet
0 comentários
4 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
468
No SlideShare
0
A partir de incorporações
0
Número de incorporações
20
Ações
Compartilhamentos
0
Downloads
17
Comentários
0
Gostaram
4
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Acessibilidade web, perda de tempo?

  1. 1. perda de tempo? Acessibilidade web
  2. 2. “...não apenas permitir que pessoas com deficiências ou mobilidade reduzida participem de atividades que incluem o uso de produtos, serviços e informação, mas a inclusão e extensão do uso destes por todas as parcelas presentes em uma determinada população, visando sua adaptação e locomoção, eliminando as barreiras.” (Wikipédia, 2012) Acessibilidade
  3. 3. permitir o acesso por todos, independente do tipo de usuário, situação, condição ou ferramenta utilizada ou seja...
  4. 4. Estamos falando de... ❏ Cores do layout e fontes ❏ Distribuição adequada dos espaços clicáveis ❏ Facilidade de disponibilização de conteúdo ❏ Código semântico ❏ HTML e CSS válido ❏ Javascript que preveja o uso de teclas ❏ Entre outros...
  5. 5. NÃO!!! Mas e aí, isso se aplica somente a pessoas com deficiência?
  6. 6. Fonte: http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
  7. 7. Fonte: http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
  8. 8. Fonte: http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
  9. 9. ❏ Navegador ❏ Conexão ❏ Dispositivo ❏ Status social ❏ Se tem ou não deficiência não interessa...
  10. 10. ❏ Incapacidade de ver, ouvir ou deslocarse ❏ Dificuldade ou impossibilidade de interpretar certos tipos de informação. ❏ Dificuldade visual para ler ou compreender textos. ❏ Incapacidade para usar o teclado ou o mouse, ou não dispor deles.
  11. 11. ❏ Só texto ❏ Dimensões reduzidas ❏ Conexão lenta ❏ Diversidade: ❏ Navegador diferente do IE ❏ Por voz ❏ Sistema operacional não Windows ❏ Desatualização: ❏ Navegador antigo ❏ Muito atualizado ¬¬' ❏ Smartphones ❏ Smart TVs Devemos levar em consideração...
  12. 12. ❏ Sem mouse ❏ Sem teclado ❏ Sem monitor ❏ Sem áudio ❏ Dispositivos diversos Resumindo...
  13. 13. “Acessibilidade de verdade é a soma de acessibilidade + web standards + usabilidade.” www.acessodigital.net
  14. 14. o que é necessário?! Vamos ao que interessa…
  15. 15. Arquitetura ❏ Definição de tamanho e disposição de elementos de acordo com a ordem de consumo, fluxo de venda, etc ❏ Planejamento espacial considerando o tamanho e disposição dos elementos para que sejam responsivos ou adaptáveis às necessidades especificas do usuário Layout
  16. 16. Design ❏ Visual diferenciado de acordo com a situação, plataforma e dispositivo ❏ Opção para alto contraste ❏ Design adequado para usuários daltônicos ❏ Escolha de fontes ❏ Estilo ❏ Tamanho
  17. 17. Seguir padrões web Significa desenvolver um código semântico e sem erros
  18. 18. Exemplo incorreto
  19. 19. Exemplo correto
  20. 20. Conjunto de recomendações: ❏ W3C (WCAG, WAI-ARIA, etc) ❏ e-MAG Seguir diretrizes de acessibilidade
  21. 21. ❏ Perceptível A informação e os componentes da interface de usuário precisam ser apresentados de forma que eles possam ser percebidos com facilidade Níveis de acessibilidade WCAG 2.0
  22. 22. ❏ Operável Os componentes da interface do usuário e a navegação precisam ser operáveis
  23. 23. ❏ Compreensível A informação e a operação da interface do usuário têm de ser compreensíveis
  24. 24. ❏ Robusto Maximizar a compatibilidade com atuais e futuros navegadores, incluindo tecnologias de apoio
  25. 25. ❏ Nível A - Nível mínimo de conformidade ❏ Nível AA ❏ Nível AAA Níveis de Conformidade
  26. 26. ❏ Aumentar fonte ❏ Diminuir fonte ❏ Fonte normal ❏ Contraste ❏ Atalhos para Menu, Conteúdo e Busca ❏ Link para a página de acessibilidade do site Barra de acessibilidade
  27. 27. ❏ Validar os códigos do conteúdo HTML e das folhas de estilo ❏ Verificar o fluxo de leitura da página – para tal, utilizar um navegador textual ❏ Verificar o fluxo de leitura da página sem estilos, sem script e sem as imagens Realizar avaliação de acessibilidade
  28. 28. ❏ Verificar as funcionalidades da barra de acessibilidade ❏ Realizar a validação automática de acessibilidade utilizando o ASES e outros avaliadores automáticos ❏ Realizar a validação manual, utilizando os checklists de validação humana
  29. 29. Nem são tantos erros
  30. 30. Será?
  31. 31. Ferramentas de apoio
  32. 32. Avaliador de acessibilidade ❏ ASES ❏ Da Silva (versão antiga do ASES online) ❏ Componentes FF ❏ Web developer tool
  33. 33. "Pensar em acessibilidade não é ser bonzinho, é enxergar no público não-padrão e com necessidades especiais, potenciais consumidores para o que você está vendendo." Bruno Torres (março, 2006) Custo ou benefício?
  34. 34. http://bengalalegal.com/ http://acessibilidade.bento.ifrs.edu.br/ http://vidamaislivre.com.br/ http://www.parquedossonhos.com.br/ Sites premiados
  35. 35. Links úteis Sobre acessibilidade ❏ http://www.acessibilidadelegal.com/ ❏ http://www.acessobrasil.org.br/ ❏ http://www.governoeletronico.gov. br/acoes-e-projetos/e-MAG Validador ❏ http://www.dasilva.org.br/ Buscador de sites acessíveis ❏ http://www.clareou.com.br/
  36. 36. ❏ http://pt.wikipedia.org/wiki/Acessibilidade ❏ http://www.acessobrasil.org.br ❏ http://www.acessobrasil.org.br/ciiee/index.htm ❏ http://www.w3.org/TR/WAI-WEBCONTENT/ ❏ http://www.governoeletronico.gov.br/acoes-e- projetos/e-MAG ❏ http://brunotorres.net/acessibilidade-nao-e- altruismo ❏ http://www.acessibilidadelegal.com/ ❏ http://www.lupadigital.info/ ❏ http://www.w3.org/TR/CSS21/media.html ❏ http://www.w3.org/TR/css3-mediaqueries/ ❏ http://tableless.com.br/o-que-sao-media-types/ Referências

×