Programa de Governo Eletrônico
governoeletronico.gov.br
Sistema de Concessão de Diárias
e Passagens - SCDP
Análise Síntese
Acessibilidade
Concluída em 22/03/2013
Contato: C3S [email protected]
Sistema de Concessão de Diárias e Passagens – Ministério do Planejamento
Relatório de Análise, Diagnóstico e Propostas
Histórico do Documento
Data
Descrição
Autor
04/03/13
Avaliação
Higo Gomes
22/03/13
Revisão
Magnus
22/03/13
Revisão para encaminhamento
Higo Gomes
Programa de Governo Eletrônico
2
Sistema de Concessão de Diárias e Passagens – Ministério do Planejamento
Relatório de Análise, Diagnóstico e Propostas
Sumário
Sumário
Introdução....................................................................................................................................4
Escopo..........................................................................................................................................5
Análise da Acessibilidade............................................................................................................ 6
1. Funcionalidade Cadastra ou Altera Viagens............................................................................ 6
2. Funcionalidade Cancelar Viagem.......................................................................................... 20
3. Funcionalidade Situação da Solicitação................................................................................ 23
4. Funcionalidade Relatórios/ Proposto.....................................................................................25
Glossário....................................................................................................................................32
Referências.................................................................................................................................34
Ferramentas utilizadas............................................................................................................... 35
Programa de Governo Eletrônico
3
Sistema de Concessão de Diárias e Passagens – Ministério do Planejamento
Relatório de Análise, Diagnóstico e Propostas
Introdução
O Departamento de Governo Eletrônico (DGE), em resposta à solicitação do Ministério do
Planejamento, Orçamento e Gestão, realizou uma análise sobre acessibilidade no Sistema
de Concessão de Diárias e Passagens (SCDP).
O intuito desse trabalho foi levantar os pontos não aderentes aos requisitos de
acessibilidade e usabilidade, a fim de fornecer subsídios à equipe do Departamento de
Logística e Serviços Gerais (SLTI/DLSG) do Ministério do Planejamento, responsável pela
gestão do sistema, para que possa solicitar os ajustes necessários para tornar o sistema
mais acessível.
É importante ressaltar que atender aos requisitos de acessibilidade nos portais, sítios e
sistemas governamentais é uma obrigatoriedade descrita em alguns normativos como o
Decreto 5.296/2004, Portaria nº 03/2007 e Decreto 7.724/2012, dentre outros.
O presente relatório traz uma análise do sistema de forma geral e completa, avaliando as
funcionalidades, os componentes, o código html e a arquitetura da informação. Para realizar
essa avaliação foram utilizadas algumas ferramentas específicas de acessibilidade, como
leitor de tela, verificador de contraste de tela, validador de código, dentre outros. Esse
trabalho deverá ser utilizado como um guia a fim de orientar o desenvolvimento de novos
módulos, pois indica alguns pontos que deverão ser aperfeiçoados e os parâmetros e
requisitos que deverão ser aplicados.
Para melhor entendimento da análise sobre o sistema SCDP , esta será apresentada da
seguinte maneira: primeiramente, a imagem da tela em análise será exibida e, em seguida,
serão descritas as considerações de pontos que possam comprometer o acesso às
informações e serviços. Por último, serão mostradas as possíveis soluções que poderão ser
utilizadas para remover as barreiras de acessibilidade encontradas.
Toda e qualquer análise executada pela equipe do DGE baseia-se nas cartilhas de
usabilidade e codificação do padrão e-PWG e no Modelo de Acessibilidade em Governo
Eletrônio (e-Mag) v. 3, acessados pelo sítio www.governoeletronio.gov.br.
Programa de Governo Eletrônico
4
Sistema de Concessão de Diárias e Passagens – Ministério do Planejamento
Relatório de Análise, Diagnóstico e Propostas
Escopo
A presente análise foi realizada no ambiente de desenvolvimento, endereço
treina2.scdp.gov.br/, no qual foi disponibilizado usuário com perfil solicitante.
O escopo da análise foi definido de forma a abranger todo o sistema, porém foram
escolhidas telas que continham elementos específicos de relevância ao tema de
acessibilidade.
Para tornar o trabalho mais objetivo e direto, um item citado no rol de pontos a melhorar
será tratado em apenas uma tela, mesmo que seja existente em outra. Ou seja, um
requisito de acessibilidade tratado em uma determinada tela deverá ser considerado, no que
couber, em todo o sistema, inclusive para novas implementações.
Ordem
Título da Página
1
Funcionalidade Cadastra ou Altera Viagens
2
Funcionalidade Cancelar Viagens
3
Funcionalidade Situação da Solicitação
4
Funcionalidade Relatório/ Proposto
Programa de Governo Eletrônico
5
Sistema de Concessão de Diárias e Passagens – Ministério do Planejamento
Relatório de Análise, Diagnóstico e Propostas
Análise da Acessibilidade
1. Funcionalidade Cadastra ou Altera Viagens
Programa de Governo Eletrônico
6
Sistema de Concessão de Diárias e Passagens – Ministério do Planejamento
Relatório de Análise, Diagnóstico e Propostas
Pontos a melhorar
1
O contraste do nome do servidor (azul escuro/fundo azul claro ) dificulta à leitura
do texto devido ao baixo contraste. Ex.
2
Com o javascript desabilitado, a página apresenta inconsistência de visualização
(figura 1);
3
Hierarquia dos níveis de cabeçalho não declarada (figura 2);
4
Presença do elemento TITLE, porém sem contextualização das páginas.;
5
Ausência da declaração do idioma na página;
6
Presença de estilos inline (figura 3);
7
As informações dos formulários não estão organizadas. Não apresenta divisão
principal para cada conteúdo, conforme imagem
8
Campo ano, presente na parte superior da página, provoca alteração automática de
contexto da página;
9
Funcionalidade de aumentar e diminuir fonte não possui limite , não existe página
com a descrição dos recursos de acessibilidade e as teclas de atalho;
10
Quando salva solicitação no sistema, abre uma janela do tipo modal (lightbox), que
está inacessível ao leitor de tela;
11
Imagens na barra de opções do sistema e o logotipo não possuem textos
alternativos (figura 4);
Programa de Governo Eletrônico
7
12
Sistema de Concessão de Diárias e Passagens – Ministério do Planejamento
Relatório de Análise, Diagnóstico e Propostas
Os campos dos formulários não apresentam instruções para entrada de dados;
13
No teste realizado com leitor de tela (NVDA) foram encontradas inconsistências, tais
como: a omissão de informações, a não tradução de termos de elementos
programados e a inexistência de teclas de atalho;
14
Ponto de Atenção: Presença de 30 scripts na página, o que corresponde a 68% do
peso total (700,4 KB / 1033,3 KB) (figura 5);
15
Utilização exclusiva de cor para destacar pontos importantes da funcionalidade
(figura 6);
16
Indicação de erro de preenchimento de informações, no formulário, não direciona
para campo (figura 7);
17
Abreviações e siglas não são explicadas. Ex: PDCP (figura 8).
Programa de Governo Eletrônico
8
Sistema de Concessão de Diárias e Passagens – Ministério do Planejamento
Relatório de Análise, Diagnóstico e Propostas
Propostas de melhorias
1
Ver e-Mag 3.0 – Recomendação 28: Oferecer contraste mínimo entre plano de fundo
e primeiro plano.
“As cores do plano de fundo e do primeiro plano deverão ser suficientemente
contrastantes para que possam ser visualizadas, também, por pessoas com baixa
visão, com cromodeficiências ou que utilizam monitores de vídeo monocromático.”
2
Ver Cartilha de codificação do e-PWG– Item 4.5: Teste em Camadas. “Página sem
suporte a Javascript. Por questões de segurança muitos usuários mantêm o
javascript desabilitado. Navegadores por texto e por voz muitas vezes não
compreendem javascript. Deve-se desabilitar o javascript e verificar se o
entendimento e navegação do conteúdo estão intactos.”
Ver e-Mag 3.0 - Recomendação 10: Garantir que os objetos programáveis sejam
acessíveis. “Quando o script for utilizado em uma página da Web, uma forma de
fornecer uma alternativa para ele é por meio do elemento <noscript>. Este
elemento pode ser utilizado para mostrar conteúdos em navegadores que não
suportam scripts ou que tenham o script desabilitado. No entanto, se o navegador
tiver suporte a scripts e estes estiverem habilitados, o elemento <noscript> será
ignorado. Dessa forma, a utilização do elemento <noscript> para um script
inacessível não garante que o objeto seja acessível. Assim, a recomendação é que o
próprio script seja desenvolvido tomando-se o cuidado para que ele seja acessível, e
o elemento <noscript> deve ser utilizado para abranger os casos em que scripts não
são suportados.”
3
Ver e-MAG 3.0 - Recomendação 3: Utilizar corretamente os níveis de cabeçalho.
“Os níveis de cabeçalho devem ser utilizados de forma lógica e semântica para
facilitar a leitura e compreensão. Além disso, pessoas acessando uma página com
leitor de tela podem navegar através dos cabeçalhos, pulando de um para outro,
agilizando, assim, a navegação. Conceitualmente, existem seis níveis de títulos,
sendo o <h1> o mais alto, ou seja, deverá corresponder ao título principal da
página. Já os níveis de <h2> ao <h6> poderão ser utilizados mais de uma vez na
página, mas sem excesso e com lógica textual.“
Para o caso em análise, uma sugestão para a construção correta da hierarquia de
cabeçalhos esta na figura 9.
4
Ver e-MAG 3.0 - Recomendação 17: Oferecer um título descritivo e informativo à
página.
“O título da página deve ser descritivo e informativo, já que essa informação será a
primeira lida pelo leitor de tela, quando o usuário acessar a página. O título é
informado pela tag <title>”.
Programa de Governo Eletrônico
9
Sistema de Concessão de Diárias e Passagens – Ministério do Planejamento
Relatório de Análise, Diagnóstico e Propostas
No caso em análise, uma sugestão de <title> poderia ser: SCDP – Cadastrar
Viagem</title>
5
Ver e-MAG 3.0 - Recomendação 16: Identificar o idioma principal da página
“Deve-se identificar o principal idioma utilizado nos documentos. A identificação é
feita por meio do atributo lang do HTML e, para documentos XHTML, é utilizado o
xml:lang.”
Ver Cartilha de Codificação do e-PWG: Item 1.2. Declare o Idioma utilizado.
“O idioma principal da página deve ser declarado. Além de auxiliar na acessibilidade
do conteúdo, a indicação correta da linguagem auxilia a indexação correta nos
buscadores.”
6
Ver Cartilha de codificação do e-PWG – Item 2.3 CSS - Diretrizes Chamadas de CSS
“Há três formas de chamar, ou anexar, uma folha de estilo em um documento HTML.
A indicada pelos padrões e pelas boas práticas é a folha externa. As folhas internas
e estilos inline devem ser evitados, pois misturam no documento HTML a
apresentação e a estrutura.”
7
Ver e-MAG 3.0 - Recomendação 44: Agrupar Campos de Formulário:
“Deverão ser agrupados os controles de formulário relacionados de maneira lógica,
utilizando-se o elemento fieldset, associando o elemento legend de forma
significativa (o elemento fieldset é útil para agrupar, de forma lógica, elementos do
formulário). Para cada fieldset, é possível fornecer uma legenda que explica
claramente o propósito ou natureza dos agrupamentos.” Um possível exemplo para
agrupamento dos campos:
<form method="post" action="...">
<fieldset>
<legend>Dados do Proposto</legend>
<label for="nome">Nome: </label>
<input type="text" name="nome" id="nome" value="Higo Mesquita
Gomes"/>
<br>
<label for="orgao">Orgão Lotação: </label>
<input type="text" name="orgao" id="orgao" value="CGSEMSLTI"/>
<br>
… (Neste ponto há necessidade de preenchimento dos outros campos do
formulário)
<br>
<label for="passaporte">Passaporte</label>
<input type="text" name="passaporte" id="passaporte"/>
<br>
Programa de Governo Eletrônico
10
Sistema de Concessão de Diárias e Passagens – Ministério do Planejamento
Relatório de Análise, Diagnóstico e Propostas
<label for="telefone">Telefone</label>
<input type="text" name="telefone" id="telefone"/>
<br>
<label for="email">E-mail</label>
<input type="text" name="email" id="email"/>
<br>
</fieldset>
<fieldset>
<legend>Dados Suplementares do Proposto</legend>
<input type="checkbox" id="colegiados" name="colegiados" />
<label for="colegiados">Reunião de Colegiados</label>
<br>
<input type="checkbox" id="necessidadeespecial" name="colegiados" />
<label for="necessidadeespecial">Portador de Necessidade Especial</label>
<br>
...(Neste ponto há necessidade de preenchimento dos outros campos do
</fieldset>
<fieldset>
<legend>Dados Bancários do Proposto</legend>
<input type="checkbox" id="naocontabancaria" name="naocontabancaria" />
<label for="naocontabancaria">Não possui Conta Corrente</label>
<label for="banco">Banco</label>
<input type="text" name="banco" id="banco"/>
<br>
...(Neste ponto há necessidade de preenchimento dos outros campos do
</fieldset>
</form>
Obs: Para disposição e formatação dos elementos, há necessidade de utilização de
Folhas Estilo. Isso não está presente no exemplo.
8
Ver e-MAG 3.0 – Recomendação 41: Não provocar automaticamente alteração no
contexto:”Quando um elemento de formulário receber o foco, não deve ser iniciada
uma mudança automática na página que confunda ou desoriente o usuário. Assim,
as mudanças devem ocorrer através do acionamento de um botão.” Um possível
exemplo seria:
<select id="selectAnoExercicio" name="selectAnoExercicio">
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
Programa de Governo Eletrônico
11
Sistema de Concessão de Diárias e Passagens – Ministério do Planejamento
Relatório de Análise, Diagnóstico e Propostas
<option value="2010">2010</option>
<option value="2009">2009</option>
</select>
<input type="submit" id="submit" value="Enviar" />
9
Ver e-MAG 3.0 – Item 3. Padrões de acessibilidade digital no Governo Federal,
tópico 3.3 – Barra de acessibilidade:
“Quando uma das ferramentas aumentar fonte, diminuir fonte e fonte normal for
utilizada, o bloco como um todo deve ser modificado, não apenas a fonte do texto.”
Ver e-MAG 3.0 - Recomendação 30: Permitir redimensionamento de texto sem
perda de funcionalidade
“A página deve continuar legível e funcional quando redimensionada para até 200%.
Assim, é preciso garantir que, quando a página for redimensionada, não ocorram
sobreposições de texto nem o aparecimento de uma barra horizontal.
Exemplo
Um sítio possui uma ferramenta que permite o redimensionamento do tamanho da
fonte. Para isso existe um botão que aumenta a fonte de dois em dois pixels. Da
mesma forma, existe um botão que diminui a fonte de dois em dois pixels e outro
que retorna ao tamanho padrão da fonte. O sítio utiliza um leiaute flexível, isto é, à
medida que a fonte aumenta ou diminui, o leiaute se ajusta automaticamente para
que não ocorram “quebras”.”
Ver e-MAG 3.0 – Item 3. Padrões de acessibilidade digital no Governo Federal,
tópicos 3.1 - Página de descrição com os recursos de acessibilidade, e 3.3 – Barra
de acessibilidade:
“Esta página apresenta os recursos de acessibilidade presentes no sítio, como as
teclas de atalho disponíveis, as opções de redimensionamento de texto e alto
contraste, detalhes sobre testes de acessibilidade realizados no sítio e outras
informações pertinentes a respeito de sua acessibilidade. O link para a página
contendo os recursos de acessibilidade deve ser disponibilizado na barra de
acessibilidade.”
10
Permitir que as informações exibidas em páginas do tipo lightbox recebam o foco do
teclado ao serem abertas, possibilitando a navegação em todo o seu conteúdo.
11
Ver e-MAG 3.0 – Recomendação 20: Fornecer alternativa em texto para as imagens
do sítio.
“Deve ser fornecida uma descrição para as imagens da página, utilizando-se o
atributo alt. Imagens que não transmitem conteúdo, ou seja, imagens decorativas,
devem ser inseridas por CSS.
No entanto, descrever qualquer imagem, em geral, é algo bastante subjetivo e a
descrição deve ser adaptada ao contexto em que a imagem se encontra.“;
Programa de Governo Eletrônico
12
12
Sistema de Concessão de Diárias e Passagens – Ministério do Planejamento
Relatório de Análise, Diagnóstico e Propostas
Ver e-MAG 3.0 – Recomendação 42: Fornecer instruções para entrada de dados.
”Para conteúdo que exigir entrada de dados por parte do usuário, devem ser
fornecidas , quando necessário, instruções de preenchimento juntamente com as
etiquetas (label). A utilização de caracteres pré-definidos em áreas de entrada de
texto só deve ocorrer se: O texto for incluído após a entrada de dados pelo usuário
(por exemplo, sugerir um novo nome de usuário caso o escolhido já exista); A
semântica do documento justifique a inclusão de texto pré-definido (por exemplo,
uma loja virtual que só vende para determinado país já vem com o campo país
preenchido); Os caracteres tenham sido fornecidos previamente pelo usuário (por
exemplo, refinamento de busca).” Exemplo o campo “Banco” dos dados bancários do
proposto: <label for="banco">Banco (999)</label>
<input type="text" name="banco" id="banco" value=”001”/>
13
Os leitores de tela são programas utilizados por deficientes visuais para o acesso às
informações e serviços disponibilizados na Internet. Esses programas interpretam o
código HTML das páginas gerando sons correspondente à fala. O uso correto das
marcações nas páginas se torna imprescindível para uma boa interpretação.
14
De acordo com as melhores práticas de desenvolvimento de sítios eletrônicos,
recomenda-se que os scripts estejam no fim do documento, com a finalidade de não
prejudicar o carregamento da página.
15
Ver e-MAG 3.0 – Recomendação 29: Não utilizar apenas cor ou outras
características sensoriais para diferenciar elementos.
“A cor ou outras características sensoriais, como forma, tamanho, localização visual,
orientação ou som não devem ser utilizadas como o único meio para transmitir
informações, indicar uma ação, pedir uma resposta ao usuário ou distinguir um
elemento visual.“ Uma sugestão seria: “Importante: tamanho máximo permitido por
arquivo: 2.00 MB”
16
Ver e-MAG 3.0 – Recomendação 43: Identificar e Descrever erros de entrada de
dados.
“Quando um erro de entrada de dados for automaticamente detectado, o item que
apresenta erro deve ser identificado, descrito ao usuário por texto e marcado para
permitir a correção pelo usuário.”
17
Ver e-MAG 3.0 – Recomendação 26: Disponibilizar uma explicação para siglas,
abreviaturas e palavras incomuns.
“Deve estar disponível uma explicação que identifique a forma completa ou o
significado das abreviaturas e siglas. Para isso, pode ser utilizada a tag abbr. Um
exemplo seria no código HTML: Número da <abbr title=”Pedido Concessão d e
Diárias e Passagem” lang=”pt-BR”>PCDP</abbr>.
Já as palavras que podem ser ambíguas, desconhecidas ou utilizadas de forma
Programa de Governo Eletrônico
13
Sistema de Concessão de Diárias e Passagens – Ministério do Planejamento
Relatório de Análise, Diagnóstico e Propostas
muito específica, deverão ser definidas através de um texto adjacente, uma lista de
definições ou estarem contidas num glossário.”
Programa de Governo Eletrônico
14
Figura 1
Sistema de Concessão de Diárias e Passagens – Ministério do Planejamento
Relatório de Análise, Diagnóstico e Propostas
Programa de Governo Eletrônico
15
Figura 2
Sistema de Concessão de Diárias e Passagens – Ministério do Planejamento
Relatório de Análise, Diagnóstico e Propostas
Figura 3
Programa de Governo Eletrônico
16
Figura 4
Sistema de Concessão de Diárias e Passagens – Ministério do Planejamento
Relatório de Análise, Diagnóstico e Propostas
Figura 5
Figura 6
Programa de Governo Eletrônico
17
Figura 7
Sistema de Concessão de Diárias e Passagens – Ministério do Planejamento
Relatório de Análise, Diagnóstico e Propostas
Figura 8
Programa de Governo Eletrônico
18
Figura 9
Sistema de Concessão de Diárias e Passagens – Ministério do Planejamento
Relatório de Análise, Diagnóstico e Propostas
Programa de Governo Eletrônico
19
Sistema de Concessão de Diárias e Passagens – Ministério do Planejamento
Relatório de Análise, Diagnóstico e Propostas
2. Funcionalidade Cancelar Viagem
Pontos a melhorar
1
Ausência do elemento CAPTION nas tabelas;
2
Ausência do atributo SUMMARY nas tabelas;
3
Presença de links sem contextualização (figura 1);
4
Elemento textual de paginação com palavras em idioma diferente(inglês) do
padrão da página(português) (figura 2) .
Propostas de melhorias
1
Todas as soluções indicadas nesses itens foram retiradas do arquivo Tabelasacessiveis.pdf (governoeletronico.gov.br – projetos – e-MAG – Material de Apoio)
“O elemento CAPTION é o título da tabela. O uso de outros elementos como H1, P,
TD ou TH pode ter “visualmente” o sentido de título, mas não são semanticamente
corretos, e tampouco, acessíveis.
No código HTML o elemento CAPTION deve ser colocado após a marcação TABLE e
antes de qualquer outra marcação que seguir.
Por padrão, o elemento CAPTION é mostrado centralizado logo acima da tabela.
Para modificações no visual deve ser usado o CSS.”;
2
“O atributo “summary” deve vir dentro do elemento TABLE servindo como
informação auxiliar para entendimento da tabela para leitores de tela e displays
Braille, não sendo visível em navegadores de interface gráfica.
O atributo “summary” descreve a finalidade da tabela e dá uma indicação da
estrutura geral, sendo necessário para compreensão de tabelas complexas.”
Programa de Governo Eletrônico
20
3
Sistema de Concessão de Diárias e Passagens – Ministério do Planejamento
Relatório de Análise, Diagnóstico e Propostas
Ver e-MAG 3.0 – Recomendação 19: Descrever links clara e sucintamente.
“Deve-se identificar claramente o destino de cada link, informando, inclusive, se o
link remete a outro sítio. Além disso, é preciso que o texto do link faça sentido
mesmo quando isolado do contexto da página. Não é recomendada a utilização de
links do tipo “clique aqui” pois esta expressão não faz sentido fora do contexto.
Muitos usuários de leitores de tela navegam por links, tornando descrições como
“Clique aqui”, “Veja mais” insuficientes para o usuário saber o destino do link, ou
localizá-lo na página. Evitar essas expressões para evitar verborragia, ou seja,
evitar que o leitor de tela “leia” para o usuário palavras ou frases
desnecessárias.“;
4
Ver e-MAG 3.0 - Recomendação 27: Informar Mudança de Idioma no Conteúdo
“Se algum elemento de uma página possuir conteúdo em um idioma diferente do
principal, este deverá estar identificado pelo atributo lang.”
Figura 1
Figura 2
Programa de Governo Eletrônico
21
Sistema de Concessão de Diárias e Passagens – Ministério do Planejamento
Relatório de Análise, Diagnóstico e Propostas
Programa de Governo Eletrônico
22
Sistema de Concessão de Diárias e Passagens – Ministério do Planejamento
Relatório de Análise, Diagnóstico e Propostas
3. Funcionalidade Situação da Solicitação
Pontos a melhorar
1
Nos campos de data, o objeto Calendário não é acessado via teclado;
2
Pesquisa do campo Órgão não é confirmada por teclas do teclado, mas com clique
do mouse na tela de forma modal;
3
O formulário da pesquisa não agrupa os elementos relacionados e não possui
legendas para organizar as informações da pesquisa;
4
Ausência do elemento CAPTION nas tabelas;
5
Ausência do atributo SUMMARY nas tabelas.
Propostas de melhorias
1
Sugestão: Criar uma forma de incluir data usando teclado, para isso pode-se adotar
algumas soluções, como:
2
•
criar combos de seleção para ano, mês e dia, ou;
•
adicionar widget de calendário acessível;
Ver e-Mag 3.0 – Recomendação 5: Disponibilizar todas as funções da página via
Teclado. “Todas as funções da página desenvolvidas utilizando-se linguagens de
script deverão estar disponíveis quando for utilizado apenas o teclado. É importante
Programa de Governo Eletrônico
23
Sistema de Concessão de Diárias e Passagens – Ministério do Planejamento
Relatório de Análise, Diagnóstico e Propostas
salientar que o foco não deverá estar bloqueado ou fixado em um elemento, para
que o usuário possa mover-se pelo teclado pelos elementos.”
Não é recomendada apresentação de tela em forma modal, pois pode causar
desorientação e problemas de navegação. Porém, caso seja necessária sua
utilização, deverão ser aplicados alguns requisitos para atendimento da
acessibilidade, tais como:
• Incluir uma mensagem como "abre em uma nova janela";
• Manter o foco dentro da tela modal mesmo que este vá para outros pontos do
navegador. Por exemplo, foco na barra de endereços e, em seguida, de volta para
a tabulação da página);
• É necessário que os elementos da tela sejam acessados por teclado com realce;
• Deve-se ter um título apropriado e que referencie a tela modal;
• As mensagens referentes às ações do usuário devem aparecer no topo da tela;
• Se usuário aumentar a fonte, o leiaute deve permanecer íntegro;
3
Ver e-MAG 3.0 - Recomendação 44: Agrupar Campos de Formulário:
“Deverão ser agrupados os controles de formulário relacionados de maneira lógica,
utilizando-se o elemento fieldset, associando o elemento legend de forma
significativa (o elemento fieldset é útil para agrupar, de forma lógica, elementos do
formulário). Para cada fieldset, é possível fornecer uma legenda que explica
claramente o propósito ou natureza dos agrupamentos.”
4
Todas as soluções indicadas nesses itens foram retiradas do arquivo Tabelasacessiveis.pdf (governoeletronico.gov.br – projetos – e-MAG – Material de Apoio)
“O elemento CAPTION é o título da tabela. O uso de outros elementos como H1, P,
TD ou TH pode ter “visualmente” o sentido de título, mas não são semanticamente
corretos, e tampouco, acessíveis.
No código HTML o elemento CAPTION deve ser colocado após a marcação TABLE e
antes de qualquer outra marcação que seguir.
Por padrão, o elemento CAPTION é mostrado centralizado logo acima da tabela.
Para modificações no visual deve ser usado o CSS.”;
5
“O atributo “summary” deve vir dentro do elemento TABLE servindo como
informação auxiliar para entendimento da tabela para leitores de tela e displays
Braille, não sendo visível em navegadores de interface gráfica.
O atributo “summary” descreve a finalidade da tabela e dá uma indicação da
estrutura geral, sendo necessário para compreensão de tabelas complexas.”
Programa de Governo Eletrônico
24
Sistema de Concessão de Diárias e Passagens – Ministério do Planejamento
Relatório de Análise, Diagnóstico e Propostas
4. Funcionalidade Relatórios/ Proposto
Ponto a melhorar
1
Estrutura visual diferente das outras paginas do sistema (figura 1)
2
Pesquisa do campo Órgão não é confirmada por teclas do teclado, mas com clique
do mouse na tela de forma modal (figura 2);
3
Entrada de dados dos campos obrigatórios apresenta mesma informação para
campos distintos (figura 3);
4
Ausência de padronização para indicação de erros nos campos obrigatórios (figura
4);
5
Título para determinar quais itens serão desconsiderados na pesquisa jargão
técnico (Requisitos de Exceção) (Figura 5);
6
Contraste inadequado para identificação do proposto no resultado da pesquisa
(figura 6);
Programa de Governo Eletrônico
25
7
Sistema de Concessão de Diárias e Passagens – Ministério do Planejamento
Relatório de Análise, Diagnóstico e Propostas
Ausência do elemento CAPTION nas tabelas;
8
Ausência do atributo SUMMARY nas tabelas;
9
Tabela do resultado da pesquisa apresenta informações não detalhadas. Ex:Valor
total e total viagem;
10
Indicação de resultado não encontrado em local diferente da apresentação do
relatório (figura 7).
Proposta de melhorias
1
Ver e-Mag 3.0 – Recomendação 31: Dividir as Áreas de Informação.
“É importante que as diversas páginas de um sítio possuam um estilo de
apresentação coerente e sistemático, mantendo-se um padrão de estrutura.
Assim, elementos principais de navegação deverão ser mantidos na mesma
posição em todas as páginas, com exceção da página inicial que, muitas vezes,
apresenta uma estrutura diferenciada.”
2
Ver e-Mag 3.0 – Recomendação 5: Disponibilizar todas as funções da página via
Teclado. “Todas as funções da página desenvolvidas utilizando-se linguagens de
script deverão estar disponíveis quando for utilizado apenas o teclado. É
importante salientar que o foco não deverá estar bloqueado ou fixado em um
elemento, para que o usuário possa mover-se pelo teclado pelos elementos.”
Não é recomendada apresentação de tela em forma modal, pois pode causar
desorientação e problemas de navegação. Porém, caso seja necessária sua
utilização, deverão ser aplicados alguns requisitos para atendimento da
acessibilidade, tais como:
• Incluir uma mensagem como "abre em uma nova janela";
• Manter o foco dentro da tela modal mesmo que este vá para outros pontos do
navegador. Por exemplo, foco na barra de endereços e, em seguida, de volta
para a tabulação da página);
• É necessário que os elementos da tela sejam acessados por teclado com realce;
• Deve-se ter um título apropriado e que referencie a tela modal;
• As mensagens referentes às ações do usuário devem aparecer no topo da tela;
• Se usuário aumentar a fonte, o leiaute deve permanecer íntegro;
3
Ver e-Mag 3.0 – Recomendação 25: Garantir a leitura e compreensão das
informações.
“O texto de um sítio deve ser de fácil leitura e compreensão, não exigindo do
usuário um nível de instrução mais avançado do que o ensino fundamental
Programa de Governo Eletrônico
26
Sistema de Concessão de Diárias e Passagens – Ministério do Planejamento
Relatório de Análise, Diagnóstico e Propostas
completo. Quando o texto exigir uma capacidade de leitura mais avançada, deve
ser disponibilizado informações suplementares que expliquem ou ilustrem
conteúdo principal.”
4
Ver e-MAG 3.0 – Recomendação 43: Identificar e Descrever erros de entrada de
dados.
“Quando um erro de entrada de dados for automaticamente detectado, o item que
apresenta erro deve ser identificado, descrito ao usuário por texto e marcado para
permitir a correção pelo usuário. A apresentação dos erros deverá apresentar um
padrão.”
5
Ver e-Mag 3.0 – Recomendação 25: Garantir a leitura e compreensão das
informações.
“O texto de um sítio deve ser de fácil leitura e compreensão, não exigindo do
usuário um nível de instrução mais avançado do que o ensino fundamental
completo. Quando o texto exigir uma capacidade de leitura mais avançada, deve
ser disponibilizado informações suplementares que expliquem ou ilustrem
conteúdo principal.” Um exemplo para título seria: “Não considerar o seguintes
itens no resultado da pesquisa”.
6
Ver e-Mag 3.0 – Recomendação 28: Oferecer contraste mínimo entre plano de
fundo e primeiro plano.
“As cores do plano de fundo e do primeiro plano deverão ser suficientemente
contrastantes para que possam ser visualizadas, também, por pessoas com baixa
visão, com cromodeficiências ou que utilizam monitores de vídeo monocromático.”
7
Todas as soluções indicadas nesses itens foram retiradas do arquivo Tabelasacessiveis.pdf (governoeletronico.gov.br – projetos – e-MAG – Material de Apoio)
“O elemento CAPTION é o título da tabela. O uso de outros elementos como H1, P,
TD ou TH pode ter “visualmente” o sentido de título, mas não são semanticamente
corretos, e tampouco, acessíveis.
No código HTML o elemento CAPTION deve ser colocado após a marcação TABLE e
antes de qualquer outra marcação que seguir.
Por padrão, o elemento CAPTION é mostrado centralizado logo acima da tabela.
Para modificações no visual deve ser usado o CSS.”;
8
“O atributo “summary” deve vir dentro do elemento TABLE servindo como
informação auxiliar para entendimento da tabela para leitores de tela e displays
Braille, não sendo visível em navegadores de interface gráfica.
O atributo “summary” descreve a finalidade da tabela e dá uma indicação da
estrutura geral, sendo necessário para compreensão de tabelas complexas.”
9
Ver e-Mag 3.0 – Recomendação 25: Garantir a leitura e compreensão das
Programa de Governo Eletrônico
27
Sistema de Concessão de Diárias e Passagens – Ministério do Planejamento
Relatório de Análise, Diagnóstico e Propostas
informações.
“O texto de um sítio deve ser de fácil leitura e compreensão, não exigindo do
usuário um nível de instrução mais avançado do que o ensino fundamental
completo. Quando o texto exigir uma capacidade de leitura mais avançada, deve
ser disponibilizado informações suplementares que expliquem ou ilustrem
conteúdo principal.” Exemplos para cada título seriam: “Valor Total (Valor
Diárias + Valor Passagens e Taxas) e Total Viagem (Valor total +Total
Adicional + Restituição + Reembolso - Descontos)”.
10
Ver e-Mag 3.0 – Recomendação 31: Dividir as Áreas de Informação.
“É importante que as diversas páginas de um sítio possuam um estilo de
apresentação coerente e sistemático, mantendo-se um padrão de estrutura.”
Figura 1
Programa de Governo Eletrônico
28
Sistema de Concessão de Diárias e Passagens – Ministério do Planejamento
Relatório de Análise, Diagnóstico e Propostas
Figura 2
Figura 3
Programa de Governo Eletrônico
29
Figura 4
Sistema de Concessão de Diárias e Passagens – Ministério do Planejamento
Relatório de Análise, Diagnóstico e Propostas
Figura 5
Figura 6
Programa de Governo Eletrônico
30
Figura 7
Sistema de Concessão de Diárias e Passagens – Ministério do Planejamento
Relatório de Análise, Diagnóstico e Propostas
Programa de Governo Eletrônico
31
Sistema de Concessão de Diárias e Passagens – Ministério do Planejamento
Relatório de Análise, Diagnóstico e Propostas
Glossário
Acessibilidade
Significa permitir o acesso por todos, independente do tipo de usuário, situação ou
ferramenta.
Barra de navegação:
Elemento que contextualiza a localização do usuário dentro de uma estrutura hierárquica de
navegação. Também conhecido como “Migalha de Pão”.
CSS Sprite
CSS Sprite é uma técnica para fazer a "troca de imagem", ou seja, o deslocamento de
posição do mapa de imagem. Essa técnica permite que se utilizem várias imagens em uma
só. Isso economiza o número de requisições no servidor e a quantidade de imagens.
Diagramação
É a distribuição dos elementos gráficos em um determinado espaço.
GIF - Graphics Interchange Format
É utilizado para designar um formato matricial para representar imagens digitais.
JPG - Joint Photographic Experts Group
É um método utilizado para formato de imagens com intuito de comprimir imagens
fotográficas.
Leitor de tela
Software aplicativo usado para obter resposta do computador por meio sonoro. Utilizado
,principalmente, por deficientes visuais.
Modelo de Acessibilidade em Governo Eletrônico - e-MAG.
Consiste em um conjunto de recomendações a ser observadas 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.
Padrões Web em Governo Eletrônico - e-PWG
São recomendações de boas práticas agrupadas em formato de cartilhas (Administração,
Codificação, Usabilidade, Redação Web, Desenho e Arquitetura de Conteúdo e Arquivos e
Programa de Governo Eletrônico
32
Sistema de Concessão de Diárias e Passagens – Ministério do Planejamento
Relatório de Análise, Diagnóstico e Propostas
modelos-base) com o objetivo de aprimorar a comunicação e o fornecimento de
informações e serviços prestados por meios eletrônicos pelos órgãos do Governo Federal.
PNG - Portable Network Graphics
É utilizado para designar um formato matricial para representar imagens digitais.
Pregnância
É a capacidade de perceber e reconhecer formas na área de design.
SECOM
É a Secretaria de Comunicação Social da Presidência da República que tem por
responsabilidade a comunicação do Governo Federal. Coordena um sistema que interliga as
assessorias dos ministérios, as empresas públicas e as demais entidades do Poder Executivo
Federal.
SISP
Sistema de Administração de Recurso de Informação e Informática que foi instituído em
1990 com o objetivo de organizar a operação, controle, supervisão e coordenação dos
recursos de informação e informática da administração direta, autárquica e fundacional do
Poder Executivo Federal.
W3C (World Wide Web Consortium)
Consórcio de âmbito internacional com a finalidade de desenvolver padrões, especificações,
guias e ferramentas para web.
Programa de Governo Eletrônico
33
Sistema de Concessão de Diárias e Passagens – Ministério do Planejamento
Relatório de Análise, Diagnóstico e Propostas
Referências
Diretrizes do Programa de Governo Eletrônico:
http://www.governoeletronico.gov.br/o-gov.br/principios
Resolução nº 07 de 29 de Julho de 2002, que estabelece regras e diretrizes para os sítios da
Administração Pública Federal:
http://www.governoeletronico.gov.br/biblioteca/arquivos/resolucao-no-07-de-29-de-julhode-2002
Instrução Normativa SLTI nº 04 de 12 de Novembro de 2010, que trata da contratação de
serviços de Tecnologia da Informação:
http://www.governoeletronico.gov.br/o-gov.br/biblioteca/arquivos/instrucao-normativa-no04-de-12-de-novembro-de-2010
Resolução do CGI.br/RES/2008/008/P, que regulamenta os procedimentos de registro de
domínio:
http://www.cgi.br/regulamentacao/resolucao2008-008.htm
Manual de Aplicação da Barra de Identidade Visual do Governo Federal na
Internet, que estabelece padrões de identidade visual para sítios e portais:
http://www.secom.gov.br/sobre-a-secom/publicidade/manuais
Portaria nº 03 de 07 de Maio de 2007 que institucionaliza o Modelo de Acessibilidade em
Governo Eletrônico – e-MAG
http://www.governoeletronico.gov.br/o-gov.br/legislacao/portaria-no-03-de-07-de-maio-de2007
Portaria normativa nº 05 de 14 de Julho de 2005 que institucionaliza os Padrões
de Interoperabilidade de Governo Eletrônico – e-PING
http://www.governoeletronico.gov.br/o-gov.br/legislacao/portaria-no-05-de-14-de-julho-de2005
Material de Apoio presente no sítio do governo eletrônico
http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG/material-de-apoio/materialde-apoio/?searchterm=checklist
Programa de Governo Eletrônico
34
Sistema de Concessão de Diárias e Passagens – Ministério do Planejamento
Relatório de Análise, Diagnóstico e Propostas
Ferramentas utilizadas
ASES – Avaliador e Simulador de AcessibilidadE de Sítios
http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG/ases-avaliador-e-simuladorde-acessibilidade-sitios
Sítio Websiteoptimization
http://www.websiteoptimization.com/services/analyze/
•Page Speed
http://code.google.com/intl/pt-BR/speed/page-speed/
Extensões do Navegador Firefox
https://addons.mozilla.org/pt-BR/firefox/
•WebDeveloper;
•Yslow;
•FANGS (simulador de leitor de Tela);
•Color Checker;
•Firebug.
Programa de Governo Eletrônico
35