MINISTÉRIO DO PLANEJAMENTO
Como avaliar acessibilidade de seu sítio
Arena Code – 24/11/2011
Marca do governo eletrônico
Vários pinos ao redor de um mouse.
MINISTÉRIO DO PLANEJAMENTO
Agenda:
• Introdução;
• Mundo Feliz;
• Avaliação;
• Atividade dos Consultores;
• Dúvidas.
Agenda aberta
MINISTÉRIO DO PLANEJAMENTO
– 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.
IntroduçãoEstatísticas
Livro com varios números ao redor
MINISTÉRIO DO PLANEJAMENTO
– 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.
IntroduçãoTecnologia Assistiva
Estabilizador de Punho para escova de dente
MINISTÉRIO DO PLANEJAMENTO
– Produtos adaptados para uso de computadores:
IntroduçãoTecnologia Assistiva
Teclado expandidoEstabilizador de punho Apontador
Leitor de Tela Mouse de Pressão
MINISTÉRIO DO PLANEJAMENTO
Tecnologia Assistiva garante acesso?
IntroduçãoAcessibilidade e Usabilidade
Boneco sentado no símbolo de interrogação
MINISTÉRIO DO PLANEJAMENTO
“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”)
IntroduçãoAcessibilidade e Usabilidade
Conceitos
MINISTÉRIO DO PLANEJAMENTO
“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 )
IntroduçãoAcessibilidade e Usabilidade
Conceitos
Canivete Suíço
MINISTÉRIO DO PLANEJAMENTO
IntroduçãoAcessibilidade e Usabilidade
Exemplos
Pessoas mais velhas. Uma delas acessa computador e confirma depósito da pensão
MINISTÉRIO DO PLANEJAMENTO
IntroduçãoAcessibilidade e Usabilidade
Exemplos
Homem está lendo um texto, mas não consegue entender o que está escrito
MINISTÉRIO DO PLANEJAMENTO
IntroduçãoAcessibilidade e Usabilidade
Exemplos
Criança está usando o computador com rosto feliz.
MINISTÉRIO DO PLANEJAMENTO
IntroduçãoAcessibilidade e Usabilidade
Exemplos
Homem sentindo dor no punho esquerdo.
MINISTÉRIO DO PLANEJAMENTO
IntroduçãoAcessibilidade e Usabilidade
Exemplos
Homem com muito medo olhando por cima de um notebook
MINISTÉRIO DO PLANEJAMENTO
IntroduçãoAcessibilidade e Usabilidade
Exemplos
À esquerda, homem olhando o smartfone. À direita, mulher com expressão de desespero olhando para celular
MINISTÉRIO DO PLANEJAMENTO
IntroduçãoDivulgadores 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
– Mundo
• W3C (Consórcio Word Wide Web);
• WAI (Iniciativa de Acessibilidade na Web).
IntroduçãoDivulgadores de Acessibilidade
Representação do consórcio W3C e da Iniciativa de Acessibilidade da WEB (WAI)
MINISTÉRIO DO PLANEJAMENTO
– Mundo
• WCAG (Diretrizes de Acessibilidade ao Conteúdo da Web).
• Está na versão 2.0.
IntroduçãoPadrões de Acessibilidade
Padrão WCAG 2.0 nos seus níveis (A, AA e AAA).
MINISTÉRIO DO PLANEJAMENTO
– Administração Pública Federal
• Departamento Governo Eletrônico (Ministério do Planejamento/Secretaria Logística de Tecnologia da Informação).
IntroduçãoDivulgadores de Acessibilidade
Marca do governo eletrônico
MINISTÉRIO DO PLANEJAMENTO
– Administração Pública Federal
• e-MAG (Modelo de Acessibilidade em Governo Eletrônico);
• Está na versão 3.0.
IntroduçãoPadrões de Acessibilidade
Marca do Modelo de Acessibilidade em Governo Eletrônico.
MINISTÉRIO DO PLANEJAMENTO
– Decreto nº 5296, de 8 de dezembro de 2004
– Portaria Nº 3, de 7 de Maio de 2007
IntroduçãoLegislação
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
Legislação basta?
IntroduçãoCenso da Web no governo
Vários pinos formando um símbolo de interrogação.
MINISTÉRIO DO PLANEJAMENTO
– 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).
IntroduçãoCenso da Web no governo
Marca do CGI.BR Marca do NIC.BR
MINISTÉRIO DO PLANEJAMENTO
– 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.
IntroduçãoCenso da Web no governo
Marca do CGI.BR Marca do NIC.BR
MINISTÉRIO DO PLANEJAMENTO
É tão difícil assim?
IntroduçãoMitos da Acessibilidade
Corda com vários nós entrelaçados
MINISTÉRIO DO PLANEJAMENTO
Mito I“Acessibilidade Web é só para
deficientes visuais.”
IntroduçãoMitos da Acessibilidade
Homem com deficiência visual acessando computador
MINISTÉRIO DO PLANEJAMENTO
Mito II“Número de usuários beneficiados é
relativamente pequeno.”
IntroduçãoMitos da Acessibilidade
Pessoas da escola Alto da Glória ao redor de aparelhos eletrônicos
MINISTÉRIO DO PLANEJAMENTO
Mito III“Fazer sítio acessível demora e custa
caro.”
IntroduçãoMitos da Acessibilidade
Homem levando um carrinho de mão cheio de dinheiro
MINISTÉRIO DO PLANEJAMENTO
Mito IV“Fazer página específica para
deficiente visual.”
IntroduçãoMitos da Acessibilidade
Bonecos na cor cinza e um boneco na cor vermelha juntos.
MINISTÉRIO DO PLANEJAMENTO
Mito V“Sítio acessível não é bonito.”
IntroduçãoMitos da Acessibilidade
Uma rosa sobre a barriga de uma mulher.
MINISTÉRIO DO PLANEJAMENTO
Mito VI“Fazemos o sítio depois aplicamos a
acessibilidade.”
IntroduçãoMitos da Acessibilidade
Seis bonecos segurando, em pares, os seguintes símbolos da Internet: http://, WWW, .COM.
MINISTÉRIO DO PLANEJAMENTO
Mito VII“Sabemos o que é bom para o
usuário.”
IntroduçãoMitos da Acessibilidade
Homem desenhando um organograma.
MINISTÉRIO DO PLANEJAMENTO
“Meu sítio direciona-se à um público específico; ele não interessa a todos os
usuários.”
IntroduçãoEquívoco
Quatro bonecos juntos representando um conjunto.
MINISTÉRIO DO PLANEJAMENTO
– 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.
Mundo FelizPlanejamento do Sítio
Mulher segura uma lâmpada que está na lateral da cabeça.
MINISTÉRIO DO PLANEJAMENTO
Como saber se o sítio está acessível ?
Avaliação
Boneco ao lado do símbolo de interrogação em cor vermelha.
MINISTÉRIO DO PLANEJAMENTO
– “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
AvaliaçãoConceito
Lupa ampliando um gráfico de barras
MINISTÉRIO DO PLANEJAMENTO
– 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).
AvaliaçãoEstrutura
MINISTÉRIO DO PLANEJAMENTO
Avaliação de Código, de Desenho e de Acessibilidade
Cinco pessoas seguram pedra gigante.
Como fazer ?
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
– 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.
Avaliação de CódigoDoctype
MINISTÉRIO DO PLANEJAMENTO
Avaliação de CódigoDoctype
Código HTML com tag doctype XHTML 1.1 transitional
MINISTÉRIO DO PLANEJAMENTO
– 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.
Avaliação de CódigoDeclaração do Idioma
MINISTÉRIO DO PLANEJAMENTO
Avaliação de CódigoDeclaração do Idioma
Código HTML com atributo lang para idioma português do Brasil (pt-br).
MINISTÉRIO DO PLANEJAMENTO
– 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.
Avaliação de CódigoIndepêndencia de Navegadores
logotipo da esquerda para direita: Firefox, Internet Explorer e Google Chrome
MINISTÉRIO DO PLANEJAMENTO
– 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.
Avaliação de CódigoHTML Semântico
MINISTÉRIO DO PLANEJAMENTO
Avaliação de CódigoHTML Semântico
Sítio do Web Acessibility Iniciative com as tags HTML de cabeçalho destacadas.
MINISTÉRIO DO PLANEJAMENTO
– 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.
Avaliação do CódigoPeso dos Elementos
Homem carrega bola pesada e sente dificuldade
MINISTÉRIO DO PLANEJAMENTO
Avaliação do CódigoPeso dos Elementos
Página Inicial Fale Conosco
22kB
1%22kB
2%
2350kB
72%
253kB
22%
789kB
24% 786kB
68%
1kB
0%1kB
0%
102kB
3%102kB
9%
Peso dos Elementos das Páginas
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
– 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.
Avaliação de DesenhoPadronização Visual
MINISTÉRIO DO PLANEJAMENTO
Avaliação de DesenhoPadronização Visual
Comparativo de duas páginas do Ministério da Cultura com relação ao desenho.
MINISTÉRIO DO PLANEJAMENTO
– 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.
Avaliação de DesenhoCabeçalho
MINISTÉRIO DO PLANEJAMENTO
Avaliação de DesenhoCabeçalho
Sítio do Ministério do Turismo com destaque em seu cabeçalho.
MINISTÉRIO DO PLANEJAMENTO
– 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.
Avaliação de DesenhoDiagramação
MINISTÉRIO DO PLANEJAMENTO
Avaliação de DesenhoDiagramação
Sítio da SPU com destaque para organização do conteúdo em 4 colunas.
MINISTÉRIO DO PLANEJAMENTO
– 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.
Avaliação de AcessibilidadeLeitor de Tela
Tela de computador com leitor de tela ativado
MINISTÉRIO DO PLANEJAMENTO
– Conceito:
• ASES - Avaliador e Simulador de Acessibilidade para Sítios.
– Importância:
• Identifica problemas de acessibilidade de forma automática no sítio.
Avaliação de AcessibilidadeSoftware ASES
MINISTÉRIO DO PLANEJAMENTO
Avaliação de AcessibilidadeSoftware ASES
Tela do ASES com destaque no relatório de acessibilidade.
MINISTÉRIO DO PLANEJAMENTO
– 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.
Avaliação de AcessibilidadeNavegação por Teclado
MINISTÉRIO DO PLANEJAMENTO
Avaliação de AcessibilidadeNavegação por Teclado
Página do sítio da Acessibilidade Brasil com destaque para recursos de navegação pelo teclado.
MINISTÉRIO DO PLANEJAMENTO
– 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.
Avaliação de AcessibilidadeDescrição das imagens
MINISTÉRIO DO PLANEJAMENTO
Avaliação de AcessibilidadeDescrição das imagens
Código HTML
<img src=”criança.jpg” alt=”Foto de uma criança cheirando umaflor”/>
Exemplo de descrição de imagem no código HTML de uma criança cheirando uma flor.
MINISTÉRIO DO PLANEJAMENTO
– 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.
Avaliação de AcessibilidadeQuebra de Navegação
MINISTÉRIO DO PLANEJAMENTO
Avaliação de AcessibilidadeQuebra 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 AcessibilidadeQuebra de Navegação
Página do sítio do Ministério da Defesa sobreposta por outra página.
MINISTÉRIO DO PLANEJAMENTO
Atividades dos ConsultoresLocalização
Figura de corvos organizados em puleiro e Organograma com hierarquia dos consultores do DGE: MP, SLTI, DGE e Consultores.
MINISTÉRIO DO PLANEJAMENTO
● Análise de portais da Administração Pública Federal
em relação à conformidade com padrões e-PWG e
e-MAG;
Atividades dos ConsultoresAtribuições
Papel com lista de atividades
MINISTÉRIO DO PLANEJAMENTO
● Revisões e atualizações de documentos, cartilhas de
recomendações e padrões do governo eletrônico;
Atividades dos ConsultoresAtribuições
Papel com lista de atividades
MINISTÉRIO DO PLANEJAMENTO
– Central Serviços e Suporte do SISP (C3S);
– Ministério do Planejamento;
– http://c3s.sisp.gov.br/cau/
Atividade dos ConsultoresSolicitação
Sítio do C3S para solicitação das atividades dos consultores.
MINISTÉRIO DO PLANEJAMENTO
.Helder Medeiros
Cesar BomfimDepartamento de Governo Eletrônico
Secretaria de Logística e Tecnologia da InformaçãoMinistério do Planejamento, Orçamento e Gestão
@egovbr (twitter)www.governoeletronico.gov.br
[email protected]@planejamento.gov.br
+55 (61) 2020 1012