Acessibilidade na Web é
para todos
UFSCAR - SOROCABA
Fabíola C. Matsumoto
Fabiana Bonilha
Agenda
•
•
•
•
•
•

Desenho Universal
O que é acessibilidade?
Acessibilidade na WEB
Legislação
Alguns números
Diretrizes d...
O que é acessibilidade na WEB?

É garantir que uma informação ou serviço
esteja disponível na web, em igualdade de
condiçõ...
Acessibilidade e Usabilidade
Acessibilidade: Trata do acesso a locais, produtos,
serviços ou informações efetivamente disp...
Mudança de Paradigma
Com quatro linhas retas, sem tirar o lápis do papel e
sem passar pelo mesmo ponto duas ou mais vezes,...
Mudança de Paradigma
Com quatro linhas retas, sem tirar o lápis do papel e
sem passar pelo mesmo ponto duas ou mais vezes,...
Mudança de Paradigma
Pessoa com deficiência

São consideradas pessoas com deficiência aquelas
que têm impedimentos de longo prazo de natureza
f...
Legislação

Conformidade com o
decreto
de
lei
Decreto nº 5.296
(dezembro/04) e com
a convenção da ONU
que ganhou força de
...
E se fosse você
Realidade Brasileira

População Brasileira
190.755.799
Pessoas com deficiência
45.606.048

População Brasileira

24%

76%
...
2010

98% das páginas do governo
não eram acessíveis.
95% das páginas do governo
federal não eram acessíveis.
Fonte: Censo...
2012

