## Introdução ## Página de entrada

Relatório de Acessibilidade
Site: http://acessibilidade.cm-lisboa.pt
28 de Janeiro de 2009.
## Introdução
O presente relatório foi elaborado recorrendo a uma validação automática e a uma
validação manual. Para a validação automática foram efectuados testes com duas
ferramentas:
•
•
TAW (Test Accesibilidad Web, versão offline – encontram o programa em
www.tawdis.net para download gratuito). Com o TAW foi possível detectar
58 páginas. Destas 58 verifica-se que 5 assinalam erros de prioridade 1 e as
restantes têm todas erros de prioridade 2 e 3. Envia-se em anexo (formato html
compactado em zip) o relatório onde é possível consultar a lista de erros
detectados;
eXaminator. As mesmas páginas detectadas com o TAW foram submetidas
ao validador eXaminator. Neste verifica-se que 49 é que constituem
verdadeiras páginas HTML. Em 49 páginas verifica-se que 88% passam nos
testes da ferramenta para o nível A de acessibilidade. Os relatórios qualitativos
das diversas páginas podem ser consultados online em:
http://www.acesso.umic.pt/webax/index.php?ent=292 .
Chama-se no entanto a atenção para o facto de, apesar dos resultados obtidos pelas
ferramentas automáticas serem animadores e globalmente positivos, a validação
manual revela vários problemas de acessibilidade que convém corrigir. Chama-se
igualmente a atenção para o facto de a análise por ferramentas automáticas só ser
possível a partir da página inicial que não tem o Frame, ou seja a partir de:
http://acessibilidade.cm-lisboa.pt/index.php?id=135 .
Atendendo a que se pretende produzir, com a presença do Núcleo de Acessibilidade
online, uma boa prática de Design for All aconselha-se a: elevar o padrão de
conformidade para com as WCAG1.0 do W3C – tendencialmente obter conformidade
AAA.
## Página de entrada
Seria suposto num site feito por php que ao introduzir http://acessibilidade.cmlisboa.pt/index.php fossemos parar à primeira página do site. Mas tal não sucede.
Aquilo que nos aparece é a página que se visualiza a seguir:
Figura: primeira página do site com /index.php (!? É estranho).
Será melhor verificar o que se passa, uma vez que a presente situação não é normal.
## Frame
Propõe-se a eliminação do frame existente na primeira página. Ele perturba muito as
tecnologias de apoio e os próprios sistemas de indexação do tipo Google. No caso
deste último, esta prática impossibilita-o de prosseguir o processo de indexação para
além da primeira página. Qualquer utilizador fica impossibilitado de referenciar
directamente páginas interiores.
É um completo disparate colocar dentro da estrutura <noframe> que é utilizada para
construir uma alternativa sem frames acessível a seguinte construção:
<noframes>
Clique <a href="http://www.cmlisboa.pt">Aqui</a> para aceder ao Site da
C&acirc;mara Municipal de Lisboa
</noframes>
Isto significa que estamos a admitir que a versão actual tem problemas e que, para
quem não consiga navegar nela, pode usar em alternativa o site principal da CM
Lisboa. Não nos parece que o site principal da CM Lisboa disponha de conteúdos
alternativos equivalentes aos existentes no site do núcleo de acessibilidade. Não nos
parece que a ideia seja fazer do acessibilidade.cm-lisboa.pt um site acessível dos
conteúdos existentes no site www.cm-lisboa.pt . O inverso é ainda mais estranho.
Se se considera o site principal (www.cm-lisboa.pt) uma alternativa acessível ao
presente site (alojamento.cm-lisboa.pt), pergunta-se: para quê construir uma versão
alternativa ao primeiro? Não faz o mínimo sentido. Aconselha-se vivamente a
abandonar a estrutura de Frames.
## Javascript em links
Este link não funciona se o javascript estiver desactivado.
<a
href="javascript:tx_dropdownsitemap_pi1_swapCla
sses(185);" title="Click here to view the
subpages">
<img
src="index.php?eID=tx_nawsecuredl&amp;u=0&amp;f
ile=typo3temp/pics/c9b63600cf.gif&amp;t=1233154
155&amp;hash=f14b711507f91180f6cf544ab6c2c641"
width="12" height="12" border="0" hspace="0"
vspace="0" border="0" id="pic_185" alt="Folder"
title="Click here to view the subpages" /></a>
As ferramentas automáticas detectam algumas páginas com este tipo de links
dependentes da activação por javascript. Tal prática deve ser abandonada.
As ferramentas de validação de acessibilidade detectam igualmente um conjunto de
manipuladores de eventos de javascript dependentes do dispositivo, ou seja mais
concretamente da utilização do rato. É necessário dotar as funções de manipuladores
independentes do dispositivo, ou então apagar por completo os manipuladores. No
caso em concreto aconselhamos mais esta estratégia. Consulte os relatórios
qualitativos do eXaminator para mais informação sobre a existência dos
manipuladores de eventos.
## Javascript para efeitos decorativos
Verifica-se que é usado javascript para a produção de um conjunto de efeitos
especiais. Desactivando o javascript não se perde grande coisa e não é prejudicial à
acessibilidade. No entanto a presença de javascript sem o corresponde alternativo
(desnecessário neste caso) continua a ser assinalado pelas ferramentas automáticas.
Um exemplo desses efeitos especiais está relacionado com o bullet gráfico que
antecede cada item do menu principal.
Figura: efeitos especiais feitos com Javascript
Informa-se que os mesmos efeitos podem ser obtidos usando apenas CSS. Pode ser
visto um exemplo disso mesmo no menu principal do site
http://www.diploma.umic.pt/ .
## Motor de busca
O motor de busca funciona sem javascript activo mas o campo de pesquisa e a
respectiva etiqueta devem ser corrigidos.
Figura: motor de busca: partes em português e partes em inglês.
Aconselha-se a colocar tudo em português
Actualmente o campo de edição está marcado da seguinte forma:
<td>Search for:</td>
<td colspan="2">
<input type="text"
name="tx_indexedsearch[sword]"
value="pesquisar" class="tx-indexedsearchsearchbox-sword sword" />
</td>
Aconselha-se a: (1) identificar a label; (2) associar a label ao campo de edição.
<label for=”pesquisa”>Pesquisar por: <input
type="text" id=”pesquisa” name="tx_indexedsearch[sword]"
value="pesquisar" class="tx-indexedsearchsearchbox-sword sword" />
</label>
No exemplo anterior retirámos também a formatação por tabelas layout. Se o site
pretender elevar o padrão de acessibilidade vai ser necessário eliminar as tabelas
layout que se trata de uma regra de prioridade 2 (i.e. necessária para a conformidade
AA).
## Gramática de programação
A gramática de programação, identificada nas páginas, já é antiga (HTML
TRANSITIONAL). Aconselha-se a usar xhtml1.0 strict. Mesmo mantendo a
gramática como está é importante eliminar os erros de html existentes. Foram
localizados entre 3 a 14 erros de HTML por página.
## Gramática das CSS
É igualmente importante corrigir os erros de CSS assinalados pelas ferramentas
automáticas. O eXaminator dá conta da existência de erros na(s) folha(s) de estilo. A
validação do HTML e da CSS permite uma maior consistência da apresentação em
diferentes browsers e em diferentes tecnologias de apoio.
## Uso de medidas absolutas na definição dos
tamanhos de letra
Em vez do uso da medida px na definição dos tamanhos de letra devem ser usadas
medidas relativas do tipo % ou ‘em’. Isto aplica-se essencialmente às propriedades
definidas na folha de estilo. O eXaminator detecta várias ocorrências deste género na
folha de estilo.
## Idioma principal das páginas e mudança de
idioma ao longo da página
Verifica-se que as páginas não estão identificadas como sendo portuguesas. Onde está
a instrução <html> colocar <html lang=”en”>. Isto para a actual gramática de
programação. Se passarem a usar uma gramática xhtml então terão que adicionar o
atributo xml:lang=”en”.
Verifica-se também que as mudanças de idioma ao longo da página também não estão
identificados. Por exemplo a seguinte informação:
Center for Universal Design
Centro de investigação, informação e assistência técnica que promove
o design Universal na habitação, espaço público e comercial,
associado à North Carolina State University
Fica em código em algo como (atenção aos atributos usados para marcar o idioma dos
diversos elementos):
<a href=”…” … lang=”en”>Center for Universal
Design</a>
<p>Centro de investigação, informação e assistência
técnica que promove o <span lang=”en>design</span>
Universal na habitação, espaço público e comercial,
associado à <span lang=”en”>North Carolina State
University</span></p>
Esta prática deve ser usada em todas as expressões existentes em idioma diferente do
principal (i.e. português).
## Imagens
As legendas das imagens têm de ser marcadas de acordo com a sua função.
Aconselha-se a leitura do tutorial “Como legendar imagens?” existente em:
http://www.acesso.umic.pt/tutor/imagens_1/index.htm .
Por exemplo a imagem:
Deve ter a legenda (atributo alt do elemento <img>) igual ao que se lê na imagem =
”Dúvidas sobre a interpretação do Dec. Lei 163/06 de 8 de Agosto?”. O clique aqui é
dispensável. Repare-se que actualmente tem o alt=”FAQ’s Dec Lei 163/03”. Não é
grave mas aconselha-se a corrigir.
Já a imagem que serve de identificador do site, que transmite o nome do departamento
onde estamos tem uma alt=”” (vazio). Isto já é grave.
Deve ter um alt=”Núcleo de Acessibilidade – Departamento de Acção Social –
Câmara Municipal de Lisboa”. Veja-se abaixo a sugestão para que este elemento seja,
inclusivamente, o elemento mais importante da primeira página, ou seja merecedor de
ser marcado como <h1> da primeira página.
No caso das imagens que servem de bullet gráfico que antecedem as diversas opções
e subopções existentes no menu devem seguir a estratégia indicada abaixo, ou seja,
integrarem a CSS externa. Se insistirem em ter um menu não estruturado, os bullets
gráficos devem ser a legenda de “-“ ou de “*”.
No caso de imagens (ver abaixo) que forma links o seu alt (legenda) deve
corresponder ao título da página à qual estão ligadas. No caso em concreto o alt
deveria ser igual a “Congresso Internacional - Funcionalidade Humana em
Perspectiva: Traçando Caminhos, Rasgando Horizontes”. No entanto, se verificarmos
existe também um link com este mesmo texto. Aconselhamos a retirar o link da
imagem e a considerar a imagem como uma imagem meramente decorativa. No caso
das imagens decorativas, que decoram ou reforçam graficamente as secções, não são
consideradas importantes para a transmissão da mensagem ou da estrutura e por isso
devem ter legendas com alt=”” (vazio).
## Fluxo da informação
Ao analisar-se o fluxo de informação verifica-se a informação constante da coluna
mais à esquerda aparece primeiro que a que se encontra no corpo do site. Atendendo
ao site que é, aconselhamos a que a informação existente no corpo apareça primeiro
que a informação constante do lado esquerdo. Aconselha-se a usar posicionamento
por CSS e não por tabelas layout. Em termos de estilo, o site ficará exactamente igual.
Isto faz com que a informação constante do corpo da página suba de importância: será
a primeira a ser lida pelas tecnologias de apoio mas também a primeira a ser indexada
pelos motores de busca do tipo google.
Figura: fluxo de informação: 1 surge primeiro que 2. Propõe-se a inversão: 2 antes de 1.
## Menus
Todos os menus têm de ser marcados/codificados como listas do tipo <ul><li>. A
inexistência de tal prática faz produzir menus sem qualquer tipo de estrutura. Desta
forma é impossível ao utilizador perguntar à tecnologia de apoio onde está o menu? É
impossível o utilizador interrogar a sua tecnologia de apoio sobre se determinada
opção é uma opção ou é uma subopção? Perde-se o encadeamento existente entre as
opções e as subopções que visualmente se consegue discernir. Veja-se a imagem
abaixo: aquilo que temos não é uma lista de opções mas um monte de links. Quais são
as opções e quais são as subopções?
Figura: Quais são as opções e quais são as subopções?
O menu tem de ser formatado como uma estrutura do tipo lista não ordenada <ul>
(unorder list) em que as opções são identificadas com o elemento <li> (list item).
Algo como:
<ul>
<li lang=”en” xml:lang=”en”>Home Page</li>
<li>...</li>
<li>Áreas de actividade
<ul>
<li>Acções de Formação</li>
<li>...</li>
</li></ul>
<li>...</li>
<li>Conactos</li>
</ul>
O estilo deve ser fornecido integralmente por uma folha de estilo externa (CSS). Para
menus HTML e CSS ver por exemplo
(http://www.tjkdesign.com/articles/new_drop_down/default.asp). O próprio bullet
gráfico existente antes de cada opção do menu pode passar para a CSS. É igualmente
importante que o menu possa ser integralmente usado independentemente do
dispositivo usado, nomeadamente rato ou teclado.
A mesma lógica se aplica aos menus horizontais como o da imagem abaixo.
Figura: menu horizontal. Deve ser estruturado como lista e o estilo dado por CSS.
## Parágrafos
Verifica-se que nos documentos a grande maioria não tem os <p>arágrafos</p>
correctamente formatados. Qualquer parágrafo inicia-se com <p> e fecha com </p>.
Na imagem abaixo verifica-se que todo o documento está dentro de um único
parágrafo. O espaçamento visual que se observa entre aquilo que são parágrafos está
feito com quebras de linha (i.e. 2 quebras de linha – usa <br />). Aconselha-se a
eliminar tal prática. Isto impossibilita às tecnologias de apoio a detecção dos
parágrafos, impossibilitando os utilizadores de navegar entre parágrafos.
Figura: documentos sem parágrafos devidamente marcados.
## Cabeçalhos
É necessário construir uma estrutura hierarquizada de cabeçalhos. A lógica da
estruturação dos cabeçalhos é a que se apresenta nos 2 diapositivos abaixo.
Actualmente ela não existe. Por exemplo na primeira página, temos 3 cabeçalhos de
nível 1 (i.e. <h1>): (1) Notícias, (2) Biblioteca e (3) Ligação da semana – na lógica
expressa nos diapositivos anteriores deve existir apenas um elemento <h1> por
página. Por outro lado, há páginas (por exemplo: http://acessibilidade.cm-
lisboa.pt/index.php?id=141) onde não existe um único cabeçalho, embora visualmente
se possa identificar alguns.
Deixa-se abaixo uma sugestão para a primeira página:
Para a imagem deve ser usado o h1:
<h1><img ......... ></h1>
<h2>Notícias</h2>
<h3>.... para os títulos das notícias</h3>
<h2>Biblioteca</h2>
<h2>Ligação da semana</h2>
<h3>Design for All Education and Training</h3>
Isto permite a quem navega com tecnologias de apoio solicitar à sua tecnologia que
navegue por exemplo pelos cabeçalhos de nível 2 da página (supostamente
identificadores das secções da página.
Para o caso das páginas interiores aconselha-se a fazer do título principal um <h1>.
No caso, por exemplo das notícias, podem fazer:
<h1>Congresso Internacional "Funcionalidade
Humana em Perspectiva: Traçando Caminhos,
Rasgando Horizontes"</h1>
Os restantes níveis de cabeçalhos (H2...H6) devem ser utilizados de forma
hierarquizada ao longo da página/artigo de acordo com as necessidades estruturais da
mesma.
## Tabelas layout
O número de tabelas layout não é grande (das páginas analisadas localizaram-se uma
média de 2 por página), no entanto o elemento <table> não foi criado para este efeito.
Ele existe para formatar tabelas de dados. Caso pretendam um site que corresponda a
uma boa prática terão que eliminar todas as tabelas layout. Trata-se de uma regra de
prioriedade 2 (necessária ao cumprimento da conformidade AA).
## Links para documentos
Encontraram-se na plataforma vários documentos afixados da seguinte forma:
Aconselha-se a construir o link da seguinte forma:
<a ....>Título do documento (PDF, xxMB) –
documento abre noutra janela</a>.
Ou seja, (1) a informação “abre noutra janela” tem de fazer parte do link; (2) é
importante que o nome do documento faça parte integrante do link, caso contrário
ficamos com links não compreensíveis fora do contexto; (3) é importante informar o
utilizador do tamanho do ficheiro.
Tratando-se de ficheiros PDF é conveniente também disponibilizar uma versão
alternativa do documento em TXT ou preferencialmente em HTML. No mínimo deve
ser disponibilizado um resumo ou o índice do documento em HTML.
## Links não compreensíveis fora do contexto
Não se devem usar links do tipo “ver mais”. Este tipo de links não são
compreensíveis fora do contexto. A construção deverá ser substituída por algo como
“ver mais sobre Congresso Internacional Funcionalidade Humana em Perspectiva:
Traçando Caminhos, Rasgando Horizontes". Por questões estéticas pode querer-se
apenas tornar visível no ecrã a expressão “ver mais” e deixar visível a expressão
completa apenas a quem usa tecnologias de apoio, nomeadamente aos leitores de ecrã
usados por pessoas cegas. Para isso, os links deverão ter a seguinte codificação:
<a href= .... >ver mais <span
class=”hide”>sobre Congresso Internacional
Funcionalidade Humana em Perspectiva: Traçando
Caminhos, Rasgando Horizontes</span></a>
A operação de esconder do ecrã e deixar visível às tecnologias é efectuada através da
folha de estilo recorrendo às seguintes propriedades (as quais devem ser colocadas na
CSS):
/* Esconder um elemento */
.hide {
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}
## Links com problemas
Dos 58 links detectados pelo TAW, uma análise manual permite constatar que os
seguintes links têm alguns problemas.
Os links abaixo não se conseguem abrir por vários motivos: acesso negado, não
existem
•
•
•
•
•
•
http://acessibilidade.cmlisboa.pt/index.php?eID=tx_nawsecuredl&u=0&file=fileadmin/DASNA/Biblioteca/Edifí?cios_de_HabitaíÛí£o/Smart_housing_design_objectives_
Australia.pdf&t=1233154231&hash=2e0b159ad7b21be309f03caf4f373e5a
http://acessibilidade.cmlisboa.pt/index.php?eID=tx_nawsecuredl&u=0&file=fileadmin/DASNA/Biblioteca/Edifí?cios_de_HabitaíÛí£o/ud_habitacao_brochura_australia.p
df&t=1233154231&hash=2527456b2eb3b9876f6993dc02907fdf
http://acessibilidade.cmlisboa.pt/index.php?eID=tx_nawsecuredl&u=0&file=fileadmin/DASNA/Biblioteca/Edifí?cios_de_HabitaíÛí£o/UD_inHousing.pdf&t=123315423
1&hash=894380d180d49ccc05579362fcf3e16f
http://acessibilidade.cmlisboa.pt/index.php?eID=tx_nawsecuredl&u=0&file=fileadmin/DASNA/Biblioteca/Edifí?cios_Pí_blicos/Edificios_culturais__franca.pdf&t=1233154228&hash=d5d068a9387e8fb9be017999494b8a2b
http://acessibilidade.cmlisboa.pt/index.php?eID=tx_nawsecuredl&u=0&file=fileadmin/DASNA/Biblioteca/Edifí?cios_Pí_blicos/questionnaireaccessibilite_Franca.pdf&t=1233154228&hash=a811e9a365a7599f91a867765
bb2c324
http://acessibilidade.cmlisboa.pt/index.php?eID=tx_nawsecuredl&u=0&file=fileadmin/DASNA/Biblioteca/Espaí?ŒÛo_Pí?Œ_blico/Guia_para_la_redaccion_de_un_Plan
_Municipal_de_Accesibilidad.pdf&t=1233154217&hash=2a3b8e43a230254e
776f4648728db969
Desconhece-se de que ficheiros se tratam mas aconselha-se a definir nomes de
ficheiros sem caracteres acentuados e sem espaços. O uso de espaços e caracteres
acentuados para nomes de ficheiros causam problemas em alguns sistemas operativos
que estão do lado do utilizador. Ao usar nomes sem espaços e sem caracteres
acentuados elimina-se este problema.
Os links abaixo são imagens, embora tenham o URL estranho que faz o TAW pensar
que se trata de uma página web. Na verdade é uma página onde existe apenas uma
única imagem. No caso do eXaminator foram retiradas da análise dada a escassez de
elementos existentes.
Veja-se o código da página:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
<html>
<head>
<title>Image</title>
</head>
<body bgColor="#dddddd"><a
href="javascript:close();"><img
src="index.php?eID=tx_nawsecuredl&amp;u=0&amp;f
ile=uploads/pics/Include2_2.jpg&amp;t=123315902
3&amp;hash=78ffe000e5599779e7c813e7704e6da2"
width="65" height="64" border="0" alt="" /></a>
</body>
</html>
Isto induz que existem imagens introduzidas nas páginas com técnicas baseadas em
Frames, ou seja usando o elemento <frame> ou <iframe>. Esta prática deve ser
eliminada.
Encontraram-se este tipo de imagens nos links abaixo:
•
•
•
http://acessibilidade.cmlisboa.pt/index.php?eID=tx_cms_showpic&file=uploads%2Fpics%2Faxi_ada
ptado_barcelona_2.jpg&width=400m&height=400&bodyTag=%3Cbody%20
bgColor%3D%22%23dddddd%22%3E&wrap=%3Ca%20href%3D%22javasc
ript%3Aclose%28%29%3B%22%3E%20%7C%20%3C%2Fa%3E&md5=eba
cb762d6fcb75dd36d77cdeeb25ce6
http://acessibilidade.cmlisboa.pt/index.php?eID=tx_cms_showpic&file=uploads%2Fpics%2FInclude2
_2.jpg&width=400m&height=400&bodyTag=%3Cbody%20bgColor%3D%2
2%23dddddd%22%3E&wrap=%3Ca%20href%3D%22javascript%3Aclose%2
8%29%3B%22%3E%20%7C%20%3C%2Fa%3E&md5=20ee71217d3bb6e8f
984e65b08a99fae
http://acessibilidade.cmlisboa.pt/index.php?eID=tx_cms_showpic&file=uploads%2Fpics%2Fcongress
o_Liga.jpg&width=400m&height=400&bodyTag=%3Cbody%20bgColor%3
D%22%23dddddd%22%3E&wrap=%3Ca%20href%3D%22javascript%3Aclo
se%28%29%3B%22%3E%20%7C%20%3C%2Fa%3E&md5=c774717b8be8
66a056c1b41f30dbb77d
## Uso errado de elementos estruturais
Verifica-se que o site usa elementos estruturais que existem para dar forma semântica
a determinados conteúdos que estão a ser usados por mero efeito estilístico. No
exemplo que se mostra abaixo usa-se erradamente uma lista de definição (<dl>) a
qual existe em HTML para dar corpo a definições de termos, do tipo entradas de
dicionário.
<dl class="csc-textpic-image csc-textpicfirstcol csc-textpic-lastcol"
style="width:190px;">
<dt><a href="index.php?id=186"
target="_self" ><img
src="index.php?eID=tx_nawsecuredl&amp;u=0&amp;f
ile=uploads/pics/bt_faq.gif&amp;t=1233240793&am
p;hash=b3aa685e4d123ce85e3453d70da11a47"
width="190" height="191" border="0" alt="FAQ's
Dec. Lei 163/06" /></a></dt>
</dl>
No caso das tecnologias, nomeadamente das tecnologias de apoio, este tipo de
elementos estruturais, erradamente usados, induzem os utilizadores em erro. Neste
caso, a tecnologia de apoio informa o utilizador que está perante uma lista de
definição quando na verdade isso é mentira. Foram inclusivamente localizados
elemntos <dt> (termos a definir) completamente vazios.
## Símbolo de Acessibilidade
A afixação do símbolo de acessibilidade deve seguir as recomendações e a técnica
inscritas na página:
http://www.acesso.umic.pt/recursos/simbolo.htm .