Oficina de Avaliação de Sítios

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.


Agenda:

• Introdução;

• Mundo Feliz;

• Avaliação;

• Atividade dos Consultores;

• Dúvidas.

Agenda aberta


– 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


– 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


– Produtos adaptados para uso de computadores:

IntroduçãoTecnologia Assistiva

Teclado expandidoEstabilizador de punho Apontador

Leitor de Tela Mouse de Pressão


Tecnologia Assistiva garante acesso?

IntroduçãoAcessibilidade e Usabilidade

Boneco sentado no símbolo de interrogação


“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”)


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 )


Conceitos

Canivete Suíço



Exemplos

Pessoas mais velhas. Uma delas acessa computador e confirma depósito da pensão



Exemplos

Homem está lendo um texto, mas não consegue entender o que está escrito



Exemplos

Criança está usando o computador com rosto feliz.



Exemplos

Homem sentindo dor no punho esquerdo.



Exemplos

Homem com muito medo olhando por cima de um notebook



Exemplos

À esquerda, homem olhando o smartfone. À direita, mulher com expressão de desespero olhando para celular


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.


– 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)


– 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).


– 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


– 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.


– 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


Legislação basta?

IntroduçãoCenso da Web no governo

Vários pinos formando um símbolo de interrogação.


– 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


– 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


É tão difícil assim?

IntroduçãoMitos da Acessibilidade

Corda com vários nós entrelaçados


Mito I“Acessibilidade Web é só para

deficientes visuais.”


Homem com deficiência visual acessando computador


Mito II“Número de usuários beneficiados é

relativamente pequeno.”


Pessoas da escola Alto da Glória ao redor de aparelhos eletrônicos


Mito III“Fazer sítio acessível demora e custa

caro.”


Homem levando um carrinho de mão cheio de dinheiro


Mito IV“Fazer página específica para

deficiente visual.”


Bonecos na cor cinza e um boneco na cor vermelha juntos.


Mito V“Sítio acessível não é bonito.”


Uma rosa sobre a barriga de uma mulher.


Mito VI“Fazemos o sítio depois aplicamos a

acessibilidade.”


Seis bonecos segurando, em pares, os seguintes símbolos da Internet: http://, WWW, .COM.


Mito VII“Sabemos o que é bom para o

usuário.”


Homem desenhando um organograma.


“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.


Como fazer então ?

Mundo Feliz

Homem expressando muitas dúvidas.


– 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.


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

Avaliação

Boneco ao lado do símbolo de interrogação em cor vermelha.


– “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


– 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


Avaliação de Código, de Desenho e de Acessibilidade

Cinco pessoas seguram pedra gigante.

Como fazer ?


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


– 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


Avaliação de CódigoDoctype

Código HTML com tag doctype XHTML 1.1 transitional


– 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


Avaliação de CódigoDeclaração do Idioma

Código HTML com atributo lang para idioma português do Brasil (pt-br).


– 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


– 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


Avaliação de CódigoHTML Semântico

Sítio do Web Acessibility Iniciative com as tags HTML de cabeçalho destacadas.


– 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


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.


– 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


Avaliação de DesenhoPadronização Visual

Comparativo de duas páginas do Ministério da Cultura com relação ao desenho.


– 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


Avaliação de DesenhoCabeçalho

Sítio do Ministério do Turismo com destaque em seu cabeçalho.


– Conceito:

• É a distribuição e organização dos elementos nas páginas;


– Importância:

• Posiciona a informação de forma proporcional pelas páginas do sítio.

Avaliação de DesenhoDiagramação


Avaliação de DesenhoDiagramação

Sítio da SPU com destaque para organização do conteúdo em 4 colunas.


– 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


– 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


Avaliação de AcessibilidadeSoftware ASES

Tela do ASES com destaque no relatório de acessibilidade.


– Conceito:

• Utilizar as teclas para movimentar pelo sítio;


– Importância:

• É utilizada por pessoas para facilitar navegação pelo sítio.

Avaliação de AcessibilidadeNavegação por Teclado


Avaliação de AcessibilidadeNavegação por Teclado

Página do sítio da Acessibilidade Brasil com destaque para recursos de navegação pelo teclado.


– Conceito:

• Consiste na caracterização de imagens particularizando o que deseja ser ressaltado;


– Importância:

• Permite a contextualização para pessoas que não tenham acesso à imagem.

Avaliação de AcessibilidadeDescrição das imagens


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.


– Conceito:

• Desvio da navegação lógica e retirada do foco da informação sem informar ao usuário;


– Importância:

• Garante ao usuário sentido lógico para navegação do sítio.

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”



Página do sítio do Ministério da Defesa sobreposta por outra página.


Atividades dos ConsultoresLocalização

Figura de corvos organizados em puleiro e Organograma com hierarquia dos consultores do DGE: MP, SLTI, DGE e Consultores.


● 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


● 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


– 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.

http://c3s.sisp.gov.br/cau/


Dúvidas

.

Vários papéis com símbolo de interrogação impresso.


.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

http://www.governoeletronico.gov.br/

mailto:[email protected]

mailto:[email protected]

Technology

Oficina de Avaliação de Sítios