95% das páginas do governo
não eram acessíveis.
93% das páginas do governo
federal não eram acessíveis.
Fonte: Censo...
2012
Das dez melhores universidades
pontuadas no ENADE / MEC,
nenhuma possuía site acessível.
Fonte: Hudson Augusto (Prêmi...
2012
Todos os Ambientes Virtuais
de Aprendizagem – possuem
falhas de acessibilidade para
realizar educação a distância
Fon...
Mas por que as páginas não
são acessíveis?
Reflexão

Os recursos de acessibilidade
ajudam apenas as pessoas
com deficiência?
Acessibilidade é para todos

Foto: Quatro idosos acessando a Internet

Foto: Braço engessado
Acessibilidade é para todos

Foto: Pessoa usando computador
com leitor de telas

Foto: Pessoa com
tetraplegia usando
compu...
Acessibilidade é para todos

Pessoas com deficiência
auditiva também precisam
de acessibilidade

Foto: Mãos representando ...
Acessibilidade é para todos
Analfabetos funcionais: um em cada cinco
brasileiros (20,3%) é analfabeto funcional,
de acordo...
Acessibilidade é para todos
Para aqueles que precisam acessar a Web em dispositivos móveis

Foto: Sítio apresentado em vár...
Acessibilidade é para todos

O Google precisa de acessibilidade!
O que é Tecnologia Assistiva?

"Tecnologia Assistiva é uma área do conhecimento, de
característica interdisciplinar, que e...
Recursos de Tecnologia Assistiva

Foto: Engrossadores de cabo para preensão
Recursos de Tecnologia Assistiva
Definição de leitor de telas
“Um leitor de tela é um programa que, interagindo com o Sist...
Quais são os principais problemas de
acessibilidade?

Como resolvê-los
Desenvolvimento de Projetos Web
Problema: Falta de planejamento inicial do sítio
Solução: Protótipo do sítio com acessibil...
Processo para desenvolver um sítio
acessível

Sequência de passos
1 - Seguir os padrões Web
2 - Seguir diretrizes e recome...
Diretrizes de acessibilidade do Conteúdo WEB
(WCAG)
Diretrizes Internacionais

Figura: Diagrama do guia de acessibilidade ...
e-MAG: Modelo de Acessibilidade em Governo
Eletrônico
Conjunto de recomendações a ser
considerado na manutenção e no
desen...
Fornecer alternativa em texto para as
imagens

Problema: <img src=“foto001101.jpg”>

Solução: <img src=“foto001101.jpg” al...
Análise de endereço de uma página “Fale
Conosco”
http://www.dominio.gov.br/diretorio/sub-diretorio/?apt=34&jhr=45&name=car...
Funções do mouse
Problema: Dificuldade de navegação por teclado

Solução: Funções do mouse
disponíveis via teclado

Foto: ...
Descrição clara de links
Problema:

Solução:

Leia mais

Leia mais sobre a inauguração do CNRTA

Veja mais

Veja as fotos ...
Cores - Contraste
Problema: Contraste ruim

Solução: Outras alternativas / Contraste maior
Fornecer alternativa para vídeo
Problema: Vídeos sem legendas

Solução: Legendas nos vídeos

Foto: Vídeo com alternativo t...
Texto com alternativa em Libras
Problema: Falta de acesso em Libras

Solução: Acesso ao conteúdo em Libras

Foto: Software...
Sítio com alternativa em Libras
Formulário - Captcha

http://nakedsecurity.sophos.com/pt/2012/10/08/captcha-civil-rights/
http://www.johnmwillis.com/other...
Formulário - Captcha
Problema: Não é acessível

Solução?
Perguntas lógicas

Quanto é 3 + 2?

Solução? Formulário seguro se...
Navegadores
Problema: Acesso a sítios restrito por navegadores

Solução: Sítio funciona em navegadores distintos

Figura: ...
Menus inacessíveis por teclado
Problema: Submenus invisíveis pelo teclado
Solução: Os menus devem se abrir após o TAB,
dei...
O uso inadequado de tabelas para
diagramação de páginas
9–

Figura: Site diagramado usando tabelas
Aria landmarks
Formulários - Identificação dos campos
Problema: Campos sem identificação
Solução: Campos identificados com etiquetas
Como eu sei que o meu
sítio está acessível?
Como eu faço para inserir
acessibilidade em um
portal já pronto?
Contatos

fabiola.calixto@cti.gov.br
fabiana.bonilha@cti.gov.br
Acessibilidade web
Próximos SlideShares
Carregando em…5
×

Acessibilidade web

754 visualizações

Publicada em

palestra de acessibilidade na Web

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

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

Nenhuma nota no slide

Acessibilidade web

  1. 1. Acessibilidade na Web é para todos UFSCAR - SOROCABA Fabíola C. Matsumoto Fabiana Bonilha
  2. 2. Agenda • • • • • • Desenho Universal O que é acessibilidade? Acessibilidade na WEB Legislação Alguns números Diretrizes de acessibilidade nacionais e internacionais • Ferramentas de Apoio • Problemas e Soluções
  3. 3. O que é acessibilidade na WEB? É garantir que uma informação ou serviço esteja disponível na web, em igualdade de condições, independentemente da função motora, visual, auditiva ou intelectual, e da condição computacional, cultural ou social do usuário.
  4. 4. Acessibilidade e Usabilidade Acessibilidade: Trata do acesso a locais, produtos, serviços ou informações efetivamente disponíveis ao maior número e variedade possível de pessoas, independente de suas capacidades físico-motoras e perceptivas, culturais e sociais. Usabilidade: Trata da facilidade de uso. Obs.: Um sítio pode ser acessível, mas difícil de ser utilizado ou; ser fácil de ser utilizado, mas inacessível a parte da população. Fonte: (Cartilha de usabilidade e-MAG)
  5. 5. Mudança de Paradigma Com quatro linhas retas, sem tirar o lápis do papel e sem passar pelo mesmo ponto duas ou mais vezes, junte os nove pontos.
  6. 6. Mudança de Paradigma Com quatro linhas retas, sem tirar o lápis do papel e sem passar pelo mesmo ponto duas ou mais vezes, junte os nove pontos.
  7. 7. Mudança de Paradigma
  8. 8. Pessoa com deficiência São consideradas pessoas com deficiência aquelas que têm impedimentos de longo prazo de natureza física, mental, intelectual ou sensorial, os quais, em interação com diversas barreiras, podem obstruir sua participação plena e efetiva na sociedade em igualdades de condições com as demais pessoas. Fonte: Convenção sobre os direitos das pessoas com deficiência.
  9. 9. Legislação Conformidade com o decreto de lei Decreto nº 5.296 (dezembro/04) e com a convenção da ONU que ganhou força de lei Decreto 6949 (agosto/09)
  10. 10. E se fosse você
  11. 11. Realidade Brasileira População Brasileira 190.755.799 Pessoas com deficiência 45.606.048 População Brasileira 24% 76% * Dados IBGE 2010 Sem deficiência Com deficiência
  12. 12. 2010 98% das páginas do governo não eram acessíveis. 95% das páginas do governo federal não eram acessíveis. Fonte: Censo na WEB 2010
  13. 13. 2012 95% das páginas do governo não eram acessíveis. 93% das páginas do governo federal não eram acessíveis. Fonte: Censo na WEB 2012
  14. 14. 2012 Das dez melhores universidades pontuadas no ENADE / MEC, nenhuma possuía site acessível. Fonte: Hudson Augusto (Prêmio Nacional de Acessibilidade na Web)
  15. 15. 2012 Todos os Ambientes Virtuais de Aprendizagem – possuem falhas de acessibilidade para realizar educação a distância Fonte: Hudson Augusto (Prêmio Nacional de Acessibilidade na Web)
  16. 16. Mas por que as páginas não são acessíveis?
  17. 17. Reflexão Os recursos de acessibilidade ajudam apenas as pessoas com deficiência?
  18. 18. Acessibilidade é para todos Foto: Quatro idosos acessando a Internet Foto: Braço engessado
  19. 19. Acessibilidade é para todos Foto: Pessoa usando computador com leitor de telas Foto: Pessoa com tetraplegia usando computador
  20. 20. Acessibilidade é para todos Pessoas com deficiência auditiva também precisam de acessibilidade Foto: Mãos representando a comunicação por linguagem de sinais
  21. 21. Acessibilidade é para todos Analfabetos funcionais: um em cada cinco brasileiros (20,3%) é analfabeto funcional, de acordo com a PNAD 2009 (Pesquisa Nacional de Domicílios), divulgada pelo IBGE. Poucos recursos: baixa velocidade de processamento ou de acesso à Internet Foto: Pessoa de costas, sentada de frente à lousa em branco Foto: Computador antigo
  22. 22. Acessibilidade é para todos Para aqueles que precisam acessar a Web em dispositivos móveis Foto: Sítio apresentado em várias resoluções (tablet, monitor e celular)
  23. 23. Acessibilidade é para todos O Google precisa de acessibilidade!
  24. 24. O que é Tecnologia Assistiva? "Tecnologia Assistiva é uma área do conhecimento, de característica interdisciplinar, que engloba produtos, recursos, metodologias, estratégias, práticas e serviços que objetivam promover a funcionalidade, relacionada à atividade e participação de pessoas com deficiência, incapacidades ou mobilidade reduzida, visando sua autonomia, independência, qualidade de vida e inclusão social.” Fonte: Comitê de Ajudas Técnicas - CAT
  25. 25. Recursos de Tecnologia Assistiva Foto: Engrossadores de cabo para preensão
  26. 26. Recursos de Tecnologia Assistiva Definição de leitor de telas “Um leitor de tela é um programa que, interagindo com o Sistema Operacional do computador, captura toda e qualquer informação apresentada na forma de texto e a transforma em uma resposta falada utilizando um sintetizador de voz.” Fonte: Fundação Bradesco Foto: Logotipos de leitores de telas (Virtual Vision, NVDA, JAWS, ORCA)
  27. 27. Quais são os principais problemas de acessibilidade? Como resolvê-los
  28. 28. Desenvolvimento de Projetos Web Problema: Falta de planejamento inicial do sítio Solução: Protótipo do sítio com acessibilidade
  29. 29. Processo para desenvolver um sítio acessível Sequência de passos 1 - Seguir os padrões Web 2 - Seguir diretrizes e recomendações de acessibilidade 3 - Realizar avaliação de acessibilidade Fonte: (e-MAG - Governo Eletrônico) Figura: Selos de validação - Padrões Web, CSS e Acessibilidade
  30. 30. Diretrizes de acessibilidade do Conteúdo WEB (WCAG) Diretrizes Internacionais Figura: Diagrama do guia de acessibilidade do WCAG
  31. 31. e-MAG: Modelo de Acessibilidade em Governo Eletrônico Conjunto de recomendações a ser considerado na manutenção e no desenvolvimento de sítios e serviços eletrônicos da Administração Pública Federal; Conduzido de forma padronizada e de fácil implementação; Coerente com as necessidades brasileiras; Em conformidade com os padrões internacionais. Diretrizes Nacionais
  32. 32. Fornecer alternativa em texto para as imagens Problema: <img src=“foto001101.jpg”> Solução: <img src=“foto001101.jpg” alt=“Foto de uma criança cheirando uma flor”>
  33. 33. Análise de endereço de uma página “Fale Conosco” http://www.dominio.gov.br/diretorio/sub-diretorio/?apt=34&jhr=45&name=card.do http://www.dominio.gov.br/diretorio/sub-diretorio/contato.html http://www.dominio.gov.br/contato.html http://www.dominio.gov.br/contato http://dominio.gov.br/contato
  34. 34. Funções do mouse Problema: Dificuldade de navegação por teclado Solução: Funções do mouse disponíveis via teclado Foto: Teclado e tabela com alguns eventos equivalentes aos do mouse
  35. 35. Descrição clara de links Problema: Solução: Leia mais Leia mais sobre a inauguração do CNRTA Veja mais Veja as fotos do evento do Livro Branco Clique aqui Clique aqui e veja as fotos Saiba mais Saiba mais sobre a nova plataforma Download Faça o download do Guia de Acessibilidade
  36. 36. Cores - Contraste Problema: Contraste ruim Solução: Outras alternativas / Contraste maior
  37. 37. Fornecer alternativa para vídeo Problema: Vídeos sem legendas Solução: Legendas nos vídeos Foto: Vídeo com alternativo textual Foto: Legenda embutida
  38. 38. Texto com alternativa em Libras Problema: Falta de acesso em Libras Solução: Acesso ao conteúdo em Libras Foto: Software que converte texto em Língua Brasileira de Sinais
  39. 39. Sítio com alternativa em Libras
  40. 40. Formulário - Captcha http://nakedsecurity.sophos.com/pt/2012/10/08/captcha-civil-rights/ http://www.johnmwillis.com/other/top-10-worst-captchas/
  41. 41. Formulário - Captcha Problema: Não é acessível Solução? Perguntas lógicas Quanto é 3 + 2? Solução? Formulário seguro sem o Captcha?
  42. 42. Navegadores Problema: Acesso a sítios restrito por navegadores Solução: Sítio funciona em navegadores distintos Figura: Ícones dos cinco navegadores mais conhecidos
  43. 43. Menus inacessíveis por teclado Problema: Submenus invisíveis pelo teclado Solução: Os menus devem se abrir após o TAB, deixando os submenus visíveis e navegáveis via teclado. Exemplo: Utilizando CSS + Javascript. Exemplo para estudo http://tinyurl.com/menuacessivel
  44. 44. O uso inadequado de tabelas para diagramação de páginas 9– Figura: Site diagramado usando tabelas
  45. 45. Aria landmarks
  46. 46. Formulários - Identificação dos campos Problema: Campos sem identificação Solução: Campos identificados com etiquetas
  47. 47. Como eu sei que o meu sítio está acessível?
  48. 48. Como eu faço para inserir acessibilidade em um portal já pronto?
  49. 49. Contatos fabiola.calixto@cti.gov.br fabiana.bonilha@cti.gov.br

×