Testes de prioridade 1
| Texto alternativo nas imagens. |
Há 14 imagem(ns) e todas fazem uso do atributo "alt" para afixar a legenda. Deve verificar se os textos alternativos afixados se encontram correctos. Cada imagem deve ter o atributo "alt" preenchido com uma legenda que explicite o conteúdo ou cumpra a função da mesma. Se a imagem é muito complexa, exigindo uma descrição mais longa, deve usar em adição o atributo "longdesc".
Forneça um equivalente textual para todo o elemento não textual. Pode ser feito através do atributo "alt", ou "longdesc" ou no conteúdo do elemento. (Prioridade 1) (Exemplo)
|
| Conteúdo alternativo para scripts. |
Há 2 elemento(s) <script> no corpo da página (<body>) e todos eles se encontram acompanhados pelo seu correspondente <noscript>. Verifique o conteúdo alternativo. Os <script> incluídos no corpo do documento devem ter conteúdos alternativos em <noscript> que descrevam a sua acção ou constituam mesmo um substituto da função desenvolvida em <script>. Se a função do <script> depende da posição que ocupa no <body> então é seguro que esse <script> necessita de um equivalente alternativo em <noscript> e que substitua a função <script> exactamente na mesma posição da página. Se a localização do <script> é indiferente, verifique se o mesmo não poderá ser colocado no <head> da página em vez de no <body>.
Forneça um equivalente textual para todo o elemento não textual. Pode ser feito através do atributo "alt", ou "longdesc" ou no conteúdo do elemento. (Prioridade 1) (Exemplo)
|
| Texto alternativo nas áreas de um mapa de imagem. |
Correcto! Há 8 área(s) de mapas de imagem e todas têm o atributo "alt". Deve verificar se os textos alternativos afixados se encontram correctos). Cada área de um mapa de imagem (um elemento que define zonas activas numa imagem) deve ter o atributo "alt" com um texto alternativo que explicite a sua finalidade.
Forneça um equivalente textual para todo o elemento não textual. Pode ser feito através do atributo "alt", ou "longdesc" ou no conteúdo do elemento. (Prioridade 1) (Exemplo)
|
Testes de prioridade 2
| Destino dos links. |
O objectivo de cada link parece estar claramente identificado. Os links devem indicar de maneira muito clara e sucinta para onde apontam, de forma a que os utilizadores possam saber o que encontrarão se decidirem escolher esse link.
Identifique claramente o destino de cada link. (Prioridade 2) (Exemplo)
|
| Associação de etiquetas com controlos. |
Correcto! Há 2 etiqueta(s) (<label>) associada(s) correctamente com o(s) respectivo(s) controlo(s) de formulário. O atributo "for" de cada etiqueta deve coincidir com o atributo "id" do controlo de formulário que identifica. Isto é especialmente útil para os utilizadores que utilizam leitores de ecrã para navegar.
Associe explicitamente os rótulos aos respectivos controlos. (Prioridade 2) (Exemplo)
|
| Elementos obsoletos. |
Correcto! Não se usam elementos obsoletos em HTML 4.01 (<applet>, <center> ou <font>, por exemplo. Os elementos obsoletos são construções que foram sendo substituídas por outras mais apropriadas e devem evitar-se porque podem provocar problemas de acessibilidade. Por outro lado, a sua utilização evidencia uma falta de actualização na área do desenho Web por parte do profissional que o realizou.
Evite o uso de notação obsoleta das tecnologias do W3C. (Prioridade 2) (Exemplo)
|
| Declaração do tipo de documento/Sintaxe. |
Correcto! Há uma declaração do tipo de documento (DTD). Uma DTD indica a sintaxe/gramática utilizada no código fonte da página e permite verificar a correcta aplicação desse código - validar a assertividade de escrita do código.
Crie documentos validando a notação com a gramática formal publicada. (Prioridade 2) (Exemplo)
|
| Atributos obsoletos. |
Correcto! Não se usam atributos obsoletos em HTML 4.01 ("hspace", "bgcolor" ou "nowrap", por exemplo). Os atributos obsoletos são construções que foram descontinuadas e progressivamente substituídas por outras mais apropriados, nomeadamente através do uso de CSS, pelo que devem evitar-se, senão mesmo eliminar-se, por poderem provocar problemas de acessibilidade. Por outro lado, a sua utilização revela falta de actualização por parte do profissional Web que a realizou.
Evite o uso de notação obsoleta das tecnologias do W3C. (Prioridade 2) (Exemplo)
|
| Utilização de cabeçalhos. |
Correcto! Usam-se cabeçalhos (<h1>~<h6>). Devem-se marcar correctamente os cabeçalhos da página e não mesclar os seus níveis aleatoriamente apenas para fazer uso dos estilos (tamanhos de fonte) que estão, por defeito, associados aos cabeçalhos. Use CSS para formatar a cor, o tamanho e o tipo de letra dos cabeçalhos. Actualmente eles constituem um importante elemento facilitador da navegação por todos aqueles que fazem uso de tecnologias de apoio.
Use os elementos cabeçalho (<H1>...<H6>) para transmitir a estrutura dos documentos e utilize-os de acordo com as especificações. (Prioridade 2) (Exemplo)
|
| Utilização de CSS. |
Correcto! Usam-se estilos para controlar a apresentação da página. As folhas de estilo representam um grande passo em frente para a Web uma vez que a sua utilização permite separar o conteúdo da apresentação das páginas.
Use folhas de estilo para controlar a disposição dos elementos na página e a forma de os apresentar. (Prioridade 2) (Exemplo)
|
| Utilização de tabelas para maquetar a página (tabela-layout). |
Correcto! Não se usam tabelas para maquetar a página. As tabelas são elementos para apresentar conteúdo tabular e não devem utilizar-se para apresentar outro tipo de conteúdo. Isto é especialmente importante para quem utiliza navegadores de base texto ou leitores que lêem linha a linha os dados existentes no ecrã.
Não deve usar tabelas para formatar páginas a não ser que a tabela faça sentido quando em formato linear. Caso contrário, se a tabela não fizer sentido, forneça um equivalente alternativo (o qual poderá ser uma versão linear). (Prioridade 2) (Exemplo)
|
| Atributos de apresentação. |
Correcto! Não se usam atributos como "size", "color" ou "face" para controlar a apresentação da página. É incorrecto utilizar atributos da linguagem de programação (X)HTML para controlar a forma/estilo de apresentação da página. Use (X)HTML para estruturar/suportar o conteúdo e as folhas de estilo CSS para controlar o estilo da página.
Use folhas de estilo para controlar a disposição dos elementos na página e a forma de os apresentar. (Prioridade 2) (Exemplo)
|
| Validação do código das folhas de estilo CSS. |
O código das CSS tem erros. É importante evitar os erros de sintaxe das folhas de estilo para permitir a sua correcta interpretação.
Validator de CSS do W3C
Crie documentos validando a notação com a gramática formal publicada. (Prioridade 2) (Exemplo)
|
| Elementos HTML de apresentação. |
Usam-se 1 elementos HTML para controlar a apresentação da página (por exemplo: <b>, <center> ou <font>). É incorrecto utilizar elementos da linguagem de programação (X)HTML para controlar a forma/estilo de apresentação da página. Use (X)HTML para estruturar/suportar o conteúdo e as folhas de estilo CSS para controlar o estilo da página.
Use folhas de estilo para controlar a disposição dos elementos na página e a forma de os apresentar. (Prioridade 2) (Exemplo)
|
| Utilização de medidas absolutas. |
Usam-se medidas absolutas nas folhas de estilo. Se se utilizam unidades de medida relativas, e não absolutas, os utilizadores poderão ampliar ou reduzir o tamanho dos elementos da página de acordo com as suas necessidades. Por outro lado, as páginas adequam-se a ecrãs com diferentes resoluções, redimensionando automaticamente os seus elementos.
Use unidades relativas em vez de absolutas nos valores dos atributos da linguagem de notação e valores das propriedades das folhas de estilo. (Prioridade 2) (Exemplo)
|
| Validação do código (X)HTML. |
O eXaminator não conseguiu estabelecer ligação ao validator de (X)HTML do W3C É importante evitar os erros de sintaxe no código fonte para que a página seja correctamente interpretada pelos agentes de utilizador, nos quais se incluem as ajudas técnicas.
Validator de (X)HTML do W3C
Crie documentos validando a notação com a gramática formal publicada. (Prioridade 2) (Exemplo)
|
Testes de prioridade 3
| Identificação do idioma principal da página. |
Correcto! É especificado "en" como idioma principal. Verifique se o código se encontra correcto. Em todas as páginas deve-se indicar o idioma principal do documento. Se o documento estiver em XHTML, dever-se-á verificar que, para além do atributo "lang", se utiliza também "xml:lang".
Identifique o idioma principal do documento. (Prioridade 3) (Exemplo)
|
| Caracteres por defeito. |
Há 1 controlo(s) vazío(s) e 1 deles não tem um texto por omissão. Todos os campos de edição e áreas de texto devem conter algum carácter porque existem ajudas técnicas que não podem colocar o foco nos controlos vazíos.
Até que os agentes do utilizador consigam manipular controlos vazios correctamente, inclua caracteres predefinidos de preenchimento nas caixas de edição e nas áreas de texto. (Prioridade 3) (Exemplo)
|
| Links redundantes para áreas. |
Usam-se 4 mapa(s) de imagem do tipo cliente sem links redundantes para 5 área(s) encontradas nos mapas. Nem todas as aplicações são capazes de interpretar os textos alternativos definidos para cada área activa dos mapas de tipo cliente afixados no atributo "alt". Por esse motivo deve-se incluir uma lista de links que apontem para os mesmos documentos apontados, passo a redundância, nas áreas do mapa.
Até que os agentes do utilizador alcancem o equivalente textual dos links existentes nas regiões activas dos mapas de imagem client-side , forneça links textuais redundantes para cada região activa do mapa. (Prioridade 3) (Exemplo)
|
| Links adjacentes. |
Há 42 link(s) e 3 são adjacentes a outros links mas não estão separados entre si com caracteres imprimíveis. Alguns agentes de utilizador não conseguem diferenciar os links se estes se encontrarem colados uns aos outros, sem qualquer marca ou carácter imprimível não "linkado" a separá-los. Algo do tipo: link1 | link2 | link3, em que | é um carácter sem ligação.
Até que os agentes do utilizador consigam distinguir links adjacentes, inclua caracteres não-linkados , circundados por espaços, entre os links adjacentes. (Prioridade 3) (Exemplo)
|
Obstáculos à acessibilidade (Testes de prioridade 2)
| Blocos de informação. |
Há uma média de 6 palavras em cada bloco de informação. Estruture e segmente correctamente os textos utilizando títulos, subtítulos, parágrafos e listas. Lembre-se que os blocos de informação demasiado grandes dificultam a sua compreensão.
Divida grandes blocos de informação em grupos mais geríveis e apropriados. (Prioridade 2) (Exemplo)
|
| Título da página. |
A página tem um título que deve verificar manualmente. É o texto "News | FCCN | FCCN" adequado como título para esta página? Deve existir um título para a página, através do elemento <title>, e o mesmo deve ser claro, descritivo e conciso.
Forneça metadados para acrescentar informações semânticas às páginas e aos sítios Web. (Prioridade 2) (Exemplo)
|
| Versão (X)HTML. |
Versão XHTML. É importante usar as tecnologías do W3C quando as mesmas já se encontram disponíveis (alvo de recomendação final) e sejam suportadas, nomeadamente por um vasto leque de agentes de utilizador (navegadores Web, tecnologias de apoio, etc). Recomenda-se o uso das tecnologias do W3C, pela sua aceitação generalizada em todo o mundo e também pelo facto de as mesmas incorporarem as questões de acessibilidade desde a concepção.
Use tecnologias W3C quando a mesma esteja disponível e seja apropriada para uma tarefa. Utilize as versões mais recentes, desde que suportadas. (Prioridad 2) (Exemplo)
|
| Etiquetas para controlos de formulário. |
Há 2 etiqueta(s) (<label>) e 2 delas encontram-se associadas com um controlo de formulário mas o seu posicionamento está incorrecto. Uma vez que alguns agentes de utilizador/aplicações não suportam associações explícitas entre as etiquetas e os controlos de formulário, a etiqueta deve rodear o controlo que identifica.
Até que os agentes do utilizador suportem associações explicitas entre os rótulos e os controlos de formulário, para todos os controlos com rótulos implicitamente associados, certifique-se que os rótulos se encontram apropriadamente posicionados. (Prioridade 2) (Exemplo)
|
| Novas janelas. |
Há 7 links com o atributo "target". Verifique se há um aviso para o utilizador quando um link abre uma nova janela ou uma chamada emergente ("pop-up").
Não provocar o aparecimento de janelas de sobreposição ou outras, e não fazer com que a janela actual seja modificada sem que o utilizador disso seja informado, até que os agentes do utilizador tornem possível a desactivação de janelas secundárias. (Prioridade 2) (Exemplo)
|
Ruídos à acessibilidade (Testes de prioridade 3)
| Informação sobre documentos relacionados. |
Correcto! Proporciona-se informação sobre documentos relacionados através de 1 elemento(s) <link> existentes no cabeçalho da página. Os elementos <link> com atributos "rel" ou "rev" permitem dar informação acerca da relação entre a página actual e outros recursos.
Providencie informação sobre colecções de documentos (i.e. documentos compostos por múltiplas páginas). (Prioridade 3) (Exemplo)
|
| Agrupar links. |
64% dos links estão organizados em listas (total de links: 42). Devem-se proporcionar barras de navegação constituidas por listas de links para os agrupar, facilitando assim a sua localização. Lembre-se que as listas não se definem pelo seu aspecto gráfico mas pelo uso apropriado dos elementos <ol> (lista ordenada), <ul> (lista não ordenada) e <dl> (lista de definição).
Providencie barras de navegação para salientar e dar acesso aos mecanismos de navegação. De preferência faça uso de elementos de notação para listas (<ul>...<ol>) para estruturar esses mecanismos. Use CSS para lhes dar estilo. (Prioridade 3) (Exemplo)
|
| Utilização de accesskey. |
Não se utiliza o atributo "accesskey". Os atalhos de teclado permitem, a quem utiliza o teclado para navegar, aceder rapidamente aos elementos mais importantes da página. É particularmente importante colocar uma tecla de atalho para acesso ao campo de edição do motor de busca.
Defina teclas de atalho para links importantes (incluíndo os que se encontram nos mapas de imagem client-side ), controlos de formulário, e grupos de controlos de formulários. (Prioridade 3) (Exemplo)
|
| Formas para saltar os grupos de links. |
Não se proporciona uma forma para saltar os grupos de links (total de links: 42). Deve-se proporcionar um meio para saltar os grupos de links para poder chegar rapidamente ao conteúdo principal da página.
Agrupe links relacionados, identifique o grupo (em benefício dos agentes do utilizador) e, até que os agentes do utilizador o façam, forneça uma forma de saltar um grupo. (Prioridade 3) (Exemplo)
|