Rac_WebAcc-Capt4-JF-accept

Capítulo IV
Ferramentas
de visualização
Opera
Web Accessibility Toolbar
Ferramentas de visualização
Há um provérbio que diz que uma imagem vale mais do que
mil palavras. Muitos dos conceitos que te apresentamos no
capítulo anterior podem ser verificados nas páginas já
existentes, recorrendo a ferramentas específicas.
Estas permitem mostrar aquilo que foi indicado sem que
tenhas necessidade de mexer na página. Assim, podes
verificar como se comportam as tuas páginas Web quando
certas funcionalidades estão activadas.
Podes verificar a estrutura semântica da página (indicação dos
cabeçalhos, parágrafos, listas, etc.), como se comportam num
ambiente de alto contraste, que acontece se tirares as CSS,
etc.
De modo genérico, é possível indicar a forma como os
diversos elementos serão apresentados, ultrapassando-se
qualquer necessidade que o visitante possa ter.
Opera Browser
O browser Opera é um dos que, desde sempre, se preocupou
com as questões de acessibilidade e tenta ajudar os
utilizadores a contornarem certos problemas.
Dispõe também de um conjunto de opções de visualização
que permitem simular cenários de utilização. Com estes
cenários de visualização é possível verificar a acessibilidade às
páginas em diversas circunstâncias.
A partir do menu Ver > Estilo é possível escolher diversos
modos de funcionamento: uns limitam-se a indicar onde estão
os elementos estruturantes da página, outros alteram a forma
como esta é visualizada e um terceiro grupo 'desliga' certas
funcionalidades.
Modo do utilizador
Uma das grandes vantagens do Opera é a possibilidade de se
substituírem as folhas de estilo originais das páginas por uma
definida pelo utilizador.
No segundo separador (Modos de Apresentação) deste ecrã é
possível indicar o que será mantido nos Modos de Autor e de
Utilizador. Podes chegar a uma solução de compromisso, por
exemplo, em que são mantidas todas as formatações com
excepção das ligações ou das cores.
Esta parametrização pode ser encontrada em:
Ferramentas > Preferências
Conteúdo > Opções de Estilo
>
Avançadas
>
Alto Contraste
Este modo remove toda a cor da página, substituindo-a por
um fundo branco e texto negro, ou vice-versa, embora não
afecte as imagens existentes.
Aparência de acessibilidade
Este modo transforma toda a página numa única coluna (i.e.
lineariza os conteúdos existentes na página) facilitando a
navegação, que passa a processar-se apenas na vertical.
Os diversos blocos são arranjados na vertical pela ordem
original de navegação e são despidos da formatação original.
Esta é a forma como as tecnologias de apoio, na generalidade,
vêem os conteúdos. Por isso, é importante verificar se a
informação apresentada desta forma faz sentido ao ser lida.
É importante, embora possa haver excepções, que em cada
página exista apenas um elemento <h1> e que o mesmo
corresponda, em certa medida, ao título da página. É
igualmente importante que respeites a sequência hierárquica
dos cabeçalhos.
Classe e Id
Este modo expõe as classes e os id dos diversos elementos,
facilitando a identificação da formatação que se encontra
atribuída a cada um deles.
O texto é ampliado, as ligações organizadas em listas verticais
e os formulários simplificados para que sejam mais simples de
preencher.
Tabela de conteúdos
Este modo aproveita a estrutura semântica criada por
cabeçalhos (elementos <h1> a <h6>) para criar uma espécie
de índice dos conteúdos da página.
Contorno
Associa uma moldura vermelha a cada um dos elementos da
página (<div>, <span>, <p>, …), o que permite ficar a saber
que áreas ocupam. Ao activares esta visualização, ficas com
uma espécie de radiografia da tua página em que se evidencia
o seu “esqueleto”. É o que tecnicamente se chama Box Model
ou, se preferires, Modelo de Caixas.
Alt Debugger
Verifica se todas as imagens têm o atributo alt preenchido.
Estrutura integrada
Este modo expõe os elementos-linha, cuja definição se
encontra no capítulo 2 deste manual. São exemplos desses
elementos o acrónimo (<acronym>), o <strong>, o <em>.
Desactivar Posicionamento
O estilo, também designado muitas vezes neste manual por
formatação, tem no essencial duas componentes: uma
componente sobre a aparência do conteúdo (cor, tipo de
letra, tamanho de letra, etc.) existente dentro do elemento e
outra relacionada com o posicionamento do elemento no
espaço, nomeadamente no ecrã. É o posicionamento que
controla se o elemento fica à direita, ao centro ou à esquerda
do ecrã, em cima ou em baixo. Ao usarmos o modo de
visualização ‘desactivar posicionamento’, os elementos
perdem o seu posicionamento, aparecendo listados uns por
baixo dos outros, de acordo com o seu fluxo natural no
código.
Opera e a Acessibilidade
O Opera é um dos browsers que melhor evidencia as
vantagens e o potencial da acessibilidade Web.
 É o melhor simulador de tecnologias de apoio que podes
