Avaliação de Acessibilidade   em Sítios           Ministério do Planejamento, Orçamento e Gestão           Secretaria de L...
O Departamento de Governo Eletrônico      Implantar de forma unificada serviços por meios eletrônicos     no governo fede...
Agenda:      Introdução;      Dados do Governo na WEB;      O e-MAG: Modelo de Acessibilidade em Governo     Eletrônico...
As pessoas com deficiência             Falta cidadania – foto de Milton Jung             Carros estacionados em vagas espe...
Quantos somos  24% da população brasileira  45.623.910 pessoas  35.791.488 deficiente visual                           (Ce...
Como somos Deficiência física    Alteração completa ou parcial de um ou mais segmentos do corpo, com comprometimento da f...
Como somos Deficiência auditiva A deficiência auditiva se caracteriza pela perda parcial ou total das possibilidades audit...
Como somos Deficiência múltipla Associação entre diferentes deficiências, com possibilidades bastante amplas de combinaçõe...
Então, Pare e Pense !!!    Você acha que os recursos de acessibilidade    ajudam apenas as pessoas com deficiência?governo...
Acessibilidade é para todosgovernoeletronico.gov.br
governoeletronico.gov.br
governoeletronico.gov.br   14 de 117
Início de aprendizadoNosso primeiro contato
Idade Avançada  Nós, daqui    alguns     anos                       Foto: Flickr.com - Jacob Bøttergovernoeletronico.gov.br
Medo                                        de usar o                                        computadorFoto: everystockpho...
Motivos pelos quais nunca utilizou a internet 57% Falta de habilidade com o computador/internet Fonte: Pesquisa TIC Domicí...
Dados do Governo Na Web      Preocupação com proteção e segurança dos dados pessoais (39%)      Dificuldade em encontrar...
Dados do Governo Na Web        88% - “Muito importante” que um       Gráfico de pizza                                    ...
Dados do Governo Na Web Cenário Atual Escolheria internet como forma de acessar serviços públicos? 56% - Sim 37% - Não    ...
Porque não Desenvolvemos  web sites acessíveis?  Algumas Hipóteses:governoeletronico.gov.br   23 de 117
Não é por Falta de Legislação (...o tamanho pequeno é proposital)  Lei Nº 10.098, de 19 de dezembro de 2000  Estabelece no...
Desconhecimentogovernoeletronico.gov.br   25 de 117
Preconceitogovernoeletronico.gov.br   26 de 117
Preguiçagovernoeletronico.gov.br   27 de 117
Mitos         É tão difícil assim?governoeletronico.gov.br
7 mitos e 1 equívoco por Leda Spelta Mito 1   "Acessibilidade Web é só para deficientes                   visuais." Temor ...
7 mitos e 1 equívoco por Leda Spelta Mito 2       "Na prática, o número de usuários      beneficiados com a acessibilidade...
O google apenas vê o código. Se    o seu código é acessivel é mais      fácil do Google encontrá-logovernoeletronico.gov.b...
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 empr...
7 mitos e 1 equívoco por Leda Spelta Mito 4   "É melhor fazer uma página especial para           os deficientes visuais." ...
7 mitos e 1 equívoco por Leda Spelta Mito 5  "Um site acessível a deficientes visuais não é                     bonito." T...
governoeletronico.gov.br   35 de 117
7 mitos e 1 equívoco por Leda Spelta Mito 6  “Vamos por partes: primeiro fazemos o site,       depois fazemos acessibilida...
governoeletronico.gov.br   37 de 117
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...
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 tod...
governoeletronico.gov.br   40 de 117
Pequenos testes, grandes descobertasgovernoeletronico.gov.br           41 de 117
Já testou o seu site?       Acessível via teclado                         Foto: Flickr.com - Baddog_governoeletronico.gov.br
governoeletronico.gov.br
Cabeçalhos  <H1>Título Principal</H1>     <H2>Subtítulo</H2>         <H3>Sub-Subtítulo</H3>      <H2>Subtítulo</H2>       ...
governoeletronico.gov.br
Pesquisa sobre uso de Tecnologias Assistivas: Ampliadores e leitores de tela  http://acessibilidade.w3c.br/pesquisa/govern...
Pesquisa sobre uso de Tecnologias Assistivas: Ampliadores e leitores de tela  http://acessibilidade.w3c.br/pesquisa/govern...
Pesquisa sobre uso de Tecnologias Assistivas: Ampliadores e leitores de tela  http://acessibilidade.w3c.br/pesquisa/govern...
Pesquisa sobre uso de Tecnologias Assistivas: Ampliadores e leitores de tela  http://acessibilidade.w3c.br/pesquisa/govern...
http://acessibilidade.w3c.br/pesquisa/governoeletronico.gov.br
O e-MAG 3.0 Código acessível      Conteúdo alternativo para elementos não-textuais;      Dados de tabelas acessíveis;  ...
O e-MAG 3.0 Código acessível      Programação em camadas;      Não usar tabelas para diagramar;      Não utilizar frame...
e-MAG 3.0                                                  Aprendizados com a versão 2.0;                               ...
O e-MAG 3.0 Recomendações de acessibilidade ●     Divisão: 6 seções; ●     Total de 45 recomendações (Todas são importante...
O e-MAG 3.0 Recomendações de acessibilidade  1 – Marcação (9)  1 – respeitar os padrões de desenvolvimento web  2 – organi...
O e-MAG 3.0 Recomendações de acessibilidade  2 - Comportamento (6)                    (6  10 – garantir que os objetos pro...
O e-MAG 3.0 Recomendações de acessibilidade 3 – Conteúdo/Informação (12)                         (  16 – identificar o idi...
O e-MAG 3.0 Recomendações de acessibilidade  4 – Apresentação/Design (5) 28 - oferecer contraste mínimo entre plano de fun...
O e-MAG 3.0 Recomendações de acessibilidade  5 – Multimídia (5)                 (5  33 – fornecer alternativa para vídeo  ...
O e-MAG 3.0 Recomendações de acessibilidade  6 – Formulários (8)                  (  38 – fornecer alternativa em texto pa...
O e-MAG 3.0 Itens Padrões para o Governo Federal              1.Página com a descrição dos recursos de              acessi...
Apoio, ferramentas e disseminação                 - Cursos em EAD                 - Tutoriais                 - Pesquisas ...
Comunidades ASES no Software         Público – cerca de 2442         membros.governoeletronico.gov.br
Procedimento de Avaliação     Como saber se o sítio está acessível ?governoeletronico.gov.br
Procedimento de Avaliação Fluxo de validação: ●   Validar HTML e CSS (validador w3c); ●   Validar fluxo de leitura da pági...
Procedimento de Avaliação           Como fazer ?governoeletronico.gov.br
Procedimento de Avaliação Consultores em Governo Eletrônico do DGEgovernoeletronico.gov.br
Procedimento de Avaliação Estrutura:            Análise de Código: Avalia qualidade e        semântica da codificação do ...
Procedimento de Avaliação Escopo:            Página principal;            Página Secundária;            Página de Servi...
Procedimento de Avaliação Ferramentas:      ASES;      Leitores de Tela (Dos/Vox , NVDA);      Extensões do Navegador F...
Procedimento de Avaliação Avaliação de Código - Doctype              Conceito:                          Especifica as re...
Procedimento de Avaliação Avaliação de Código - Doctype     Código HTML com tag doctype XHTML 1.1 transitionalgovernoeletr...
Procedimento de Avaliação Avaliação de Código - Declaração do Idioma        Conceito:                          O atríbut...
Procedimento de Avaliação Avaliação de Código - Declaração do Idioma Código HTML com atributo lang para idioma português d...
Procedimento de Avaliação Avaliação de Código - Independência de Dispositivos                    Conceito:               ...
Procedimento de Avaliação Avaliação de Código - HTML Semântico              Conceito:                            Utiliza...
Procedimento de Avaliação Avaliação de Código - HTML Semântico Sítio do Web Acessibility Iniciative com as tags HTML de ca...
Procedimento de Avaliação Avaliação de Código - Pesos dos Elementos              Conceito:                            Av...
Procedimento de Avaliação  Avaliação de Código - Pesos dos Elementos                                                 Peso ...
Procedimento de Avaliação Avaliação de Código – Demais Indicadores              Urls;              Presença de Quadros; ...
Procedimento de Avaliação  Avaliação de Desenho – Padronização Visual              Conceito:                            ...
Procedimento de Avaliação   Avaliação de Desenho – Padronização Visual Comparativo de duas páginas do Ministério da Cultur...
Procedimento de Avaliação  Avaliação de Desenho – Cabeçalho              Conceito:                          Primeiro pon...
Procedimento de Avaliação    Avaliação de Desenho – Cabeçalhogovernoeletronico.gov.br cabeçalho.    Sítio do Ministério do...
Procedimento de Avaliação  Avaliação de Desenho – Diagramação              Conceito:                            É a dist...
Procedimento de Avaliação  Avaliação de Desenho – Diagramação  Sítio da SPU com destaque para organização do conteúdo em 4...
Procedimento de Avaliação Avaliação de Desenho – Demais Indicadores              Identidade Visual;              Paleta ...
Procedimento de Avaliação  Avaliação de Acessibilidade – Leitor de Tela              Conceito:                          ...
Procedimento de Avaliação  Avaliação de Acessibilidade – ASES                Conceito:                            ASES -...
Procedimento de Avaliação  Avaliação de Acessibilidade – ASES       Tela do ASES com destaque no relatório de acessibilida...
Procedimento de Avaliação  Avaliação de Acessibilidade – Navegação por Teclado                Conceito:                 ...
Procedimento de Avaliação  Avaliação de Acessibilidade – Navegação por Teclado  Página do sítio da Acessibilidade Brasil c...
Procedimento de Avaliação  Avaliação de Acessibilidade – Descrição das Imagens              Conceito:                   ...
Procedimento de Avaliação    Avaliação de Acessibilidade – Descrição das Imagens                                      Códi...
Procedimento de Avaliação  Avaliação de Acessibilidade – Quebra de Navegação                Conceito:                   ...
Procedimento de Avaliação  Avaliação de Acessibilidade – Quebra de Navegação   Página do sítio do Ministério da Defesa com...
Procedimento de Avaliação  Avaliação de Acessibilidade – Quebra de Navegação    Página do sítio do Ministério da Defesa so...
Procedimento de Avaliação Avaliação de Acessibilidade – Demais Indicadores              Página de Acessibilidade;       ...
Avaliação de 200 Sítios 10 Erros mais Encontrados                      Erro I           “Os links não apresentam descriçõe...
Avaliação de 200 Sítios 10 Erros mais Encontrados                      Erro II        “A camada de apresentação não está  ...
Avaliação de 200 Sítios 10 Erros mais Encontrados                     Erro III           “Não existe opção de alto contras...
Avaliação de 200 Sítios 10 Erros mais Encontrados                     Erro IV           “As imagens não estão corretamente...
Avaliação de 200 Sítios 10 Erros mais Encontrados                      Erro V            “Há ausência de links indicadores...
Avaliação de 200 Sítios 10 Erros mais Encontrados                     Erro VI             “A estrutura das páginas não est...
Avaliação de 200 Sítios 10 Erros mais Encontrados                    Erro VII            “Os títulos não apresentam uma   ...
Avaliação de 200 Sítios 10 Erros mais Encontrados                     Erro VIII            “Não existem atalhos para facil...
Avaliação de 200 Sítios 10 Erros mais Encontrados                     Erro IX               “A leitura das palavras não é ...
Avaliação de 200 Sítios 10 Erros mais Encontrados                     Erro X           “Há tabelas implementadas de forma ...
Consultoria em Governo Eletrônico Localizaçãogovernoeletronico.gov.br
Consultoria em Governo Eletrônico Alguns Serviços                Análise de portais da Administração Pública Federal em  ...
Consultoria em Governo Eletrônico Solicitação                Central Serviços e Suporte do SISP (C3S);                Mi...
Dúvidas .governoeletronico.gov.br
http://premio.w3c.br/           19 de dezembrogovernoeletronico.gov.br           115 de 117
governoeletronico.gov.br
Cesar Bomfim                 Cesar.bomfim@planejamento.gov.br                  Fernanda Hoffmann Lobato                   ...
Upcoming SlideShare
Loading in …5
×

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

1,502 views

Published on

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
1,502
On SlideShare
0
From Embeds
0
Number of Embeds
123
Actions
Shares
0
Downloads
35
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 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. 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. 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. 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. 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. 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. 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. 8. Como somos Deficiência múltipla Associação entre diferentes deficiências, com possibilidades bastante amplas de combinações.governoeletronico.gov.br
  9. 9. Então, Pare e Pense !!! Você acha que os recursos de acessibilidade ajudam apenas as pessoas com deficiência?governoeletronico.gov.br
  10. 10. Acessibilidade é para todosgovernoeletronico.gov.br
  11. 11. governoeletronico.gov.br
  12. 12. governoeletronico.gov.br 14 de 117
  13. 13. Início de aprendizadoNosso primeiro contato
  14. 14. Idade Avançada Nós, daqui alguns anos Foto: Flickr.com - Jacob Bøttergovernoeletronico.gov.br
  15. 15. Medo de usar o computadorFoto: everystockphoto.com - Violator3
  16. 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. 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. 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. 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. 20. Porque não Desenvolvemos web sites acessíveis? Algumas Hipóteses:governoeletronico.gov.br 23 de 117
  21. 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. 22. Desconhecimentogovernoeletronico.gov.br 25 de 117
  23. 23. Preconceitogovernoeletronico.gov.br 26 de 117
  24. 24. Preguiçagovernoeletronico.gov.br 27 de 117
  25. 25. Mitos É tão difícil assim?governoeletronico.gov.br
  26. 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. 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. 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. 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. 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. 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. 32. governoeletronico.gov.br 35 de 117
  33. 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. 34. governoeletronico.gov.br 37 de 117
  35. 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. 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. 37. governoeletronico.gov.br 40 de 117
  38. 38. Pequenos testes, grandes descobertasgovernoeletronico.gov.br 41 de 117
  39. 39. Já testou o seu site? Acessível via teclado Foto: Flickr.com - Baddog_governoeletronico.gov.br
  40. 40. governoeletronico.gov.br
  41. 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. 42. governoeletronico.gov.br
  43. 43. Pesquisa sobre uso de Tecnologias Assistivas: Ampliadores e leitores de tela http://acessibilidade.w3c.br/pesquisa/governoeletronico.gov.br
  44. 44. Pesquisa sobre uso de Tecnologias Assistivas: Ampliadores e leitores de tela http://acessibilidade.w3c.br/pesquisa/governoeletronico.gov.br
  45. 45. Pesquisa sobre uso de Tecnologias Assistivas: Ampliadores e leitores de tela http://acessibilidade.w3c.br/pesquisa/governoeletronico.gov.br
  46. 46. Pesquisa sobre uso de Tecnologias Assistivas: Ampliadores e leitores de tela http://acessibilidade.w3c.br/pesquisa/governoeletronico.gov.br
  47. 47. http://acessibilidade.w3c.br/pesquisa/governoeletronico.gov.br
  48. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 59. Apoio, ferramentas e disseminação - Cursos em EAD - Tutoriais - Pesquisas - CMS Suindara - ASES - Checklists - Consultores SISPgovernoeletronico.gov.br
  60. 60. Comunidades ASES no Software Público – cerca de 2442 membros.governoeletronico.gov.br
  61. 61. Procedimento de Avaliação Como saber se o sítio está acessível ?governoeletronico.gov.br
  62. 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. 63. Procedimento de Avaliação Como fazer ?governoeletronico.gov.br
  64. 64. Procedimento de Avaliação Consultores em Governo Eletrônico do DGEgovernoeletronico.gov.br
  65. 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. 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. 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. 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. 69. Procedimento de Avaliação Avaliação de Código - Doctype Código HTML com tag doctype XHTML 1.1 transitionalgovernoeletronico.gov.br
  70. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 87. Procedimento de Avaliação Avaliação de Acessibilidade – ASES Tela do ASES com destaque no relatório de acessibilidade.governoeletronico.gov.br
  88. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 105. Avaliação de 200 Sítios 10 Erros mais Encontrados Erro X “Há tabelas implementadas de forma incorreta.(72%)”governoeletronico.gov.br
  106. 106. Consultoria em Governo Eletrônico Localizaçãogovernoeletronico.gov.br
  107. 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. 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. 109. Dúvidas .governoeletronico.gov.br
  110. 110. http://premio.w3c.br/ 19 de dezembrogovernoeletronico.gov.br 115 de 117
  111. 111. governoeletronico.gov.br
  112. 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

×