Conheça o e-MAG

Apresentação para o INEP em 1 de junho de 2012.

1. governoeletronico.gov.br
Ministério do Planejamento, Orçamento e Gestão
Secretaria de Logística e Tecnologia da Informação
Departamento de Governo Eletrônico
Modelo Brasileiro
de Acessibilidade
em Governo
Eletrônico

2. governoeletronico.gov.br 2 de
Sumário
O que é Acessibilidade?
As pessoas com deficiências;
Acessibilidade na web;
Visão Geral sobre e-MAG;
Pesquisa de acessibilidade em 200 sítios e e-serviços do
Governo Federal.

3. governoeletronico.gov.br 3 de
O que é acessibilidade?
Participação plena e igualdade de oportunidades

4. governoeletronico.gov.br 4 de
É garantir que uma informação ou serviço esteja disponível
na web, em igualdade de condições, a qualquer hora, local,
ambiente, dispositivo de acesso e por qualquer tipo de
visitante/usuário, independentemente de sua capacidade
motora, visual, auditiva, mental, computacional, cultural ou
social.
O que é acessibilidade para
WEB?

5. governoeletronico.gov.br 5 de
Para garantir que os serviços e informações do governo
cheguem ao maior número de pessoas possível;
Para garantir que as pessoas com deficiência tenham seus
direitos respeitados e com isso possam viver de maneira
mais independente;
Para garantir o cumprimento de leis, decretos e convenções
internacionais que versam sobre os direitos da
pessoa com deficiência;
Por que implementar
acessibilidade para WEB?

6. governoeletronico.gov.br 6 de
Lei Nº 10.098, de 19 de dezembro de 2000
Estabelece normas gerais e critérios básicos para a promoção da acessibilidade das pessoas portadoras de deficiência ou com mobilidade reduzida, e dá
outras providências.
Decreto Nº 5.296, de 2 dezembro de 2004
Regulamenta as Leis Nºs 10.048, de 8 de novembro de 2000, que dá prioridade de atendimento às pessoas que especifica, e 10.098, de 19 de dezembro
de 2000, que estabelece normas gerais e critérios básicos para a promoção da acessibilidade das pessoas portadoras de deficiência ou com
mobilidade reduzida, e dá outras providências.
Portaria Nº3, de 7 de maio de 2007
Institucionaliza o Modelo de Acessibilidade em Governo Eletrônico – e-MAG no âmbito do Sistema de Administração dos Recursos de Informação e
Informática – SISP .
Convenção sobre os Direitos das Pessoas com Deficiência (2007)
A Convenção sobre os Direitos das Pessoas com Deficiência e seu respectivo Protocolo Facultativo foram ratificados pelo Congresso Nacional em
09/07/2008 pelo decreto legislativo nº 186/2008 e todos os seus artigos são de aplicação imediata.
Decreto Legislativo Nº 186, de 09 de julho de 2008
Aprova o texto da Convenção sobre os Direitos das Pessoas com Deficiência e de seu Protocolo Facultativo, assinados em Nova Iorque, em 30 de março de
2007.
Decreto Nº 6.949, de 25 de agosto de 2009
Promulga a Convenção Internacional sobre os Direitos das Pessoas com Deficiência e seu Protocolo Facultativo, assinados em Nova York, em 30 de março
de 2007.
Legislação (...o tamanho pequeno é proposital)

7. governoeletronico.gov.br 7 de
Acessibilidade - Legislação
Lei 12.527/2011 – Lei de Acesso a Informação
Artigo 8º (…)
§ 3º Os sítios de que trata o § 2º deverão, na forma de regulamento,
atender, entre outros, aos seguintes requisitos:
(…)
VIII - adotar as medidas necessárias para garantir a acessibilidade
de conteúdo para pessoas com deficiência , nos termos do art. 17
da Lei no 10.098, de 19 de dezembro de 2000, e do art. 9º da
Convenção sobre os Direitos das Pessoas com Deficiência, aprovada
pelo Decreto Legislativo no 186, de 9 de julho de 2008.

