ases - tutorial_inovaday_agosto_2011

ASES –Avaliador e Simulador de Acessibilidade Web

Além do software Da Silva (é um serviço online), que permite a verificação da acessibilidade

de websites, iremos falar de outro software que aprofunda esta análise. O ASES (Avaliador e Simulador de Acessibilidade de sítios) é o produto da parceria entre o

Departamento de Governo Eletrônico e a OSCIP Acessibilidade Brasil, que permite a verificação da

acessibilidade de websites, se os mesmos estão dentro dos princípios de acessibilidade preconizados pela lei federal de acessibilidade (Lei no. 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 com deficiência ou com mobilidade reduzida e dá outras providências.

Tendo por objetivo fornecer instrumentos que viabilizem a adoção da acessibilidade pelos

órgãos do governo, o ASES é uma ferramenta que permite avaliar, simular e corrigir a acessibilidade de páginas, sítios e portais, sendo de grande valia para os desenvolvedores e publicadores de conteúdo.

Para os usuários brasileiros o programa é distribuído de forma gratuita sob licença LGPL -

GNU Lesser General Public License. O ASES é acessível, podendo ser utilizado por pessoas com deficiências, salvo os casos em

que a deficiência impeça o objetivo da ferramenta em questão. Por exemplo, um cego não irá descrever uma imagem, sendo assim, ele não utilizaria essa ferramenta do software, porém nada

impede que ele faça correções em códigos HTML.

A ferramenta pode ser obtida gratuitamente, sendo que é disponível para o sistema operacional Windows (ases-1-0-2 e o Java Application Platform SDK ) e Linux(ases-1-0-2 e o Java Runtime Environment - JRE ). Existe também uma comunidade ASES no Portal do Software Público, onde é possível baixar

os arquivos fontes e participar na melhoria dessa ferramenta. Após baixar a ferramenta em seu computador, iremos clicar no ícone para iniciarmos a

configuração inicial da ferramenta:

Na tela abaixo é que iremos realizar todo o procedimento de verificação de nosso website, a

fim de conferir a página de acordo com as normas de acessibilidade do W3C/EMAG.

As opções são:

Tipo de Avaliação: Onde você poderá escolher entre avaliar o website, seguindo as regras do WCAG ou E-Mag;

Níveis a Avaliar: Onde você poderá escolher entre:

Nível 1: Avalia apenas 1 nível de diretório.

Nível 2: Avalia apenas 2 níveis de diretório.

Nível 3: Avalia apenas 3 níveis de diretório.

Site: Avalia todas as páginas do site.

Página: Avalia apenas a página indicada.

Arquivo: Avalia apenas o arquivo desejado.

Diretório: Avalia todas as páginas do diretório selecionado.

Nível de Prioridades:

Prioridade 1: Pontos que os criadores de conteúdo Web devem satisfazer inteiramente. Se

não o fizerem, um ou mais grupos de usuários ficarão impossibilitados de acessar as informações contidas no documento. A satisfação desse tipo de pontos é um requisito básico para que determinados grupos possam acessar documentos disponíveis na Web.

Prioridade 2: Pontos que os criadores de conteúdos na Web deveriam satisfazer. Se não o

fizerem, um ou mais grupos de usuários terão dificuldades em acessar as informações contidas no documento. A satisfação desse tipo de pontos promoverá a remoção de barreiras significativas ao acesso a documentos disponíveis na Web.

Prioridade 3: Pontos que os criadores de conteúdos na Web podem satisfazer. Se não o fizerem, um ou mais grupos poderão se deparar com algumas dificuldades em acessar informações contidas nos documentos. A satisfação deste tipo de pontos melhorar o acesso

a documentos armazenados na Web. URL: Onde você digitará o endereço do website que se deseja avaliar, exemplo www.sp.gov.br;

As opções do Resumo do Relatório são: Continuar: Este botão é responsável por continuar uma avaliação previamente interrompida e

salva (*.ASES), ou para recomeçar uma avaliação que tenha sido simplesmente pausada. Pausar: Serve para suspender uma avaliação. Para continuar de onde parou, basta clicar em

"Continuar". Retroceder todas: Retrocede à primeira página da tabela de erros. Retroceder uma: Retrocede à página de erros imediatamente anterior. Drop down: é um contador de páginas avaliadas. Clique sobre ele para localizar uma página

específica. Avançar uma: Avançar para a página subsequente a atual. Avançar todas: Avançar ao final da avaliação, a última página avaliada. Não Avaliadas: Botão que apresenta um relatório de todas as páginas não avaliadas.

Finalizar: Finaliza uma avaliação em andamento. O Usuário é perguntado se deseja salvá-la antes de terminá-la.

As opções da Barras de progresso:

Avaliação Total: Exibe a porcentagem de quanto da página/sítio foi avaliado até o momento. Página Atual: Este se aplica a valiçãões com mais de uma página. Exibe a porcentagem a

página que está sendo avaliada. Barra de Velocidade: Através deste botão o usuário pode, se diminur a velocidade, liberar

recursos do seu computador, em detrimento da velocidade de avalição. Geralmente usado quando se quer realizar várias tarefas simultaneamente, em conjunto com a avaliação de um sítio. Ela também limita a banda de downloading de páginas avaliadas pelo ASES, deixando o usuário navegar sem problemas se possuir conexões de baixa velocidade.

Relatório da URL: Exibe uma tabela contendo erros encntrado na URL referida. Código Original: Exibe o código original, apenas para comparação, pois este não é editável. Código em Edição: É exibido o código fonte editável, como um editor de HTML. Abas de Erros e Avisos: Exibe erros e avisos encontrados no código em uma tabela. Os

erros/prioridades variam de grau 1 a 3, dependendo da regra do W3C ou E-MAG que foi infringida. Para o usuário ter acesso ao erro/aviso encontrado basta clicar sobre o número corresponde à linha para ser levado, na tela do código fonte editável, até o erro.

Colunas da tabela de erros/avisos: P.V.: Ponto de Verificação - Indica que regra do E-MAG/WCAG

foi infringida. CASOS GERAIS: Uma breve descrição do erro encontrado.

OCORRÊNCIAS: A quantidade de vezes que determinada regra foi infringida. LINHAS: As linhas que possuem erros. Ao clicar sobre elas, o usuário é levado até sua

ocorrência no código. Tela Anterior: Retorna à tela anterior a este avaliador.

Reverter: Recarrega o código original, sem edição alguma. Saiba Mais: É um quadro de dicas e esclarecimentos a respeito de cada erro encontrado, de

acordo com o E-MAG.

Avaliador de CSS Verifica se o código CSS está de acordo com as normas de acessibilidade do W3C

Url: Endereço do arquivo que se deseja avaliar. Código em Edição: Exibe o código que pode ser corrigido

Código Original: Exibe o código que foi avaliado, este não é alterado. Salvar: Abre a opção de salvar o arquivo. Abrir: Abre uma caixa de diálogo para abrir um arquivo CSS. Salvar como: Abre uma caixa de diálogo para salvar o arquivo com outro nome mantendo o

original. Lista de Erros: Mostra as linhas e as mensagens de erro ou aviso encontradas na avaliação

do CSS.

Avaliador de HTML/XHTML Verifica se a sintaxe do código HTML/XHTML está de acordo com as normas do W3C.

Tipo de Avaliação: Com esta ferramenta o usuário pode conferir se a sintaxe empregada ao código HTML/XHTML está correta.

URL: Endereço da página que se deseja avaliar. Código em Edição: É exibido o código fonte editável, como um editor de HTML. Código Original: Exibe o código original, apenas para comparação, pois este não é editável. Salvar: Salva o arquivo alterado.

Abrir: Abre, e avalia automaticamente, o arquivo HTML. Salvar Como: Salva o arquivo alterado com um nome diferente do original. Tela Anterior: Retorna à tela anterior a este avaliador. Reverter: Recarrega o código original, sem edição alguma.

Lista de Erros: Lista todos os erros de sintaxe encontrados no código. E, ao clicar sobre o erro, o usuário é direcionado à sua ocorrência no código editável.

Simulador de Leitor de Tela Indica o menor tempo de leitura que um leitor de tela levaria para chegar a determinado ponto

da página. Url: Endereço do arquivo que se deseja avaliar.

Página Linear: Mostra a página sem formatação visual e com campos que os leitores de tela reconhecem, como descrição de imagens. Indica o tempo mínimo para ler determinado trecho da página pelo melhor caminho utilizando os links internos.

Procurar texto: Fornece um mecanismo para encontrar palavras ou partes do texto após a

linearização. Links Internos: Lista os links internos da página. Abrir: Abre um arquivo local para ser simulado. Tela Anterior: Volta para a tela de avaliação de acessibilidade.

Simulador de Navegação Para Baixa Visão Simula algumas doenças ou incapacidades que afetam a visão. São elas: hipermetropia,

miopia, daltonismo, catarata, glaucoma e retinopatia. Menu Arquivo: Mostra as opções para navegação.

Salvar Imagem: Salva o conteudo em que se está simulando a doença ou incapacidade como uma imagem.

Sair: Fecha o simulador de baixa visão. Problemas/Deficiências: Mostra o menu a lista das Deficiência e / ou problemas.

Hipermetropia: Simula diversos graus de Hipermetropia.

Miopia: Simula diversos graus de Miopia.

Daltonismo: Simula protanopia, deuteranopia, tritanopia, e monocromia.

Catarata: Simula os diversos agravamentos da catarata.

Glaucoma: Simula as perdas do campo visual do glaucoma.

Retinopatia: Simula a retinopatia e perda de foco provocada pela doença.

Link para descrição das incapacidades encontradas neste simulador

Ferramenta Associadora de Descrição para Imagens Associa descrições de imagens (obrigatórias às normas de acessibilidade) àquelas imagens

desprovidas das tais encontradas durante a análise. Descrição da Ferramenta: Ferramenta responsável pela identificação e inserção (feita pelo

usuário) da falta de descrição em imagens. URL: Endereço da página que se deseja avaliar. Código em Edição: É exibido o código fonte editável, como um editor de HTML. Código Original: Exibe o código original, apenas para comparação, pois este não é editável.

Regra: Regra que obriga a todas as imagens possuirem um correspondente alternativo em texto para os cegos.

Digite a Descrição a para a imagem: O usuário deve digitar aqui a o conteúdo alternativo para a imagem.

Aplicar: Aplica o conteúdo alternativo inserido na imagem. Lista de Erros: Lista todos os erros de sintaxe encontrados no código. E, ao clicar sobre o

erro, o usuário é direcionado à sua ocorrência no código editável. Salvar: Salva o arquivo alterado.

Abrir: Abre, e avalia automaticamente, o arquivo HTML. Tela Anterior: Retorna à tela anterior a este avaliador. Reverter: Recarrega o código original, sem edição alguma.

Ferramenta Análise Sistemática para Imagens Ferramenta que descobre a ocorrência da falta de descrição de uma mesma imagem em

diversas páginas distintas.

Descrição da Ferramenta: Esta ferramenta percebe a repetição de uma mesma imagem sem o conteúdo alternativo e lista todas as ocorrências para que o usuário possa alterá-las automaticamente.

Regra: Regra que obriga a todas as imagens possuirem um correspondente alternativo em

texto para os cegos. Digite a Descrição para uma Imagem: Neste campo o usuário deve digitar a descrição da

imagem. Ex.: Fotografia de uma torta. Lista de Erros: Exibe todos os erros encontrados.

Salvar Modificados: Salva todos os conteúdos alternativos que foram modificados. Salvar Última Página: Salva apenas a última página alterada. Aplicar a Página: Aplica o conteúdo alternativo que foi digitado em todas as suas ocorrências

da página. Aplicar a Todos: Aplica a todos as ocorrências de erros (todas as páginas).

Painel Anterior: Retorna ao painel anterior. Detalhamento sobre a Funcionalidade Salvar Modificados: Ao clicar em Salvar Modificados

será apresentada uma janela que permite escolhermos um diretório onde será criada uma estrutura de pasta similar a encontrada no site analisado. para cada página salva são criados

dois arquivos, possuem o mesmo nome que o da pagina salva diferindo apenas na extensão, sendo um deles em txt, que contem o caminho correto do local original da página salva, permitindo que possamos recolocar o arquivo corrigido no local correto, e o de extensão html, que contem o código corrigido.

Por motivo de algumas paginas virem com caracteres não permitidos para nomes de arquivos, alguns caracteres destes nomes precisam ser convertidos para o número correspondente da tabela ASCII, estes estarão entre vírgulas no nome do arquivo

exemplo:

Arquivo que contem o endereço original da pagina: End_47,.html.txt Arquivo que contem o código reparado: ,47,.html

Notar que o 47 está entre virgulas, isso significa que se trata de um caractere ASCII na tabela abaixo se descobre que se trata do caractere '/' - Tabela ASCII para auxilio ao usuário

Observação: Para utilizar essa ferramenta, o usuário deve primeiro avaliar o site (ou página)

pela página principal do ASES, o Avaliar de Acessibilidade, e então ir em: Ferramentas > Conteúdo Alternativo para TAGS > IMG, após ter o relatório da avaliação. Somente assim será possível utilizar

o recurso de análise sistemática de imagens.

Ferramenta Associador de Conteúdo alternativo para Scripts Associa conteúdo alternativo para tags script.

URL: Endereço da página que se deseja avaliar. Digite o Conteúdo Alternativo: Campo para descrever o objeto sem descrição.

Código em Edição: É exibido o código fonte editável, como um editor de HTML. Código Original: Exibe o código original, apenas para comparação, pois este não é editável. Salvar: Salva o arquivo alterado. Abrir: Abre, e avalia automaticamente, o arquivo HTML.

Salvar Como: Salva o arquivo alterado com um nome diferente do original. Tela Anterior: Retorna à tela anterior a este avaliador. Reverter: Recarrega o código original, sem edição alguma. Lista de Erros: Lista todos os erros encontrados no código. E, ao clicar sobre o erro, o

usuário é direcionado à sua ocorrência no código editável.

Ferramenta Associador de Conteúdo alternativo para Objects Associa conteúdo alternativo para tags Objects.

Url: Endereço da página que se deseja avaliar. Digite o Conteúdo Alternativo: Campo para descrever o objeto sem descrição.

Código em Edição: Exibe o código que pode ser corrigido Código Original: Exibe o código que foi avaliado, este não é alterado. Aplicar: Aplica a descrição ao objeto selecionado na lista de erros. Lista de Erros: Mostra as linhas e as mensagens de erro ou aviso encontradas na avaliação

do CSS. Salvar: Abre a opção de salvar o arquivo. Abrir: Abre uma caixa de diálogo para abrir um arquivo CSS. Salvar como: Abre uma caixa de diálogo para salvar o arquivo com outro nome mantendo o

original. Reverter: Recarrega o código original, sem edição alguma.

Ferramenta Associador de Rótulos Ferramenta que associa rótulos a controles

URL: Endereço da página que se deseja avaliar. Código em Edição: É exibido o código fonte editável, como um editor de HTML.

Código Original: Exibe o código original, apenas para comparação, pois este não é editável. Adicionar: Adiciona o texto selecionado para ser associado como rótulo do controle. Aplicar: Faz a associação do rótulo aplicado (presente na caixa de texto) ao código fonte. Textos ou tags que participarão do rótulo: Mostra as tags e textos que irão ser associados ao

rótulo. Lista de Erros: Lista todos os erros encontrados no código. E, ao clicar sobre o erro, o

usuário é direcionado à sua ocorrência no código editável. Salvar: Salva o arquivo alterado.


Ferramenta Associador de DocType Insere DocTypes (cabeçalhos de documentos HTML) nas páginas desejadas.

URL: Endereço da página que se deseja avaliar. Código em Edição: É exibido o código fonte editável, como um editor de HTML.

Código Original: Exibe o código original, apenas para comparação, pois este não é editável. Lista de DocTypes: Lista os doctypes existentes. Ao clicar duas vezes sobre o doctype

escolhido, o código em edição é alterado. Salvar: Salva o arquivo alterado.


Ferramenta Preenchedor de Formulário Ajuda a preencher os campos de formulários.

Url: Endereço da página que se deseja avaliar. Código em Edição: Exibe o código que pode ser corrigido

Código Original: Exibe o código que foi avaliado, este não é alterado. Texto: Texto o que será inserido no campo do formulário. Aplicar: Coloca o texto dentro do valor do formulário. Lista de Erros: Mostra as linhas e as mensagens de erro ou aviso encontradas na avaliação

da página. Salvar: Salva o arquivo alterado. Abrir: Abre, e avalia automaticamente, o arquivo HTML. Salvar Como: Salva o arquivo alterado com um nome diferente do original.

Reverter: Recarrega o código original, sem edição alguma.

Ferramenta Corretor de Eventos Dependentes de Dispositivo

Corrige eventos que dependem de dispositivos de entrada. Url: Endereço da página que se deseja avaliar. Código em Edição: Exibe o código que pode ser corrigido

Código Original: Exibe o código que foi avaliado, este não é alterado. JavaScript: Código que será atribuido ao evento correspondente. Aplicar: Gera o evento correspondente e o coloca na tag. Lista de Erros: Mostra as linhas e as tags de erro encontradas na avaliação da página.

Salvar: Salva o arquivo alterado. Abrir: Abre, e avalia automaticamente, o arquivo HTML. Salvar Como: Salva o arquivo alterado com um nome diferente do original. Reverter: Recarrega o código original, sem edição alguma.

Ferramenta para Links Redundantes em Mapa de Imagens

Define links redundantes para mapas de imagens.

Url: Endereço da página que se deseja avaliar. Código em Edição: Exibe o código que pode ser corrigido Código Original: Exibe o código que foi avaliado, este não é alterado. Texto: Texto o que será exibido do link redundante.

Aplicar: Gera o link ao lado da imagem mapeada. Lista de Erros: Mostra as linhas e as mensagens de erro encontradas na avaliação da página. Salvar: Salva o arquivo alterado. Abrir: Abre, e avalia automaticamente, o arquivo HTML.

Salvar Como: Salva o arquivo alterado com um nome diferente do original. Reverter: Recarrega o código original, sem edição alguma.

Recomendamos a leitura da Resolução CC-09, de 25/02/2005, estabeleceu para os órgãos do

Governo do Estado de São Paulo, um conjunto normativo de instruções e recomendações para a

melhoria na criação de serviços eletrônicos, desenvolvimento e gestão de sítios estaduais na internet.

Esses normativos são chamados de Manuais da CC-09 e estão disponíveis em http://www.igovsp.net./manuais.

Aos desenvolvedores e programadores existem algumas ferramentas on-line que efetuam a verificação dos códigos, analisando sob as diretrizes da WCAG 1.0 ou 2.0, indicamos algumas ferramentas de validações automáticas: Markup W3C Validator: É o validador oficial do consórcio W3C para arquivos HTML. É

possível efetuar uma análise através do endereço do arquivo web, enviando o arquivo ou simplismente colocando o código fonte no campo de busca. Ele analisa os arquivos HTMLs, XHTMLs dentre outros em busca de códigos escritos errados ou inconsistentes.

CSS W3C Validator: Analise e fornece correções para os arquivos CSS.

DaSilva: O primeiro validador em português, foi desenvolvido pelo pessoal do “Acessibilidade Brasil” e permite a análise do site utilizando as diretrizes WCAG 1.0 ou o e-GOV (diretrizes de acessibilidade para sites do governo brasileiro), além de filtras os resultados pelo nível de prioridade.

Cynthia Says: É um validador norte americano que permite validar, além das diretrizes WCAG, utilizando a Section 508 (recomendações do governo norte americano para os sites governamentais).

t.a.w.: Ferramenta bem completa e bastante simples de utilizar. Permite a análise utilizando as

diretrizes da WCAG 1.0, WCAG 2.0 e recomendações para aplicativos móveis. Disponível em Inglês e espanhol. Gera relatórios, exibe comentários e faz checagem automática de uma única página.

Lynx Viewer : verificar e analisar como determinado site se comporta em navegadores

textuais, muito utilizados por deficientes visuais. Examinator: verifica a avaliação automática e atribuí uma nota ao site classificando de zero a

dez a acessibilidade da página avaliada, tendo como base as Diretrizes de Acessibilidade para o conteúdo WEB 1.0 (WCAG 1.0). Efetua ligação para http://validator.w3.org para verificar

o código (X) HTML e para http://jigsaw.w3.org/css-validator para verificar as folhas de estilo CSS. Mostra informações qualitativas sobre a avaliação apresentando um quadro com as

verificações a serem feitas e apresenta sugestões e exemplos para fazer as devidas correções. Contém link para ajuda, motor de busca, mapa do sítio e sugestões, que ficam disponíveis para o usuário em todas as páginas do sítio. No link Ajuda o usuário encontra informações para auxiliá-lo na navegação pelo site. O motor de busca e o mapa do sítio

ajudam a encontrar alguma informação contida no sítio. Em Sugestões o usuário encontra um link com endereços de contato para envio de sugestões, reclamações ou comentários.

W3C: É o validador da W3C. Verifica o código (X)HTML (http://validator.w3.org/) e também o CSS (http://jigsaw.w3.org/css-validator/).

Total Validator : É composto de um validador HTML, um validador de acessibilidade (WCAG e Seção 508), um corretor ortográfico, um verificador de quebra de links e capacidade de capturar telas com diferentes navegadores em diferentes plataformas. Checagem automática de uma única página, grupos de páginas e páginas restritas.

Validação Manual: Checklist para Teste Manual, com perguntas relacionadas à

acessibilidade, usabilidade e comunicabilidade de ambientes virtuais.

Contrastes de Cores: Acessibilidade para Usuário com Baixa Visão ou Daltonismo, que

apresenta três guias básicas para escolher cores de maneira efetiva para a grande maioria

de usuários, inclusive aqueles com dificuldades para perceber ou distinguir as cores. Bibliografia:

Governo Eletrônico em http://www.governoeletronico.gov.br/;

Acessibilidade Brasil em http://www.acessobrasil.org.br/;

W3C em http://www.utad.pt/wai/wai-pageauth.html e http://www.ilearn.com.br/TR/WCAG20/;

Acessibilidade Legal em http://acessibilidadelegal.com/;

RENAPI em http://www.renapi.gov.br/acessibilidade

Dúvidas e Informações sobre esta ferramenta e outras

destinadas a Inovação é só acessar: http://inovaday.igovsp.net/

ases - tutorial_inovaday_agosto_2011

Education