<ul>e-MAG 3.0 </ul><ul>Modelo de Acessibilidade em Governo Eletrônico </ul><ul>Projeto de Acessibilidade Virtual da RENAPI...
<ul>e-MAG </ul><ul>Acessibilidade </ul><ul><ul><li>Conceitos
Por que acessibilidade? </li></ul></ul><ul>e-MAG </ul><ul><ul><li>Histórico
Versão 3.0
Estrutura Atual
Padronização das Páginas do Governo </li></ul></ul><ul>Cursos e-MAG </ul><ul><ul><li>Estrutura geral
Público-alvo </li></ul></ul><ul>CMS Suindara </ul><ul><ul><li>Estrutura Geral </li></ul></ul>
<ul>Conceitos </ul>
<ul><ul><li>Acessibilidade </li></ul></ul><ul><ul><ul><ul><li>Possibilidade de acesso a TODOS, independente de limitação (...
Mede a produtividade, eficiência de uso e funcionalidade do ambiente </li></ul></ul></ul><ul><ul><li>Comunicabilidade </li...
Diz respeito à capacidade do usuário em compreender as informações fornecidas  pelo  sistema ou interface </li></ul></ul><...
<ul>Por que Acessibilidade? </ul>
<ul><li>Prover acesso aos 14,5%  da população brasileira com necessidades especiais
Permitir a indexação das páginas Web de forma mais rápida e precisa pelos mecanismos de busca
Ampliar as possibilidades de acesso às páginas web por diferentes tecnologias
Estimular a prática do altruísmo
Respeito à Legislação </li></ul><ul>Acessibilidade à Web – Por quê? </ul>
<ul><li>Decreto 5.296, de 02 de dezembro de 2004 </li></ul><ul><ul><li>Regulamenta as Leis 10.098/00 e 10.048/00.
Em seu artigo 47° torna  obrigatória  a acessibilidade nos portais e sítios eletrônicos da administração pública para o us...
Tornou sua observância obrigatória nos sítios e portais do governo brasileiro. </li></ul></ul><ul>Legislação </ul>
<ul>e-MAG 3.0 </ul>
<ul>e-MAG 3.0 </ul><ul><li>O que é... </li></ul><ul>Documento com  recomendações   a serem consideradas para que o process...
<ul>e-MAG </ul><ul><li>Objetivos... </li></ul><ul>Nortear   a criação e adaptação de sítios e portais do governo brasileir...
<ul>e-MAG </ul><ul>Histórico Versão 1  </ul><ul><ul><li>Elaborada pelo Depto de Governo Eletrônico em parceria com a ONG A...
Disponibilizada para consulta pública em  18/01/2005 </li></ul></ul><ul>Versão 2 </ul><ul><ul><li>Alterações na versão 1 p...
Lançada em  14/12/2005 </li></ul></ul><ul>Versão 3 </ul><ul><ul><ul><li>Elaborada pelo Depto de Governo Eletrônico em parc...
<ul>e-MAG 3.0 </ul><ul><li>O e-MAG 3.0  surgiu  da parceria firmada entre o Ministério do Planejamento, Orçamento e Gestão...
O trabalho dos professores e bolsistas do projeto consistiu na  atualização e reformulação  da versão anterior do e-MAG, l...
<ul>Projeto de Acessibilidade Virtual da RENAPI – SETEC/MEC </ul>
<ul>e-MAG 3.0 - Colaboradores </ul><ul>MPOG:  </ul><ul><li>Equipe do Departamento de Governo Eletrônico (DGE) </li></ul><u...
<ul>e-MAG 3.0 - Colaboradores Consulta Pública </ul><ul><li>André Pimenta Freire;
Angela Guimarães;
Carol Scarton;
Diego Roger Ramos Freitas;
Edercio Marques Bento;
Jorge Fernandes;
Jorge Fiore de Oliveira Junior;
Leonelo Dell Anhol Almeida;
Upcoming SlideShare
Loading in …5
×

Conheça o e-MAG 3.0 - Andrea Sonza

2,545 views

Published on

Palestra realizada no evento Acessibilidade Digital - Um direito de Todos. ESAF, 21 de setembro de 2011.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,545
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
88
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Esta parceria iniciou em..... E segue atualmente com novos projetos.
  • Nesta seção, são apresentadas informações que introduzem os conceitos de acessibilidade na web e sua importância para possibilitar e facilitar o acesso de pessoas com deficiência.
  • As recomendações são apresentadas de forma mandatória e explicadas de maneira didática. Buscou-se, apesar do caráter técnico, manter uma linguagem de fácil compreensão e uma estrutura padronizada. Em grande parte das recomendações, são apresentados exemplos de como atendê-las.
  • As recomendações são apresentadas de forma mandatória e explicadas de maneira didática. Buscou-se, apesar do caráter técnico, manter uma linguagem de fácil compreensão e uma estrutura padronizada. Em grande parte das recomendações, são apresentados exemplos de como atendê-las.
  • Intermitência de tela: não devem ser utilizados efeitos visuais piscantes, intermitentes ou cintilantes. Em pessoas com epilepsia fotosensitiva o cintilar ou piscar pode desencadear um ataque epilético.
  • As recomendações são apresentadas de forma mandatória e explicadas de maneira didática. Buscou-se, apesar do caráter técnico, manter uma linguagem de fácil compreensão e uma estrutura padronizada. Em grande parte das recomendações, são apresentados exemplos de como atendê-las.
  • Contraste: a relação mínima de contraste entre plano de fundo e primeiro plano é de 3:1 (recomendado pela ISSO 9241-3). No entanto, levando-se em consideração pessoas com baixa acuidade visual, cromodeficiência ou perda de sensibilidade ao contraste (devido à senilidade) é recomendado 4,5:1. Existem ferramentas gratuitas na web que verificam a relação de contraste.
  • Fornecer controle para áudio: deve ser fornecido um mecanismo para parar, pausar, silenciar ou ajustar volume de qq som q se reproduza na página. Fornecer controle para animação: deve ser fornecido um mecanismo para pausar, parar ou ocultar uma animação.
  • Captcha: teste interativo humano, para distinguir computadores de seres humanos. Quando utilizado deve ser fornecido em forma de pergunta de interpretação. Ex: qual a cor do céu?
  • Parte 4: ferramentas para validação automática de acessibilidade, para verificação de relação de contraste de cores, para suporte no desenvolvimento de sítios acessíveis, etc.
  • Parte 4: ferramentas para validação automática de acessibilidade, para verificação de relação de contraste de cores, para suporte no desenvolvimento de sítios acessíveis, etc.
  • Parte 4: ferramentas para validação automática de acessibilidade, para verificação de relação de contraste de cores, para suporte no desenvolvimento de sítios acessíveis, etc.
  • Tela Administrativa. A tela de login dá acesso para o usuário do sistema, por exemplo, para o pessoal do setor de comunicação. O sistema dá suporte a usuários com perfis diferentes: Administrador, Escritor (só escreve/digita mas não pulbica) ou Editor (escreve/digita e publica).
  • Tela principal da parte administrativa. É possível administrar: Conteúdos, Categorias, Mídias, Menus, Usuários e Perfis.
  • Template (em desenvolvimento) – baseado no site do MEC. A ideia é ser o modelo o CMS Suindara, que traga a identidade de cada IF.
  • Conheça o e-MAG 3.0 - Andrea Sonza

    1. 1. <ul>e-MAG 3.0 </ul><ul>Modelo de Acessibilidade em Governo Eletrônico </ul><ul>Projeto de Acessibilidade Virtual da RENAPI – SETEC/MEC Andréa Poletto Sonza Brasília, 21 de Setembro de 2011 </ul>
    2. 2. <ul>e-MAG </ul><ul>Acessibilidade </ul><ul><ul><li>Conceitos
    3. 3. Por que acessibilidade? </li></ul></ul><ul>e-MAG </ul><ul><ul><li>Histórico
    4. 4. Versão 3.0
    5. 5. Estrutura Atual
    6. 6. Padronização das Páginas do Governo </li></ul></ul><ul>Cursos e-MAG </ul><ul><ul><li>Estrutura geral
    7. 7. Público-alvo </li></ul></ul><ul>CMS Suindara </ul><ul><ul><li>Estrutura Geral </li></ul></ul>
    8. 8. <ul>Conceitos </ul>
    9. 9. <ul><ul><li>Acessibilidade </li></ul></ul><ul><ul><ul><ul><li>Possibilidade de acesso a TODOS, independente de limitação (física, sensorial, cognitiva...) situação ou tecnologia </li></ul></ul></ul></ul><ul><ul><li>Usabilidade </li></ul></ul><ul><ul><ul><li>Facilidade de acesso a TODOS
    10. 10. Mede a produtividade, eficiência de uso e funcionalidade do ambiente </li></ul></ul></ul><ul><ul><li>Comunicabilidade </li></ul></ul><ul><ul><ul><li>Comunicação com TODOS
    11. 11. Diz respeito à capacidade do usuário em compreender as informações fornecidas pelo sistema ou interface </li></ul></ul></ul><ul>Conceitos de Qualidade de Uso de Sistemas </ul>
    12. 12. <ul>Por que Acessibilidade? </ul>
    13. 13. <ul><li>Prover acesso aos 14,5% da população brasileira com necessidades especiais
    14. 14. Permitir a indexação das páginas Web de forma mais rápida e precisa pelos mecanismos de busca
    15. 15. Ampliar as possibilidades de acesso às páginas web por diferentes tecnologias
    16. 16. Estimular a prática do altruísmo
    17. 17. Respeito à Legislação </li></ul><ul>Acessibilidade à Web – Por quê? </ul>
    18. 18. <ul><li>Decreto 5.296, de 02 de dezembro de 2004 </li></ul><ul><ul><li>Regulamenta as Leis 10.098/00 e 10.048/00.
    19. 19. Em seu artigo 47° torna obrigatória a acessibilidade nos portais e sítios eletrônicos da administração pública para o uso das pessoas com necessidades especiais (deficientes visuais), garantindo-lhes o pleno acesso às informações disponíveis. O mesmo artigo declara que o prazo para readequação dos sítios É de doze meses a contar da data de publicação do decreto. O prazo foi estendido por mais doze meses no caso de websites muito complexos, o que constitui a maioria dos portais governamentais. </li></ul></ul><ul><li>Portaria nº3, de 7 de maio de 2007 , </li></ul><ul><ul><li>Institucionalizou o e-MAG,
    20. 20. Tornou sua observância obrigatória nos sítios e portais do governo brasileiro. </li></ul></ul><ul>Legislação </ul>
    21. 21. <ul>e-MAG 3.0 </ul>
    22. 22. <ul>e-MAG 3.0 </ul><ul><li>O que é... </li></ul><ul>Documento com recomendações a serem consideradas para que o processo de acessibilidade dos sítios e portais do governo brasileiro seja conduzido de forma padronizada e de fácil implementação. </ul>
    23. 23. <ul>e-MAG </ul><ul><li>Objetivos... </li></ul><ul>Nortear a criação e adaptação de sítios e portais do governo brasileiro, estando de acordo com as diretrizes internacionais de acessibilidade, mas considerando as necessidades locais; Proporcionar meios para a percepção, interação e compreensão do conteúdo publicado nos sítios governamentais por todas as pessoas. </ul>
    24. 24. <ul>e-MAG </ul><ul>Histórico Versão 1 </ul><ul><ul><li>Elaborada pelo Depto de Governo Eletrônico em parceria com a ONG Acessibilidade Brasil
    25. 25. Disponibilizada para consulta pública em 18/01/2005 </li></ul></ul><ul>Versão 2 </ul><ul><ul><li>Alterações na versão 1 propostas pela consulta pública
    26. 26. Lançada em 14/12/2005 </li></ul></ul><ul>Versão 3 </ul><ul><ul><ul><li>Elaborada pelo Depto de Governo Eletrônico em parceria com o Projeto de Acessibilidade Virtual da RENAPI – SETEC/MEC </li></ul></ul></ul><ul><ul><li>Lançamento oficial em 21/09/11 . </li></ul></ul>
    27. 27. <ul>e-MAG 3.0 </ul><ul><li>O e-MAG 3.0 surgiu da parceria firmada entre o Ministério do Planejamento, Orçamento e Gestão (Departamento de Governo Eletrônico) e o Projeto de Acessibilidade Virtual da RENAPI (MEC), que iniciou em 2009;
    28. 28. O trabalho dos professores e bolsistas do projeto consistiu na atualização e reformulação da versão anterior do e-MAG, lançada em 2005. </li></ul>
    29. 29. <ul>Projeto de Acessibilidade Virtual da RENAPI – SETEC/MEC </ul>
    30. 30. <ul>e-MAG 3.0 - Colaboradores </ul><ul>MPOG: </ul><ul><li>Equipe do Departamento de Governo Eletrônico (DGE) </li></ul><ul>Projeto de Acessibilidade Virtual (RENAPI-SETEC/MEC): </ul><ul><li>Bruna Poletto, Jucélia Almeida, Andréa Sonza, Célio DallPizol, Everaldo Carniel, Agebson Façanha, Renato Busatto, Vera Fucks, Anderson Dall Agnol, Lael Nervis, Gleison Nascimento, Felipe Zap, Ricardo Moro </li></ul><ul>Consultoria: </ul><ul><li>Marco Antônio Queiroz </li></ul><ul>Projeto de Acessibilidade Virtual da RENAPI </ul>
    31. 31. <ul>e-MAG 3.0 - Colaboradores Consulta Pública </ul><ul><li>André Pimenta Freire;
    32. 32. Angela Guimarães;
    33. 33. Carol Scarton;
    34. 34. Diego Roger Ramos Freitas;
    35. 35. Edercio Marques Bento;
    36. 36. Jorge Fernandes;
    37. 37. Jorge Fiore de Oliveira Junior;
    38. 38. Leonelo Dell Anhol Almeida;
    39. 39. Marco Antonio de Queiroz;
    40. 40. Maria Cecília Calani Baranauskas;
    41. 41. Reinaldo Ferraz;
    42. 42. Thiago Prado de Campos;
    43. 43. Ueslei Paterno
    44. 44. Vagner Figueredo de Santana. </li></ul>
    45. 45. <ul>e-MAG 3.0 </ul><ul>Consulta Pública – Discussões - Fechamento Documento </ul><ul><li>O e-MAG 3.0 foi disponibilizado para consulta pública de dezembro de 2010 a janeiro de 2011 – prazo ampliado até março de 2011.
    46. 46. Contando com as diversas contribuições de especialistas e estudiosos, o e-MAG passou por mais uma reformulação e revisão geral, até chegar ao seu formato final; </li></ul>
    47. 47. <ul>e-MAG 3.0 </ul><ul>Base e Estrutura Geral </ul><ul><li>A versão 3.0 do e-MAG foi desenvolvida tomando como base a WCAG 2.0 , outros documentos internacionais de acessibilidade, além de pesquisas realizadas no âmbito do projeto de acessibilidade virtual e com o auxílio de pessoas com deficiência.
    48. 48. Os níveis de prioridade foram retirados da nova versão do e-MAG pelo fato de este ser um documento do governo, indicando que todas as recomendações devem ser seguidas. Além disso, testes realizados com usuários com deficiência comprovam que não basta apenas garantir um nível mínimo de acessibilidade. </li></ul>
    49. 49. <ul>e-MAG 3.0 </ul><ul>Estruturação </ul><ul><li>Parte 1 – Introdução </li></ul><ul><ul><li>Sobre a versão 3.0
    50. 50. Legislação
    51. 51. O acesso de pessoas com deficiência
    52. 52. O processo para desenvolver um sítio acessível </li></ul></ul>
    53. 53. <ul>e-MAG 3.0 </ul><ul><li>Parte 2 – Recomendações de acessibilidade (divisão por Seções ) </li></ul><ul><ul><li>Marcação (9 recomendações)
    54. 54. Comportamento (6 recomendações)
    55. 55. Conteúdo / Informação (12 recomendações)
    56. 56. Apresentação / Design (5 recomendações)
    57. 57. Multimídia (5 recomendações)
    58. 58. Formulários (8 recomendações) </li></ul></ul><ul>Total: 45 recomendações </ul>
    59. 59. <ul>e-MAG 3.0 </ul><ul><li>Recomendações de acessibilidade – MARCAÇÃO </li></ul><ul><ul><li>Respeitar os padrões de desenvolvimento web
    60. 60. Organizar o código HTML de forma lógica e semântica
    61. 61. Utilizar corretamente os níveis de cabeçalho
    62. 62. Ordenar de forma lógica e intuitiva a leitura e tabulação
    63. 63. Disponibilizar todas as funções da página via teclado
    64. 64. Fornecer âncoras para ir direto a um bloco de conteúdo
    65. 65. Não utilizar tabelas para diagramação
    66. 66. Separar links adjacentes
    67. 67. Não abrir novas instâncias sem a solicitação do usuário </li></ul></ul>
    68. 68. <ul>e-MAG 3.0 </ul><ul><li>Recomendações de acessibilidade – COMPORTAMENTO </li></ul><ul><ul><li>Garantir que os objetos programáveis sejam acessíveis
    69. 69. Não criar páginas com atualização automática
    70. 70. Não utilizar redirecionamento automático de páginas
    71. 71. Fornecer alternativa para modificar limite de tempo
    72. 72. Não incluir situações com intermitência de tela
    73. 73. Assegurar o controle do usuário sobre as alterações temporais do conteúdo </li></ul></ul>
    74. 74. <ul>e-MAG 3.0 </ul><ul><li>Recomendações de acessibilidade – CONTEÚDO/INFORMAÇÃO </li></ul><ul><ul><li>Identificar o idioma principal da página
    75. 75. Oferecer um título descritivo e informativo à página
    76. 76. Disponibilizar informação sobre a localização do usuário na página
    77. 77. Descrever links clara e sucintamente
    78. 78. Fornecer alternativa em texto para as imagens do sítio
    79. 79. Fornecer alternativa em texto para as zonas ativas de mapa de imagem
    80. 80. Disponibilizar documentos em formatos acessíveis
    81. 81. Em tabelas, utilizar títulos e resumos de forma apropriada
    82. 82. Associar células de dados às células de cabeçalho em uma tabela
    83. 83. Garantir a leitura e compreensão das informações
    84. 84. Disponibilizar uma explicação para siglas, abreviaturas e palavras incomuns
    85. 85. Informar mudança de idioma no conteúdo </li></ul></ul>
    86. 86. <ul>e-MAG 3.0 </ul><ul><li>Recomendações de acessibilidade – APRESENTAÇÃO/DESIGN </li></ul><ul><ul><li>Oferecer contraste mínimo entre plano de fundo e primeiro plano
    87. 87. Não utilizar apenas cor ou outras características sensoriais para diferenciar elementos
    88. 88. Permitir redimensionamento de texto sem perda de funcionalidade
    89. 89. Dividir as áreas de informação
    90. 90. Possibilitar que o elemento com foco seja visualmente evidente </li></ul></ul>
    91. 91. <ul>e-MAG 3.0 </ul><ul><li>Recomendações de acessibilidade – MULTIMÍDIA </li></ul><ul><ul><li>Fornecer alternativa para vídeo
    92. 92. Fornecer alternativa para áudio
    93. 93. Oferecer audiodescrição para vídeo pré-gravado
    94. 94. Fornecer controle de áudio para som
    95. 95. Fornecer controle de animação </li></ul></ul>
    96. 96. <ul>e-MAG 3.0 </ul><ul><li>Recomendações de acessibilidade – FORMULÁRIOS </li></ul><ul><ul><li>Fornecer alternativa em texto para os botões de imagem de formulários
    97. 97. Associar etiquetas aos seus campos
    98. 98. Estabelecer uma ordem lógica de navegação
    99. 99. Não provocar automaticamente alteração no contexto
    100. 100. Fornecer instruções para entrada de dados
    101. 101. Identificar e descrever erros de entrada de dados
    102. 102. Agrupar campos de formulário
    103. 103. Fornecer CAPTCHA humano </li></ul></ul>
    104. 104. <ul>e-MAG 3.0 </ul><ul><li>Parte 3 – Padrões de acessibilidade digital no Governo Federal </li></ul><ul><ul><li>padroniza elementos de acessibilidade que devem ter características em comum em todas as páginas do governo federal, como: </li></ul></ul><ul><ul><ul><li>atalhos,
    105. 105. barra de acessibilidade,
    106. 106. mapa do sítio,
    107. 107. página de acessibilidade, entre outros. </li></ul></ul></ul>
    108. 108. <ul>e-MAG 3.0 </ul><ul><li>Parte 4 – Recursos e ferramentas para acessibilidade </li></ul><ul><ul><li>Especificações
    109. 109. Validadores de código
    110. 110. Validadores automáticos de acessibilidade
    111. 111. Checklists para avaliação de acessibilidade
    112. 112. Ferramentas para análise de contraste
    113. 113. Leitores de tela
    114. 114. Entre outros... </li></ul></ul>
    115. 115. <ul>e-MAG 3.0 </ul><ul><li>Parte 5 – Leitura complementar </li></ul><ul><ul><li>Padrões Brasil e-Gov http://www.governoeletronico.gov.br/acoes-e-projetos/padroes-brasil-e-gov
    116. 116. WCAG 2.0 http://www.ilearn.com.br/TR/WCAG20
    117. 117. Técnicas para as WCAG 2.0 http://www.acesso.umic.pt/w3/TR/WCAG20-TECHS/
    118. 118. CSS e Web Standards http://maujor.com/
    119. 119. RENAPI – Projeto de Acessibilidade Virtual http://bento.ifrs.edu.br/acessibilidade/
    120. 120. Acessibilidade Web: (X)HTML, CSS, Scripts e Usabilidade para Todos http://www.acessibilidadelegal.com/
    121. 121. Acesso Digital http://www.acessodigital.net
    122. 122. Web Accessibility in Mind http://webaim.org
    123. 123. W3C Brasil http://w3c.br
    124. 124. CLF Standards (Canadá) http://www.tbs-sct.gc.ca/clf2-nsi2/index-eng.asp
    125. 125. Section 508 (Estados Unidos) http://www.section508.gov
    126. 126. NDA (Irlanda) http://www.nda.ie/cntmgmtnew.nsf </li></ul></ul>
    127. 127. <ul>e-MAG 3.0 </ul><ul><li>Parte 6 – Glossário </li></ul><ul><ul><li>Explicação de termos utilizados ao longo do documento, incluindo conceitos importantes, termos técnicos e siglas. </li></ul></ul>
    128. 128. <ul>Cursos e-MAG </ul>
    129. 129. <ul>Cursos e-MAG </ul><ul>Conteúdo: </ul><ul><ul><li>Parte I – Introdução à Acessibilidade na Web
    130. 130. Parte II – e-MAG 3.0 - Recomendações de Acessibilidade </li></ul></ul><ul><ul><li>Status: </li></ul></ul><ul><ul><li>Parte I – ok (em análise pelo MPOG);
    131. 131. Em fase de construção da Parte II. </li></ul></ul><ul><ul><li>Público Alvo: </li></ul></ul><ul><ul><li>Desenvolvedores e envolvidos  com a manutenção de páginas web no governo federal. 
    132. 132. Uso de ambiente de EAD Moodle </li></ul></ul>
    133. 133. <ul>CMS Suindara </ul>
    134. 134. <ul>CMS Suindara </ul><ul>CMS - Content Management System (Sistema de gerenciamento de conteúdo) </ul><ul><ul><li>Exemplos: Wordpress, Joomla, Drupal, Plone
    135. 135. Suindara : </li></ul></ul><ul><ul><ul><li>Proposta: Ser Acessível e Auto-Acessível;
    136. 136. Manter o site acessível com o uso/tempo;
    137. 137. Open Source: PHP + Zend FrameWork;
    138. 138. Baseado em template (cada instituição poderá adequar seu site independente);
    139. 139. Versão 2.0 (em desenvolvimento). </li></ul></ul></ul>
    140. 140. <ul>CMS Suindara – Tela de Login </ul>
    141. 141. <ul>CMS Suindara – Tela Principal (Administrativa) </ul>
    142. 142. <ul>CMS Suindara - Tela de publicação de conteúdo </ul>
    143. 143. <ul>CMS Suindara - Modelo de template gerado baseado no site do MEC </ul>
    144. 144. <ul>Muito Obrigada! [email_address] </ul>

    ×