Your SlideShare is downloading. ×
0
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
e-MAG - Avaliação de Acessibilidade em Sítios
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

e-MAG - Avaliação de Acessibilidade em Sítios

992

Published on

Oficina realizada no Consegi 2012 na sala Arioca dia 6 de dezembro - Belém - PA

Oficina realizada no Consegi 2012 na sala Arioca dia 6 de dezembro - Belém - PA

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
992
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
30
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Avaliação de Acessibilidade em Sítios Ministério do Planejamento, Orçamento e Gestão Secretaria de Logística e Tecnologia da Informação Departamento de Governo Eletrônicogovernoeletronico.gov.br
  • 2. O Departamento de Governo Eletrônico  Implantar de forma unificada serviços por meios eletrônicos no governo federal;  Integrar outros níveis de governo na prestação de serviços;  Desenvolver e-serviços orientado por eventos da vida de cidadãos e demais setores sociais;  Definir e Implantar padrões de usabilidade e acessibilidade para e-Serviços;governoeletronico.gov.br 2 de 117
  • 3. Agenda:  Introdução;  Dados do Governo na WEB;  O e-MAG: Modelo de Acessibilidade em Governo Eletrônico;  Procedimento de Avaliação em Sítios;  Os 10 erros mais encontrados;  Consultoria em Governo Eletrônico;  Dúvidas.governoeletronico.gov.br
  • 4. As pessoas com deficiência Falta cidadania – foto de Milton Jung Carros estacionados em vagas especiais http://www.flickr.com/photos/cbnsp/536 0821409/ CC licencegovernoeletronico.gov.br 4 de 117
  • 5. Quantos somos 24% da população brasileira 45.623.910 pessoas 35.791.488 deficiente visual (Censo 2010)governoeletronico.gov.br 5 de 117
  • 6. Como somos Deficiência física  Alteração completa ou parcial de um ou mais segmentos do corpo, com comprometimento da função física;  Amputação, ausência de membro, paralisia cerebral, membros com deformidade congênita ou adquirida.governoeletronico.gov.br
  • 7. Como somos Deficiência auditiva A deficiência auditiva se caracteriza pela perda parcial ou total das possibilidades auditivas sonoras, variando em graus e níveis.governoeletronico.gov.br
  • 8. Como somos Deficiência múltipla Associação entre diferentes deficiências, com possibilidades bastante amplas de combinações.governoeletronico.gov.br
  • 9. Então, Pare e Pense !!! Você acha que os recursos de acessibilidade ajudam apenas as pessoas com deficiência?governoeletronico.gov.br
  • 10. Acessibilidade é para todosgovernoeletronico.gov.br
  • 11. governoeletronico.gov.br
  • 12. governoeletronico.gov.br 14 de 117
  • 13. Início de aprendizadoNosso primeiro contato
  • 14. Idade Avançada Nós, daqui alguns anos Foto: Flickr.com - Jacob Bøttergovernoeletronico.gov.br
  • 15. Medo de usar o computadorFoto: everystockphoto.com - Violator3
  • 16. Motivos pelos quais nunca utilizou a internet 57% Falta de habilidade com o computador/internet Fonte: Pesquisa TIC Domicílios 2011 – CGI.br Pessoas que nunca acessaram a internet, mas usaram um computador.governoeletronico.gov.br
  • 17. Dados do Governo Na Web  Preocupação com proteção e segurança dos dados pessoais (39%)  Dificuldade em encontrar os serviços que precisam (29%)  Dificilmente recebem retorno (reposta) às solicitações (28%)  Os serviços estão disponíveis, mas não é possível completar a transação (23%)  Não temos confirmação de que o pedido chegou e que vai ser processado (21%)  Usar a internet para contato com o governo é Ícone mostrando um muito complicado (21%) sinal de interrogação Pesquisa TIC e-Gov 2010 – CGI.brgovernoeletronico.gov.br
  • 18. Dados do Governo Na Web  88% - “Muito importante” que um Gráfico de pizza com a percentagem sítio de governo oferecesse de 88% explicações sobre como utilizar um serviço.  84% - “Muito importante” que um Gráfico de pizza com a percentagem sítio de governo oferecesse de 84% explicações sobre os direitos do cidadão. Pesquisa TIC e-Gov 2010 – CGI.brgovernoeletronico.gov.br
  • 19. Dados do Governo Na Web Cenário Atual Escolheria internet como forma de acessar serviços públicos? 56% - Sim 37% - Não Icone www 6% - Não sabe Pesquisa TIC e-Gov 2010 – CGI.brgovernoeletronico.gov.br
  • 20. Porque não Desenvolvemos web sites acessíveis? Algumas Hipóteses:governoeletronico.gov.br 23 de 117
  • 21. Não é por Falta de Legislação (...o tamanho pequeno é proposital) Lei Nº 10.098, de 19 de dezembro de 2000 Estabelece normas gerais e critérios básicos para a promoção da acessibilidade das pessoas portadoras de deficiência ou com mobilidade reduzida, e dá outras providências. Decreto Nº 5.296, de 2 dezembro de 2004 Regulamenta as Leis Nºs 10.048, de 8 de novembro de 2000, que dá prioridade de atendimento às pessoas que especifica, e 10.098, de 19 de dezembro de 2000, que estabelece normas gerais e critérios básicos para a promoção da acessibilidade das pessoas portadoras de deficiência ou com mobilidade reduzida, e dá outras providências. Portaria Nº3, de 7 de maio de 2007 Institucionaliza o Modelo de Acessibilidade em Governo Eletrônico – e-MAG no âmbito do Sistema de Administração dos Recursos de Informação e Informática – SISP . Convenção sobre os Direitos das Pessoas com Deficiência (2007) A Convenção sobre os Direitos das Pessoas com Deficiência e seu respectivo Protocolo Facultativo foram ratificados pelo Congresso Nacional em 09/07/2008 pelo decreto legislativo nº 186/2008 e todos os seus artigos são de aplicação imediata. Decreto Legislativo Nº 186, de 09 de julho de 2008 Aprova o texto da Convenção sobre os Direitos das Pessoas com Deficiência e de seu Protocolo Facultativo, assinados em Nova Iorque, em 30 de março de 2007. Decreto Nº 6.949, de 25 de agosto de 2009 Promulga a Convenção Internacional sobre os Direitos das Pessoas com Deficiência e seu Protocolo Facultativo, assinados em Nova York, em 30 de março de 2007.governoeletronico.gov.br
  • 22. Desconhecimentogovernoeletronico.gov.br 25 de 117
  • 23. Preconceitogovernoeletronico.gov.br 26 de 117
  • 24. Preguiçagovernoeletronico.gov.br 27 de 117
  • 25. Mitos É tão difícil assim?governoeletronico.gov.br
  • 26. 7 mitos e 1 equívoco por Leda Spelta Mito 1 "Acessibilidade Web é só para deficientes visuais." Temor oculto: "Imagina o trabalhão que vai dar, fazer acessibilidade para todo mundo!"governoeletronico.gov.br 29 de 117
  • 27. 7 mitos e 1 equívoco por Leda Spelta Mito 2 "Na prática, o número de usuários beneficiados com a acessibilidade é relativamente muito pequeno." Temor oculto: "Esse negócio de acessibilidade é muito investimento para pouco retorno."governoeletronico.gov.br 30 de 117
  • 28. O google apenas vê o código. Se o seu código é acessivel é mais fácil do Google encontrá-logovernoeletronico.gov.br 31 de 117
  • 29. 7 mitos e 1 equívoco por Leda Spelta Mito 3 "Fazer um site acessível demora e custa caro." Temor oculto: “Não estarei empregando mal os recursos que tenho, ao fazer acessibilidade? Não vou ficar no prejuízo?”governoeletronico.gov.br 32 de 117
  • 30. 7 mitos e 1 equívoco por Leda Spelta Mito 4 "É melhor fazer uma página especial para os deficientes visuais." Temor oculto: "A gente não vai conseguir fazer uma página acessível, que seja tão bonita e funcional como a nossa."governoeletronico.gov.br 33 de 117
  • 31. 7 mitos e 1 equívoco por Leda Spelta Mito 5 "Um site acessível a deficientes visuais não é bonito." Temor oculto: "Só sei fazer sites bonitos usando tecnologias inacessíveis; de fato, não sei exatamente quais são os elementos visuais que atrapalham a acessibilidade. Por isso, quando tenho que fazer um site acessível, faço sempre o arroz com feijão."governoeletronico.gov.br 34 de 117
  • 32. governoeletronico.gov.br 35 de 117
  • 33. 7 mitos e 1 equívoco por Leda Spelta Mito 6 “Vamos por partes: primeiro fazemos o site, depois fazemos acessibilidade." Temor oculto: "Não vamos conseguir fazer um site acessível, com o tempo, os recursos e a equipe que temos."governoeletronico.gov.br 36 de 117
  • 34. governoeletronico.gov.br 37 de 117
  • 35. 7 mitos e 1 equívoco por Leda Spelta Mito 7 "A gente sabe o que é bom para o usuário." Temor oculto: "Não quero expor meu projeto às críticas."governoeletronico.gov.br 38 de 117
  • 36. 7 mitos e 1 equívoco por Leda Spelta Equívoco "Meu site é direcionado a um público específico; ele não interessa a todos os grupos de usuários." Quando restringimos o acesso do nosso site ao que julgamos serem as características do seu público alvo, estamos, na prática, usando a internet para limitar o nosso público, ao invés de ampliá-lo.governoeletronico.gov.br 39 de 117
  • 37. governoeletronico.gov.br 40 de 117
  • 38. Pequenos testes, grandes descobertasgovernoeletronico.gov.br 41 de 117
  • 39. Já testou o seu site? Acessível via teclado Foto: Flickr.com - Baddog_governoeletronico.gov.br
  • 40. governoeletronico.gov.br
  • 41. Cabeçalhos <H1>Título Principal</H1> <H2>Subtítulo</H2> <H3>Sub-Subtítulo</H3> <H2>Subtítulo</H2> <H3>Sub-Subtítulo</H3> <H4>....</H4>governoeletronico.gov.br
  • 42. governoeletronico.gov.br
  • 43. Pesquisa sobre uso de Tecnologias Assistivas: Ampliadores e leitores de tela http://acessibilidade.w3c.br/pesquisa/governoeletronico.gov.br
  • 44. Pesquisa sobre uso de Tecnologias Assistivas: Ampliadores e leitores de tela http://acessibilidade.w3c.br/pesquisa/governoeletronico.gov.br
  • 45. Pesquisa sobre uso de Tecnologias Assistivas: Ampliadores e leitores de tela http://acessibilidade.w3c.br/pesquisa/governoeletronico.gov.br
  • 46. Pesquisa sobre uso de Tecnologias Assistivas: Ampliadores e leitores de tela http://acessibilidade.w3c.br/pesquisa/governoeletronico.gov.br
  • 47. http://acessibilidade.w3c.br/pesquisa/governoeletronico.gov.br
  • 48. O e-MAG 3.0 Código acessível  Conteúdo alternativo para elementos não-textuais;  Dados de tabelas acessíveis;  Formulários acessíveis;  Menus de escape;  Teclas de acesso;  Folhas de estilo com medidas relativas;  Documentos legíveis sem a folha de estilos;  Semântica;governoeletronico.gov.br 52 de 117
  • 49. O e-MAG 3.0 Código acessível  Programação em camadas;  Não usar tabelas para diagramar;  Não utilizar frames;  Não utilizar elementos proprietários;governoeletronico.gov.br 53 de 117
  • 50. e-MAG 3.0  Aprendizados com a versão 2.0;  Pesquisas;  Opinião de especialistas;  Em conformidade com a WCAG 2.0;  Necessidades locais; Estrutura  Pragmático (estruturado de acordo com os problemas a serem abordados);  Dividido por áreas de atuação;  Padronização de funcionalidades. http://emag.governoeletronico.gov.brgovernoeletronico.gov.br 55 de 117
  • 51. O e-MAG 3.0 Recomendações de acessibilidade ● Divisão: 6 seções; ● Total de 45 recomendações (Todas são importantes); ● Referência ao padrão WCAG nas recomendações.governoeletronico.gov.br 56 de 117
  • 52. O e-MAG 3.0 Recomendações de acessibilidade 1 – Marcação (9) 1 – respeitar os padrões de desenvolvimento web 2 – organizar o código html de forma lógica e semântica 3 – utilizar corretamente os níveis de cabeçalho 4 – ordenar de forma lógica e intuitiva a leitura e tabulação 5 – disponibilizar todas as funções da página via teclado 6 – fornecer âncoras para ir direto a um bloco de conteúdo 7 – não utilizar tabelas para diagramação 8 – separar links adjacentes 9 – não abrir novas instâncias sem a solicitação do usuáriogovernoeletronico.gov.br 57 de 117
  • 53. O e-MAG 3.0 Recomendações de acessibilidade 2 - Comportamento (6) (6 10 – garantir que os objetos programáveis sejam acessíveis 11 - não criar páginas com atualização automática periódica 12 – não utilizar redirecionamento automático de páginas 13 – fornecer alternativa para modificar limite de tempo 14 – não incluir situações com intermitência de tela 15 – assegurar o controle do usuário sobre as alterações temporais do conteúdogovernoeletronico.gov.br 58 de 117
  • 54. O e-MAG 3.0 Recomendações de acessibilidade 3 – Conteúdo/Informação (12) ( 16 – identificar o idioma principal da página 17 – oferecer um título descritivo e informativo à página 18 – disponibilizar informação sobre a localização do usuário na página 19 – descrever links clara e sucintamente 20 – fornecer alternativa em texto para as imagens do sítio 21 – fornecer alternativa em texto para as zonas ativas de mapa de imagem 22 – disponibilizar documentos em formatos acessíveis 23 – em tabelas, utilizar títulos e resumos de forma apropriada 24 – associar células de dados às células de cabeçalho em uma tabela 25 – garantir a leitura e compreensão das informações 26 – disponibilizar uma explicação para siglas, abreviaturas e palavras incomuns 27 – informar mudança de idioma no conteúdogovernoeletronico.gov.br 59 de 117
  • 55. O e-MAG 3.0 Recomendações de acessibilidade 4 – Apresentação/Design (5) 28 - oferecer contraste mínimo entre plano de fundo e primeiro plano 29 – não utilizar apenas cor ou outras características sensoriais para diferenciar elementos 30 – permitir redimensionamento de texto sem perda de funcionalidade 31 – dividir as áreas de informação 32 – possibilitar que o elemento com foco seja visualmente evidentegovernoeletronico.gov.br 60 de 117
  • 56. O e-MAG 3.0 Recomendações de acessibilidade 5 – Multimídia (5) (5 33 – fornecer alternativa para vídeo 34 – fornecer alternativa para áudio 35 – oferecer audiodescrição para vídeo pré-gravado 36 – fornecer controle de áudio para som 37 – fornecer controle de animaçãogovernoeletronico.gov.br 61 de 117
  • 57. O e-MAG 3.0 Recomendações de acessibilidade 6 – Formulários (8) ( 38 – fornecer alternativa em texto para os botões de imagem de formulários 39 – associar etiquetas aos seus campos 40 – estabelecer uma ordem lógica de navegação 41 – não provocar automaticamente alteração no contexto 42 – fornecer instruções para entrada de dados 44 – agrupar campos de formulário 45 – fornecer captcha humanogovernoeletronico.gov.br 62 de 117
  • 58. O e-MAG 3.0 Itens Padrões para o Governo Federal 1.Página com a descrição dos recursos de acessibilidade; 2.Teclas de atalho (3); 3.Barra de acessibilidade; 4.Apresentação do mapa do sitio; 5.Apresentação de formulário; 6.Conteúdo alternativo para imagens; 7.Apresentação de documentos.governoeletronico.gov.br 63 de 117
  • 59. Apoio, ferramentas e disseminação - Cursos em EAD - Tutoriais - Pesquisas - CMS Suindara - ASES - Checklists - Consultores SISPgovernoeletronico.gov.br
  • 60. Comunidades ASES no Software Público – cerca de 2442 membros.governoeletronico.gov.br
  • 61. Procedimento de Avaliação Como saber se o sítio está acessível ?governoeletronico.gov.br
  • 62. Procedimento de Avaliação Fluxo de validação: ● Validar HTML e CSS (validador w3c); ● Validar fluxo de leitura da página (lynx, nvda, orca); ● Validar fluxo de leitura sem estilos, scritps e imagens (WebDeveloper) ● Verificar as funcionalidades da barra de acessibilidade; ● Realizar validação automática (ASES, AccessMonitor) ● Realizar validação manual (navegação por teclado, leitores de tela, checklists de validação); ● Testar com diferentes usuários.governoeletronico.gov.br 67 de 117
  • 63. Procedimento de Avaliação Como fazer ?governoeletronico.gov.br
  • 64. Procedimento de Avaliação Consultores em Governo Eletrônico do DGEgovernoeletronico.gov.br
  • 65. Procedimento de Avaliação Estrutura:  Análise de Código: Avalia qualidade e semântica da codificação do sítio;  Análise de Desenho: Avalia qualidade da área visual do sítio;  Análise de Acessibilidade: Avalia qualidade da navegação do sítio por pessoas com deficiência e aderência aos padrões de acessibilidade (e-MAG e WCAG).governoeletronico.gov.br
  • 66. Procedimento de Avaliação Escopo:  Página principal;  Página Secundária;  Página de Serviço;  Página de Fale Conosco;  Página de Busca.governoeletronico.gov.br
  • 67. Procedimento de Avaliação Ferramentas:  ASES;  Leitores de Tela (Dos/Vox , NVDA);  Extensões do Navegador Firefox:  WebDeveloper;  Yslow;  Color Checker;  Colour Constrast Analyse  Fangs;  FireBug;  PageSpeed;  InLine Code Finder.governoeletronico.gov.br
  • 68. Procedimento de Avaliação Avaliação de Código - Doctype  Conceito:  Especifica as regras para a codificação da página;  Importância:  Direciona a interpretação da sitaxe e renderização do código html por parte do agente de usuário (browse, leitor de tela)governoeletronico.gov.br
  • 69. Procedimento de Avaliação Avaliação de Código - Doctype Código HTML com tag doctype XHTML 1.1 transitionalgovernoeletronico.gov.br
  • 70. Procedimento de Avaliação Avaliação de Código - Declaração do Idioma  Conceito:  O atríbuto lang e xml:lang da tag <HTML> especifica o idioma da página;  Presente na recomendação nº16 do e- MAG 3.0.  Importância:  Melhora a acessibilidade e a indexação nos motores de busca.governoeletronico.gov.br
  • 71. Procedimento de Avaliação Avaliação de Código - Declaração do Idioma Código HTML com atributo lang para idioma português do Brasil (pt-br).governoeletronico.gov.br
  • 72. Procedimento de Avaliação Avaliação de Código - Independência de Dispositivos  Conceito:  Manter o comportamento e estrutura do sítio de forma similar em todos os navegadores, bem como em outros agentes de usuário.  Importância:  Permite que serviço e conteúdo do sítio não sejam suprimidos para os usuários. logotipo da esquerda para direita: Firefox, Internet Explorer e Google Chromegovernoeletronico.gov.br
  • 73. Procedimento de Avaliação Avaliação de Código - HTML Semântico  Conceito:  Utilizar tags HTML de forma correta e para finalidade que foi criada;  Presente em todo e-MAG 3.0.  Importância:  Tornar o conteúdo acessível aos humanos e às máquinas.governoeletronico.gov.br
  • 74. Procedimento de Avaliação Avaliação de Código - HTML Semântico Sítio do Web Acessibility Iniciative com as tags HTML de cabeçalho destacadas.governoeletronico.gov.br
  • 75. Procedimento de Avaliação Avaliação de Código - Pesos dos Elementos  Conceito:  Avalia o tempo de disponibilização da página para o usuário.  Importância:  Verifica quais elementos tem maior impacto para visualização da página. Homem carrega bola pesada e sente dificuldadegovernoeletronico.gov.br
  • 76. Procedimento de Avaliação Avaliação de Código - Pesos dos Elementos Peso dos Elementos das Páginas kB 50 23 % 72 9kB 6kB 78 78 % % 24 68 3kB 25 2kB 22 % 2kB kB 10 kB 10 22 1kB 3% 22 1kB 9% 1% 0% 2% 0% Página Inicial Fale Conosco Documento Imagens Scripts Objetos Folhas de Estilo Gráfico de barras com as informações do peso dos elementos de duas páginas de um sítio.governoeletronico.gov.br
  • 77. Procedimento de Avaliação Avaliação de Código – Demais Indicadores  Urls;  Presença de Quadros;  Title;  Mapa de Caracter (charset);  Utilização SGC;  Folhas de Estilos;  Camada de Comportamento.governoeletronico.gov.br
  • 78. Procedimento de Avaliação Avaliação de Desenho – Padronização Visual  Conceito:  Criação de um vocabulário visual a ser utilizado por todo o sítio;  Presente na recomendação nº 31 do e- MAG 3.0.  Importância:  Orienta o uso da tipografia, da paleta de cores, ícones, posicionamento de elementos.governoeletronico.gov.br
  • 79. Procedimento de Avaliação Avaliação de Desenho – Padronização Visual Comparativo de duas páginas do Ministério da Cultura com relação aogovernoeletronico.gov.br desenho.
  • 80. Procedimento de Avaliação Avaliação de Desenho – Cabeçalho  Conceito:  Primeiro ponto de identificação visual e a âncora da navegação do sítio.  Importância:  Posiciona o usuário sobre o tema e possíveis funcionalidades do sítio.governoeletronico.gov.br
  • 81. Procedimento de Avaliação Avaliação de Desenho – Cabeçalhogovernoeletronico.gov.br cabeçalho. Sítio do Ministério do Turismo com destaque em seu
  • 82. Procedimento de Avaliação Avaliação de Desenho – Diagramação  Conceito:  É a distribuição e organização dos elementos nas páginas;  Presente na recomendação nº 31 do e- MAG 3.0.  Importância:  Posiciona a informação de forma proporcional pelas páginas do sítio.governoeletronico.gov.br
  • 83. Procedimento de Avaliação Avaliação de Desenho – Diagramação Sítio da SPU com destaque para organização do conteúdo em 4 colunas.governoeletronico.gov.br
  • 84. Procedimento de Avaliação Avaliação de Desenho – Demais Indicadores  Identidade Visual;  Paleta de Cores;  Uso de Animação e Recursos Multimídia;  Leiturabilidade.governoeletronico.gov.br
  • 85. Procedimento de Avaliação Avaliação de Acessibilidade – Leitor de Tela  Conceito:  São softwares que identificam textos e objetos apresentados na tela do computador  Importância:  Garante acessibilidade do sítio para pessoas com deficiência visual.governoeletronico.gov.br Tela de computador com leitor de tela ativado
  • 86. Procedimento de Avaliação Avaliação de Acessibilidade – ASES  Conceito:  ASES - Avaliador e Simulador de Acessibilidade para Sítios.  Importância:  Identifica problemas de acessibilidade de forma automática no sítio.governoeletronico.gov.br
  • 87. Procedimento de Avaliação Avaliação de Acessibilidade – ASES Tela do ASES com destaque no relatório de acessibilidade.governoeletronico.gov.br
  • 88. Procedimento de Avaliação Avaliação de Acessibilidade – Navegação por Teclado  Conceito:  Utilizar as teclas <tab, setas, enter, atalhos> para se movimentar pelo sítio;  Presente na recomendação nº 6 do e-MAG 3.0.  Importância:  É utilizada por pessoas para facilitar navegação pelo sítio.governoeletronico.gov.br
  • 89. Procedimento de Avaliação Avaliação de Acessibilidade – Navegação por Teclado Página do sítio da Acessibilidade Brasil com destaque para recursos de navegação pelo teclado.governoeletronico.gov.br
  • 90. Procedimento de Avaliação Avaliação de Acessibilidade – Descrição das Imagens  Conceito:  Consiste na caracterização das imagens contextualizando a informação que a mesma representa;  Presente na recomendação nº 20 do e- MAG 3.0.  Importância:  Permite a contextualização para pessoas que não tenham acesso à imagem.governoeletronico.gov.br
  • 91. Procedimento de Avaliação Avaliação de Acessibilidade – Descrição das Imagens Código HTML <img src=”criança.jpg” alt=”Foto de uma criança cheirando uma flor”/> Exemplo de descrição de imagem no código HTML de uma criança cheirando umaflor.governoeletronico.gov.br
  • 92. Procedimento de Avaliação Avaliação de Acessibilidade – Quebra de Navegação  Conceito:  Desvio da navegação lógica e retirada do foco da informação sem informar ao usuário;  Presente na recomendação nº 9 do e-MAG 3.0.  Importância:  Garante ao usuário sentido lógico para navegação do sítio.governoeletronico.gov.br
  • 93. Procedimento de Avaliação Avaliação de Acessibilidade – Quebra de Navegação Página do sítio do Ministério da Defesa com imagem em destaque “Livro Branco de Defesa Nacional”governoeletronico.gov.br
  • 94. Procedimento de Avaliação Avaliação de Acessibilidade – Quebra de Navegação Página do sítio do Ministério da Defesa sobreposta por outra página.governoeletronico.gov.br
  • 95. Procedimento de Avaliação Avaliação de Acessibilidade – Demais Indicadores  Página de Acessibilidade;  Barra de Acessibilidade;  Mapa do Sítio;  Apresentação dos Formulários;  Apresentação dos Documentos.governoeletronico.gov.br
  • 96. Avaliação de 200 Sítios 10 Erros mais Encontrados Erro I “Os links não apresentam descrições curtas e objetivas ou não identificam o destino ao qual remetem. (95%)”governoeletronico.gov.br
  • 97. Avaliação de 200 Sítios 10 Erros mais Encontrados Erro II “A camada de apresentação não está organizada corretamente. (93%)”governoeletronico.gov.br
  • 98. Avaliação de 200 Sítios 10 Erros mais Encontrados Erro III “Não existe opção de alto contraste ou este não funciona corretamente. (89%)”governoeletronico.gov.br
  • 99. Avaliação de 200 Sítios 10 Erros mais Encontrados Erro IV “As imagens não estão corretamente entiquetadas. (86%)”governoeletronico.gov.br
  • 100. Avaliação de 200 Sítios 10 Erros mais Encontrados Erro V “Há ausência de links indicadores na páginas.(86%)”governoeletronico.gov.br
  • 101. Avaliação de 200 Sítios 10 Erros mais Encontrados Erro VI “A estrutura das páginas não está uniforme.(82%)”governoeletronico.gov.br
  • 102. Avaliação de 200 Sítios 10 Erros mais Encontrados Erro VII “Os títulos não apresentam uma ordem lógica.(80%)”governoeletronico.gov.br
  • 103. Avaliação de 200 Sítios 10 Erros mais Encontrados Erro VIII “Não existem atalhos para facilitar a navegação ou estes não estão descritos corretamente.(78%)”governoeletronico.gov.br
  • 104. Avaliação de 200 Sítios 10 Erros mais Encontrados Erro IX “A leitura das palavras não é compreendida.(77%)”governoeletronico.gov.br
  • 105. Avaliação de 200 Sítios 10 Erros mais Encontrados Erro X “Há tabelas implementadas de forma incorreta.(72%)”governoeletronico.gov.br
  • 106. Consultoria em Governo Eletrônico Localizaçãogovernoeletronico.gov.br
  • 107. Consultoria em Governo Eletrônico Alguns Serviços  Análise de portais da Administração Pública Federal em relação às conformidades com os padrões e-PWG e e-MAG;  Revisões e atualizações de documentos, cartilhas de recomendações e padrões do governo eletrônico;governoeletronico.gov.br
  • 108. Consultoria em Governo Eletrônico Solicitação  Central Serviços e Suporte do SISP (C3S);  Ministério do Planejamento;  http://c3s.sisp.gov.br/cau/governoeletronico.gov.br
  • 109. Dúvidas .governoeletronico.gov.br
  • 110. http://premio.w3c.br/ 19 de dezembrogovernoeletronico.gov.br 115 de 117
  • 111. governoeletronico.gov.br
  • 112. Cesar Bomfim Cesar.bomfim@planejamento.gov.br Fernanda Hoffmann Lobato fernanda.lobato@planejamento.gov.br governoeletronico.gov.br Twitter: @egovbr +55 (61) 2020 1012governoeletronico.gov.br 117 de 117

×