8. governoeletronico.gov.br 8 de
Acessibilidade - Legislação
Decreto nº 7.724, de 16 de maio de 2012 – Regulamenta a Lei
nº 12.527, de 18 de novembro de 2011
Art. 8º Os sítios na Internet dos órgãos e entidades deverão, em
cumprimento às normas estabelecidas pelo Ministério do
Planejamento, Orçamento e Gestão, atender aos seguintes requisitos,
entre outros:
I - …
II - ...
(...)
VIII - garantir a acessibilidade de conteúdo para pessoas com
deficiência.

9. governoeletronico.gov.br 9 de
Falta cidadania – foto de Milton Jung
Carros estacionados em vagas especiais
http://www.flickr.com/photos/cbnsp/5360821409/

CC licence
As pessoas com deficiência

10. governoeletronico.gov.br 10 de
CENSO Brasil – 2010
População total: 190.755.799 (100,0%)
Pelo menos uma das deficiências investigadas*: 45.623.910 (23,9%)
Nenhuma dessas deficiências: 145.084.578 (76,1%)
*As pessoas incluídas em mais de um tipo de deficiência foram contadas apenas uma vez.
Fonte: IBGE – Censo Demográfico 2010 – Resultados Preliminares da Amostra
As pessoas com deficiência

11. governoeletronico.gov.br 11 de
Deficiência Visual – 35.791.488
Não consegue de modo algum – 528.624
Grande dificuldade – 6.056.684
Alguma dificuldade – 29.206.180
Deficiência Auditiva – 9.722.163
Não consegue de modo algum – 347.481
Grande dificuldade – 1.799.885
Alguma dificuldade – 7.574.797
As pessoas com deficiência

12. governoeletronico.gov.br 12 de
Deficiência Motora – 13.273.969
Não consegue de modo algum – 740.456
Grande dificuldade – 3.701.790
Alguma dificuldade – 8.831.723
Deficiência Mental/Intelectual – 2.617.025
As pessoas com deficiência

13. governoeletronico.gov.br 13 de

Você acha que os recursos
de acessibilidade ajudam
apenas as pessoas com
deficiência?
Agora pare e pense um pouco:

14. governoeletronico.gov.br 14 de
Acessibilidade é para todos!
É para as pessoas idosas!

15. governoeletronico.gov.br 15 de
Acessibilidade é para todos!
É para quem tem medo
ou dificuldade em usar o
computador!
Cerca de

alegam que não usam Internet por falta de habilidade com
o computador/internet
Fonte: Pesquisa TIC Domicílios 2009 –CGI.br
Pessoas que nunca acessaram a internet, mas usaram um computador
53%

16. governoeletronico.gov.br 16 de
Acessibilidade é para todos!
É para aqueles que precisam
usar dispositivos portáteis,
ou para aqueles com limite
de download!
É também para aqueles
com poucos recursos de
processamento, ou com
baixa velocidade de acesso
a internet!

17. governoeletronico.gov.br 17 de
Acessibilidade é para todos!
É para nós em nossos
primeiros passos...
...ou para um momento
em que tenhamos que
superar adversidades!

18. governoeletronico.gov.br 18 de
Custo ou
benefício?
Acessibilidade:

19. governoeletronico.gov.br 19 de

20. governoeletronico.gov.br 20 de
Mouse Ocular
O equipamento permite a pessoas portadoras de necessidades
especiais com alto grau de comprometimento motor,
controlarem o cursor do mouse através da movimentação dos
olhos.
http://www.flickr.com/photos/cbnsp/4081762638/
Foto: divulgação (CC license)
Acessibilidade na Web

21. governoeletronico.gov.br 21 de
Tim Berners-Lee, diretor do W3C
afirma que o poder da Web está
na sua universalidade. Para ele,
“ser acessada por todos,
independente de deficiência, é
um aspecto essencial”.
A acessibilidade na Web
significa, portanto, permitir o
acesso a todos, independente
do tipo de usuário, situação
ou ferramenta.
A Web é acessível na sua origem

22. governoeletronico.gov.br 22 de
Como as pessoas com deficiência
interagem com o computador?
Elas podem interagir através do uso de tecnologias
assistivas, tais como:
Mouses oculares;
Ampliadores de tela;
Teclados e mouses expandidos;
Leitores de tela.

23. governoeletronico.gov.br 23 de

24. governoeletronico.gov.br 24 de

25. governoeletronico.gov.br 25 de

