O documento discute a importância da acessibilidade na web para todos. Resume os principais pontos abordados em cada seção e apresenta dados sobre a falta de acessibilidade de sites governamentais e educacionais no Brasil.

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

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

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

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

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

8. Mudança de Paradigma

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

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

11. E se fosse você

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

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

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

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

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

17. Mas por que as páginas não
são acessíveis?

18. Reflexão
Os recursos de acessibilidade
ajudam apenas as pessoas
com deficiência?

19. Acessibilidade é para todos
Foto: Quatro idosos acessando a Internet
Foto: Braço engessado

20. Acessibilidade é para todos
Foto: Pessoa usando computador
com leitor de telas
Foto: Pessoa com
tetraplegia usando
computador

21. Acessibilidade é para todos
Pessoas com deficiência
auditiva também precisam
de acessibilidade
Foto: Mãos representando a comunicação por linguagem de sinais

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

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

24. Acessibilidade é para todos
O Google precisa de acessibilidade!

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

26. Recursos de Tecnologia Assistiva
Foto: Engrossadores de cabo para preensão

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

28. Quais são os principais problemas de
acessibilidade?
Como resolvê-los

29. Desenvolvimento de Projetos Web
Problema: Falta de planejamento inicial do sítio
Solução: Protótipo do sítio com acessibilidade

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

31. Diretrizes de acessibilidade do Conteúdo WEB
(WCAG)
Diretrizes Internacionais
Figura: Diagrama do guia de acessibilidade do WCAG

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

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

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

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

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

37. Cores - Contraste
Problema: Contraste ruim
Solução: Outras alternativas / Contraste maior

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

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

40. Sítio com alternativa em Libras

41. Formulário - Captcha
http://nakedsecurity.sophos.com/pt/2012/10/08/captcha-civil-rights/
http://www.johnmwillis.com/other/top-10-worst-captchas/

42. Formulário - Captcha
Problema: Não é acessível
Solução?
Perguntas lógicas
Quanto é 3 + 2?
Solução? Formulário seguro sem o Captcha?

43. Navegadores
Problema: Acesso a sítios restrito por navegadores
Solução: Sítio funciona em navegadores distintos
Figura: Ícones dos cinco navegadores mais conhecidos

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

45. O uso inadequado de tabelas para
diagramação de páginas
9–
Figura: Site diagramado usando tabelas

46. Aria landmarks

47. Formulários - Identificação dos campos
Problema: Campos sem identificação
Solução: Campos identificados com etiquetas

48. Como eu sei que o meu
sítio está acessível?

49. Como eu faço para inserir
acessibilidade em um
portal já pronto?

50. Contatos
fabiola.calixto@cti.gov.br
fabiana.bonilha@cti.gov.br