Evento Sexta com Projetos do SISP, 11 de novembro de 2011.

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

6. Modelo e-MAG 3.0
Introdução
Legislação:
●
Decreto nº 5296/2004
●
Comitê CB-40 da ABNT;
●
Decreto nº 6949/2009;
●
Portaria nº 3/2007.
governoeletronico.gov.br 6 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

11. Modelo e-MAG 3.0
Recomendações de acessibilidade
1 - Marcação
●
9 (nove) recomendações;
●
Semântica HTML.
governoeletronico.gov.br 11 de 59

12. Modelo e-MAG 3.0
Recomendações de acessibilidade
2 - Comportamento (DOM)
●
6 (seis) recomendações;
●
Reação.
governoeletronico.gov.br 12 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