Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Oficina de Avaliação de Sítios

1,425 views

Published on

Oficina de Avaliação de Sítios realizada no evento Acessibilidade Digital - Um direito de Todos. ESAF, 21 de setembro de 2011.

Published in: Technology
  • Be the first to comment

Oficina de Avaliação de Sítios

  1. 1. MINISTÉRIO DO PLANEJAMENTOVários pinos ao redor de um mouse.Como avaliar acessibilidade de seu sítio Arena Code – 24/11/2011 Marca do governo eletrônico
  2. 2. MINISTÉRIO DO PLANEJAMENTO Agenda:• Introdução;• Mundo Feliz;• Avaliação;• Atividade dos Consultores;• Dúvidas. Agenda aberta
  3. 3. MINISTÉRIO DO PLANEJAMENTO Introdução Estatísticas– Brasil (Censo de 2010) • 190 milhões de habitantes; • 45 milhões de pessoas com deficiência.– Mundo (Us. Censu Bureau) • Mais de 750 milhões de pessoas com alguma deficiência. Livro com varios números ao redor
  4. 4. MINISTÉRIO DO PLANEJAMENTO Introdução Tecnologia Assistiva– Mecanismos adotados na produção de ferramentas que auxiliam as pessoas com deficiência executarem funções superando suas limitações.– Permitem qualidade de vida e independência aos deficientes. Estabilizador de Punho para escova de dente
  5. 5. MINISTÉRIO DO PLANEJAMENTO Introdução Tecnologia Assistiva – Produtos adaptados para uso de computadores: Estabilizador de punho Apontador Teclado expandidoMouse de Pressão Leitor de Tela
  6. 6. MINISTÉRIO DO PLANEJAMENTO IntroduçãoAcessibilidade e Usabilidade Tecnologia Assistiva garante acesso? Boneco sentado no símbolo de interrogação
  7. 7. MINISTÉRIO DO PLANEJAMENTO Introdução Acessibilidade e Usabilidade Conceitos“Acessibilidade é tornar todos os serviços, assuntos e publicações tão fáceis de serem utilizados por todas as pessoas, que até esqueceremos que há diferenças.” (Carla Nascimento – frase vencedora do concurso“Jornadas de Conhecimento sobre Acessibilidade na Web”)
  8. 8. MINISTÉRIO DO PLANEJAMENTO Introdução Acessibilidade e Usabilidade Conceitos“Usabilidade é estudo ou aplicação de técnicas que proporcionem a facilidade de uso do objeto.” (Cartilha de Usabilidade dos Padrões Brasil e-GOV ) Canivete Suíço
  9. 9. MINISTÉRIO DO PLANEJAMENTO Introdução Acessibilidade e Usabilidade ExemplosPessoas mais velhas. Uma delas acessa computador e confirma depósito da pensão
  10. 10. MINISTÉRIO DO PLANEJAMENTO Introdução Acessibilidade e Usabilidade ExemplosHomem está lendo um texto, mas não consegue entender o que está escrito
  11. 11. MINISTÉRIO DO PLANEJAMENTO IntroduçãoAcessibilidade e Usabilidade Exemplos Criança está usando o computador com rosto feliz.
  12. 12. MINISTÉRIO DO PLANEJAMENTO IntroduçãoAcessibilidade e Usabilidade Exemplos Homem sentindo dor no punho esquerdo.
  13. 13. MINISTÉRIO DO PLANEJAMENTO IntroduçãoAcessibilidade e Usabilidade Exemplos Homem com muito medo olhando por cima de um notebook
  14. 14. MINISTÉRIO DO PLANEJAMENTO Introdução Acessibilidade e Usabilidade ExemplosÀ esquerda, homem olhando o smartfone. À direita, mulher com expressão de desespero olhando para celular
  15. 15. MINISTÉRIO DO PLANEJAMENTO Introdução Divulgadores de AcessibilidadeQuem define os padrões de Acessibilidade? Figuras de portadores de necessidades especiais sobre uma mão com dedo indicador em riste.
  16. 16. MINISTÉRIO DO PLANEJAMENTO Introdução Divulgadores de Acessibilidade – Mundo • W3C (Consórcio Word Wide Web); • WAI (Iniciativa de Acessibilidade na Web).Representação do consórcio W3C e da Iniciativa de Acessibilidade da WEB (WAI)
  17. 17. MINISTÉRIO DO PLANEJAMENTO Introdução Padrões de Acessibilidade– Mundo • WCAG (Diretrizes de Acessibilidade ao Conteúdo da Web). • Está na versão 2.0. Padrão WCAG 2.0 nos seus níveis (A, AA e AAA).
  18. 18. MINISTÉRIO DO PLANEJAMENTO Introdução Divulgadores de Acessibilidade– Administração Pública Federal • Departamento Governo Eletrônico (Ministério do Planejamento/Secretaria Logística de Tecnologia da Informação). Marca do governo eletrônico
  19. 19. MINISTÉRIO DO PLANEJAMENTO Introdução Padrões de Acessibilidade– Administração Pública Federal • e-MAG (Modelo de Acessibilidade em Governo Eletrônico); • Está na versão 3.0. Marca do Modelo de Acessibilidade em Governo Eletrônico.
  20. 20. MINISTÉRIO DO PLANEJAMENTO Introdução Legislação – Decreto nº 5296, de 8 de dezembro de 2004 – Portaria Nº 3, de 7 de Maio de 2007Brasão da República Federativa do Brasil e a marca do Sistema de Administração dos Recursos de Informação e Informática
  21. 21. MINISTÉRIO DO PLANEJAMENTO IntroduçãoCenso da Web no governo Legislação basta? Vários pinos formando um símbolo de interrogação.
  22. 22. MINISTÉRIO DO PLANEJAMENTO Introdução Censo da Web no governo– Quando ? • Ano de 2010.– Quem realizou pesquisa? • CGI-BR (Comitê Gestor da Internet no Brasil) por meio da entidade NIC.BR (Núcleo de Informação e Coordenação de Ponto no Brasil). Marca do CGI.BR Marca do NIC.BR
  23. 23. MINISTÉRIO DO PLANEJAMENTO Introdução Censo da Web no governo– O que é ? • Estudo para conhecer e entender a Internet brasileira nos sítios hospedados sob o domínio gov.br.– Resultado ? • Das 6,3 milhões de páginas HTML coletadas, 98% não apresentaram aderência aos padrões de acessibilidade.Marca do CGI.BR Marca do NIC.BR
  24. 24. MINISTÉRIO DO PLANEJAMENTO IntroduçãoMitos da Acessibilidade É tão difícil assim? Corda com vários nós entrelaçados
  25. 25. MINISTÉRIO DO PLANEJAMENTO IntroduçãoMitos da Acessibilidade Mito I “Acessibilidade Web é só para deficientes visuais.”Homem com deficiência visual acessando computador
  26. 26. MINISTÉRIO DO PLANEJAMENTO Introdução Mitos da Acessibilidade Mito II “Número de usuários beneficiados é relativamente pequeno.”Pessoas da escola Alto da Glória ao redor de aparelhos eletrônicos
  27. 27. MINISTÉRIO DO PLANEJAMENTO Introdução Mitos da Acessibilidade Mito III“Fazer sítio acessível demora e custa caro.” Homem levando um carrinho de mão cheio de dinheiro
  28. 28. MINISTÉRIO DO PLANEJAMENTO Introdução Mitos da Acessibilidade Mito IV “Fazer página específica para deficiente visual.”Bonecos na cor cinza e um boneco na cor vermelha juntos.
  29. 29. MINISTÉRIO DO PLANEJAMENTO IntroduçãoMitos da Acessibilidade Mito V“Sítio acessível não é bonito.” Uma rosa sobre a barriga de uma mulher.
  30. 30. MINISTÉRIO DO PLANEJAMENTO Introdução Mitos da Acessibilidade Mito VI “Fazemos o sítio depois aplicamos a acessibilidade.”Seis bonecos segurando, em pares, os seguintes símbolos da Internet: http://, WWW, .COM.
  31. 31. MINISTÉRIO DO PLANEJAMENTO IntroduçãoMitos da Acessibilidade Mito VII“Sabemos o que é bom para o usuário.” Homem desenhando um organograma.
  32. 32. MINISTÉRIO DO PLANEJAMENTO Introdução Equívoco“Meu sítio direciona-se à um públicoespecífico; ele não interessa a todos os usuários.” Quatro bonecos juntos representando um conjunto.
  33. 33. MINISTÉRIO DO PLANEJAMENTO Mundo Feliz Como fazer então ? Homem expressando muitas dúvidas.
  34. 34. MINISTÉRIO DO PLANEJAMENTO Mundo Feliz Planejamento do Sítio– Estudar as necessidades para construção do sítio;– Seguir a legislação: • IN nº 04 de 12 de novembro de 2010, art.11.– Conferir a entrega: • Homologação com técnicas e ferramentas corretas. Mulher segura uma lâmpada que está na lateral da cabeça.
  35. 35. MINISTÉRIO DO PLANEJAMENTO AvaliaçãoComo saber se o sítio está acessível ? Boneco ao lado do símbolo de interrogação em cor vermelha.
  36. 36. MINISTÉRIO DO PLANEJAMENTO Avaliação Conceito– “Ação que envolve aspectos de caráter epistemológico (conhecimento), político, ético e cultural.”;– “Opera com referências valorativas.”;– “Relação com uma visão de mundo.”. Universidade Federal de Campina Grande Lupa ampliando um gráfico de barras
  37. 37. MINISTÉRIO DO PLANEJAMENTO 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).
  38. 38. MINISTÉRIO DO PLANEJAMENTO Avaliação de Código, deDesenho e de Acessibilidade Como fazer ? Cinco pessoas seguram pedra gigante.
  39. 39. MINISTÉRIO DO PLANEJAMENTO Avaliação Ferramentas● ASES;● Leitores de Tela (Dos/Vox , NVDA);● Extensões do Navegador Firefox: – WebDeveloper; – Yslow; – Color Checker; – Fangs; – FireBug Caixa com várias ferramentas dentro
  40. 40. MINISTÉRIO DO PLANEJAMENTO Avaliação de Código Doctype– Conceito: • Especifica as regras para a codificação da página;– Importância: • Permite qualquer navegador processar e organizar conteúdo de forma correta no sítio.
  41. 41. MINISTÉRIO DO PLANEJAMENTO Avaliação de Código DoctypeCódigo HTML com tag doctype XHTML 1.1 transitional
  42. 42. MINISTÉRIO DO PLANEJAMENTO 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.
  43. 43. MINISTÉRIO DO PLANEJAMENTO Avaliação de Código Declaração do IdiomaCódigo HTML com atributo lang para idioma português do Brasil (pt-br).
  44. 44. MINISTÉRIO DO PLANEJAMENTO Avaliação de Código Indepêndencia de Navegadores– Conceito: • Manter o comportamento e estrutura do sítio de forma similar em vários navegadores.– 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 Chrome
  45. 45. MINISTÉRIO DO PLANEJAMENTO 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.
  46. 46. MINISTÉRIO DO PLANEJAMENTO Avaliação de Código HTML SemânticoSítio do Web Acessibility Iniciative com as tags HTML de cabeçalho destacadas.
  47. 47. MINISTÉRIO DO PLANEJAMENTO Avaliação do Código Peso 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 dificuldade
  48. 48. MINISTÉRIO DO PLANEJAMENTO Avaliação do Código Peso dos Elementos Peso dos Elementos das Páginas kB 50 23 % 72 B B 9k 6k 78 78 2 4% 6 8% B 3k B 25 B 2k % 2k 10 22 10 kB B kB B 22 1k 3% 22 1k 9 % 1% 0% 2% 0% Página Inicial Fale Conosco Documento Imagens Scripts Objetos Folhas de EstiloGráfico de barras com as informações do peso dos elementos de duas páginas de um sítio.
  49. 49. MINISTÉRIO DO PLANEJAMENTO 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.
  50. 50. MINISTÉRIO DO PLANEJAMENTO Avaliação de Desenho Padronização VisualComparativo de duas páginas do Ministério da Cultura com relação ao desenho.
  51. 51. MINISTÉRIO DO PLANEJAMENTO 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.
  52. 52. MINISTÉRIO DO PLANEJAMENTO Avaliação de Desenho CabeçalhoSítio do Ministério do Turismo com destaque em seu cabeçalho.
  53. 53. MINISTÉRIO DO PLANEJAMENTO 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.
  54. 54. MINISTÉRIO DO PLANEJAMENTO Avaliação de Desenho DiagramaçãoSítio da SPU com destaque para organização do conteúdo em 4 colunas.
  55. 55. MINISTÉRIO DO PLANEJAMENTO 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. Tela de computador com leitor de tela ativado
  56. 56. MINISTÉRIO DO PLANEJAMENTO Avaliação de Acessibilidade Software ASES– Conceito: • ASES - Avaliador e Simulador de Acessibilidade para Sítios.– Importância: • Identifica problemas de acessibilidade de forma automática no sítio.
  57. 57. MINISTÉRIO DO PLANEJAMENTOAvaliação de Acessibilidade Software ASESTela do ASES com destaque no relatório de acessibilidade.
  58. 58. MINISTÉRIO DO PLANEJAMENTO Avaliação de Acessibilidade Navegação por Teclado– Conceito: • Utilizar as teclas para 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.
  59. 59. MINISTÉRIO DO PLANEJAMENTO Avaliação de Acessibilidade Navegação por TecladoPágina do sítio da Acessibilidade Brasil com destaque para recursos de navegação pelo teclado.
  60. 60. MINISTÉRIO DO PLANEJAMENTO Avaliação de Acessibilidade Descrição das imagens– Conceito: • Consiste na caracterização de imagens particularizando o que deseja ser ressaltado; • 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.
  61. 61. MINISTÉRIO DO PLANEJAMENTO 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 uma flor.
  62. 62. MINISTÉRIO DO PLANEJAMENTO 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.
  63. 63. MINISTÉRIO DO PLANEJAMENTO Avaliação de Acessibilidade Quebra de NavegaçãoPágina do sítio do Ministério da Defesa com imagem em destaque “Livro Branco de Defesa Nacional”
  64. 64. MINISTÉRIO DO PLANEJAMENTO Avaliação de Acessibilidade Quebra de NavegaçãoPágina do sítio do Ministério da Defesa sobreposta por outra página.
  65. 65. MINISTÉRIO DO PLANEJAMENTO Atividades dos Consultores LocalizaçãoFigura de corvos organizados em puleiro e Organograma com hierarquia dos consultores do DGE: MP, SLTI, DGE e Consultores.
  66. 66. MINISTÉRIO DO PLANEJAMENTO Atividades dos Consultores Atribuições● Análise de portais da Administração Pública Federal em relação à conformidade com padrões e-PWG e e-MAG; Papel com lista de atividades
  67. 67. MINISTÉRIO DO PLANEJAMENTO Atividades dos Consultores Atribuições● Revisões e atualizações de documentos, cartilhas de recomendações e padrões do governo eletrônico; Papel com lista de atividades
  68. 68. MINISTÉRIO DO PLANEJAMENTO Atividade dos Consultores Solicitação– Central Serviços e Suporte do SISP (C3S);– Ministério do Planejamento;– http://c3s.sisp.gov.br/cau/ Sítio do C3S para solicitação das atividades dos consultores.
  69. 69. MINISTÉRIO DO PLANEJAMENTO Dúvidas .Vários papéis com símbolo de interrogação impresso.
  70. 70. MINISTÉRIO DO PLANEJAMENTO Helder Medeiros . Cesar Bomfim Departamento de Governo Eletrônico Secretaria de Logística e Tecnologia da Informação Ministério do Planejamento, Orçamento e Gestão @egovbr (twitter) www.governoeletronico.gov.br acessibilidade@planejamento.gov.br govbr@planejamento.gov.br +55 (61) 2020 1012

×