NSEA apresenta: e-MAG para técnicos

  • 591 views
Uploaded on

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

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
591
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
15
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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ônicogovernoeletronico.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 Federalgovernoeletronico.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 Federalgovernoeletronico.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áginagovernoeletronico.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/tutorialsgovernoeletronico.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-validatorgovernoeletronico.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.phpgovernoeletronico.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-apoiogovernoeletronico.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ônicogovernoeletronico.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.brgovernoeletronico.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 1012governoeletronico.gov.br 59 de 59