26. governoeletronico.gov.br 26 de
Leitores de Tela
JAWS (Windows, proprietário)
NVDA (Windows, livre)
ORCA (Linux, livre)
DOSVOX (Windows, Livre)

27. governoeletronico.gov.br 27 de
Como as pessoas navegam
pelo leitor de tela?

28. governoeletronico.gov.br 28 de
Como as pessoas navegam pelo
leitor de tela?

29. governoeletronico.gov.br 29 de
Como as pessoas navegam pelo
leitor de tela?

30. governoeletronico.gov.br 30 de
Como as pessoas navegam pelo
leitor de tela?

31. governoeletronico.gov.br 31 de
Vamos fazer um teste com um leitor
de telas, para que tenhamos uma
idéia de como as pessoas estão
“exergando” as informações das
páginas que publicamos, através
dos leitores de tela?

32. governoeletronico.gov.br 32 de
Visual Auditiva / Tátil
(sem leitor de tela) (com leitor de tela)

Sintética Analítica
Tela bidimensional Tela linearizada
Facilidade para Dificuldade para
perceber o contexto perceber o contexto
Diferenças entre os tipos de
percepção:

33. governoeletronico.gov.br 33 de
O google apenas vê o código. Se
o seu código é acessivel é mais
fácil do Google encontrá-lo
Outros tipos de usuário que
também são cegos

34. governoeletronico.gov.br 34 de
Processo para desenvolver sítio
acessível:
Seguir os padrões Web;
Seguir as diretrizes e recomendações de acessibilidade;
Realizar avaliação de acessibilidade.

35. governoeletronico.gov.br 35 de
Código acessível
Conteúdo alternativo para elementos não-textuais;
Dados de tabelas acessíveis;
Formulários acessíveis;
Menus de escape;
Teclas de acesso;
Folhas de estilo com medidas relativas;
Documentos legíveis sem a folha de estilos;
Semântica;

36. governoeletronico.gov.br 36 de
Código acessível
Programação em camadas;
Não usar tabelas para diagramar;
Não utilizar frames;
Não utilizar elementos proprietários;

37. governoeletronico.gov.br 37 de
O e-MAG
Cartaz do
lançamento do
e-MAG 1.4 em
2004.

38. governoeletronico.gov.br 38 de
Modelo de acessibilidade em
Governo Eletrônico - e-MAG
Conjunto de recomendações a ser
considerado na manutenção e
desenvolvimento de sítios e
e-serviços do Governo Brasileiro:
Conduzido de forma padronizada
e de fácil implementação;
Coerente com as necessidades
brasileiras;
Conformidade com os padrões
internacionais.

39. governoeletronico.gov.br 39 de
Histórico
Criado a partir da pesquisa em legislações de 12 países;
Inicialmente focado nas necessidades para deficientes visuais
e auditivos;
Internet como escopo inicial.
Primeira versão (1.4) lançada em 18 de janeiro de 2005 e
colocado em Consulta Pública;
A segunda versão (2.0) foi lançada em 14 de dezembro de
2005;
Em maio de 2007 o e-MAG passou a ser obrigatório no
âmbito do SISP por intermédio da Portaria nº 03.

40. governoeletronico.gov.br 40 de
Apoio, ferramentas e disseminação
Cursos on-line
Ambiente de EAD
Curso Modelo – 10 horas
Curso Cartilha – 30 horas
Na seção do e-MAG
Checklist Manual de
Acessibilidade
Análise Leitores de Tela
Tutoriais
Legislação

41. governoeletronico.gov.br 41 de
ASES
1. Avaliadores
Avaliador de acessibilidade web;
Avaliador de código HTML/XHTML;
Avaliador de código CSS.
2. Simuladores
Simulador de navegação para cegos;
Simulador de navegação para baixa visão.
3. Ferramentas de apoio

42. governoeletronico.gov.br 42 de

43. governoeletronico.gov.br 43 de
Comunidades ASES no Software
Público – cerca de 2442
membros.

44. governoeletronico.gov.br 44 de
98%
das páginas de governo não são acessíveis.
95%
das páginas federais não são acessíveis.
Fonte: Pesquisa Censo na WEB 2010 –CGI.br

45. governoeletronico.gov.br 45 de
A versão 3.0 do e-MAG
Cartaz do
lançamento do
e-MAG 3.0 em
2011.