arranjar;
 É o que melhor evidencia a importância da separação
entre formatação e conteúdos (uma das regras de ouro da
acessibilidade). Ao dar ao visitante a possibilidade de
alterar apenas a formatação, permite-lhe um enorme
leque de opções, respondendo a um vasto conjunto de
necessidades;
 Permite ampliações até 1000% e readapta a informação
ao espaço existente no ecrã;
 O mecanismo de ampliação/redução do Opera permite-te
simular como fica o teu sítio Web em diferentes
resoluções de ecrã, mesmo em ecrãs tão pequenos como
os dos telemóveis.
A redução da ampliação é matematicamente igual a
aumentares a resolução do ecrã. O Opera permite-te
simular resoluções tão altas que te projecta a visualização
para resoluções que só encontrarás nos ecrãs daqui a
alguns anos. Ao efectuares ampliações com o Opera,
estás também a simular como se comportam as tuas
páginas em ecrãs com resoluções baixas;
 O Opera tem também a vantagem de ampliar não apenas
o texto mas também as imagens;
 Tem sintetizador de fala e reconhecimento de voz
incorporado o que te permite dar comandos por voz;
 Todos os comandos estão acessíveis a quem usa apenas o
teclado;
 Com o rato podes executar comandos de navegação
desenhando no ecrã os gestos que lhes estão associados;
 E por último, algo que vais gostar. É grátis!
