Conheça o e-MAG 3.0 - Andrea Sonza

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

1. e-MAG 3.0
Modelo de Acessibilidade em Governo Eletrônico

Projeto de Acessibilidade Virtual da RENAPI – SETEC/MEC
Andréa Poletto Sonza
Brasília, 21 de Setembro de 2011

2. Projeto de Acessibilidade Virtual da RENAPI
2
e-MAG
Acessibilidade
Conceitos
Por que acessibilidade?
e-MAG
Histórico
Versão 3.0
Estrutura Atual
Padronização das Páginas do Governo
Cursos e-MAG
Estrutura geral
Público-alvo
CMS Suindara
Estrutura Geral

3. Conceitos

4. Projeto de Acessibilidade Virtual da RENAPI
4
Possibilidade de acesso a TODOS, independente de limitação (física, sensorial, cognitiva...) situação ou tecnologia
Facilidade de acesso a TODOS
Mede a produtividade, eficiência de uso e funcionalidade do ambiente
Comunicação com TODOS
Diz respeito à capacidade do usuário em compreender as informações fornecidas pelo sistema ou interface
Conceitos de Qualidade de Uso de Sistemas

5. Por que Acessibilidade?

6. Projeto de Acessibilidade Virtual da RENAPI
6
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
Acessibilidade à Web – Por quê?

7. Projeto de Acessibilidade Virtual da RENAPI
7
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.
Legislação

8. e-MAG 3.0

9. Projeto de Acessibilidade Virtual da RENAPI
9
e-MAG 3.0
O que é...
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.

10. Projeto de Acessibilidade Virtual da RENAPI
10
e-MAG
Objetivos...
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.

11. Projeto de Acessibilidade Virtual da RENAPI
11
e-MAG
Histórico
Versão 1
Elaborada pelo Depto de Governo Eletrônico em parceria com a ONG
Acessibilidade Brasil
Disponibilizada para consulta pública em 18/01/2005
Versão 2
Alterações na versão 1 propostas pela consulta pública
Lançada em 14/12/2005
Versão 3
Elaborada pelo Depto de Governo Eletrônico em parceria com o Projeto de
Acessibilidade Virtual da RENAPI – SETEC/MEC
Lançamento oficial em 21/09/11.

12. Projeto de Acessibilidade Virtual da RENAPI
12
e-MAG 3.0
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;
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.

13. Projeto de Acessibilidade Virtual da RENAPI
13
Projeto de Acessibilidade Virtual da RENAPI –
SETEC/MEC

14. Projeto de Acessibilidade Virtual da RENAPI
14
e-MAG 3.0 - Colaboradores
Projeto de Acessibilidade Virtual da RENAPI
MPOG:
Equipe do Departamento de Governo Eletrônico (DGE)
Projeto de Acessibilidade Virtual (RENAPI-
SETEC/MEC):
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
Consultoria:
Marco Antônio Queiroz

15. Projeto de Acessibilidade Virtual da RENAPI
15
e-MAG 3.0 - Colaboradores Consulta Pública
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;
Marco Antonio de Queiroz;
Maria Cecília Calani Baranauskas;
Reinaldo Ferraz;
Thiago Prado de Campos;
Ueslei Paterno
Vagner Figueredo de Santana.

16. Projeto de Acessibilidade Virtual da RENAPI
16
e-MAG 3.0
Consulta Pública – Discussões - Fechamento Documento
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.
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;

17. Projeto de Acessibilidade Virtual da RENAPI
17
e-MAG 3.0
Base e Estrutura Geral
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.
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.

18. Projeto de Acessibilidade Virtual da RENAPI
18
e-MAG 3.0
Estruturação
Parte 1 – Introdução
Sobre a versão 3.0
Legislação
O acesso de pessoas com deficiência
O processo para desenvolver um sítio acessível

19. Projeto de Acessibilidade Virtual da RENAPI
19
e-MAG 3.0
Parte 2 – Recomendações de acessibilidade
(divisão por Seções)
Marcação (9 recomendações)
Comportamento (6 recomendações)
Conteúdo / Informação (12 recomendações)
Apresentação / Design (5 recomendações)
Multimídia (5 recomendações)
Formulários (8 recomendações)
Total: 45 recomendações

20. Projeto de Acessibilidade Virtual da RENAPI
20
e-MAG 3.0
Recomendações de acessibilidade – MARCAÇÃO
Respeitar os padrões de desenvolvimento web
Organizar o código HTML de forma lógica e semântica
Utilizar corretamente os níveis de cabeçalho
Ordenar de forma lógica e intuitiva a leitura e tabulação
Disponibilizar todas as funções da página via teclado
Fornecer âncoras para ir direto a um bloco de conteúdo
Não utilizar tabelas para diagramação
Separar links adjacentes
Não abrir novas instâncias sem a solicitação do usuário

21. Projeto de Acessibilidade Virtual da RENAPI
21
e-MAG 3.0
Recomendações de acessibilidade – COMPORTAMENTO
Garantir que os objetos programáveis sejam acessíveis
Não criar páginas com atualização automática
Não utilizar redirecionamento automático de páginas
Fornecer alternativa para modificar limite de tempo
Não incluir situações com intermitência de tela
Assegurar o controle do usuário sobre as alterações
temporais do conteúdo