46. governoeletronico.gov.br 46 de
2008 – lançamento do WCAG 2.0
Dez 2009 - Parceria com a MP-MEC através da
RENAPI - Rede de Pesquisa e Inovação em
Tecnologias Digitais
2° semestre de 2010 – Grupo de consultores
especializados em acessibilidade de sítios.
E-MAG 3.0 – Precedentes

47. governoeletronico.gov.br 47 de
Acordo de Cooperação entre o Ministério do Planejamento, Orçamento e Gestão, representado pela Secretaria de Logística e Tecnologia da Informação (SLTI) e o Ministério da Educação, representado pela Secretaria de Educação Profissional e Tecnológica (SETEC).
Acordo de Cooperação MP-MEC

48. governoeletronico.gov.br 48 de
Versão 3.0 do e-MAG;
Checklists humanos de
Acessibilidade;
Comparativo de Leitores de
Tela;
SGC acessível Suindara;
ASES versão 2.0;
Atualização cursos de EAD do
e-MAG;
Avaliação de acessibilidade em
200 sítios e e-serviços.
Acordo de Cooperação MP-MEC

49. governoeletronico.gov.br 49 de
Aprendizados com a versão 2.0;
Pesquisas;
Opinião de especialistas;
Em conformidade com a WCAG 2.0;
Necessidades locais;
O que é o e-MAG 3.0

50. governoeletronico.gov.br 50 de
Estrutura
Pragmático (estruturado de acordo com os problemas a serem abordados );
Dividido por áreas de atuação;
Padronização de funcionalidades.
O que é o e-MAG 3.0

51. governoeletronico.gov.br 51 de
Itens padrões para o Governo Federal:
1.Página com a descrição dos recursos de acessibilidade;
2.Teclas de atalho (3);
3.Barra de acessibilidade;
4.Apresentação do mapa do sitio;
5.Apresentação de formulário;
6.Conteúdo alternativo para imagens;
7.Apresentação de documentos.
O que é o e-MAG 3.0

52. governoeletronico.gov.br 52 de
Divisão: 6 seções;
Total de 45 recomendações (Todas são importantes);
Referência ao padrão WCAG nas recomendações.
Recomendações de acessibilidade

53. governoeletronico.gov.br 53 de
Modelo e-MAG 3.0
Recomendações de acessibilidade
1 - Marcação1 - Marcação
9 (nove) recomendações;
1 – Respeitar os Padrões de Desenvolvimento Web
2 – Organizar o Código HTML de Forma Lógica e Semântica
3 – Utilizar Corretamente os Níveis De Cabeçalho
4 – Ordenar de Forma Lógica e Intuitiva a Leitura e Tabulação
5 – Disponibilizar todas as Funções da Página Via Teclado
6 – Fornecer Âncoras para Ir Direto a um Bloco de Conteúdo
7 – Não Utilizar Tabelas para Diagramação
8 – Separar Links Adjacentes
9 – Não Abrir Novas Instâncias sem a Solicitação do Usuário

54. governoeletronico.gov.br 54 de
Modelo e-MAG 3.0
Recomendações de acessibilidade
1 - Marcação1 - Marcação
9 (nove) recomendações;
Retirar alguns exemplos da avaliação para ilustrar as recomendações dessa
seção.
Novas
instâncias...

55. governoeletronico.gov.br 55 de
Modelo e-MAG 3.0
Recomendações de acessibilidade
2 - Comportamento (DOM)2 - Comportamento (DOM)
6 (seis) recomendações;
10 – Garantir que os Objetos Programáveis Sejam Acessíveis
11 - Não Criar Páginas com Atualização Automática Periódica
12 – Não Utilizar Redirecionamento Automático de Páginas
13 – Fornecer Alternativa para Modificar Limite de Tempo
14 – Não Incluir Situações com Intermitência de Tela
15 – Assegurar o Controle do Usuário sobre as Alterações Temporais do Conteúdo

56. governoeletronico.gov.br 56 de

