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

Avaliação de Acessibilidade
em Sítios

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

governoeletronico.gov.br

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;

governoeletronico.gov.br 2 de 117

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 especiais
http://www.flickr.com/photos/cbnsp/536
0821409/
CC licence


Quantos somos

24% da população brasileira
45.623.910 pessoas
35.791.488 deficiente visual
(Censo 2010)


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.


Como somos
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.


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
alguns
anos

Foto: Flickr.com - Jacob BÃ¸tter


Medo
de usar o
computador

Foto: everystockphoto.com - Violator3

Motivos pelos quais
nunca utilizou a internet

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.


Dados do Governo Na Web


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ível
completar 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 é Ícone
mostrando um
muito complicado (21%) sinal de
interrogação

Pesquisa TIC e-Gov 2010 – CGI.br




88% - “Muito importante” que um Gráfico de pizza
com a percentagem
sítio de governo oferecesse de 88%

explicações sobre como utilizar
um serviço.


84% - “Muito importante” que um Gráfico de pizza
com a percentagem
sítio de governo oferecesse de 84%

explicações sobre os direitos do
cidadão.



Cenário Atual

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

56% - Sim

37% - Não Icone www

6% - Não sabe



Porque não Desenvolvemos
web sites acessíveis?

Algumas Hipóteses:


Não é por Falta de Legislação
(...o tamanho pequeno é proposital)
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.


Desconhecimento


Preconceito


Preguiça


Mitos
É tão difícil assim?


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.0
Có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;


O e-MAG 3.0
Código acessível

Programação em camadas;

Não usar tabelas para diagramar;

Não utilizar frames;

Não utilizar elementos proprietários;


e-MAG 3.0

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.

http://emag.governoeletronico.gov.br

O e-MAG 3.0
Recomendações de acessibilidade

●
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.0

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

O e-MAG 3.0

2 - Comportamento (6)
(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


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


O e-MAG 3.0

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


O e-MAG 3.0
5 – Multimídia (5)
(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


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


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

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.


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.


Procedimento de Avaliação

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


Fluxo de validaçã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.



Como fazer ?


Consultores em Governo Eletrônico do DGE


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


Escopo:


Página principal;

Página Secundária;

Página de Serviço;

Página de Fale Conosco;

Página de Busca.


Ferramentas:

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.

Avaliação de Código - Doctype

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


Avaliação de Código - Doctype

Código HTML com tag doctype XHTML 1.1 transitional


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.


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

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

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


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

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.


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

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


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


Avaliação de Código - Pesos dos Elementos
Peso dos Elementos das Páginas
kB
50
23
%
72

9kB 6kB
78 78
% %
24 68

3kB
25
2kB 22
% 2kB
kB 10 kB 10
22 1kB 3% 22 1kB 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.

Avaliação de Código – Demais Indicadores


Urls;

Presença de Quadros;

Title;

Mapa de Caracter (charset);

Utilização SGC;

Folhas de Estilos;

Camada de Comportamento.


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.


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

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

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.


Avaliação de Desenho – Cabeçalho

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

Avaliação de Desenho – Diagramação


Conceito:

É a distribuição e organização dos
elementos nas páginas;

MAG 3.0.

Importância:

Posiciona a informação de forma
proporcional pelas páginas do sítio.


Avaliação de Desenho – Diagramação

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


Avaliação de Desenho – Demais Indicadores


Identidade Visual;

Paleta de Cores;

Uso de Animação e Recursos Multimídia;

Leiturabilidade.


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

Avaliação de Acessibilidade – ASES


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 Acessibilidade – ASES

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

Avaliação de Acessibilidade – Navegação por Teclado

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.


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.


Avaliação de Acessibilidade – Descrição das Imagens

Conceito:

Consiste na caracterização das imagens
contextualizando a informação que a mesma
representa;

MAG 3.0.

Importância:

Permite a contextualização para pessoas que
não tenham acesso à imagem.


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.


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.



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.


Avaliação de Acessibilidade – Demais Indicadores


Página de Acessibilidade;

Barra de Acessibilidade;

Mapa do Sítio;

Apresentação dos Formulários;

Apresentação dos Documentos.


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

Erro I

“Os links não apresentam descrições
curtas e objetivas ou não identificam
o destino ao qual remetem. (95%)”



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


Alguns Serviços


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;


Solicitação

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


Dúvidas

.


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


Cesar Bomfim
Cesar.bomfim@planejamento.gov.br

Fernanda Hoffmann Lobato
fernanda.lobato@planejamento.gov.br

Twitter: @egovbr

+55 (61) 2020 1012


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

Mais conteúdo relacionado

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

Mais de GovBR

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