nsea apresenta: e-mag para técnicos

59
governoeletronico.gov.br Ministério do Planejamento, Orçamento e Gestão Secretaria de Logística e Tecnologia da Informação Departamento de Governo Eletrônico Modelo Brasileiro de Acessibilidade em Governo Eletrônico (e-MAG)

Upload: govbr

Post on 13-Dec-2014

596 views

Category:

Documents


2 download

DESCRIPTION

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

TRANSCRIPT

Page 1: NSEA apresenta: e-MAG para técnicos

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)

Page 2: NSEA apresenta: e-MAG para técnicos

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;

Page 3: NSEA apresenta: e-MAG para técnicos

governoeletronico.gov.br 3 de 59

Modelo e-MAG 3.0Estrutura

● Recursos e ferramentas para acessibilidade;

● Leitura complementar.

Page 4: NSEA apresenta: e-MAG para técnicos

governoeletronico.gov.br 4 de 59

Modelo e-MAG 3.0Estrutura

● IntroduçãoIntrodução;

● Recomendações;

● Padrões de acessibilidade digital no Governo Federal;

Page 5: NSEA apresenta: e-MAG para técnicos

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.

Page 6: NSEA apresenta: e-MAG para técnicos

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.

Page 7: NSEA apresenta: e-MAG para técnicos

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.

Page 8: NSEA apresenta: e-MAG para técnicos

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.

Page 9: NSEA apresenta: e-MAG para técnicos

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;

Page 10: NSEA apresenta: e-MAG para técnicos

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.

Page 11: NSEA apresenta: e-MAG para técnicos

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.

Page 12: NSEA apresenta: e-MAG para técnicos

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.

Page 13: NSEA apresenta: e-MAG para técnicos

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.

Page 14: NSEA apresenta: e-MAG para técnicos

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.

Page 15: NSEA apresenta: e-MAG para técnicos

governoeletronico.gov.br 15 de 59

Modelo e-MAG 3.0Recomendações de acessibilidade

5 - Multimídia5 - Multimídia● 5 (cinco) recomendações;● Controle.

Page 16: NSEA apresenta: e-MAG para técnicos

governoeletronico.gov.br 16 de 59

Modelo e-MAG 3.0Recomendações de acessibilidade

6 - Formulários6 - Formulários● 8 (oito) recomendações;● Usabilidade.

Page 17: NSEA apresenta: e-MAG para técnicos

governoeletronico.gov.br 17 de 59

Modelo e-MAG 3.0Estrutura

●IntroduçãoIntrodução;

●Recomendações;

●Padrões de acessibilidade digital no Governo

Federal;

Page 18: NSEA apresenta: e-MAG para técnicos

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.

Page 19: NSEA apresenta: e-MAG para técnicos

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.

Page 20: NSEA apresenta: e-MAG para técnicos

governoeletronico.gov.br 20 de 59

Modelo e-MAG 3.0Padrões de acessibilidade digital

no Governo Federal

Page 21: NSEA apresenta: e-MAG para técnicos

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.

Page 22: NSEA apresenta: e-MAG para técnicos

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.

Page 23: NSEA apresenta: e-MAG para técnicos

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.

Page 24: NSEA apresenta: e-MAG para técnicos

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.

Page 25: NSEA apresenta: e-MAG para técnicos

governoeletronico.gov.br 25 de 59

Modelo e-MAG 3.0Padrões de acessibilidade digital

no Governo Federal

Page 26: NSEA apresenta: e-MAG para técnicos

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

Page 27: NSEA apresenta: e-MAG para técnicos

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.

Page 28: NSEA apresenta: e-MAG para técnicos

governoeletronico.gov.br 28 de 59

Modelo e-MAG 3.0Estrutura

● Recursos e ferramentas para acessibilidade;

● Leitura complementar;

Page 29: NSEA apresenta: e-MAG para técnicos

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

Page 30: NSEA apresenta: e-MAG para técnicos

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

Page 31: NSEA apresenta: e-MAG para técnicos

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

Page 32: NSEA apresenta: e-MAG para técnicos

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.

Page 33: NSEA apresenta: e-MAG para técnicos

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.

Page 34: NSEA apresenta: e-MAG para técnicos

governoeletronico.gov.br 34 de 59

Modelo e-MAG 3.0Recursos e ferramentas para

acessibilidade

Simulador de navegadoresSimulador de navegadores● Browsershots:

http://browsershots.org.

Page 35: NSEA apresenta: e-MAG para técnicos

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.

Page 36: NSEA apresenta: e-MAG para técnicos

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.

Page 37: NSEA apresenta: e-MAG para técnicos

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.

Page 38: NSEA apresenta: e-MAG para técnicos

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

Page 39: NSEA apresenta: e-MAG para técnicos

governoeletronico.gov.br 39 de 59

Modelo e-MAG 3.0Estrutura

● Recursos e ferramentas para acessibilidade;

● Leitura complementar;

Page 40: NSEA apresenta: e-MAG para técnicos

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.

Page 41: NSEA apresenta: e-MAG para técnicos

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

Page 42: NSEA apresenta: e-MAG para técnicos

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

Page 43: NSEA apresenta: e-MAG para técnicos

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.

Page 44: NSEA apresenta: e-MAG para técnicos

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.

Page 45: NSEA apresenta: e-MAG para técnicos

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).

Page 46: NSEA apresenta: e-MAG para técnicos

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)

Page 47: NSEA apresenta: e-MAG para técnicos

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.

Page 48: NSEA apresenta: e-MAG para técnicos

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.

Page 49: NSEA apresenta: e-MAG para técnicos

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.

Page 50: NSEA apresenta: e-MAG para técnicos

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.

Page 51: NSEA apresenta: e-MAG para técnicos

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.

Page 52: NSEA apresenta: e-MAG para técnicos

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.

Page 53: NSEA apresenta: e-MAG para técnicos

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.

Page 54: NSEA apresenta: e-MAG para técnicos

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;

Page 55: NSEA apresenta: e-MAG para técnicos

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.

Page 56: NSEA apresenta: e-MAG para técnicos

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.

Page 57: NSEA apresenta: e-MAG para técnicos

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.

Page 58: NSEA apresenta: e-MAG para técnicos

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.

Page 59: NSEA apresenta: e-MAG para técnicos

governoeletronico.gov.br 59 de 59

Cesar BomfimHigo Gomes

governoeletronico.gov.brTwitter: @egovbr

[email protected]+55 (61) 2020 1012