MINISTÉRIO DO PLANEJAMENTO




Vários pinos ao redor de um mouse.
Como avaliar acessibilidade de
          seu sítio
                          Arena Code – 24/11/2011




                                              Marca do governo eletrônico
MINISTÉRIO DO PLANEJAMENTO
                   Agenda:
• Introdução;
• Mundo Feliz;
• Avaliação;
• Atividade dos Consultores;
• Dúvidas.



                               Agenda aberta
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
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
MINISTÉRIO DO PLANEJAMENTO

                       Introdução
                   Tecnologia Assistiva
 – Produtos adaptados para uso de computadores:




                           Estabilizador de punho   Apontador
     Teclado expandido




Mouse de Pressão
                                                        Leitor de Tela
MINISTÉRIO DO PLANEJAMENTO

         Introdução
Acessibilidade e Usabilidade
 Tecnologia Assistiva garante acesso?




     Boneco sentado no símbolo de interrogação
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”)
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
MINISTÉRIO DO PLANEJAMENTO
                 Introdução
        Acessibilidade e Usabilidade
                  Exemplos




Pessoas mais velhas. Uma delas acessa computador e confirma depósito da pensão
MINISTÉRIO DO PLANEJAMENTO
             Introdução
    Acessibilidade e Usabilidade
              Exemplos




Homem está lendo um texto, mas não consegue entender o que está escrito
MINISTÉRIO DO PLANEJAMENTO
         Introdução
Acessibilidade e Usabilidade
          Exemplos




   Criança está usando o computador com rosto feliz.
MINISTÉRIO DO PLANEJAMENTO
         Introdução
Acessibilidade e Usabilidade
          Exemplos




    Homem sentindo dor no punho esquerdo.
MINISTÉRIO DO PLANEJAMENTO
         Introdução
Acessibilidade e Usabilidade
          Exemplos




 Homem com muito medo olhando por cima de um notebook
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
MINISTÉRIO DO PLANEJAMENTO

           Introdução
  Divulgadores de Acessibilidade

Quem define os padrões de Acessibilidade?




  Figuras de portadores de necessidades especiais sobre uma
  mão com dedo indicador em riste.
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)
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).
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
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.
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 2007




Brasão da República Federativa do Brasil e a marca do Sistema de Administração dos
                      Recursos de Informação e Informática
MINISTÉRIO DO PLANEJAMENTO

       Introdução
Censo da Web no governo
        Legislação basta?




 Vários pinos formando um símbolo de interrogação.
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
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
MINISTÉRIO DO PLANEJAMENTO

      Introdução
Mitos da Acessibilidade
   É tão difícil assim?




    Corda com vários nós entrelaçados
MINISTÉRIO DO PLANEJAMENTO

      Introdução
Mitos da Acessibilidade
                   Mito I
  “Acessibilidade Web é só para
      deficientes visuais.”




Homem com deficiência visual acessando computador
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
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
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.
MINISTÉRIO DO PLANEJAMENTO

      Introdução
Mitos da Acessibilidade
             Mito V
“Sítio acessível não é bonito.”




    Uma rosa sobre a barriga de uma mulher.
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.
MINISTÉRIO DO PLANEJAMENTO

      Introdução
Mitos da Acessibilidade
         Mito VII
“Sabemos o que é bom para o
        usuário.”




    Homem desenhando um organograma.
MINISTÉRIO DO PLANEJAMENTO

               Introdução
                Equívoco
“Meu sítio direciona-se à um público
específico; ele não interessa a todos os
               usuários.”




     Quatro bonecos juntos representando um conjunto.
MINISTÉRIO DO PLANEJAMENTO

     Mundo Feliz
 Como fazer então ?




   Homem expressando muitas dúvidas.
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.
MINISTÉRIO DO PLANEJAMENTO

                 Avaliação

Como saber se o sítio está acessível ?




   Boneco ao lado do símbolo de interrogação em cor vermelha.
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
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).
MINISTÉRIO DO PLANEJAMENTO
 Avaliação de Código, de
Desenho e de Acessibilidade
      Como fazer ?




     Cinco pessoas seguram pedra gigante.
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
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.
MINISTÉRIO DO PLANEJAMENTO

   Avaliação de Código
         Doctype