22. Projeto de Acessibilidade Virtual da RENAPI
22
e-MAG 3.0
Recomendações de acessibilidade – CONTEÚDO/INFORMAÇÃO
Identificar o idioma principal da página
Oferecer um título descritivo e informativo à página
Disponibilizar informação sobre a localização do usuário na página
Descrever links clara e sucintamente
Fornecer alternativa em texto para as imagens do sítio
Fornecer alternativa em texto para as zonas ativas de mapa de imagem
Disponibilizar documentos em formatos acessíveis
Em tabelas, utilizar títulos e resumos de forma apropriada
Associar células de dados às células de cabeçalho em uma tabela
Garantir a leitura e compreensão das informações
Disponibilizar uma explicação para siglas, abreviaturas e palavras incomuns
Informar mudança de idioma no conteúdo

23. Projeto de Acessibilidade Virtual da RENAPI
23
e-MAG 3.0
Recomendações de acessibilidade – APRESENTAÇÃO/DESIGN
Oferecer contraste mínimo entre plano de fundo e primeiro plano
Não utilizar apenas cor ou outras características sensoriais para
diferenciar elementos
Permitir redimensionamento de texto sem perda de funcionalidade
Dividir as áreas de informação
Possibilitar que o elemento com foco seja visualmente evidente

24. Projeto de Acessibilidade Virtual da RENAPI
24
e-MAG 3.0
Recomendações de acessibilidade – MULTIMÍDIA
Fornecer alternativa para vídeo
Fornecer alternativa para áudio
Oferecer audiodescrição para vídeo pré-gravado
Fornecer controle de áudio para som
Fornecer controle de animação

25. Projeto de Acessibilidade Virtual da RENAPI
25
e-MAG 3.0
Recomendações de acessibilidade – FORMULÁRIOS
Fornecer alternativa em texto para os botões de imagem de
formulários
Associar etiquetas aos seus campos
Estabelecer uma ordem lógica de navegação
Não provocar automaticamente alteração no contexto
Fornecer instruções para entrada de dados
Identificar e descrever erros de entrada de dados
Agrupar campos de formulário
Fornecer CAPTCHA humano

26. Projeto de Acessibilidade Virtual da RENAPI
26
e-MAG 3.0
Parte 3 – Padrões de acessibilidade digital no
Governo Federal
padroniza elementos de acessibilidade que devem ter
características em comum em todas as páginas do
governo federal, como:
atalhos,
barra de acessibilidade,
mapa do sítio,
página de acessibilidade, entre outros.

27. Projeto de Acessibilidade Virtual da RENAPI
27
e-MAG 3.0
Parte 4 – Recursos e ferramentas para
acessibilidade
Especificações
Validadores de código
Validadores automáticos de acessibilidade
Checklists para avaliação de acessibilidade
Ferramentas para análise de contraste
Leitores de tela
Entre outros...

28. Projeto de Acessibilidade Virtual da RENAPI
28
e-MAG 3.0
Parte 5 – Leitura complementar
Padrões Brasil e-Gov http://www.governoeletronico.gov.br/acoes-e-projetos/padroes-brasil-e-gov
WCAG 2.0 http://www.ilearn.com.br/TR/WCAG20
Técnicas para as WCAG 2.0 http://www.acesso.umic.pt/w3/TR/WCAG20-TECHS/
CSS e Web Standards http://maujor.com/
RENAPI – Projeto de Acessibilidade Virtual http://bento.ifrs.edu.br/acessibilidade/
Acessibilidade Web: (X)HTML, CSS, Scripts e Usabilidade para Todos
http://www.acessibilidadelegal.com/
Acesso Digital http://www.acessodigital.net
Web Accessibility in Mind http://webaim.org
W3C Brasil http://w3c.br
CLF Standards (Canadá) http://www.tbs-sct.gc.ca/clf2-nsi2/index-eng.asp
Section 508 (Estados Unidos) http://www.section508.gov
NDA (Irlanda) http://www.nda.ie/cntmgmtnew.nsf

29. Projeto de Acessibilidade Virtual da RENAPI
29
e-MAG 3.0
Parte 6 – Glossário
Explicação de termos utilizados ao longo do
documento, incluindo conceitos importantes,
termos técnicos e siglas.

30. Cursos e-MAG

31. Projeto de Acessibilidade Virtual da RENAPI
31
Cursos e-MAG
Conteúdo:
Parte I – Introdução à Acessibilidade na Web
Parte II – e-MAG 3.0 - Recomendações de Acessibilidade
Status:
Parte I – ok (em análise pelo MPOG);
Em fase de construção da Parte II.
Público Alvo:
Desenvolvedores e envolvidos com a manutenção de páginas
web no governo federal.
Uso de ambiente de EAD Moodle

32. CMS Suindara

33. Projeto de Acessibilidade Virtual da RENAPI
33
CMS Suindara
CMS - Content Management System (Sistema de
gerenciamento de conteúdo)
Exemplos: Wordpress, Joomla, Drupal, Plone
Suindara:
Proposta: Ser Acessível e Auto-Acessível;
Manter o site acessível com o uso/tempo;
Open Source: PHP + Zend FrameWork;
Baseado em template (cada instituição poderá adequar
seu site independente);
Versão 2.0 (em desenvolvimento).

34. Projeto de Acessibilidade Virtual da RENAPI
34
CMS Suindara – Tela de Login

35. Projeto de Acessibilidade Virtual da RENAPI
35
CMS Suindara – Tela Principal (Administrativa)

36. Projeto de Acessibilidade Virtual da RENAPI
36
CMS Suindara - Tela de publicação de conteúdo

37. Projeto de Acessibilidade Virtual da RENAPI
37
CMS Suindara - Modelo de template gerado
baseado no site do MEC

38. Muito Obrigada!
[email protected]