nsea apresenta: e-mag para técnicos
DESCRIPTION
Evento Sexta com Projetos do SISP, 11 de novembro de 2011.TRANSCRIPT
governoeletronico.gov.br
Ministério do Planejamento, Orçamento e GestãoSecretaria de Logística e Tecnologia da InformaçãoDepartamento de Governo Eletrônico
Modelo Brasileiro
de Acessibilidade
em Governo
Eletrônico (e-MAG)
governoeletronico.gov.br 2 de 59
Modelo e-MAG 3.0Estrutura
● Introdução;
● Recomendações de acessibilidade;
● Padrões de acessibilidade digital no Governo Federal;
governoeletronico.gov.br 3 de 59
Modelo e-MAG 3.0Estrutura
● Recursos e ferramentas para acessibilidade;
● Leitura complementar.
governoeletronico.gov.br 4 de 59
Modelo e-MAG 3.0Estrutura
● IntroduçãoIntrodução;
● Recomendações;
● Padrões de acessibilidade digital no Governo Federal;
governoeletronico.gov.br 5 de 59
Modelo e-MAG 3.0Introdução
Sobre Versão e-MAG 3.0: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 6 de 59
Modelo e-MAG 3.0Introdução
Legislação:Legislação:● Decreto nº 5296/2004● Comitê CB-40 da ABNT;● Decreto nº 6949/2009;● Portaria nº 3/2007.
governoeletronico.gov.br 7 de 59
Modelo e-MAG 3.0Introdução
Acesso de pessoas com deficiência:Acesso de pessoas com deficiência:● Acesso ao Computador:
● Sem mouse;● Sem teclado;● Sem monitor;● Sem áudio.
governoeletronico.gov.br 8 de 59
Modelo e-MAG 3.0Introdução
Processo para desenvolver sítio acessível: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 9 de 59
Modelo e-MAG 3.0Estrutura
● IntroduçãoIntrodução;
● Recomendações de acessibilidade;
● Padrões de acessibilidade digital no Governo Federal;
governoeletronico.gov.br 10 de 59
Modelo e-MAG 3.0Recomendaçõ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 11 de 59
Modelo e-MAG 3.0Recomendações de acessibilidade
1 - Marcação1 - Marcação● 9 (nove) recomendações;● Semântica HTML.
governoeletronico.gov.br 12 de 59
Modelo e-MAG 3.0Recomendações de acessibilidade
2 - Comportamento (DOM)2 - Comportamento (DOM)● 6 (seis) recomendações;● Reação.
governoeletronico.gov.br 13 de 59
Modelo e-MAG 3.0Recomendações de acessibilidade
3 - Conteúdo/Informação3 - Conteúdo/Informação● 12 (Doze) recomendações;● Clareza.
governoeletronico.gov.br 14 de 59
Modelo e-MAG 3.0Recomendações de acessibilidade
4 - Apresentação/Design4 - Apresentação/Design● 5 (cinco) recomendações;● Organização e disposição.
governoeletronico.gov.br 15 de 59
Modelo e-MAG 3.0Recomendações de acessibilidade
5 - Multimídia5 - Multimídia● 5 (cinco) recomendações;● Controle.
governoeletronico.gov.br 16 de 59
Modelo e-MAG 3.0Recomendações de acessibilidade
6 - Formulários6 - Formulários● 8 (oito) recomendações;● Usabilidade.
governoeletronico.gov.br 17 de 59
Modelo e-MAG 3.0Estrutura
●IntroduçãoIntrodução;
●Recomendações;
●Padrões de acessibilidade digital no Governo
Federal;
governoeletronico.gov.br 18 de 59
Modelo e-MAG 3.0Padrões de acessibilidade digital
no Governo Federal●7 (sete)7 (sete) itens itens;
●Todos são obrigatórios.
governoeletronico.gov.br 19 de 59
Modelo e-MAG 3.0Padrões de acessibilidade digital
no Governo Federal
Descrição dos recursos de acessibilidadeDescriçã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 20 de 59
Modelo e-MAG 3.0Padrões de acessibilidade digital
no Governo Federal
governoeletronico.gov.br 21 de 59
Modelo e-MAG 3.0Padrões de acessibilidade digital
no Governo Federal
Teclas de Atalho 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 22 de 59
Modelo e-MAG 3.0Padrões de acessibilidade digital
no Governo Federal
Barra de acessibilidadeBarra 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 23 de 59
Modelo e-MAG 3.0Padrões de acessibilidade digital
no Governo Federal
Apresentação do mapa do sítioApresentação do mapa do sítio● Localização das páginas internas do sítio;● Forma de lista.
governoeletronico.gov.br 24 de 59
Modelo e-MAG 3.0Padrões de acessibilidade digital
no Governo Federal
FormulárioFormulá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 25 de 59
Modelo e-MAG 3.0Padrões de acessibilidade digital
no Governo Federal
governoeletronico.gov.br 26 de 59
Modelo e-MAG 3.0Padrões de acessibilidade digital
no Governo Federal
Conteúdo alternativo para imagensConteú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 27 de 59
Modelo e-MAG 3.0Padrões de acessibilidade digital
no Governo Federal
Apresentação de documentosApresentação de documentos● Preferencialmente em HTML;● Informar extensão e tamanho dos arquivos.
governoeletronico.gov.br 28 de 59
Modelo e-MAG 3.0Estrutura
● Recursos e ferramentas para acessibilidade;
● Leitura complementar;
governoeletronico.gov.br 29 de 59
Modelo e-MAG 3.0Recursos e ferramentas para
acessibilidadeOrganizações e especificaçõesOrganizaçõ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 30 de 59
Modelo e-MAG 3.0Recursos e ferramentas para
acessibilidadeValidadores de códigoValidadores de código
● Validador (X)HTML:http://validator.w3.org
● Validador CSS: http://jigsaw.w3.org/css-validator
governoeletronico.gov.br 31 de 59
Modelo e-MAG 3.0Recursos e ferramentas para
acessibilidadeValidadores automáticos de acessibilidadeValidadores 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/examinator.php
governoeletronico.gov.br 32 de 59
Modelo e-MAG 3.0Recursos e ferramentas para
acessibilidadeChecklists para validação humanaChecklists 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/acoes-e-projetos/e-MAG/material-de-apoio.
governoeletronico.gov.br 33 de 59
Modelo e-MAG 3.0Recursos e ferramentas para
acessibilidade
Ferramentas para análise de contraste de coresFerramentas para análise de contraste de cores● Color Contrast Analyser (online):
http://www.colorsontheweb.com/colorcontrast.asp;
● Check my colours (online):http://www.checkmycolours.com.
governoeletronico.gov.br 34 de 59
Modelo e-MAG 3.0Recursos e ferramentas para
acessibilidade
Simulador de navegadoresSimulador de navegadores● Browsershots:
http://browsershots.org.
governoeletronico.gov.br 35 de 59
Modelo e-MAG 3.0Recursos e ferramentas para
acessibilidade
Leitores de telaLeitores de tela● NVDA:
http://www.nvda-project.org; ● DOSVOX:
http://intervox.nce.ufrj.br; Jaws for Windows:
http://www.freedomscientific.com.
governoeletronico.gov.br 36 de 59
Modelo e-MAG 3.0Recursos e ferramentas para
acessibilidade
Navegadores textuaisNavegadores textuais● Lynx Viewer (simulador):
http://www.delorie.com/web/lynxview.html;
● Lynx: http://lynx.browser.org.
governoeletronico.gov.br 37 de 59
Modelo e-MAG 3.0Recursos e ferramentas para
acessibilidade
Simulador para DaltonismoSimulador para Daltonismo● Vischeck:
http://www.vischeck.com.
governoeletronico.gov.br 38 de 59
Modelo e-MAG 3.0Recursos e ferramentas para
acessibilidade
TutoriaisTutoriais● 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 39 de 59
Modelo e-MAG 3.0Estrutura
● Recursos e ferramentas para acessibilidade;
● Leitura complementar;
governoeletronico.gov.br 40 de 59
Modelo e-MAG 3.0Leitura 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
Ministério do Planejamento, Orçamento e GestãoSecretaria de Logística e Tecnologia da InformaçãoDepartamento de Governo Eletrônico
Avaliação 200 Sítios
e e-serviços do
Governo Eletrônico
Brasileiro
governoeletronico.gov.br 42 de 59
Avaliação 200 sítios e e-serviços do Governo Eletrônico Brasileiro
Estudos anteriores
IndicadoresIndicadores● 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.brFonte: Dimensões e características da Web brasileira : um estudo do .gov.br
governoeletronico.gov.br
Avaliação 200 sítios e e-serviços do Governo Eletrônico Brasileiro
Estudos anterioresRealizada 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 de 59
Avaliação 200 sítios e e-serviços do Governo Eletrônico Brasileiro
IntroduçãoEtapasEtapas
● Validação automática;● Validação manual.
governoeletronico.gov.br 45 de 59
Avaliação 200 sítios e e-serviços do Governo Eletrônico Brasileiro
IntroduçãoInstrumentosInstrumentos
● Checklist (27 perguntas).
governoeletronico.gov.br 46 de 59
Avaliação 200 sítios e e-serviços do Governo Eletrônico Brasileiro
IntroduçãoInstrumentosInstrumentos
● 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 47 de 59
Avaliação 200 sítios e e-serviços do Governo Eletrônico Brasileiro
10 erros de acessibilidade1- “Os links não apresentam descrições curtas e 1- “Os links não apresentam descrições curtas e
objetivas ou não identificam o destino ao qual objetivas ou não identificam o destino ao qual
remetem”remetem”
● Ocorrência do erro = 95%;● Recomendação 19 do e-MAG 3.0 – Descrever
links clara e sucintamente.
governoeletronico.gov.br 48 de 59
Avaliação 200 sítios e e-serviços do Governo Eletrônico Brasileiro
10 erros de acessibilidade2- “As camadas lógicas não estão organizadas 2- “As camadas lógicas não estão organizadas
corretamente”corretamente”
● Ocorrência do erro = 93%;● Recomendação 1 do e-MAG 3.0 – Respeitar os
padrões de desenvolvimento web.
governoeletronico.gov.br 49 de 59
Avaliação 200 sítios e e-serviços do Governo Eletrônico Brasileiro
10 erros de acessibilidade3- “Não existe a opção de alto contraste ou o 3- “Não existe a opção de alto contraste ou o
mesmo não está funcionando corretamente”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 50 de 59
Avaliação 200 sítios e e-serviços do Governo Eletrônico Brasileiro
10 erros de acessibilidade4- “As imagens não estão corretamente 4- “As imagens não estão corretamente
etiquetadas”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 51 de 59
Avaliação 200 sítios e e-serviços do Governo Eletrônico Brasileiro
10 erros de acessibilidade5- “Há ausência de links indicadores nas 5- “Há ausência de links indicadores nas
páginas”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 52 de 59
Avaliação 200 sítios e e-serviços do Governo Eletrônico Brasileiro
10 erros de acessibilidade6- “A estrutura das páginas não está uniforme”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 53 de 59
Avaliação 200 sítios e e-serviços do Governo Eletrônico Brasileiro
10 erros de acessibilidade7- “Os títulos não apresentam uma ordem 7- “Os títulos não apresentam uma ordem
lógica”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 54 de 59
Avaliação 200 sítios e e-serviços do Governo Eletrônico Brasileiro
10 erros de acessibilidade8- “Os formulários não funcionam corretamente”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 55 de 59
Avaliação 200 sítios e e-serviços do Governo Eletrônico Brasileiro
10 erros de acessibilidade8- “Os formulários não funcionam corretamente”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 56 de 59
Avaliação 200 sítios e e-serviços do Governo Eletrônico Brasileiro
10 erros de acessibilidade9- “Não existem atalhos para facilitar a 9- “Não existem atalhos para facilitar a
navegação, ou os mesmos não estão descritos navegação, ou os mesmos não estão descritos
corretamente”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 57 de 59
Avaliação 200 sítios e e-serviços do Governo Eletrônico Brasileiro
10 erros de acessibilidade10- “Há tabelas implementadas de forma 10- “Há tabelas implementadas de forma
incorreta”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 58 de 59
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 59 de 59
Cesar BomfimHigo Gomes
governoeletronico.gov.brTwitter: @egovbr
[email protected]+55 (61) 2020 1012