57. governoeletronico.gov.br 57 de
Modelo e-MAG 3.0
Recomendações de acessibilidade
3 - Conteúdo/Informação3 - Conteúdo/Informação
12 (Doze) recomendações
16 – Identificar o Idioma Principal da Página
17 – Oferecer um Título Descritivo e Informativo à Página
18 – Disponibilizar Informação sobre a Localização do Usuário na Página
19 – Descrever Links Clara e Sucintamente
20 – Fornecer Alternativa em Texto para as Imagens do Sítio
21 – Fornecer Alternativa em texto Para As Zonas Ativas de Mapa de Imagem
22 – Disponibilizar Documentos em Formatos Acessíveis
23 – Em Tabelas, Utilizar Títulos e Resumos de Forma Apropriada
24 – Associar Células de Dados Às Células de Cabeçalho em uma Tabela
25 – Garantir a Leitura e Compreensão das Informações
26 – Disponibilizar uma Explicação para Siglas, Abreviaturas e Palavras Incomuns
27 – Informar Mudança de Idioma no Conteúdo

58. governoeletronico.gov.br 58 de

59. governoeletronico.gov.br 59 de

60. governoeletronico.gov.br 60 de

61. governoeletronico.gov.br 61 de

62. governoeletronico.gov.br 62 de
Modelo e-MAG 3.0
Recomendações de acessibilidade
4 - Apresentação/Design4 - Apresentação/Design
5 (cinco) recomendações;
28 - Oferecer Contraste Mínimo entre Plano de Fundo e Primeiro Plano
29 – Não Utilizar Apenas Cor ou Outras Características Sensoriais para Diferenciar Elementos
30 – Permitir Redimensionamento de Texto sem Perda de Funcionalidade
31 – Dividir as Áreas de Informação
32 – Possibilitar que o Elemento com Foco Seja Visualmente Evidente

63. governoeletronico.gov.br 63 de

64. governoeletronico.gov.br 64 de
Modelo e-MAG 3.0
Recomendações de acessibilidade
5 - Multimídia5 - Multimídia
5 (cinco) recomendações;
33 – Fornecer Alternativa para Vídeo
34 – Fornecer Alternativa para Áudio
35 – Oferecer Audiodescrição para Vídeo Pré-Gravado
36 – Fornecer Controle de Áudio para Som
37 – Fornecer Controle de Animação

65. governoeletronico.gov.br 65 de

66. governoeletronico.gov.br 66 de
Modelo e-MAG 3.0
Recomendações de acessibilidade
6 - Formulários6 - Formulários
8 (oito) recomendações;
38 – Fornecer Alternativa em Texto para os Botões de Imagem de Formulários
39 – Associar Etiquetas aos Seus Campos
40 – Estabelecer uma Ordem Lógica de Navegação
41 – Não Provocar Automaticamente Alteração no Contexto
42 – Fornecer Instruções para Entrada de Dados
44 – Agrupar Campos de Formulário
45 – Fornecer Captcha Humano

67. governoeletronico.gov.br 67 de

68. governoeletronico.gov.br 68 de
Testes de acessibilidade:
Realizar validação automática (ASES);
Realizar validação humana (navegação por teclado,
leitores de tela, checklists de validação);
Testar testes de navegação com diferentes usuários.

69. governoeletronico.gov.br 69 de
Avaliação de Acessibilidade em 200
sítios e e-serviços do Governo Federal
Realizada no segundo semestre de 2010 pelo Núcleo de
Acessibilidade Virtual da RENAPI
Escopo:
200 sítios e e-serviços (governo federal);
Amostra não probabilística.
Objetivo:
Testar o checklist manual;
Buscar os problemas mais comuns em acessibilidade
digital no governo federal.

70. governoeletronico.gov.br 70 de

Avaliação de Acessibilidade em 200
sítios e e-serviços do Governo Federal
Etapas:
- Validação automática;
- Validação Humana.
Instrumentos:
- WebAIM,
- Checklist manual.
Tecnologias:
- Ubuntu 9.04 e Windows XP SP
- NVDA 2009-RC2
- Internet Explorer 8.0
- Firefox 3.6.

71. governoeletronico.gov.br 71 de
Em 95% das páginas os links não apresentam descrições curtas e objetivas ou não identificam o destino ao qual remetem;
93% das páginas não possuem as camadas lógicas organizadas;
89% das páginas não tem a opção de alto contraste ou esta não está funcionando;
Resultados: Ranking dos 10 erros com
maior incidência

