Escola Virtual SICONV

Transcrição

1 Programa de Governo Eletrônico governoeletronico.gov.br Escola Virtual SICONV Análise Síntese Codificação, Desenho e Acessibilidade Concluída em 10/12/2012 Contato: C3S sisp@planejamento.gov.br

2 Histórico do Documento Data Descrição Autor 05/12/2012 Avaliação Alexandre Fonseca 10/12/2012 Reavaliação César Bomfim Programa de Governo Eletrônico 2

3 Sumário Introdução...4 Escopo Referencial Normativo Método de Avaliação Observações Importantes...7 Análise do código Indicadores de codificação Diagnóstico...18 Análise do desenho Indicadores de Desenho Diagnóstico...29 Análise da Acessibilidade Indicadores de acessibilidade Diagnóstico...39 Glossário...41 Anexos...43 Referências...44 Ferramentas utilizadas...45 Programa de Governo Eletrônico 3

4 Introdução O Governo Federal tem se preocupado em proporcionar ao cidadão mais transparência e facilidade no acesso aos serviços e às informações governamentais prestados de forma eletrônica. Por isso, desde o ano 2000, existe o Programa de Governo Eletrônico (e-gov) cujos principais objetivos são democratizar o acesso à informação e dinamizar a prestação de serviços públicos eletrônicos com foco na eficiência e efetividade das funções governamentais prestados ao cidadão. A adoção de práticas e padrões implementadas com a ajuda das Tecnologias de Informação e Comunicação (TICs) são instrumentos que fazem parte do desenvolvimento dos projetos do Programa de Governo Eletrônico para melhorar o acesso e divulgação das informações e dos serviços em governo eletrônico, respeitando as particularidades dos cidadãos. Dessa forma, o Modelo de Acessibilidade de Governo Eletrônico (e-mag) contém um conjunto de recomendações para tornar os sítios e portais acessíveis para a maior número de pessoas possíveis, independentemente das limitações que determinados grupos de pessoas possuam ou venha a possuir. Há, atualmente, no Brasil, de acordo com o censo de 2010, cerca de 46 milhões de pessoas com algum tipo de deficiência e, apesar de as diretrizes do e-mag terem sido institucionalizadas desde 07 de maio de Portaria nº 03, do Ministério do Planejamento - a pesquisa Censo da Web, realizada em 2009 pelo Comitê Gestor de Internet no Brasil (CGI.br), indica que somente 5%, aproximadamente, dos sítios do Governo Federal estão acessíveis aos cidadãos. O e-gov recomenda os Padrões Web em Governo Eletrônico e-pwg. O objetivo é estabelecer padrões de qualidade de uso, desenho, arquitetura de informação e navegação, desenvolvimento e manutenção na gestão dos sítios governamentais. Alguns desses documentos já estão disponíveis no sítio do Governo Eletrônico ( como a Cartilha de Codificação, o Guia de Administração, a Cartilha de Usabilidade e a de Redação Web (webwriting). Ao seguirem as recomendações do e-mag e do e-pwg, os profissionais que desenvolvem Programa de Governo Eletrônico 4

5 os sítios e portais da Administração Pública e publicam conteúdo e dados oficiais podem garantir melhor gestão dos sítios e dos serviços eletrônicos. Isso promoverá o acesso mais claro, rápido e fácil. Sendo assim, o Departamento de Governo Eletrônico (DGE) - da Secretaria de Logística e Tecnologia da Informação do Ministério do Planejamento (SLTI) - responsável por coordenar e articular a implementação das ações do Programa e-gov, disponibiliza uma breve análise do sítio desta instituição. O intuito é sensibilizá-la da importância da implementação das práticas de acessibilidade. Além da avaliação, o Departamento disponibiliza uma equipe de consultores para prover o suporte necessário às dúvidas e correções que surgirem durante a construção, alteração e/ou manutenção de um portal eletrônico acessível. Para dúvidas ou sugestões entre em contato com a equipe da Central de Suporte e Serviços do SISP (C3S): sisp@planejamento.gov.br Conheça mais sobre o Programa de Governo Eletrônico, acesse: Programa de Governo Eletrônico 5

6 Escopo O relatório apresenta uma análise do sítio da Escola Virtual SICONV, no sentido de orientar e sugerir correções que facilitarão o acesso ao seu conteúdo e a implementação das recomendações da Secretaria de Logística e Tecnologia da Informação (SLTI/MP) com relação aos Padrões Web em Governo Eletrônico e-pwg e quanto ao Modelo de Acessibilidade em Governo Eletrônico - e-mag. 1. Referencial Normativo Além das cartilhas, presentes nos Padrões Web em governo eletrônico (e-pwg), os portais e sítios oficiais da Administração Pública Federal (APF) devem observar: Diretrizes do Programa de Governo Eletrônico: Resolução nº 07 de 29 de Julho de 2002, que estabelece regras e diretrizes para os sítios e portais da APF: de-julho-de-2002 Instrução Normativa da SLTI nº 04 de 12 de Novembro de 2010, que trata da contratação de serviços de Tecnologia da Informação: Resolução do CGI.br/RES/2008/008/P, que regulamenta os procedimentos de registro de domínio: 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 da APF: Portaria nº 03 de 07 de Maio de 2007 que institucionaliza o Modelo de Acessibilidade em Governo Eletrônico e-mag: de-maio-de-2007 Portaria nº 05 de 14 de Julho de 2005 que institucionaliza os Padrões de Interoperabilidade de Governo Eletrônico e-ping: Programa de Governo Eletrônico 6

7 de-julho-de Método de Avaliação A avaliação é realizada por dois ou mais consultores que seguem um roteiro onde são verificados os itens relacionados ao código, ao desenho e à acessibilidade das páginas e e-serviços do sítio. Esta é uma análise preliminar, que busca levantar problemas que impactarão na experiência de uso do sítio ou portal pelo cidadão. A avaliação está dividida em: 1. Análise de código: Verifica a qualidade e semântica do código do portal ou sítio; 2. Análise de desenho: Verifica a qualidade da área visual do portal ou sítio; 3. Análise de acessibilidade: Verifica a qualidade da navegação do portal ou sítio por pessoas com deficiência e a aderência aos padrões de acessibilidade (e-mag e e-pwg). São utilizadas algumas páginas do sítio para análise. São elas: Página inicial (login): Página com formulário de Fale Conosco: Página de consulta ou serviço Catálogo de Cursos: Página secundária Curso: OBTV Convenente: Página de conteúdo do curso: O que é OBTV?: Página de exercício do curso: Exercícios de fixação - Módulo 1: 3. Observações Importantes Não foi localizada a página com os resultados da funcionalidade de busca. Programa de Governo Eletrônico 7

8 Análise do código 1. Indicadores de codificação 1.1.Localizador Universal de Recursos - URLs Remete às recomendações do Guia de Administração do e-pwg e à Resolução N 7 de 29 de Julho de URL (Universal Resource Locator - Localizador Universal de Recursos) é o domínio, o endereço no qual se encontra o sítio ou portal. A formatação das URLs iniciais e secundárias, se são de fácil memorização e amigáveis. Se a URL funciona sem o prefixo www. Presença de palavras desnecessárias, que não acrescentam relevância ao domínio (ex:portal de). Avaliação: Não conforme. URL não amigável com presença de palavras desnecessárias que não acrescentam relevância ao domínio. Ex: URL da página secundária Uso de expressões em língua estrangeira na formação das URLs. Ex: Evitar utilizar palavras desnecessárias nas URLs que dificultem a memorização pelo usuário. Ex: a URL da página secundária poderia ser substituída por Evitar o uso de expressões em língua estrangeira na formação das URLs. Ex: a URL poderia ser substituída por Verificar a forma de configuração de URLs amigáveis no Moodle. Programa de Governo Eletrônico 8

9 1.2.Presença de quadros Remete às recomendações da Cartilha de Codificação do e-pwg e ao e-mag. Quadros (frames) eram utilizados como forma de otimizar o carregamento dos portais ou sítios. Porém, com as tecnologias disponíveis, o uso de quadros é ultrapassado, além de ser prejudicial à acessibilidade e a busca de informações no portal ou sítio. Verifica a presença de quadros (frames) no sítio ou portal. Avaliação: Em confomidade. Ausência de quadros. 1.3.Doctype e validação Remete às recomendações da Cartilha de Codificação do e-pwg. O doctype é uma declaração no início da página que indica aos navegadores como processar o código HTML. A presença da declaração e qual o tipo utilizado do doctype. A presença de erros de validação. Avaliação: Parcialmente em conformidade. Doctype encontrado porém foram detectados erros de validação. Ver anexo 1. Pontos positivos: Presença de doctype XHTML 1.0 Strict em todas as páginas avaliadas. De acordo com o validador de código do W3C, na página inicial foram encontrados 20 erros, na página de fale conosco foram encontrados 26 erros, na página de consulta/serviço foram encontrados 40 erros, na página secundária foram encontrados 20 erros, na página de conteúdo do curso foram encontrados 20 erros e na página de exercícios do curso foram encontrados 19 erros. Programa de Governo Eletrônico 9

10 Estabelecer uma rotina de validação do código utilizando os validadores disponíveis. Utilizar ferramenta do w3c para verificar a sintaxe do código (validator.w3.org/); Corrigir os erros de código apontados pelo validador do W3C nas páginas. Observação: A obediência aos padrões permite aos agentes usuários a interpretarem o código de forma mais eficiente. O Anexo 1 apresenta a validação do código segundo os padrões internacionais do W3C ( 1.4.Title Remete às recomendações da Cartilha de Codificação do e-pwg. A tag TITLE é o título da página. Ela identifica a página nos motores de busca e leitores de tela. Também é o rótulo padrão da área de favoritos nos navegadores de internet. A formatação ideal de uma tag TITLE é o nome da página seguida do nome do sítio, sem palavras extras, ou recursos estilísticos. Verifica a descrição do elemento TITLE no cabeçalho e a sua devida relação com o conteúdo apresentado. Avaliação: Parcialmente em conformidade. Pontos positivos: Presença do título em todas as páginas avaliadas; Página inicial (login) apresenta título que contextualiza o objetivo do sítio - Escola Vitural SICONV. O título de algumas páginas secundárias avaliadas está incompleto. Em alguns casos identifica apenas a página em questão sem fazer menção ao nome do sítio, em outros identifica apenas o nome do sítio. Ex: título da página de fale conosco Escola Virtual SICONV. Programa de Governo Eletrônico 10

11 Ajustar o título das páginas secundárias do sítio que deverão seguir o padrão de formatação: Nome da Página Nome do Sítio. Ex: Fale Conosco - Escola Virtual SICONV. 1.5.Declaração do Idioma (pt-br) Remete às recomendações da Cartilha de Codificação do e-pwg. A declaração de língua indica o idioma das páginas ou de trechos do texto. Ele deve ser declarado em todas as páginas, pois além de auxiliar na acessibilidade do conteúdo, também permite a indexação correta nos motores de busca. Verifica a correta declaração do idioma utilizado nas páginas (pt-br para páginas em português Brasil) e a suas derivações quando do uso de termos em outros idiomas (en, fr, it). Avaliação: Em conformidade. Presença do idioma pt-br em todas as páginas avaliadas. 1.6.Mapa de caracteres (charset) Remete às recomendações da Cartilha de Codificação do e-pwg e da e-ping. O mapa de caracteres indica o conjunto de caracteres (letras, palavras e números) utilizado nas páginas. A indicação errada do charset ocasiona problemas de formatação no conteúdo das páginas, normalmente em caracteres especiais ou acentuados. A orientação do W3C e da e-ping é pela adoção do UTF-8. A correta declaração do mapa de caracteres (charset) e se este segue a orientação da e- PING e W3C. Avaliação: Parcialmente em conformidade. Programa de Governo Eletrônico 11

12 Pontos positivos: Presença do charset UTF-8 em todas as páginas avaliadas. Presença de caracteres não pertencentes ao charset definido. Utilizar nas páginas somente caracteres pertencentes ao charset definido. 1.7.Independência de dispositivo Remete às recomendações da Cartilha de Codificação do e-pwg e da e-ping. Os sítios e serviços eletrônicos devem funcionar independentemente de navegadores ou plataformas. A utilização de tags ou comandos proprietários podem comprometer, prejudicar e até impedir a visualização e o funcionamento do portal ou sítio em outros navegadores. É realizado teste nas funcionalidades do sítio em dois ou mais navegadores de internet. Funções vitais de consulta e serviços, Fale Conosco e fomulários devem funcionar de forma semelhante. Avaliação: Em conformidade. O sítio apresenta o mesmo comportamento e leiaute em diferentes navegadores. 1.8.Utilização de Sistema de Gestão de Conteúdo - SGC Remete às recomendações do Guia de Administração do e-pwg e da Resolução N 7 de 29 de Julho de Os SGCs integram uma série de soluções para a padronização, administração, manutenção e evolução dos sítios, automatizando processos de gestão, publicação e controle. Programa de Governo Eletrônico 12

13 Verifica se o sítio é administrado via SGC e, em caso afirmativo, informar qual é utilizado. Avaliação: Em conformidade. O sítio utiliza Moodle. 1.9.Uso de HTML semântico Remete às recomendações da Cartilha de Codificação do e-pwg. Estruturar um documento de forma semântica significa utilizar os elementos da marcação HTML de acordo com a função para os quais foram criados. Utilizar marcação semântica torna o documento HTML compreensível para qualquer navegador, incluindo os formados apenas em texto. O documento HTML escrito de forma semântica é mais acessível e melhor reconhecido pelos motores de busca. Conformidade com os padrões W3C e Hierarquia do HTML (cabeçalho e corpo) do documento da página inicial. Utilização correta dos elementos HTML. Avaliação: Parcialmente em conformidade. Ver anexo 2. Pontos positivos: O sítio faz uso correto do elemento <abbr> em ocorrências de abreviatura no calendário; Ex: página inicial O sítio faz uso correto dos elementos <div>, <p>, <ul> e <li> na diagramação do seu conteúdo; Ausência de definição de abreviaturas <abbr> para algumas siglas. Ex: OBTV_convenente. Este recurso somente é utilizado na formatação do calendário; Programa de Governo Eletrônico 13

14 A estrutura de cabeçalhos não está organizada adequadamente. Algumas informações só aparecem para usuário de leitores de tela a exemplo da informação Good Afternoon, Você está aqui e Programação da página inicial e a de conteúdo do curso, conforme demonstrado abaixo: Utilizar a hierarquia de cabeçalhos corretamente, lembrando que a finalidade semântica das tags <h1> a <h5> é para marcar níveis de conteúdo de uma página; Explorar melhor o uso dos níveis de cabeçalhos granularizando informações além dos níveis <h1> e <h2> Folhas de Estilo (Cascade Style Sheet - CSS) Remete às recomendações da Cartilha de Codificação do e-pwg e do e-mag. As folhas de estilo são responsáveis pela camada de apresentação do sítio. O uso de Folhas de Estilo no documento. Existência de estilos inline e folhas internas. A adoção de boas práticas, evitando o uso abusivo de classes e IDs. Avaliação: Parcialmente em conformidade. Programa de Governo Eletrônico 14

15 Pontos positivos: A maior parte das folhas de estilos está externa ao código HTML. Utilização de CSS inline em pequenos pontos das páginas. Evitar uso de CSS internamente ao código HTML, de tal modo que se observe a separação das camadas de conteúdo, apresentação e comportamento Camada de comportamento Remete às recomendações da Cartilha de Codificação do e-pwg e do e-mag. O acesso às informações e funcionalidades básicas não podem ser prejudicadas pelo uso de scripts (javascript, ajax, e outros). Assim como o uso desses não pode incorrer num considerável peso extra nas páginas. O uso de scripts para fins decorativos, que não adicionam funcionalidades reais para as páginas deve ser evitado. O uso e o comportamento dos objetos programáveis como: javascript, applets, flash entre outros. A possibilidade de interrupção de animações quando desejado. A maneira de utilização dos scripts, ou seja, internamente ou externamente (preferível) ao código de apresentação (HTML). Quando definidos internamente, eles devem estar localizados ao final do documento HTML. A independência de funções básicas como busca e menus. Avaliação: Não conforme. Programa de Governo Eletrônico 15

16 Presença de scripts definidos internamente no início do documento HTML. Revisar a codificação da página e mover os scripts para arquivos externos (.js). Caso seja necessário a declaração de scritps nas páginas, é preferível que estes estejam no final da página, principalmente as chamadas para execução de métodos/funções, pois irá agilizar o carregamento das páginas Peso dos elementos e otimização da página Remete às recomendações do Guia de Administração e a Cartilha de Codificação do e- PWG. Avalia o tempo de carregamento da página, incluindo todos os seus elementos. Verifica quais elementos tem maior impacto para visualização da página e se é utilizada alguma técnica para otimização das páginas. É observado o peso das páginas avaliadas. Busca os elementos que mais impactam no tempo de visualização e o uso de boas práticas para otimizar o portal ou sítio. Verifica o uso adequado dos formatos de imagem (jpg, png e gif). Avaliação: Não conforme. Ver anexo 3. As páginas avaliadas do sítio são pesadas (variando de 1676 KB a 889 kb dados do dia 03/12/2012). Em uma conexão de 56K essas páginas demora mais de 3 minutos para serem carregadas, o que é considerado muito lento; Quantidade elevada de arquivos de script (55) na página inicial sendo eles responsáveis por 34% do peso total da página (567 kb - dados do dia 03/12/2012); Existem 3 imagens presentes na página inicial (login) que juntas pesam 854 kb (51% do peso total da página). Entretanto essas imagens também são carregadas na página de fale conosco e na página de consulta/serviço apesar de não serem exibidas; Programa de Governo Eletrônico 16

17 Técnicas inadequadas de uso de imagens. Ativar a compressão de dados (utilizando, por exemplo, o software livre gzip) no servidor WEB para scripts, folhas de estilo e HTML; Revisar os arquivos de scripts e folhas de estilo usados no sítio, retirando as funções que não estão sendo usadas de forma a reduzir seu tamanho, e combinar esses arquivos para diminuir a quantidade de requisições; Não fazer o redimensionamento de imagens, gerando-as já no tamanho em que elas deverão ser apresentadas no navegador; Evitar o carregamento desnecessário de imagens em páginas que não farão uso das mesmas, evitando o consumo desnecessário de banda; Otimizar as imagens do sítio por meio de técnicas de compactação sem perda de qualidade. Para mais informações visite o endereço BR#CompressImages. Programa de Governo Eletrônico 17

18 2. Diagnóstico O sítio da Escola Virtual SICONV está em conformidade com alguns itens de codificação, tais como: O sítio não faz uso de quadros; Presença de doctype XHTML 1.0 Strict em todas as páginas avaliadas; Página inicial (login) apresenta título que contextualiza o objetivo do sítio - Escola Vitural SICONV ; Presença do idioma pt-br em todas as páginas avaliadas; Presença do charset UTF-8 em todas as páginas avaliadas; O sítio apresenta o mesmo comportamento e leiaute em diferentes navegadores; O sítio faz uso de Sistema de Gestão de Conteúdo (Moodle); O sítio faz uso correto dos elementos <div>, <p>, <ul> e <li> para sua diagramação; A maior parte das folhas de estilos está externa ao código HTML. No entanto, o sítio precisa melhorar alguns pontos para estar aderente aos padrões e- PWG tais como: Evitar utilizar palavras desnecessárias nas URLs, bem como termos em outras línguas, que dificultem a memorização pelo usuário; Estabelecer uma rotina de validação do código utilizando os validadores disponíveis; Corrigir os erros de código apontados pelo validador do W3C nas páginas ver anexo 1; Ajustar os títulos das páginas secundárias do sítio que deverão seguir o padrão de formatação: Nome da Página Nome do Sítio; Utilizar nas páginas somente caracteres pertencentes ao charset definido; Utilizar a hierarquia de cabeçalhos corretamente, lembrando que a finalidade semântica das tags <h1> a <h6> é para marcar níveis hierárquico de conteúdo de uma página; Explorar melhor o uso dos níveis de cabeçalhos granularizando informações além dos níveis <h1> e <h2>; Evitar uso de CSS internamente ao código HTML, de tal modo que se observe a separação das camadas de conteúdo, apresentação e comportamento; Revisar a codificação da página e mover os scripts para arquivos externos (.js); Ativar a compressão de dados (utilizando, por exemplo, o software livre gzip) no Programa de Governo Eletrônico 18

19 servidor WEB para scripts, folhas de estilo e HTML; Revisar os arquivos de scripts e folhas de estilo usados no sítio, retirando as funções que não estão sendo usadas de forma a reduzir seu tamanho, e combinar esses arquivos para diminuir a quantidade de requisições; Não fazer o redimensionamento de imagens, gerando-as já no tamanho em que elas deverão ser apresentadas no navegador; Evitar o carregamento desnecessário de imagens em páginas que não farão uso das mesmas, evitando o consumo desnecessário de banda; Otimizar as imagens do sítio por meio de compactação sem perda de qualidade. Programa de Governo Eletrônico 19

20 Análise do desenho 1. Indicadores de Desenho 1.1.Identidade visual Remete aos elementos que identificam visualmente um sítio do governo federal. Atualmente, é apenas a Barra Brasil (Barra de Identidade Visual do Governo Federal na Internet), barra horizontal situada no topo das páginas. A barra é mantida pela SECOM (Secretaria de Comunicação da Presidência) e seu manual de uso encontra-se no sítio Verifica a presença ou omissão da barra de identificação nas páginas do sítio, se atualizada, se está bem aplicada. Avaliação: Em conformidade. Barra Brasil atualizada conforme verificado abaixo. 1.2.Padronização visual Remete às recomendações da Cartilha de Desenho e Arquitetura de Informação do e- PWG. A padronização visual é a criação de um vocabulário visual a ser utilizado por todo sítio. Esse vocabulário orienta o uso da tipografia, da paleta de cores, ícones, posicionamento de elementos e de qualquer outro elemento visual. Verifica a existência de um padrão visual no sítio ou portal. Isso inclui sítios internos e de campanha do Órgão ou Instituição. Avaliação: Parcialmente em conformidade. Pontos positivos: Identidade visual consistente entre a página inicial, fale conosco e a página de consulta/serviço. Programa de Governo Eletrônico 20

21 As páginas secundárias que dizem respeito ao conteúdo dos cursos propriamente dito Curso: OBTV Convenente, O que é OBTV e OBTV_convenente Exercício de fixação podem ser melhor adequadas à padronização visual das demais páginas no que diz respeito ao cabeçalho e rodapé das mesmas. Ex: Página secundária Curso: OBTV Convenente : Ex: Página inicial Por se tratar de uma aplicação de ensino à distância, é bem comum que as páginas que contenham os conteúdos dos cursos sejam bem específicas, no entanto, recomenda-se a obediência de uma padronização mínima entre estas páginas e as demais, ou seja, pelo menos o cabeçalho e o rodapé devem estar presentes e padronizados em todas as páginas. Programa de Governo Eletrônico 21

22 1.3.Cabeçalho Remete às recomendações da Cartilha de Desenho e Arquitetura de Informação do e- PWG. O cabeçalho é o primeiro ponto de identificação e a âncora da navegação do sítio. Possui elementos como o logotipo e os principais atalhos. Verifica o espaço que o cabeçalho ocupa no portal ou no sítio. Quais os elementos presentes e se estes estão com o destaque adequado. Avaliação: Parcialmente em conformidade. Pontos positivos: Presença dos elementos de identificação do sítio como nome e logotipo; Presença de link para acesso ao Fale Conosco; Presença da barra de navegação que descreve o caminho percorrido pelo usuário (migalha de pão). Ausência de link para o Mapa do Sítio. Incluir no cabeçalho o link para acesso direto ao Mapa do Sítio. 1.4.Paleta de cores Remete às recomendações da Cartilha de Desenho e Arquitetura de Informação do e- PWG. A escolha correta de uma paleta de cores é vital para o bom funcionamento do portal ou sítio. A paleta deve ser atraente e equilibrada, cumprindo a função de apoio na transmissão do significado desejado das informações. O contraste correto das cores é fundamental para manter os itens legíveis. Programa de Governo Eletrônico 22

23 Verifica o contraste de cores. Verifica se a composição das cores escolhidas atende ao tema do portal ou sítio. Avaliação: Parcialmente em conformidade. Pontos positivos: Paleta de cores suave e equilibrada. Baixo contraste em algumas áreas das páginas segundo o plugin do firefox ColorChecker. Ex: Página Fale Conosco Ex: Página secundária Curso: OBTV Convenente Programa de Governo Eletrônico 23

24 Ajustar as áreas do sítio que possuem relação de contraste menor que 4,5:1 (relação mínima de contraste entre o plano de fundo e o primeiro plano, de acordo com o e-mag 3.0). 1.5.Uso de animação e recursos multimídia Remete às recomendações das Cartilha de Usabilidade e de Desenho e Arquitetura de Informação do e-pwg. O uso incorreto de animações podem distrair o cidadão do objetivo do portal ou sítio e, por muitas vezes, incomodá-lo. Verifica o uso pertinente da animação no portal ou sítio. A possibilidade de parar animações, se assim desejar. Banners animados, ou mais de um ponto de animação na página são considerados como problemas. Avaliação: Não conforme. Presença de um banner animado na página inicial (login) com 3 imagens que não permite ao usuário interromper sua reprodução. Permitir que o banner animado presente na página inicial possa ser interrompido pelo usuário. Programa de Governo Eletrônico 24

25 1.6.Pregnância das imagens Esse item remete às recomendações das Cartilha de Usabilidade e de Desenho e Arquitetura de Informação do e- PWG. Pregnância é a capacidade de um ícone (ou imagem) transmitir a mensagem/objetivo para o qual foi criado. Verifica o uso de imagens e suas relações com o tema do sítio, uso e coesão das famílias de ícones. Uso de decorativos e fotos. Avaliação: Parcialmente em conformidade. Pontos positivos: Presença de ícones que transmitem a mensagem/objetivo para o qual foram criados. Ex: Página inicial Presença de ícones não pregnantes com relação às informações/funções vinculadas. Ex: Página inicial Estabelecer uma relação entre a imagem e a informação/função que se quer vincular. 1.7.Diagramação e uso de área branca Esse item remete às recomendações das Cartilha de Usabilidade e de Desenho e Arquitetura de Informação do e-pwg. A diagramação é a distribuição e organização dos elementos nas páginas. As áreas brancas são utilizadas para auxiliar a diagramação, sendo áreas de separação entre os blocos de informações. Verifica como a diagramação foi aplicada nas páginas do sítio. Verifica a quantidade de áreas brancas que separam os conteúdos do sítio. Programa de Governo Eletrônico 25

26 Avaliação: Não conforme. Diagramação deficiente na maior parte das páginas avaliadas; Ex: Página inicial Página Fale Conosco: Programa de Governo Eletrônico 26

27 Uso de tabelas para diagramação de informações nas páginas. Ajustar a diagramação do sítio de forma a criar uma harmonia entre todos os elementos sem excessos/ausências de áreas brancas; Utilizar DIVs para a diagramação ao invés de tabelas. As tabelas devem ser usadas apenas para a apresentação de dados tabulares. 1.8.Leiturabilidade Remete às recomendações das Cartilha de Usabilidade e de Desenho e Arquitetura de Informação do e-pwg. O texto deve ser lido de forma agradável, assim é necessário observar alguns pontos quanto ao alinhamento, ao espaço entre linhas, à largura, ao tamanho de letra utilizado e à identificação clara da estrutura. O tamanho da fonte e sua composição, a hierarquia clara de cabeçalhos, a largura das linhas, entrelinhas e do alinhamento. Avaliação: Parcialmente em conformidade. Pontos positivos: Textos alinhados à esquerda; Tamanho da fonte adequado na maior parte dos textos. Programa de Governo Eletrônico 27

28 Fonte pequena em algumas partes da página inicial. Não utilizar fontes em tamanho menor que 10pt (13,3px ou 83,3% ou 0.83em). Programa de Governo Eletrônico 28

29 2. Diagnóstico O sítio da Escola Virtual SICONV respeitou alguns pontos dos indicadores de desenho tais como: Barra Brasil atualizada; Identidade visual consistente entre a página inicial, fale conosco e a página de consulta/serviço; Presença dos elementos de identificação do sítio como nome e logotipo; Presença de link para acesso ao Fale Conosco; Presença da barra de navegação que descreve o caminho percorrido pelo usuário; Paleta de cores suave e equilibrada; Textos alinhados à esquerda; Tamanho da fonte adequado na maior parte dos textos. No entanto, o aplicativo precisa melhorar outros pontos para atingir aderência aos padrões e-mag tais como: Obedecer a padronização mínima entre página inicial e as demais, ou seja, pelo menos o cabeçalho e o rodapé devem estar presentes e padronizados em todas as páginas; Incluir no cabeçalho o link para acesso direto ao Mapa do Sítio; Ajustar as áreas do sítio que possuem relação de contraste menor que 4,5:1 (relação mínima de contraste entre o plano de fundo e o primeiro plano, de acordo com o e-mag 3.0); Permitir que o banner animado presente na página inicial possa ser interrompido pelo usuário; Estabelecer uma relação entre a imagem e a informação/função que se quer vincular; Ajustar a diagramação do sítio de forma a criar uma harmonia entre todos os elementos sem excessos/ausências de áreas brancas; Utilizar DIVs para a diagramação ao invés de tabelas. As tabelas devem ser usadas apenas para a apresentação de dados tabulares; Não utilizar fontes em tamanho menor que 10pt (13,3px ou 83,3% ou 0.83em). Programa de Governo Eletrônico 29

30 Análise da Acessibilidade 1. Indicadores de acessibilidade 1.1.Simulação de leitor de tela Remete às recomendações do e-mag. 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ágina se torna imprescindível para uma boa interpretação. O tempo de leitura, a omissão de informações, a não tradução de termos de elementos programados, a existência de atalhos e teclas de acesso. Navegação por links e cabeçalhos. Avaliação: Não conforme. Ver anexo 4. Ausência de teclas de acesso; Estrutura de cabeçalhos deficiente. Ver detalhes no Anexo 2 Estrutura do documento. Ex: Página com formulário de Fale Conosco Programa de Governo Eletrônico 30

31 Incluir as teclas de atalho previstas no item 3.2 do e-mag 3.0; Construir páginas com as marcações de seus respectivos cabeçalhos, pois o acesso por leitores de tela é facilitada com a colocação de atalhos e cabeçalhos (elemento hh do HTML h1, h2, h3...). 1.2.Avaliação Mecânica do Avaliador e Simulador de Acessibilidade para Sítios ASES Remete às recomendações do e-mag. O ASES - Avaliador e Simulador de Acessibilidade para Sítios realiza a avaliação mecânica do sítio e aponta os problemas de acessibilidade detectados. Sua avaliação não substitui a validação humana. A quantidade de erros e avisos encontrados nas páginas avaliadas, conforme os relatórios apresentados pela ferramenta ASES. Avaliação: Não conforme. Ver anexo 5. Sítio com problemas de acessibilidade. A análise efetuada no escopo de avaliação apresentou os seguintes resultados: Página inicial: 308 erros de prioridade 1 e 3 erros de prioridade 2; Página com formulário de Fale Conosco: 108 erros de prioridade 1 e 3 erros de prioridade 2; Página de consulta ou serviço Catálogo de Cursos: 89 erros de prioridade 1 e 3 erros de prioridade 2; Página secundária Curso: OBTV Convenente: 360 erros de prioridade 1 e 67 erros de prioridade 2; Página de conteúdo do curso: O que é OBTV?: 103 erros de prioridade 1 e 2 erros de prioridade 2; Página de exercício do curso: Exercícios de fixação - Módulo 1: 137 erros de prioridade 1 e 2 erros de prioridade 2. Programa de Governo Eletrônico 31

32 Corrigir os erros e estabelecer uma rotina de avaliação de acessibilidade, tanto humana, quanto automática. 1.3.Navegação por teclado Remete às recomendações do e-mag. A navegação por teclado é utilizada por deficientes visuais, por deficientes físicos ou por pessoas com restrição de movimento. O ideal é que o conteúdo selecionado receba algum tipo de destaque, indicando ao usuário em que parte da página ele se encontra. Verifica o comportamento da página quando navegado por teclado, se o conteúdo é realçado, se alguma informação é inacessível. Avaliação: Parcialmente em conformidade. Pontos positivos: A maior parte dos conteúdos é realçada quando selecionada; Todas as informações das páginas avaliadas são acessíveis via teclado. Os elementos da barra de acessibilidade não são destacados quando recebem foco. Destacar os campos da barra de acessibilidade quando estes receberem o foco. Programa de Governo Eletrônico 32

33 1.4.Descrição das imagens Remete às recomendações do e-mag. O atributo alt indica um texto alternativo para uma imagem. Sua função é descrever a imagem de forma sucinta. Essa informação é lida pelos leitores de tela para informar ao cidadão o conteúdo da imagem. O texto alternativo é apresentado quando as imagens estiverem corrompidas ou quando a opção de visualização das imagens nos navegadores estiver inativa. Imagens decorativas devem ter o atributo alt vazio. Verifica a existência, o conteúdo e a qualidade das informações do atributo alt nas imagens. Avaliação: Parcialmente em conformidade. Pontos positivos: Presença de imagens decorativas com o atributo alt vazio. Ex: Página secundária Curso: OBTV Convenente Presença de imagens sem o atributo alt. Ex: Página secundária Curso: OBTV Convenente Incluir o atributo alt em todas as imagens do sítio. As imagens decorativas devem ter o atributo alt vazio. Programa de Governo Eletrônico 33

34 1.5.Quebras de navegação Remete às recomendações do e-mag. Ações que desviam a navegação lógica e retiram o foco da informação sem a prévia anuência do usuário são consideradas como quebras de navegação. Isso pode ocorrer com a sobreposição de janelas (pop-ups), modificação da informação do sítio de forma dinâmica, aberturas de páginas em novas janelas ou abas e links com referências inexistentes (links quebrados). Verifica a abertura de páginas em novas janelas ou abas. Verifica a existência de links com referências inexistentes (links quebrados), a existência do uso do atributo target= _blank ou artifício similar para abertura de novas páginas ou janelas. Avaliação: Parcialmente em conformidade. Pontos positivos: A maioria dos links abre na mesma página. Existência de links abrindo em uma nova página/aba. Ex: Página inicial Não abrir novas páginas, janelas ou abas sem avisar e obter o consentimento do usuário pois tais ações desviam a navegação lógica e retiram o foco da informação. 1.6.Página de descrição com os recursos de acessibilidade Remete às recomendações do e-mag. 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 e outras informações pertinentes à acessibilidade do sítio. Link para acesso à página de acessiblidade, teclas de atalho disponíveis, opções de aumento de fonte do texto, opção de alto contraste. Programa de Governo Eletrônico 34

35 Avaliação: Não conforme. A página de acessibilidade não apresenta os recursos presentes no sítio como as opções de redimensionamento de texto e alto contraste e outras informações pertinentes à acessibilidade do sítio. Atualizar a página de descrição dos recursos de acessibilidade de forma a listar os recursos de acessibilidade presentes no sítio e sua forma de utilização. Não se atendo somente em dizer que o sitio foi projetado para ser acessível segundo às diretrizes do WCAG Barra de acessibilidade Remete às recomendações do e-mag. O sítio deverá conter uma barra de acessibilidade no topo de cada página. Os elementos dessa barra serão: opções de aumento e diminuição da fonte, opção para retornar para fonte normal, opção de alto contraste, os atalhos para acesso rápido às principais áreas do sítio (menu, conteúdo e busca) e link para página de descrição com os recursos de acessibilidade. Os seguintes itens: opções de aumentar fonte, diminuir fonte, retornar fonte padrão, alterar contraste, atalhos para as principais áreas do sítio (menu, conteúdo e busca) e o acesso à página de descrição com os recursos de acessibilidade. Avaliação: Parcialmente em conformidade. Pontos positivos: Presença de opções para aumentar e diminuir fonte, alto contraste e link para acesso à página de descrição com os recursos de acessibilidade. Programa de Governo Eletrônico 35

36 Ausência de atalhos para as principais áreas do sítio (menu, conteúdo e busca); Barra de acessibilidade presente somente nas páginas externas aos cursos. As páginas que contém os conteúdos didáticos não apresentam a barra de acessibilidade. Ex: Página secundária Permitir acesso à barra de acessibilidade em todas as páginas do sítio; Incluir teclas de atalho para as principais áreas do sítio: 1: ir para conteúdo; 2: ir para menu principal; 3: ir para caixa de busca. 1.8.Apresentação do mapa do sítio Remete às recomendações do e-mag. O mapa do sítio é uma lista das páginas de um sítio acessível por mecanismos de pesquisa e usuários. Ele deve ser organizado de forma hierárquica para ajudar os usuários a se localizarem nas páginas do sítio. O mapa do sítio permite uma visão geral do conteúdo do sítio, funcionando como um índice. Presença do mapa do sítio. A disposição em forma de lista e organização de forma hierárquica. Avaliação: Não conforme. Programa de Governo Eletrônico 36

37 Ausência do mapa do sítio. Criar o mapa do sítio com a lista das páginas organizada de forma hierárquica e lógica que retrata a navegação natural do sítio; Incluir o link para o mapa do sítio no cabeçalho de todas as páginas. 1.9.Apresentação dos formulários Remete às recomendações do e-mag. O formulário HTML é uma seção que possui conteúdo, marcações e elementos especiais chamados campos (checkbox, radio button e select menu) e etiquetas (labels) para os campos. Os usuários utilizam os formulários para alterar os campos antes do envio ao servidor para serem processados. Os seguintes itens dos formulários do sítio: utilização da tag HTML form; disponibilizar os elementos na ordem correta de navegação; associar as etiquetas aos campos correspondentes; mudança de contexto quando elemento recebe foco; fornecer um botão para envio das informações do formulário (botão do tipo submit) e permitir a verificação das informações antes do envio; apresentar os erros de cada campo; verificar para cada conjunto de informações presente em dois ou mais elementos de entrada de dados se estão na tags HTML fieldset e legend. Avaliação: Parcialmente em conformidade. Ex: Página de exercício do curso. Pontos positivos: Os campos para entrada de dados no formulário (radio buttons) estão disponibilizados na ordem correta de navegação; Presença da tag HTML form; Presença de etiquetas (labels) associadas aos seus respectivos campos; Presença do botão de envio de dados do tipo submit. Programa de Governo Eletrônico 37

38 Não há exibição dos erros dos campos obrigatórios (validação de dados); Ausência de funcionalidade para verificação das informações antes do envio do formulário. Incluir mensagem indicando os erros de cada campo obrigatório; Incluir funcionalidade para verificação das informações antes do envio do formulário Apresentação de documentos Remete às recomendações do e-mag. A disponibilização dos documentos do sítio deverá ser preferencialmente no formato HTML e deverá ser informado ao usuário a extensão e o tamanho do arquivo. Há possibilidade da utilização em outros formatos como o ODF (Formato de Documento Livre) desde que os mesmos sejam acessíveis, ou PDF (Formato Portável de Documento) desde que seja fornecida uma alternativa em HTML ou ODF. A disponibilização dos documentos do sítio e suas informações como extensão (tipo de arquivo) e tamanho. A presença de documentos no formato HTML, ODF e PDF. Caso os documentos estejam no formato ODF os mesmos devem ser acessíveis. Caso estejam no formato PDF deve ser fornecida uma alternativa em HTML ou ODF. Avaliação: Em conformidade. Não foram localizados documentos no sítio. Programa de Governo Eletrônico 38

39 2. Diagnóstico O sítio da Escola Virtual SICONV apresenta algumas boas práticas do item de acessibilidade, tais como: A maior parte dos conteúdos das páginas é realçada quando selecionada; Todas as informações das páginas avaliadas são acessíveis via teclado; Presença de imagens decorativas com o atributo alt vazio; Presença de opções para aumentar e diminuir fonte, alto contraste e link para acesso à página de descrição com os recursos de acessibilidade; Os campos para entrada de dados no formulário (radio buttons) estão disponibilizados na ordem correta de navegação; Presença da tag HTML form; Presença de etiquetas (labels) associadas aos seus respectivos campos; Presença do botão de envio de dados do tipo submit. Ainda assim, alguns pontos podem ser melhorados para aumentar o grau de aderência ao e-mag 3.0, tais como: Incluir as teclas de atalho previstas no item 3.2 do e-mag 3.0; Construir páginas com as marcações de seus respectivos cabeçalhos, pois o acesso por leitores de tela é facilitada com a colocação de atalhos e cabeçalhos (elemento hh do HTML h1, h2, h3...); Corrigir os erros e estabelecer uma rotina de avaliação de acessibilidade, tanto humana, quanto automática; Incluir o atributo alt em todas as imagens do sítio. As imagens decorativas devem ter o atributo alt vazio; Não abrir novas páginas, janelas ou abas sem avisar e obter o consentimento do usuário pois tais ações desviam a navegação lógica e retiram o foco da informação; Atualizar a página de descrição dos recursos de acessibilidade de forma a listar os recursos de acessibilidade presentes no sítio e sua forma de utilização; Permitir acesso à barra de acessibilidade em todas as páginas do sítio; Incluir teclas de atalho para as principais áreas do sítio: 1: ir para conteúdo; 2: ir para menu principal; 3: ir para caixa de busca. Programa de Governo Eletrônico 39

40 Destacar os campos da barra de acessibilidade quando estes receberem o foco; Criar o mapa do sítio com a lista das páginas organizada de forma hierárquica e lógica que retrata a navegação natural do sítio; Incluir o link para o mapa do sítio no cabeçalho de todas as páginas; Incluir mensagem indicando os erros de cada campo obrigatório; Incluir funcionalidade para verificação das informações antes do envio do formulário. Programa de Governo Eletrônico 40

41 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, Programa de Governo Eletrônico 41

42 Codificação, Usabilidade, Redação Web, Desenho e Arquitetura de Conteúdo e Arquivos e 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 42

43 Anexos Os seguintes anexos se encontram na Mídia. São acessados pela página Avaliação de Sítio Escola Virtual SICONV: Anexo 1 Validação HTML Validador W3C; Anexo 2 Estrutura do documento; Anexo 3 Relatório tamanho das páginas; Anexo 4 Leitor de texto; Anexo 5 Avaliação ASES. Programa de Governo Eletrônico 43

44 Referências Diretrizes do Programa de Governo Eletrônico: Resolução do CGI.br/RES/2008/008/P, que regulamenta os procedimentos de registro de domínio: 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: Material de Apoio presente no sítio do governo eletrônico 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: 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: Portaria nº 03 de 07 de Maio de 2007 que institucionaliza o Modelo de Acessibilidade em Governo Eletrônico e-mag Portaria normativa nº 05 de 14 de Julho de 2005 que institucionaliza os Padrões de Interoperabilidade de Governo Eletrônico e-ping Programa de Governo Eletrônico 44

45 Ferramentas utilizadas ASES Avaliador e Simulador de AcessibilidadE de Sítios Sítio Websiteoptimization Page Speed Validador HTML Extensões do Navegador Firefox WebDeveloper; Yslow; FANGS (simulador de leitor de Tela); Color Checker; Firebug. Programa de Governo Eletrônico 45