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

governoeletronico.gov.br

Ministério do Planejamento, Orçamento e GestãoSecretaria de Logística e Tecnologia da InformaçãoDepartamento de Governo Eletrônico

Avaliação de Acessibilidade

em Sítios

governoeletronico.gov.br 2 de 117

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;


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.


As pessoas com deficiência

Falta cidadania – foto de Milton Jung

Carros estacionados em vagas especiaishttp://www.flickr.com/photos/cbnsp/5360821409/ CC licence

http://www.flickr.com/photos/cbnsp/5360821409/

http://www.flickr.com/photos/cbnsp/5360821409/


24% da população brasileira

45.623.910 pessoas 35.791.488 deficiente visual

(Censo 2010)

Quantos somos


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.


Deficiência auditiva

A deficiência auditiva se caracteriza pela perda parcial ou total das possibilidades auditivas sonoras, variando em graus e níveis.

Como somos


Deficiência múltipla

Associação entre diferentes deficiências, com possibilidades bastante amplas de combinações.

Como somos


Então, Pare e Pense !!!

Você acha que os recursos de acessibilidade

ajudam apenas as pessoas com deficiência?


Acessibilidade é para todos

Início de aprendizado

Nosso primeiro contato


Idade Avançada

Nós, daqui algunsanos

Foto: Flickr.com - Jacob BÃ¸tter

Medo de usar o computador

Foto: everystockphoto.com - Violator3


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.

Motivos pelos quais nunca utilizou a internet


Ícone mostrando um sinal de interrogação

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ívelcompletar 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 é muito complicado (21%)

Pesquisa TIC e-Gov 2010 – CGI.br

Dados do Governo Na Web


88% - “Muito importante” que um sítio de governo oferecesse explicações sobre como utilizar um serviço.

84% - “Muito importante” que um sítio de governo oferecesse explicações sobre os direitos do cidadão.


Gráfico de pizza com a percentagem de 88%

Gráfico de pizza com a percentagem de 84%

Dados do Governo Na Web


56% - Sim

37% - Não

6% - Não sabe


Escolheria internet como forma de acessar serviços públicos?

Icone www

Dados do Governo Na WebCenário Atual


Porque não Desenvolvemos web sites acessíveis?

Algumas Hipóteses:


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.

Não é por Falta de Legislação (...o tamanho pequeno é proposital)


Desconhecimento


Preconceito


Preguiça


É tão difícil assim?

Mitos


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!"


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



O google apenas vê o código. Se o seu código é acessivel é mais

fácil do Google encontrá-lo


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?”



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



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



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



Mito 7

"A gente sabe o que é bom para o usuário."

Temor oculto: "Não quero expor meu projeto às críticas."



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.



Pequenos testes, grandes descobertas


Já testou o seu site?

Acessível via teclado

Foto: Flickr.com - Baddog_


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>


Pesquisa sobre uso de Tecnologias Assistivas: Ampliadores e leitores de tela

http://acessibilidade.w3c.br/pesquisa/


http://acessibilidade.w3c.br/pesquisa/


O e-MAG 3.0Có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;


Programação em camadas;

Não usar tabelas para diagramar;

Não utilizar frames;

Não utilizar elementos proprietários;

O e-MAG 3.0Código acessível


e-MAG 3.0

http://emag.governoeletronico.gov.br

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.


● Divisão: 6 seções;

● Total de 45 recomendações (Todas são importantes);

● Referência ao padrão WCAG nas recomendações.

O e-MAG 3.0Recomendações de acessibilidade



1 – Marcação 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ário