72. governoeletronico.gov.br 72 de
4º
86% das imagens não estão corretamente identificadas;
5º
Em 86% das páginas há ausência de links indicadores;
6º
82% das estruturas das páginas não estão uniformes;
7º
80% dos títulos não apresentam uma ordem lógica;
Resultados: Ranking dos 10 erros com
maior incidência

73. governoeletronico.gov.br 73 de
Resultados: Ranking dos 10 erros com
maior incidência
78% das páginas não tem atalhos para facilitar a navegação, ou os mesmos não estão descritos corretamente;
77% das páginas a leitura das palavras não está sendo compreendida;
72% das tabelas foram implementadas de forma incorreta.

74. governoeletronico.gov.br 74 de
Outros testes foram realizados para captar particularidades do
govero federal, como o uso de CAPTCHAS, urls complexas e o
certificado padrão do governo fornecido pelo ITI (que se
comprovou inacessível).

75. governoeletronico.gov.br 75 de
Vejamos agora um exemplo de luta e
perseverança, mais um brasileiro que
precisa que respeitemos os seus direitos.
http://rederecord.r7.com/video/nadador-de-9-anos-sonha-em-participar-de-
paraolimpiadas-4fb7b12892bbb4900c5e672e/

76. governoeletronico.gov.br 76 de
Acessibilidade – 7 mitos e 1 equívoco
por Leda Spelta
Mito 1
"Acessibilidade Web é só para deficientes
visuais."
Temor oculto: "Imagina o trabalhão que vai dar,
fazer acessibilidade para todo mundo!"

77. governoeletronico.gov.br 77 de
Mito 2
"Na prática, o número de usuários
beneficiados com a acessibilidade é
relativamente muito pequeno."
Temor oculto: "Esse negócio de acessibilidade é
muito investimento para pouco retorno."
Acessibilidade – 7 mitos e 1 equívoco
por Leda Spelta

78. governoeletronico.gov.br 78 de
Mito 3
"Fazer um site acessível demora e custa caro."
Temor oculto: “Não estarei empregando mal os
recursos que tenho, ao fazer acessibilidade? Não
vou ficar no prejuízo?”
Acessibilidade – 7 mitos e 1 equívoco
por Leda Spelta

79. governoeletronico.gov.br 79 de
Mito 4
"É melhor fazer uma página especial para
os deficientes visuais."
Temor oculto: "A gente não vai conseguir fazer
uma página acessível, que seja tão bonita e
funcional como a nossa."
Acessibilidade – 7 mitos e 1 equívoco
por Leda Spelta

80. governoeletronico.gov.br 80 de
Mito 5
"Um site acessível a deficientes visuais não é
bonito."
Temor oculto: "Só sei fazer sites bonitos usando
tecnologias inacessíveis; de fato, não sei
exatamente quais são os elementos visuais que
atrapalham a acessibilidade. Por isso, quando tenho
que fazer um site acessível, faço sempre o arroz
com feijão."
Acessibilidade – 7 mitos e 1 equívoco
por Leda Spelta

81. governoeletronico.gov.br 81 de

82. governoeletronico.gov.br 82 de
Mito 6
“Vamos por partes: primeiro fazemos o site,
depois fazemos acessibilidade."
Temor oculto: "Não vamos conseguir fazer um site
acessível, com o tempo, os recursos e a equipe que
temos."
Acessibilidade – 7 mitos e 1 equívoco
por Leda Spelta

83. governoeletronico.gov.br 83 de

84. governoeletronico.gov.br 84 de
Mito 7
"A gente sabe o que é bom para o usuário."
Temor oculto: "Não quero expor meu projeto às
críticas."
Acessibilidade – 7 mitos e 1 equívoco
por Leda Spelta

85. governoeletronico.gov.br 85 de
Equívoco
"Meu site é direcionado a um público
específico; ele não interessa a todos os grupos
de usuários."
Quando restringimos o acesso do nosso site ao que
julgamos serem as características do seu público
alvo, estamos, na prática, usando a internet para
limitar o nosso público, ao invés de ampliá-lo.
Acessibilidade – 7 mitos e 1 equívoco
por Leda Spelta

86. governoeletronico.gov.br 86 de

87. governoeletronico.gov.br 87 de
Fernanda Hoffmann Lobato
Edson Santos Leite
governoeletronico.gov.br
Twitter: @egovbr
[email protected]
[email protected]
[phone]