Web Accessibility Toolbar
As barras de ferramentas são um precioso auxiliar para quem
tem a necessidade de efectuar análise manual das questões
de acessibilidade. Se o Sherlock Holmes algum dia tivesse que
analisar páginas Web iria, certamente, usar um destes
instrumentos.
A Web Accessibility Toolbar (WAT) foi produzida pela equipa
da Accessible Information Solutions (AIS) da associação Vision
Australia.
A partir da WAT, é possível testar diversos aspectos de
acessibilidade, simular cenários hipotéticos e experimentar a
mesma página em diferentes condições. No fundo, faz do teu
browser um verdadeiro laboratório de testes para páginas
Web.
A WAT encontra-se disponível numa série de idiomas,
incluindo Português, e pode ser usada no Internet Explorer e
também no Opera.
Validadores
O primeiro elemento desta barra dá acesso aos diversos
validadores do W3C e do Web Design Group (WDG) através
dos quais é possível verificar se existem erros no HTML ou nas
folhas de estilo.
Há ainda a possibilidade de recorrer ao serviço HTML Tidy do
W3C para que alguns dos problemas encontrados no HTML
sejam corrigidos automaticamente.
Janela
O facto do teu website ser capaz de lidar com diferentes
resoluções de ecrã é algo que já abordámos neste manual. A
WAT tem uma opção que te permite simular diversas
resoluções de ecrã, desde as velhinhas 640 x 480 pixéis até às
actuais.
O objectivo é verificar se há alguma distorção nas resoluções
mais baixas que possa resultar no encavalitamento dos
elementos e comprometer a legibilidade da página.
CSS
Como será que ficam as tuas páginas se as folhas de estilo não
forem carregadas? E se forem substituídas por outras
definidas pelo utilizador?
Esta pergunta pode ser respondida usando esta opção, que
também serve para obteres uma lista dos estilos que estão
atribuídos aos diversos elementos. Se há algo que não está
exactamente como querias, essa listagem pode ajudar-te a
localizar os pontos onde terás que efectuar alterações à folha
de estilo.
Imagens
Uma das funcionalidades mais interessantes desta barra é a
possibilidade de substituir as imagens pelo texto alternativo,
ou seja, pelas legendas. Durante este processo a Web
Accessibility Toolbar também verifica se existem imagens sem
o atributo alt preenchido.
testes com os teus próprios colegas, nomeadamente colegas
com baixa visão, vulgarmente designados por amblíopes.
A dificuldade em distinguir certas cores pode também impedir
que o visitante consiga ler o texto ou perceba o conteúdo das
imagens.
Estrutura
A Lista de Imagens ajuda a identificar todas as imagens usadas
na página, as suas dimensões e a formatação associada.
Cores
A má utilização de cores, como é o caso da utilização de tons
muito próximos para o fundo e para o texto, ou seja com fraco
contraste, pode ser um sério entrave à acessibilidade. Aquilo
que te pode parecer óbvio e claro pode ser apenas uma
mancha para certos visitantes. As tuas páginas têm que ser
vistas, também, por quem tenha dificuldade de percepcionar
cores. Por isso, o contraste entre a cor do texto e a cor do
fundo tem que ser bem evidente. O problema está, muitas
vezes, em definir o que é um bom contraste e o que não é um
bom contraste. Esta é uma das regras para as quais a WAT te
pode dar uma ajuda mas, sempre que te seja possível, faz
página um papel muito similar ao papel do nosso cérebro em
relação ao corpo. Quando perguntamos a alguém qual é o seu
De todas as opções disponíveis na WAT, a que expõe os
elementos é a mais importante. Através desta, podes
identificar cabeçalhos, formulários e respectivos subelementos, acrónimos ou siglas, abreviaturas, teclas de atalho,
hiperligações abertas com JavaScript e que abrem em novas
janelas.
A própria sequência dos elementos, ou seja aquela que obténs
quando pressionas a tecla TAB, pode ser observada.
DocInfo
Esta opção revela a informação sobre a informação. Confuso?
É natural, pois este é um dos conceitos mais difíceis das
páginas Web. Nas páginas Web, quando as vês pelo lado do
código, encontras um conjunto de instruções dentro do
elemento <head>. Essa área é conhecida tecnicamente como
sendo o cabeçalho da página. O cabeçalho desempenha na
braço direito e esquerdo, quem nos responde, ou sabe a sua
localização, é o cérebro dessa pessoa. Nas páginas Web, o
processo é similar. Por exemplo, quando um leitor de ecrã
quer saber em que idioma está a página, pergunta ou procura
essa informação no cabeçalho da página. A informação sobre
o idioma da página é um dos exemplos daquilo a que se
chama informação sobre informação ou metadados. O
DocInfo revela-te a informação existente no cabeçalho
<head>.
Código
Qualquer uma das opções anteriores avalia, testa ou expõe
uma parte do código HTML que serve de base à página Web. A
opção de Código incide sobre este e permite determinar se
existem erros, se há código que já não deve ser usado e ajuda
a localizar onde se encontra a informação relativa a um certo
elemento/conteúdo.
O inspector do DOM (Document Object Model) dá acesso a
dois serviços que recorrem a um bloco flutuante que
acompanha o apontador do rato e exibe informação sobre o
descritor que se encontra por baixo deste.
O peso e velocidade de carregamento da página também
podem ser avaliados. A possibilidade de identificar certos
conteúdos que se encontram referenciados na página mas
que são externos a esta (vídeos, scripts, etc) permite que as
ligações quebradas sejam corrigidas ainda antes de as páginas
serem publicadas.
Esta é a forma mais simples de conheceres a estrutura de uma
página sem teres que te embrenhar no código HTML.
A informação sobre a estrutura onde o elemento está
integrado (parent structure) é uma das funcionalidades mais
úteis, caso estejas a trabalhar numa página complexa do
ponto de vista do HTML.
Opções IE
Uma das últimas opções do Web Accessibility Toolbar dá a
possibilidade de alterar algumas das configurações do Internet
Explorer sem te obrigar a percorrer um conjunto de menus e
ecrãs.
É possível esconder as imagens, os controlos ActiveX (o Plug-in
Adobe Flash que dá suporte ao YouTube, por exemplo) ou
mesmo as folhas de estilo.
Refs
A barra termina com ligações para um grande conjunto de
páginas com mais informação acerca dos diversos aspectos da
construção de páginas Web.
Há também informação sobre os códigos a usar para indicar o
idioma das páginas e um guia/referência para JavaScript ou
XHTML 1.0.
Podes descarregar o Web Accessibility Toolbar em:
http://www.visionaustralia.org.au/info.aspx?
page=614
A Caixa de diálogo para a acessibilidade adiciona uma função
ao Internet Explorer que até agora só estava disponível no
Opera: a possibilidade de substituir as folhas de estilo originais
da página por uma definida pelo visitante.