Código HTML com tag doctype XHTML 1.1 transitional
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.
MINISTÉRIO DO PLANEJAMENTO

            Avaliação de Código
            Declaração do Idioma




Código HTML com atributo lang para idioma português do Brasil (pt-br).
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
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.
MINISTÉRIO DO PLANEJAMENTO

              Avaliação de Código
               HTML Semântico




Sítio do Web Acessibility Iniciative com as tags HTML de cabeçalho destacadas.
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
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 Estilo


Gráfico de barras com as informações do peso dos elementos de duas páginas de
                                  um sítio.
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.
MINISTÉRIO DO PLANEJAMENTO

               Avaliação de Desenho
                Padronização Visual




Comparativo de duas páginas do Ministério da Cultura com relação ao desenho.
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.
MINISTÉRIO DO PLANEJAMENTO

       Avaliação de Desenho
            Cabeçalho




Sítio do Ministério do Turismo com destaque em seu cabeçalho.
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.
MINISTÉRIO DO PLANEJAMENTO

           Avaliação de Desenho
               Diagramação




Sítio da SPU com destaque para organização do conteúdo em 4 colunas.
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
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.
MINISTÉRIO DO PLANEJAMENTO
Avaliação de Acessibilidade
      Software ASES




Tela do ASES com destaque no relatório de acessibilidade.
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.
MINISTÉRIO DO PLANEJAMENTO
    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.
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.
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.
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.
MINISTÉRIO DO PLANEJAMENTO
           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”
MINISTÉRIO DO PLANEJAMENTO
  Avaliação de Acessibilidade
    Quebra de Navegação




Página do sítio do Ministério da Defesa sobreposta por outra página.
MINISTÉRIO DO PLANEJAMENTO
     Atividades dos Consultores
            Localização




Figura de corvos organizados em puleiro e Organograma com hierarquia dos
            consultores do DGE: MP, SLTI, DGE e Consultores.
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
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
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.
MINISTÉRIO DO PLANEJAMENTO

                 Dúvidas

             .




Vários papéis com símbolo de interrogação impresso.
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
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios
Oficina de Avaliação de Sítios

