Uso do Portal de Compras Governamentais pelos Municípios
NSEA apresenta: e-MAG para técnicos
1. Modelo Brasileiro
de Acessibilidade
em Governo
Eletrônico (e-MAG)
Ministério do Planejamento, Orçamento e Gestão
Secretaria de Logística e Tecnologia da Informação
Departamento de Governo Eletrônico
governoeletronico.gov.br
2. Modelo e-MAG 3.0
Estrutura
●
Introdução;
●
Recomendações de acessibilidade;
●
Padrões de acessibilidade digital no Governo Federal;
governoeletronico.gov.br 2 de 59
3. Modelo e-MAG 3.0
Estrutura
●
Recursos e ferramentas para acessibilidade;
●
Leitura complementar.
governoeletronico.gov.br 3 de 59
4. Modelo e-MAG 3.0
Estrutura
●
Introdução;
Introdução
●
Recomendações;
●
Padrões de acessibilidade digital no Governo Federal;
governoeletronico.gov.br 4 de 59
5. Modelo e-MAG 3.0
Introdução
Sobre Versão e-MAG 3.0:
●
Versão e-MAG 2.0;
●
WCAG (Recomendações de Acessibilidade para
Conteúdo Web) 2.0;
●
Não há separação em prioridades.
governoeletronico.gov.br 5 de 59
7. Modelo e-MAG 3.0
Introdução
Acesso de pessoas com deficiência:
●
Acesso ao Computador:
●
Sem mouse;
●
Sem teclado;
●
Sem monitor;
●
Sem áudio.
governoeletronico.gov.br 7 de 59
8. Modelo e-MAG 3.0
Introdução
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.
governoeletronico.gov.br 8 de 59
9. Modelo e-MAG 3.0
Estrutura
●
Introdução;
Introdução
●
Recomendações de acessibilidade;
●
Padrões de acessibilidade digital no Governo Federal;
governoeletronico.gov.br 9 de 59
10. Modelo e-MAG 3.0
Recomendações de acessibilidade
●
Divisão: 6 seções;
●
Total de 45 recomendações (Todas são importantes);
●
Referência ao padrão WCAG nas recomendações.
governoeletronico.gov.br 10 de 59
13. Modelo e-MAG 3.0
Recomendações de acessibilidade
3 - Conteúdo/Informação
●
12 (Doze) recomendações;
●
Clareza.
governoeletronico.gov.br 13 de 59
14. Modelo e-MAG 3.0
Recomendações de acessibilidade
4 - Apresentação/Design
●
5 (cinco) recomendações;
●
Organização e disposição.
governoeletronico.gov.br 14 de 59
15. Modelo e-MAG 3.0
Recomendações de acessibilidade
5 - Multimídia
●
5 (cinco) recomendações;
●
Controle.
governoeletronico.gov.br 15 de 59
16. Modelo e-MAG 3.0
Recomendações de acessibilidade
6 - Formulários
●
8 (oito) recomendações;
●
Usabilidade.
governoeletronico.gov.br 16 de 59
17. Modelo e-MAG 3.0
Estrutura
●
Introdução;
Introdução
●
Recomendações;
●
Padrões de acessibilidade digital no Governo
Federal;
governoeletronico.gov.br 17 de 59
18. Modelo e-MAG 3.0
Padrões de acessibilidade digital
no Governo Federal
●
7 (sete) itens;
itens
●
Todos são obrigatórios.
governoeletronico.gov.br 18 de 59
19. Modelo e-MAG 3.0
Padrões de acessibilidade digital
no Governo Federal
Descrição dos recursos de acessibilidade
●
Página;
●
Teclas de atalho;
●
Opções de redimencionamento;
●
Alto contraste;
●
Local: Link na barra de acessibilidade.
governoeletronico.gov.br 19 de 59
20. Modelo e-MAG 3.0
Padrões de acessibilidade digital
no Governo Federal
governoeletronico.gov.br 20 de 59
21. Modelo e-MAG 3.0
Padrões de acessibilidade digital
no Governo Federal
Teclas de Atalho
●
Ir ao conteúdo: Número 1;
●
Ir ao menu principal: Número 2;
●
Ir à caixa de pesquisa: Número 3.
governoeletronico.gov.br 21 de 59
22. Modelo e-MAG 3.0
Padrões de acessibilidade digital
no Governo Federal
Barra de acessibilidade
●
Localização: Topo da página;
●
Itens:
●
Aumentar e diminuir fonte;
●
Fonte normal;
●
Alto Contraste;
●
Atalhos (Menu, Conteúdo e Busca);
●
Link para recursos de acessibilidade.
governoeletronico.gov.br 22 de 59
23. Modelo e-MAG 3.0
Padrões de acessibilidade digital
no Governo Federal
Apresentação do mapa do sítio
●
Localização das páginas internas do sítio;
●
Forma de lista.
governoeletronico.gov.br 23 de 59
24. Modelo e-MAG 3.0
Padrões de acessibilidade digital
no Governo Federal
Formulário
●
Tag FORM do html;
●
Ordem correta de navegação;
●
Etiquetar os campos;
●
Evitar mudança de contexto ao elemento
receber foco;
●
Fornecer botão de envio;
●
Erros de entrada;
●
Organizar conjunto de informações.
governoeletronico.gov.br 24 de 59
25. Modelo e-MAG 3.0
Padrões de acessibilidade digital
no Governo Federal
governoeletronico.gov.br 25 de 59
26. Modelo e-MAG 3.0
Padrões de acessibilidade digital
no Governo Federal
Conteúdo alternativo para imagens
●
Atributo “ALT” do HTML;
●
Imagens complexas: link identificado com a
descrição da imagem.
A descrição textual do gráfico
está disponível em outra página
governoeletronico.gov.br 26 de 59
27. Modelo e-MAG 3.0
Padrões de acessibilidade digital
no Governo Federal
Apresentação de documentos
●
Preferencialmente em HTML;
●
Informar extensão e tamanho dos arquivos.
governoeletronico.gov.br 27 de 59
28. Modelo e-MAG 3.0
Estrutura
●
Recursos e ferramentas para acessibilidade;
●
Leitura complementar;
governoeletronico.gov.br 28 de 59
29. Modelo e-MAG 3.0
Recursos e ferramentas para
acessibilidade
Organizações e especificações
●
WCAG 2.0 (português):
http://www.ilearn.com.br/TR/WCAG20
●
Tutoriais W3C:
http://www.w3.org/2002/03/tutorials
governoeletronico.gov.br 29 de 59
30. Modelo e-MAG 3.0
Recursos e ferramentas para
acessibilidade
Validadores de código
●
Validador (X)HTML:
http://validator.w3.org
●
Validador CSS:
http://jigsaw.w3.org/css-validator
governoeletronico.gov.br 30 de 59
31. Modelo e-MAG 3.0
Recursos e ferramentas para
acessibilidade
Validadores automáticos de acessibilidade
●
ASES (WCAG e e-MAG):
http://www.governoeletronico.gov.br/aco
es-e-projetos/e-MAG/material-de-apoio
eExaminator (WCAG 1.0):
http://www.acesso.umic.pt/webax/exami
nator.php
governoeletronico.gov.br 31 de 59
32. Modelo e-MAG 3.0
Recursos e ferramentas para
acessibilidade
Checklists para validação humana
●
Desenvolvedores:
http://www.governoeletronico.gov.br/aco
es-e-projetos/e-MAG/material-de-apoio;
●
Pessoas com deficiência visual:
http://www.governoeletronico.gov.br/aco
es-e-projetos/e-MAG/material-de-apoio.
governoeletronico.gov.br 32 de 59
33. Modelo e-MAG 3.0
Recursos e ferramentas para
acessibilidade
Ferramentas para análise de contraste de cores
●
Color Contrast Analyser (online):
http://www.colorsontheweb.com/colorcon
trast.asp;
●
Check my colours (online):
http://www.checkmycolours.com.
governoeletronico.gov.br 33 de 59
34. Modelo e-MAG 3.0
Recursos e ferramentas para
acessibilidade
Simulador de navegadores
●
Browsershots:
http://browsershots.org.
governoeletronico.gov.br 34 de 59
35. Modelo e-MAG 3.0
Recursos e ferramentas para
acessibilidade
Leitores de tela
●
NVDA:
http://www.nvda-project.org;
●
DOSVOX:
http://intervox.nce.ufrj.br;
Jaws for Windows:
http://www.freedomscientific.com.
governoeletronico.gov.br 35 de 59
36. Modelo e-MAG 3.0
Recursos e ferramentas para
acessibilidade
Navegadores textuais
●
Lynx Viewer (simulador):
http://www.delorie.com/web/lynxview.ht
ml;
●
Lynx:
http://lynx.browser.org.
governoeletronico.gov.br 36 de 59
37. Modelo e-MAG 3.0
Recursos e ferramentas para
acessibilidade
Simulador para Daltonismo
●
Vischeck:
http://www.vischeck.com.
governoeletronico.gov.br 37 de 59
38. Modelo e-MAG 3.0
Recursos e ferramentas para
acessibilidade
Tutoriais
●
Uso correto do texto alternativo;
●
Tabelas acessíveis;
●
Formulários acessíveis.
http://www.governoeletronico.gov.br/acoes-e-
projetos/e-MAG/material-de-apoio
governoeletronico.gov.br 38 de 59
39. Modelo e-MAG 3.0
Estrutura
●
Recursos e ferramentas para acessibilidade;
●
Leitura complementar;
governoeletronico.gov.br 39 de 59
40. Modelo e-MAG 3.0
Leitura complementar
●
Padrões Brasil e-Gov:
●
http://www.governoeletronico.gov.br/acoes-
e-projetos/padroes-brasil-e-gov;
●
Acessibilidade Web: (X)HTML, CSS, Scripts e
Usabilidade para Todos:
http://www.acessibilidadelegal.com;
●
W3C Brasil:
●
http://w3c.br.
governoeletronico.gov.br 40 de 59
41. Avaliação 200 Sítios
e e-serviços do
Governo Eletrônico
Brasileiro
Ministério do Planejamento, Orçamento e Gestão
Secretaria de Logística e Tecnologia da Informação
Departamento de Governo Eletrônico
governoeletronico.gov.br
42. Avaliação 200 sítios e e-serviços
do Governo Eletrônico Brasileiro
Estudos anteriores
Indicadores
●
Aderência aos padrões HTML:
●
91%
●
Aderência aos padrões de Acessibilidade:
●
98% (TOTAL);
●
95% (FEDERAL).
Fonte: Dimensões e características da Web brasileira : um estudo do .gov.br
governoeletronico.gov.br 42 de 59
43. Avaliação 200 sítios e e-serviços do
Governo Eletrônico Brasileiro
Estudos anteriores
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:
Erros de acessibilidade mais comuns.
governoeletronico.gov.br
44. Avaliação 200 sítios e e-serviços
do Governo Eletrônico Brasileiro
Introdução
Etapas
●
Validação automática;
●
Validação manual.
governoeletronico.gov.br 44 de 59
45. Avaliação 200 sítios e e-serviços
do Governo Eletrônico Brasileiro
Introdução
Instrumentos
●
Checklist (27 perguntas).
governoeletronico.gov.br 45 de 59
46. Avaliação 200 sítios e e-serviços
do Governo Eletrônico Brasileiro
Introdução
Instrumentos
●
Tecnologia:
●
Sistemas Operacionais: Ubuntu 9.04 e
Windows XP SP2;
●
Leitor de Tela: NVDA 2009- RC2;
●
Navegadores: IE 8.0 e Firefox 3.6;
●
Validadores: Complementos Firefox
(Webdeveloper e Firebug)
governoeletronico.gov.br 46 de 59
47. Avaliação 200 sítios e e-serviços
do Governo Eletrônico Brasileiro
10 erros de acessibilidade
1- “Os links não apresentam descrições curtas e
objetivas ou não identificam o destino ao qual
remetem”
●
Ocorrência do erro = 95%;
●
Recomendação 19 do e-MAG 3.0 – Descrever
links clara e sucintamente.
governoeletronico.gov.br 47 de 59
48. Avaliação 200 sítios e e-serviços
do Governo Eletrônico Brasileiro
10 erros de acessibilidade
2- “As camadas lógicas não estão organizadas
corretamente”
●
Ocorrência do erro = 93%;
●
Recomendação 1 do e-MAG 3.0 – Respeitar os
padrões de desenvolvimento web.
governoeletronico.gov.br 48 de 59
49. Avaliação 200 sítios e e-serviços
do Governo Eletrônico Brasileiro
10 erros de acessibilidade
3- “Não existe a opção de alto contraste ou o
mesmo não está funcionando corretamente”
●
Ocorrência do erro = 89%;
●
Recomendação 28 do e-MAG 3.0 – Oferecer
contraste minímo entre o plano de fundo
e primeiro plano.
governoeletronico.gov.br 49 de 59
50. Avaliação 200 sítios e e-serviços
do Governo Eletrônico Brasileiro
10 erros de acessibilidade
4- “As imagens não estão corretamente
etiquetadas”
●
Ocorrência do erro = 86%;
●
Recomendação 20 do e-MAG 3.0 – Fornecer
alternativa em texto para as imagens do
sítio.
governoeletronico.gov.br 50 de 59
51. Avaliação 200 sítios e e-serviços
do Governo Eletrônico Brasileiro
10 erros de acessibilidade
5- “Há ausência de links indicadores nas
páginas”
●
Ocorrência do erro = 86%;
●
Recomendação 6 do e-MAG 3.0 – Fornecer
âncoras para ir direto a um bloco de
conteúdo.
governoeletronico.gov.br 51 de 59
52. Avaliação 200 sítios e e-serviços
do Governo Eletrônico Brasileiro
10 erros de acessibilidade
6- “A estrutura das páginas não está uniforme”
●
Ocorrência do erro = 82%;
●
Recomendação 31 do e-MAG 3.0 – Dividir as
áreas de informação.
governoeletronico.gov.br 52 de 59
53. Avaliação 200 sítios e e-serviços
do Governo Eletrônico Brasileiro
10 erros de acessibilidade
7- “Os títulos não apresentam uma ordem
lógica”
●
Ocorrência do erro = 80%;
●
Recomendação 3 do e-MAG 3.0 – Utilizar
corretamente os níveis de cabeçalho.
governoeletronico.gov.br 53 de 59
54. Avaliação 200 sítios e e-serviços
do Governo Eletrônico Brasileiro
10 erros de acessibilidade
8- “Os formulários não funcionam corretamente”
●
Ocorrência do erro = 79%;
●
Recomendação 39 do e-MAG 3.0 – Associar
etiquetas aos seus campos;
Recomendação 40 do e-MAG 3.0 – Estabelecer
uma ordem lógica de navegação;
Recomendação 43 do e-MAG 3.0 – Identificar
e descrever erros de entrada de dados;
governoeletronico.gov.br 54 de 59
55. Avaliação 200 sítios e e-serviços
do Governo Eletrônico Brasileiro
10 erros de acessibilidade
8- “Os formulários não funcionam corretamente”
●
Recomendação 44 do e-MAG 3.0 – Agrupar
campos de formulário;
Recomendação 45 do e-MAG 3.0 – Fornecer
CAPTCHA humano.
governoeletronico.gov.br 55 de 59
56. Avaliação 200 sítios e e-serviços
do Governo Eletrônico Brasileiro
10 erros de acessibilidade
9- “Não existem atalhos para facilitar a
navegação, ou os mesmos não estão descritos
corretamente”
●
Ocorrência do erro = 78%;
●
Recomendação 6 do e-MAG 3.0 – Fornecer
âncoras para ir direito a um bloco de
conteúdo.
governoeletronico.gov.br 56 de 59
57. Avaliação 200 sítios e e-serviços
do Governo Eletrônico Brasileiro
10 erros de acessibilidade
10- “Há tabelas implementadas de forma
incorreta”
●
Ocorrência do erro = 72%;
●
Recomendação 23 do e-MAG 3.0 – Utilizar
títulos e resumos de forma apropriada;
Recomendação 24 do e-MAG 3.0 – Associar
células de dados às células de cabeçalho.
governoeletronico.gov.br 57 de 59
58. Avaliação 200 sítios e e-serviços
do Governo Eletrônico Brasileiro
Outros erros
●
Certificados de segurança;
●
CAPTCHAS;
●
URLs (Uniform Resource Locator) não amigáveis.
governoeletronico.gov.br 58 de 59
59. Cesar Bomfim
Higo Gomes
governoeletronico.gov.br
Twitter: @egovbr
egov@planejamento.gov.br
+55 (61) 2020 1012
governoeletronico.gov.br 59 de 59