2 - Comportamento (62 - Comportamento (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údo



3 – Conteúdo/Informação (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údo



4 – Apresentação/Design 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 evidente



5 – Multimídia (55 – Multimídia (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ção



6 – Formulários (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 humano



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.

O e-MAG 3.0Itens Padrões para o Governo Federal


Apoio, ferramentas e disseminação

- Cursos em EAD

- Tutoriais

- Pesquisas

- CMS Suindara

- ASES

- Checklists

- Consultores SISP


Comunidades ASES no Software Público – cerca de 2442 membros.


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

Procedimento de Avaliaçã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.

Procedimento de AvaliaçãoFluxo de validação:


Como fazer ?

Procedimento de Avaliação


Procedimento de AvaliaçãoConsultores em Governo Eletrônico do DGE


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

Procedimento de AvaliaçãoEstrutura:


Página principal;

Página Secundária;

Página de Serviço;

Página de Fale Conosco;

Página de Busca.

Procedimento de AvaliaçãoEscopo:


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.

Procedimento de AvaliaçãoFerramentas:


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)

Procedimento de AvaliaçãoAvaliação de Código - Doctype

governoeletronico.gov.brCódigo HTML com tag doctype XHTML 1.1 transitional

Procedimento de AvaliaçãoAvaliação de Código - Doctype


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.

Procedimento de AvaliaçãoAvaliação de Código - Declaração do Idioma

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

Procedimento de AvaliaçãoAvaliação de Código - Declaração do Idioma


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 Chrome

Procedimento de AvaliaçãoAvaliação de Código - Independência de Dispositivos


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.

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


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

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


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

Procedimento de AvaliaçãoAvaliação de Código - Pesos 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.

Procedimento de AvaliaçãoAvaliação de Código - Pesos dos Elementos


Urls;

Presença de Quadros;

Title;

Mapa de Caracter (charset);

Utilização SGC;

Folhas de Estilos;

Camada de Comportamento.

Procedimento de AvaliaçãoAvaliação de Código – Demais Indicadores


Conceito: Criação de um vocabulário visual a ser

utilizado por todo o sítio; Presente na recomendação nº 31 do e-


Orienta o uso da tipografia, da paleta de cores, ícones, posicionamento de elementos.

Procedimento de AvaliaçãoAvaliação de Desenho – Padronização Visual

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

Procedimento de AvaliaçãoAvaliação de Desenho – Padronização Visual


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.

Procedimento de AvaliaçãoAvaliação de Desenho – Cabeçalho

governoeletronico.gov.brSítio do Ministério do Turismo com destaque em seu cabeçalho.

Procedimento de AvaliaçãoAvaliação de Desenho – Cabeçalho


Conceito: É a distribuição e organização dos

elementos nas páginas; Presente na recomendação nº 31 do e-


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

Procedimento de AvaliaçãoAvaliação de Desenho – Diagramação

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

Procedimento de AvaliaçãoAvaliação de Desenho – Diagramação


Identidade Visual;

Paleta de Cores;

Uso de Animação e Recursos Multimídia;

Leiturabilidade.

Procedimento de AvaliaçãoAvaliação de Desenho – Demais Indicadores


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

Procedimento de AvaliaçãoAvaliação de Acessibilidade – Leitor de Tela


Conceito: ASES - Avaliador e Simulador de

Acessibilidade para Sítios. Importância:

Identifica problemas de acessibilidade de forma automática no sítio.

Procedimento de AvaliaçãoAvaliação de Acessibilidade – ASES

governoeletronico.gov.brTela do ASES com destaque no relatório de acessibilidade.

Procedimento de AvaliaçãoAvaliação de Acessibilidade – ASES


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.

Procedimento de AvaliaçãoAvaliação de Acessibilidade – Navegação por Teclado


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

Procedimento de AvaliaçãoAvaliação de Acessibilidade – Navegação por Teclado


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.

Procedimento de AvaliaçãoAvaliação de Acessibilidade – Descrição das Imagens


Exemplo de descrição de imagem no código HTML de uma criança cheirando uma flor.

Procedimento de AvaliaçãoAvaliação de Acessibilidade – Descrição das Imagens

Código HTML

<img src=”criança.jpg” alt=”Foto de uma criança cheirando umaflor”/>


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.

Procedimento de AvaliaçãoAvaliaçã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”



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



Página de Acessibilidade;

Barra de Acessibilidade;

Mapa do Sítio;

Apresentação dos Formulários;

Apresentação dos Documentos.

Procedimento de AvaliaçãoAvaliação de Acessibilidade – Demais Indicadores


Erro I

“Os links não apresentam descrições

curtas e objetivas ou não identificam

o destino ao qual remetem. (95%)”

Avaliação de 200 Sítios 10 Erros mais Encontrados


Erro II

“A camada de apresentação não está

organizada corretamente. (93%)”



Erro III

“Não existe opção de alto contraste ou

este não funciona corretamente.

(89%)”



Erro IV

“As imagens não estão corretamente

entiquetadas. (86%)”



Erro V

“Há ausência de links indicadores na

páginas.(86%)”



Erro VI

“A estrutura das páginas não está

uniforme.(82%)”



Erro VII

“Os títulos não apresentam uma

ordem lógica.(80%)”



Erro VIII

“Não existem atalhos para facilitar a

navegação ou estes não estão

descritos corretamente.(78%)”



Erro IX

“A leitura das palavras não é

compreendida.(77%)”



Erro X

“Há tabelas implementadas de forma

incorreta.(72%)”



Consultoria em Governo Eletrônico Localização


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;

Consultoria em Governo Eletrônico Alguns Serviços


Central Serviços e Suporte do SISP (C3S); Ministério do Planejamento; http://c3s.sisp.gov.br/cau/

Consultoria em Governo Eletrônico Solicitação


Dúvidas

.


http://premio.w3c.br/19 de dezembro


Cesar [email protected]

Fernanda Hoffmann [email protected]

governoeletronico.gov.brTwitter: @egovbr

+55 (61) 2020 1012

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

Documents

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