Oficina de Avaliação de Sítios

  • 1.
    MINISTÉRIO DO PLANEJAMENTO Váriospinos ao redor de um mouse. Como avaliar acessibilidade de seu sítio Arena Code – 24/11/2011 Marca do governo eletrônico
  • 2.
    MINISTÉRIO DO PLANEJAMENTO Agenda: • Introdução; • Mundo Feliz; • Avaliação; • Atividade dos Consultores; • Dúvidas. Agenda aberta
  • 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.
    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.
    MINISTÉRIO DO PLANEJAMENTO Introdução Tecnologia Assistiva – Produtos adaptados para uso de computadores: Estabilizador de punho Apontador Teclado expandido Mouse de Pressão Leitor de Tela
  • 6.
    MINISTÉRIO DO PLANEJAMENTO Introdução Acessibilidade e Usabilidade Tecnologia Assistiva garante acesso? Boneco sentado no símbolo de interrogação
  • 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.
    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.
    MINISTÉRIO DO PLANEJAMENTO Introdução Acessibilidade e Usabilidade Exemplos Pessoas mais velhas. Uma delas acessa computador e confirma depósito da pensão
  • 10.
    MINISTÉRIO DO PLANEJAMENTO Introdução Acessibilidade e Usabilidade Exemplos Homem está lendo um texto, mas não consegue entender o que está escrito
  • 11.
    MINISTÉRIO DO PLANEJAMENTO Introdução Acessibilidade e Usabilidade Exemplos Criança está usando o computador com rosto feliz.
  • 12.
    MINISTÉRIO DO PLANEJAMENTO Introdução Acessibilidade e Usabilidade Exemplos Homem sentindo dor no punho esquerdo.
  • 13.
    MINISTÉRIO DO PLANEJAMENTO Introdução Acessibilidade e Usabilidade Exemplos Homem com muito medo olhando por cima de um notebook
  • 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.
    MINISTÉRIO DO PLANEJAMENTO Introdução Divulgadores de Acessibilidade Quem define os padrões de Acessibilidade? Figuras de portadores de necessidades especiais sobre uma mão com dedo indicador em riste.
  • 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.
    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.
    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.
    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.
    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 2007 Brasão da República Federativa do Brasil e a marca do Sistema de Administração dos Recursos de Informação e Informática
  • 21.
    MINISTÉRIO DO PLANEJAMENTO Introdução Censo da Web no governo Legislação basta? Vários pinos formando um símbolo de interrogação.
  • 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.
    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.
    MINISTÉRIO DO PLANEJAMENTO Introdução Mitos da Acessibilidade É tão difícil assim? Corda com vários nós entrelaçados
  • 25.
    MINISTÉRIO DO PLANEJAMENTO Introdução Mitos da Acessibilidade Mito I “Acessibilidade Web é só para deficientes visuais.” Homem com deficiência visual acessando computador
  • 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.
    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.
    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.
    MINISTÉRIO DO PLANEJAMENTO Introdução Mitos da Acessibilidade Mito V “Sítio acessível não é bonito.” Uma rosa sobre a barriga de uma mulher.
  • 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.
    MINISTÉRIO DO PLANEJAMENTO Introdução Mitos da Acessibilidade Mito VII “Sabemos o que é bom para o usuário.” Homem desenhando um organograma.
  • 32.
    MINISTÉRIO DO PLANEJAMENTO Introdução Equívoco “Meu sítio direciona-se à um público específico; ele não interessa a todos os usuários.” Quatro bonecos juntos representando um conjunto.
  • 33.
    MINISTÉRIO DO PLANEJAMENTO Mundo Feliz Como fazer então ? Homem expressando muitas dúvidas.
  • 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.
    MINISTÉRIO DO PLANEJAMENTO Avaliação Como saber se o sítio está acessível ? Boneco ao lado do símbolo de interrogação em cor vermelha.
  • 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.
    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.
    MINISTÉRIO DO PLANEJAMENTO Avaliação de Código, de Desenho e de Acessibilidade Como fazer ? Cinco pessoas seguram pedra gigante.
  • 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.
    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.
    MINISTÉRIO DO PLANEJAMENTO Avaliação de Código Doctype Código HTML com tag doctype XHTML 1.1 transitional
  • 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.
    MINISTÉRIO DO PLANEJAMENTO Avaliação de Código Declaração do Idioma Código HTML com atributo lang para idioma português do Brasil (pt-br).
  • 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.
    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.
    MINISTÉRIO DO PLANEJAMENTO Avaliação de Código HTML Semântico Sítio do Web Acessibility Iniciative com as tags HTML de cabeçalho destacadas.
  • 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.
    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 Estilo Gráfico de barras com as informações do peso dos elementos de duas páginas de um sítio.
  • 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.
    MINISTÉRIO DO PLANEJAMENTO Avaliação de Desenho Padronização Visual Comparativo de duas páginas do Ministério da Cultura com relação ao desenho.
  • 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.
    MINISTÉRIO DO PLANEJAMENTO Avaliação de Desenho Cabeçalho Sítio do Ministério do Turismo com destaque em seu cabeçalho.
  • 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.
    MINISTÉRIO DO PLANEJAMENTO Avaliação de Desenho Diagramação Sítio da SPU com destaque para organização do conteúdo em 4 colunas.
  • 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.
    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.
    MINISTÉRIO DO PLANEJAMENTO Avaliaçãode Acessibilidade Software ASES Tela do ASES com destaque no relatório de acessibilidade.
  • 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.
    MINISTÉRIO DO PLANEJAMENTO 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.
  • 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.
    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.
    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.
    MINISTÉRIO DO PLANEJAMENTO 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”
  • 64.
    MINISTÉRIO DO PLANEJAMENTO Avaliação de Acessibilidade Quebra de Navegação Página do sítio do Ministério da Defesa sobreposta por outra página.
  • 65.
    MINISTÉRIO DO PLANEJAMENTO Atividades dos Consultores Localização Figura de corvos organizados em puleiro e Organograma com hierarquia dos consultores do DGE: MP, SLTI, DGE e Consultores.
  • 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.
    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.
    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.
    MINISTÉRIO DO PLANEJAMENTO Dúvidas . Vários papéis com símbolo de interrogação impresso.
  • 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