## Introdução. ## Página de entrada. Relatório de Acessibilidade Site: 28 de Janeiro de 2009.

Transcrição

1 Relatório de Acessibilidade Site: 28 de Janeiro de ## 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 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: 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: 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 fossemos parar à primeira página do site. Mas tal não sucede. Aquilo que nos aparece é a página que se visualiza a seguir:

2 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=" para aceder ao Site da Câ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 O inverso é ainda mais estranho. Se se considera o site principal ( 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.

3 ## 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&u=0&f ile=typo3temp/pics/c9b63600cf.gif&t= &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

4 ## 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

5 É 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

6 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: 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

7 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

8 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 ( 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.

9 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. ## Cabeçalhos Figura: documentos sem parágrafos devidamente marcados. É 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.

10 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:

11 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:

12 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; }

13 ## 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 lisboa.pt/index.php?eid=tx_nawsecuredl&u=0&file=fileadmin/das- NA/Biblioteca/Edifí?cios_de_HabitaíÛí o/smart_housing_design_objectives_ Australia.pdf&t= &hash=2e0b159ad7b21be309f03caf4f373e5a lisboa.pt/index.php?eid=tx_nawsecuredl&u=0&file=fileadmin/das- NA/Biblioteca/Edifí?cios_de_HabitaíÛí o/ud_habitacao_brochura_australia.p df&t= &hash= b2eb3b9876f6993dc02907fdf lisboa.pt/index.php?eid=tx_nawsecuredl&u=0&file=fileadmin/das- NA/Biblioteca/Edifí?cios_de_HabitaíÛí o/ud_inhousing.pdf&t= &hash=894380d180d49ccc fcf3e16f lisboa.pt/index.php?eid=tx_nawsecuredl&u=0&file=fileadmin/das- NA/Biblioteca/Edifí?cios_Pí_blicos/Edificios_culturais_- _franca.pdf&t= &hash=d5d068a9387e8fb9be b8a2b lisboa.pt/index.php?eid=tx_nawsecuredl&u=0&file=fileadmin/das- NA/Biblioteca/Edifí?cios_Pí_blicos/questionnaireaccessibilite_Franca.pdf&t= &hash=a811e9a365a7599f91a bb2c324 lisboa.pt/index.php?eid=tx_nawsecuredl&u=0&file=fileadmin/das- NA/Biblioteca/Espaí?ŒÛo_Pí?Œ_blico/Guia_para_la_redaccion_de_un_Plan _Municipal_de_Accesibilidad.pdf&t= &hash=2a3b8e43a230254e 776f db969 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:

14 <!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&u=0&f ile=uploads/pics/include2_2.jpg&t= &hash=78ffe000e e7c813e7704e6da2" 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: 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 _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 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.

15 <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&u=0&f ile=uploads/pics/bt_faq.gif&t= &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: