Técnicas para as WCAG 2.0

Ir para o conteúdo (Pressione a tecla Enter)

Falhas Comuns para as WCAG 2.0

Esta página Web lista as Falhas Comuns de Técnicas para as WCAG 2.0: Técnicas e Falhas para as Directrizes de Acessibilidade para o Conteúdo da Web 2.0. Para informação sobre as técnicas, consulte Introdução às Técnicas para as WCAG 2.0. Para uma lista das técnicas utilizadas em outras tecnologias, consulte o Índice.


Índice



F1: Falha do Critério de Sucesso 1.3.2 devido à alteração do significado do conteúdo colocando informações com CSS

Aplicabilidade

Todas as tecnologias que suportem CSS.

Esta falha está relacionada com:

Descrição

Esta técnica descreve a condição de falha que resulta quando o CSS, em vez da marcação estrutural, é utilizado para modificar a disposição visual do conteúdo, e a disposição modificada altera o significado do conteúdo. Mediante a utilização de propriedades de posicionamento de CSS2, o conteúdo pode ser apresentado em qualquer posição na janela do utilizador. A ordem pela qual os itens são apresentados num ecrã pode ser diferente da ordem em que se encontram no documento de origem. As tecnologias de apoio dependem do código fonte ou de outra ordem determinada de forma programática para apresentar o conteúdo na sequência correcta. Assim, é importante não depender de CSS para posicionar visualmente o conteúdo numa sequência específica se esta sequência resultar num significado que seja diferente da ordem de leitura determinada de forma programática.

Exemplos

Exemplo de Falha 1

O exemplo seguinte demonstra como o CSS foi utilizado erradamente para criar um conjunto de colunas. Além disso, o texto é apresentado no browser numa ordem diferente da ordem da marcação.

Neste exemplo, é definida uma classe para cada objecto que esteja a ser posicionado. Quando são aplicadas folhas de estilo, o texto aparece em duas colunas. Os elementos da classe "menu1" (Produtos) e "menu2" (Localizações) aparecem como cabeçalhos de coluna. "Telefones, Computadores e Leitores de MP3 Portáteis" são indicados sob Produtos e "Idaho" e "Wisconsin" são indicados sobre Localizações (repare na ordem diferente de Idaho e Wisconsin na ordem do código fonte).

Como não foram utilizados elementos estruturais apropriados, quando as folhas de estilo não são aplicadas, todo o texto aparece numa linha na ordem de origem, "Produtos Localizações Telefones Computadores Leitores de MP3 Portáteis Wisconsin Idaho."

Este é o conteúdo HTML:

Código Exemplo:

<div class="box">      
     <span class="menu1">Products</span>       
     <span class="menu2">Locations</span>       
     <span class="item1">Telephones</span>       
     <span class="item2">Computers</span>       
     <span class="item3">Portable MP3 Players</span>       
     <span class="item5">Wisconsin</span>       
     <span class="item4">Idaho</span>
</div>

Estes são os estilos para o conteúdo acima:

Código Exemplo:

.menu1 { 
     position: absolute; 
     top: 3em; 
     left: 0em;     
     margin: 0px; 
     font-family: sans-serif;     
     font-size: 120%; 
     color: red; 
     background-color: white 
}        
 .menu2 { 
     position: absolute; 
     top: 3em; 
     left: 10em;     
     margin: 0px; 
     font-family: sans-serif;     
     font-size: 120%; 
     color: red; 
     background-color: white 
}      
 .item1 { 
     position: absolute; 
     top: 7em; 
     left: 0em; 
     margin: 0px 
}      
 .item2 { 
     position: absolute; 
     top: 8em; 
     left: 0em; 
     margin: 0px 
}      
 .item3 { 
     position: absolute; 
     top: 9em; 
     left: 0em; 
     margin: 0px 
}      
 .item4 { 
     position: absolute; 
     top: 7em; 
     left: 14em; 
     margin: 0px 
}      
 .item5 { 
     position: absolute; 
     top: 8em; left: 14em; 
     margin: 0px 
}      
#box { 
     position: absolute; 
     top: 5em; 
     left: 5em 
} 

Uma solução melhor para este conteúdo seria utilizar elementos com mais significação, tais como uma tabela ou uma lista de definições.

Recursos

Não existem recursos disponíveis para esta técnica.

Testes

Procedimento

Para conteúdo que utilize CSS para posicionamento:

  1. Remova as informações sobre estilo do documento ou desactive a utilização de folhas de estilo no agente de utilizador.

  2. Verifique se a ordem de leitura do conteúdo está correcta e o significado do conteúdo é mantido.

Resultados Esperados

  • Se o passo 2 for falso, aplica-se esta condição de falha e o conteúdo não cumpre este Critério de Sucesso.


F2: Falha do Critério de Sucesso 1.3.1 devido à utilização de alterações na apresentação do texto para transmitir informações sem utilizar a marcação ou texto apropriados

Aplicabilidade

Todas as tecnologias que suportem imagens ou marcação de apresentação.

Esta falha está relacionada com:

Descrição

Este documento descreve uma falha que ocorre quando uma alteração no aspecto do texto transmite um significado sem utilizar a marcação semântica apropriada. Esta falha também se aplica a imagens que não estejam incluídas na marcação semântica apropriada.

Exemplos

Exemplo de Falha 1: Utilizar CSS para estilizar o elemento p de modo a parecer um cabeçalho

O autor pretendia criar um cabeçalho, mas não queria o aspecto do cabeçalho HTML predefinido. Assim, utilizou CSS para estilizar o elemento P de modo a parecer um cabeçalho e denominou-o como tal, mas falhou na utilização do elemento heading HTML correcto. Por conseguinte, a Tecnologia de Apoio não o conseguia distinguir como um cabeçalho.

Código Exemplo:

                                          <style type="text/css">
 .heading1{
        font-family: Times, serif;
        font-size:200%;
        font-weight:bold;
 }
 </style>

 <p class="heading1">Introduction</p>
 <p>This introduction provides detailed information about how to use this 
 ........
 </p>

Nota: Neste caso, a abordagem correcta seria utilizar CSS para estilizar o elemento H1 em HTML.

Exemplo de Falha 2: Imagens de texto utilizadas como cabeçalhos, em que as imagens não estão assinaladas com marcas de cabeçalho

Capítulo1.gif é uma imagem das palavras, "Capítulo Um" no tipo de letra Garamond com um tamanho de 20 pixéis. Esta é uma falha, uma vez que, no mínimo, o elemento img deveria ser anexado num elemento header. Uma melhor solução seria eliminar a imagem e anexar o texto num elemento header que tenha sido estilizado utilizando CSS.

Código Exemplo:

<img src="Chapter1.gif" alt="Chapter One">
 
<p>Once upon a time in the land of the Web.....
</p>

Exemplo de Falha 3: Utilizar CSS para realçar visualmente uma frase ou palavra sem transmitir esse realce de forma semântica

O seguinte exemplo falha porque as informações transmitidas utilizando a propriedade font-weight (espessura do tipo de letra) de CSS para alterar para um tipo de letra a negrito não são transmitidas através de marcação semântica ou indicadas de forma explícita no texto.

Esta é uma classe CSS para especificar o negrito:

Código Exemplo:

.yell {
  font-weight:bold;
  text-transform: uppercase;
}

E este é o HTML correspondente:

Código Exemplo:

<p>
 "I said, <span class="yell">no</span>, not before dinner!", 
 was the exasperated response when Timmy asked his mother for the 
 fourth time for an ice cream cone. 
 </p>

Recursos

Não existem recursos disponíveis para esta técnica.

Testes

Procedimento

  1. Para imagens de texto:

    1. Verifique se são utilizadas algumas imagens de texto para transmitir informações estruturais do documento.

    2. Verifique se é utilizada a estrutura semântica correcta (por ex., cabeçalhos HTML) com o texto para transmitir as informações.

  2. Para texto estilizado que transmita informações:

    1. Verifique se existe algum texto estilizado que transmita informações estruturais.

    2. Verifique se, além da estilização, é utilizada a estrutura semântica correcta com o texto para transmitir as informações.

Resultados Esperados

  • Se o passo 1.1 for verdadeiro, o passo 1.2 é verdadeiro.

  • Se o passo 2.1 for verdadeiro, o passo 2.2 é verdadeiro.


F3: Falha do Critério de Sucesso 1.1.1 devido à utilização de CSS para incluir imagens que transmitem informações importantes

Aplicabilidade

Todas as tecnologias que suportem CSS.

Esta falha está relacionada com:

Descrição

A propriedade background-image (imagem de fundo) de CSS fornece uma forma de incluir imagens no documento com CSS sem qualquer referência no código HTML. A propriedade background-image de CSS foi concebida para fins meramente decorativos e não é possível associar alternativas em texto a imagens que sejam incluídas através de CSS. As alternativas em texto são necessárias para as pessoas que não conseguem ver imagens que transmitem informações importantes. Por conseguinte, é uma falha utilizar esta propriedade para adicionar imagens para transmitir informações importantes.

Nota: A incorporação de informações numa imagem de fundo também pode originar problemas para as pessoas que utilizam fundos alternativos para aumentar a legibilidade e para os utilizadores do modo de alto contraste em alguns sistemas operativos. Estes utilizadores perderiam as informações na imagem de fundo devido à falta de texto alternativo.

Exemplos

Exemplo de Falha 1:

No exemplo seguinte, parte do conteúdo está incluído numa imagem que é apresentada apenas por CSS. Neste exemplo, a imagem TopRate.png é uma imagem de 180 por 200 pixéis que contém o texto: "Variável Normal 19,3% APR".

Código Exemplo:

                                          The CSS contains: 
p#bestinterest {
  padding-left: 200px;
  background: transparent url(/images/TopRate.png) no-repeat top left;
}

É utilizado neste excerto:

Código Exemplo:

                                          
<p id="bestinterest">
  Where else would you find a better interest rate?
</p>

Exemplo de Falha 2:

Um fornecedor de livros utiliza imagens de fundo para fornecer ícones em oposição a uma lista de títulos de livros para indicar se são novos, limitados e se existem ou não em armazém.

O CSS contém:

Código Exemplo:

ul#booklist li {
  padding-left: 20px;
}

ul#booklist li.new {
  background: transparent url(new.png) no-repeat top left; 
}
                            
ul#booklist li.limited {
  background: transparent url(limited.png) no-repeat top left; 
}
                            
ul#booklist li.instock {
  background: transparent url(instock.png) no-repeat top left; 
}

ul#booklist li.outstock {
  background: transparent url(outstock.png) no-repeat top left; 
}

É utilizado neste excerto:

Código Exemplo:

<ul id="booklist">
  <li class="new">Some book</li>
  <li class="instock">Some other book</li>
  <li class="limited">A book we desperately want to get rid of</li>
  ...
  <li class="outstock">A book you actually want </li>
</ul>

Recursos

Não existem recursos disponíveis para esta técnica.

Testes

Procedimento

  1. Verifique todas as imagens adicionadas ao conteúdo através de CSS.

  2. Verifique se as imagens não transmitem informações importantes.

  3. Se uma imagem transmitir informações importantes, as informações são fornecidas às tecnologias de apoio e também estão disponíveis quando a imagem CSS não for apresentada.

Resultados Esperados

  • Se os passos 2 e 3 forem ambos falsos, aplica-se esta condição de falha e o conteúdo não cumpre este Critério de Sucesso.


F4: Falha do Critério de Sucesso 2.2.2 devido à utilização de text-decoration:blink sem um mecanismo para pará-lo em menos de cinco segundos

Aplicabilidade

Folhas de Estilo em Cascata.

Esta falha está relacionada com:

Notas de Apoio para o Agente de Utilizador e para a Tecnologia de Apoio

O valor blink da propriedade text-decoration não é suportado pelo Internet Explorer. É suportado nos browsers da família Netscape/Mozilla. Não foi testado noutros (por ex., Safari, Opera).

Descrição

O CSS define o valor blink para a propriedade text-decoration . Quando utilizado, faz com que o texto existente em elementos com esta propriedade fique em modo intermitente a uma velocidade predeterminada. Isto não pode ser interrompido pelo utilizador, nem pode ser desactivado como uma preferência de agente de utilizador. Enquanto a página estiver a ser apresentada, a intermitência continua. Por conseguinte, o conteúdo que utilizar text-decoration:blink não cumpre o Critério de Sucesso, uma vez que a intermitência pode exceder a duração de três segundos.

Exemplos

Exemplo de Falha 1

Uma página com uma lista de produtos utiliza o estilo text-decoration:blink num elemento para chamar a atenção para os preços de venda, não cumprindo assim o Critério de Sucesso, uma vez que os utilizadores não conseguem controlar a intermitência.

Código Exemplo:

<p>My Great Product <span style="text-decoration:blink">Sale! $44,995!</span></p>

Recursos

Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.

Testes

Procedimento

  1. Verifique os estilos em linha, as folhas de estilo internas e as folhas de estilos externas para a propriedade text-decoration com um valor de "blink".

  2. Se a propriedade for utilizada, verifique se o ID, a classe ou o elemento identificados pelos selectores nos quais esta propriedade é definida são utilizados no documento.

Resultados Esperados

  • Se os passos 1 e 2 forem verdadeiros, o conteúdo não cumpre o Critério de Sucesso.


F7: Falha do Critério de Sucesso 2.2.2 devido a um objecto ou applet, tais como Java ou Flash, que dispõe de conteúdo em modo intermitente sem um mecanismo para colocar em pausa o conteúdo que está em modo intermitente durante mais de cinco segundos

Aplicabilidade

Tecnologias que suportem conteúdo em modo intermitente num objecto, applet ou plug-in.

Esta falha está relacionada com:

Descrição

Quando o conteúdo que é apresentado através de um plug-in ou que está incluído numa applet está em modo intermitente, poderá não haver forma de o agente de utilizador colocar a intermitência em pausa. Se o plug-in, a applet ou o próprio conteúdo não fornecerem um mecanismo para colocar o conteúdo em pausa, o utilizador poderá não ter tempo suficiente para ler o conteúdo entre as intermitências ou poderá ficar tão confuso que não consiga ler o restante conteúdo existente na página.

Exemplos

  • Uma applet apresenta um anúncio num sítio da Web de notícias. A applet inclui palavras-chave em modo intermitente para chamar a atenção do utilizador para as mesmas. Não existem definições no agente de utilizador que permitam colocar a intermitência em pausa e a applet não fornece um mecanismo para parar a intermitência.

Testes

Procedimento

Para cada página que tenha conteúdo em modo intermitente num plug-in ou numa applet:

  1. Verifique se o conteúdo continua em modo intermitente durante mais de 5 segundos.

  2. Verifique se existe uma forma de colocar em pausa o conteúdo em modo intermitente.

Resultados Esperados

  • Se o passo 1 for verdadeiro e o passo 2 for falso, o conteúdo não cumpre o Critério de Sucesso.


F8: Falha do Critério de Sucesso 1.2.2 devido a legendas que omitam alguns diálogos ou efeitos sonoros importantes

Aplicabilidade

Aplica-se a todas as tecnologias.

Esta falha está relacionada com:

Descrição

Esta técnica descreve uma condição de falha para todas as técnicas que envolvam legendas. Se a "legenda" não incluir todo o diálogo (literalmente ou o essencial), bem como todos os sons importantes, as "Legendas" não são legendas completas.

NOTA: Por vezes, as legendas simplificam o texto falado para facilitar a leitura e evitar que o espectador tenha de ler a uma grande velocidade. Este é um procedimento normal e não invalida a legenda.

Exemplos

Exemplo de Falha 1

Os exemplos de sequências de texto que não são legendas incluem:

  • texto que inclui o diálogo (possivelmente diálogo simplificado), mas que não descreve sons importantes

  • texto que omite diálogo durante partes do conteúdo

Recursos

Não existem recursos disponíveis para esta técnica.

(actualmente, não existe nenhuma indicada)

Testes

Procedimento

  1. Visualize o conteúdo com as legendas activadas.

  2. Verifique se todo o diálogo é acompanhado por uma legenda.

  3. Verifique se todos os sons importantes são legendados.

Resultados Esperados

  • Os passos 2 e 3 são verdadeiros.


F9: Falha do Critério de Sucesso 3.2.5 devido à alteração do contexto quando o utilizador remove o foco de um elemento de formulário

Aplicabilidade

Geral.

Esta falha está relacionada com:

Descrição

Este documento descreve uma falha que ocorre quando a remoção do foco de um elemento de formulário, tal como movê-lo para o elemento seguinte, provoca uma alteração de contexto.

Exemplos

Exemplo de Falha 1:

O utilizador percorre o formulário preenchendo os campos por ordem. Quando passa do terceiro campo para o quarto, o formulário é submetido.

Recursos

Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.

Testes

Procedimento

  1. Encontre todos os elementos de formulário.

  2. Percorra-os por ordem.

  3. Verifique se o formulário é submetido quando passa de um campo para o seguinte.

  4. Verifique se são apresentadas novas janelas ao passar de um campo para o seguinte.

  5. Verifique se é conduzido a outro ecrã ao passar de um campo para o seguinte.

Resultados Esperados

  • Se os passos 3, 4 ou 5 forem verdadeiros, aplica-se esta condição de falha e o conteúdo não cumpre o Critério de Sucesso.


F10: Falha do Critério de Sucesso 2.1.2 e do Requisito de Conformidade 5 devido à combinação de vários formatos de conteúdo de uma forma que bloqueia os utilizadores dentro de um tipo de formato

Aplicabilidade

Aplica-se quando o conteúdo cria uma situação em que o utilizador pode introduzir o conteúdo utilizando o teclado, mas não consegue sair do conteúdo utilizando o teclado.

Esta falha está relacionada com:

Descrição

Quando o conteúdo inclui vários formatos, são necessários, muitas vezes, um ou mais agentes de utilizador ou plug-ins para apresentar com êxito o conteúdo aos utilizadores. Por exemplo, uma página que inclua XHTML, SVG, SMIL e XForms pode necessitar de um browser para carregar até três plug-ins diferentes para um utilizador poder interagir com êxito com o conteúdo. Alguns plug-ins criam uma situação comum na qual o foco do teclado pode ficar "preso" num plug-in, deixando um utilizador que só utilize o teclado sem forma de regressar ao restante conteúdo.

Exemplos

  • Um plug-in bloqueia o utilizador. Um utilizador utiliza a tecla de tabulação para percorrer até um plug-in e não consegue regressar ao conteúdo fora do plug-in utilizando o teclado. O utilizador tem de reiniciar o browser para recuperar o controlo e navegar até uma nova página e não consegue aceder a nenhum conteúdo além do conteúdo do plug-in.

Recursos

Não existem recursos disponíveis para esta técnica.

Testes

Procedimento

  1. Navegue no conteúdo utilizando um teclado.

  2. Certifique-se de que o foco do teclado não está "bloqueado" e que é possível afastar o foco do conteúdo do plug-in sem fechar o agente de utilizador ou reiniciar o sistema.

Resultados Esperados

  • Se o foco do teclado ficar "bloqueado", aplica-se esta condição de falha e o conteúdo não cumpre o Critério de Sucesso e o Requisito de Conformidade 5.


F12: Falha do Critério de Sucesso 2.2.5 devido a ter um limite de tempo de sessão sem um mecanismo para guardar a entrada de dados do utilizador e restabelecer essas informações na nova autenticação

Aplicabilidade

Sítios da Web que necessitem que o utilizador inicie sessão para submeter os dados e que terminem a sessão após um determinado período de inactividade.

Esta falha está relacionada com:

Descrição

Normalmente, os servidores da Web que necessitam de autenticação por parte do utilizador têm um mecanismo no qual a sessão expira após um determinado período de inactividade. Por vezes, isto acontece por motivos de segurança, para proteger os utilizadores que deixaram o computador num estado em que qualquer pessoa pode fazer algo de prejudicial, tal como transferir dinheiro ou efectuar uma compra não autorizada. Um utilizador com uma incapacidade pode demorar mais tempo a preencher um formulário do que o normalmente esperado e pode ainda estar a fazê-lo. Após a nova autenticação, se o estado da sessão do utilizador não for restaurado, incluindo todos os dados anteriormente introduzidos no formulário, o utilizador terá de recomeçar. E para estes utilizadores, é provável que a sessão expire novamente antes de conseguirem concluir o formulário. Isto cria uma situação em que um utilizador que necessite de mais tempo para preencher o formulário nunca consiga conclui-lo.

Exemplos

  • Um utilizador submete um formulário num sítio da Web autenticado depois de a sessão ter expirado. Ao submeter o formulário, é pedido ao utilizador que inicie sessão novamente e é apresentada uma página geral de boas-vindas. Os dados não são processados e o utilizador tem de tentar outra vez.

  • Um utilizador submete um formulário num sítio da Web autenticado depois de a sessão ter expirado. Ao submeter o formulário, é pedido ao utilizador que inicie sessão novamente e é apresentada de novo a página onde se encontrava antes de iniciar sessão, que, neste caso, contém o formulário que o utilizador tentou submeter. Contudo, o formulário não está preenchido com os dados anteriormente introduzidos, e o utilizador tem de introduzi-los novamente.

Testes

Procedimento

Num sítio da Web onde a autenticação seja necessária, os dados do utilizador sejam recolhidos e a sessão do utilizador seja terminada após um determinado período de inactividade:

  1. Forneça os dados conforme necessário, mas deixe que a sessão expire e, em seguida, submeta o formulário.

  2. Quando solicitado, efectue a nova autenticação com o servidor.

  3. Verifique se a função é executada utilizando os dados anteriormente submetidos.

Resultados Esperados

  • Se o passo 3 for falso, o sítio da Web não cumpre o Critério de Sucesso.


F13: Falha do Critério de Sucesso 1.4.1 devido à existência de uma alternativa em texto que não inclui informação transmitida por cores diferentes na imagem

Aplicabilidade

Todas as tecnologias.

Esta falha está relacionada com:

Descrição

O objectivo desta técnica é descrever a falha que ocorre quando uma imagem utiliza cores diferentes para transmitir informações, mas a alternativa em texto não transmite essas informações. Isto pode originar problemas para pessoas cegas ou com cegueira para cores, uma vez que não conseguirão distinguir as informações transmitidas por cores diferentes.

Exemplos

  • Um gráfico de barras de dados de vendas é fornecido como uma imagem. O gráfico inclui os números de vendas anuais de quatro funcionários do Departamento de Vendas. A alternativa em texto da imagem indica: "O seguinte gráfico de barras apresenta os números de vendas anuais do Departamento de Vendas. A Mary vendeu 3,1 milhões; o Fred vendeu 2,6 milhões; o Bob vendeu 2,2 milhões; e o Andrew vendeu 3,4 milhões. As barras vermelhas indicam vendas abaixo da quota anual". Esta alternativa em texto falha no fornecimento da informação transmitida pela cor vermelha na imagem. A alternativa deveria indicar as pessoas que não atingiram a quota de vendas, em vez de se basear na cor.

Recursos

Não existem recursos disponíveis para esta técnica.

Testes

Procedimento

Para todas as imagens existentes no conteúdo que transmitam informações através de cores diferentes:

  1. Verifique se as informações transmitidas através de cores diferentes não estão incluídas na alternativa em texto para a imagem.

Resultados Esperados

  • Se o passo 1 for verdadeiro, aplica-se esta condição de falha e o conteúdo não cumpre o Critério de Sucesso.


F14: Falha do Critério de Sucesso 1.3.3 devido à identificação do conteúdo apenas consoante a sua forma ou localização

Aplicabilidade

Todas as tecnologias.

Esta falha está relacionada com:

Descrição

O objectivo desta técnica é mostrar que a identificação do conteúdo apenas pela forma e localização dificulta a sua compreensão e utilização. Quando é utilizada apenas a localização ou identificação visual, os utilizadores com incapacidades visuais podem ter dificuldade em localizar o conteúdo, uma vez que não conseguem ver o ecrã ou podem ver apenas uma pequena parte do ecrã de uma vez. Igualmente, a localização do conteúdo pode variar se a disposição da página variar devido a mudanças no tipo de letra, na janela ou no tamanho do ecrã.

Exemplos

  • As instruções de navegação de um sítio da Web indicam: "Para avançar para a página seguinte, pressione o botão à direita. Para regressar à página anterior, pressione o botão à esquerda."

  • Um utilizador está a ler um artigo num jornal online. O artigo contém uma ilustração e links adicionais para mais informações. No texto do artigo existe a seguinte indicação: "Para obter links para informações adicionais, utilize a barra lateral à esquerda." O utilizador de uma tecnologia de apoio terá dificuldade em encontrar a ilustração e a barra lateral. Algumas alternativas seriam incluir a lista de links no texto; fornecer um link na página no próprio texto que conduza à barra lateral; fornecer um cabeçalho para a barra lateral que possa ser utilizado para navegação e fazer referência ao cabeçalho nas instruções.

  • Um utilizador está a responder a um questionário online. Existem três botões na parte inferior do questionário. As instruções indicam: "Pressione o botão quadrado para sair do questionário sem guardar. Pressione o botão triangular para guardar os resultados do questionário em curso. Pode regressar mais tarde para concluir o questionário. Pressione o botão circular para submeter os resultados do questionário." O utilizador de um leitor de ecrã não consegue determinar qual o botão quadrado, triangular ou circular. Os botões têm de ter informações adicionais para indicar as respectivas funções.

Recursos

Não existem recursos disponíveis para esta técnica.

Testes

Procedimento

  1. Verifique se existem referências textuais ao conteúdo na página Web.

  2. Verifique se as referências não se baseiam apenas na forma ou localização do conteúdo.

Resultados Esperados

  • Se o passo 2 for falso, aplica-se esta condição de falha e o conteúdo não cumpre este Critério de Sucesso.


F15: Falha do Critério de Sucesso 4.1.2 devido à implementação de controlos personalizados que não utilizam uma API de acessibilidade para a tecnologia, ou que a utilizam de forma incompleta

Aplicabilidade

Aplica-se a todas as tecnologias que suportem uma API de acessibilidade.

Esta falha está relacionada com:

Descrição

Quando são utilizados controlos normais de tecnologias acessíveis, são normalmente programados de forma a utilizar e suportar a API de acessibilidade. Contudo, se forem criados controlos personalizados, cabe ao programador certificar-se de que os controlos recentemente criados suportam a API de acessibilidade. Se tal não for feito, as tecnologias de apoio não irão conseguir compreender o controlo nem como utilizá-lo, ou podem nem sequer saber da sua existência.

Exemplos

Exemplo de Falha 1

Um leitor de música foi concebido com controlos personalizados que parecem notas musicais destinados a controlar o volume, o som, etc. O programador não faz com que os novos controlos suportem a API de Acessibilidade e, como resultado, não podem ser identificados ou utilizados a partir da TA.

Recursos

Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.

(actualmente, não existe nenhuma indicada)

Testes

Procedimento

  1. Utilizando o verificador de acessibilidade para a tecnologia (ou, se não estiver disponível, verifique o código ou teste com uma tecnologia de apoio), verifique se os controlos suportam a API de acessibilidade.

Resultados Esperados

  • Se o passo 1 for falso, aplica-se esta condição de falha e o conteúdo não cumpre este Critério de Sucesso.


F16: Falha do Critério de Sucesso 2.2.2 devido à inclusão de conteúdo em deslocamento onde o movimento não é essencial para a actividade, sem incluir igualmente um mecanismo para colocar em pausa e reiniciar o conteúdo

Aplicabilidade

Todas as tecnologias que suportem deslocamento ou movimento visual.

Esta falha está relacionada com:

Descrição

Nesta técnica de falha, existe conteúdo em movimento ou em deslocamento que não pode ser colocado em pausa e retomado pelos utilizadores. Neste caso, alguns utilizadores com baixa visão ou incapacidades cognitivas não irão conseguir compreender o conteúdo.

Exemplos

  • Uma página tem um "ticker" de notícias em deslocamento sem um mecanismo para colocá-lo em pausa. Alguns utilizadores não conseguem ler o conteúdo em deslocamento.

Testes

Procedimento

Numa página com conteúdo em movimento ou em deslocamento:

  1. Verifique se é fornecido um mecanismo na página Web ou no agente de utilizador para colocar em pausa o conteúdo em movimento ou em deslocamento.

  2. Utilize esse mecanismo para colocar em pausa o conteúdo em movimento ou em deslocamento.

  3. Verifique se o conteúdo em movimento ou em deslocamento parou e não reinicia automaticamente.

  4. Verifique se é fornecido um mecanismo na página Web ou no agente de utilizador para reiniciar o conteúdo colocado em pausa.

  5. Utilize esse mecanismo para reiniciar o conteúdo em movimento.

  6. Verifique se o conteúdo em movimento ou em deslocamento foi retomado a partir do ponto em que foi parado.

Resultados Esperados

  • Se os passos 1, 3, 4 ou 6 forem falsos, o conteúdo não cumpre o Critério de Sucesso.


F17: Falha dos Critérios de Sucesso 1.3.1 e 4.1.1 devido a informações insuficientes no DOM para determinar relações um para um (por ex., entre etiquetas com o mesmo id) em HTML

Aplicabilidade

Aplica-se ao Modelo de Objecto de Documento (DOM) para HTML e XHTML.

Esta falha está relacionada com:

Descrição

O objectivo desta técnica é garantir que as páginas Web possam ser interpretadas de forma consistente pelos agentes de utilizador, incluindo as tecnologias de apoio. Se forem ambíguas, diferentes agentes de utilizador, incluindo as tecnologias de apoio, podem apresentar informações diferentes aos utilizadores. Por exemplo, os utilizadores de tecnologias de apoio podem visualizar informações diferentes dos utilizadores de outros agentes de utilizador convencionais. Alguns elementos e atributos nas linguagens de marcação têm de ter valores exclusivos e, se este requisito não for cumprido, o resultado pode ser conteúdo irregular ou não determinado de forma exclusiva. Por exemplo, quando os valores de atributo id não são exclusivos, são especialmente problemáticos quando referidos por etiquetas, cabeçalhos em tabelas de dados, ou utilizados como identificadores de fragmento, uma vez que os agentes de utilizador não dispõem de informações suficientes para fornecer relações essenciais (i.e., determinar a etiqueta associada a cada item).

Exemplos

Exemplo de Falha 1

  • Um elemento label cujo valor de atributo é um idref que aponta para um id não existente

  • Um valor de atributo id que não é exclusivo

  • Um valor de atributo accesskey que não é exclusivo

Recursos

Não existem recursos disponíveis para esta técnica.

(actualmente, não existe nenhuma indicada)

Testes

Procedimento

  1. Verifique se existem valores id e accesskey no documento que não sejam exclusivos.

  2. Verifique se os valores de atributo que têm um valor idref têm um valor id correspondente.

  3. Para tabelas que utilizem o atributo axis, verifique se todos os valores indicados no atributo axis têm um valor id correspondente numa célula de cabeçalho na mesma tabela.

  4. Para mapas de imagem do lado do cliente, verifique se o valor do atributo usemap tem um valor id correspondente se o atributo usemap não for um URI.

Resultados Esperados

  • Se os passos 1, 3 ou 4 forem verdadeiros ou o passo 2 for falso, aplica-se esta condição de falha e o conteúdo não cumpre o Critério de Sucesso.


F19: Falha do Requisito de Conformidade 1 devido ao não fornecimento de um método para o utilizador encontrar a versão alternativa em conformidade de uma página Web que não esteja em conformidade

Aplicabilidade

Sítios da Web que forneçam versões alternativas em conformidade com as WCAG de conteúdo principal que não esteja em conformidade.

Esta falha está relacionada com:

Descrição

Esta técnica de falha descreve a situação na qual é fornecida uma versão alternativa em conformidade do conteúdo, mas não existe forma directa de o utilizador saber se está disponível ou onde encontrá-la. Esse conteúdo não cumpre o Critério de Sucesso, porque o utilizador não consegue encontrar a versão em conformidade.

Exemplos

  • Um link ou uma procura conduzem um utilizador directamente a uma das páginas do sítio da Web que não está em conformidade. Não existe qualquer indicação de que existe uma página alternativa disponível, nem um caminho para a página alternativa a partir da página que não está em conformidade.

  • As páginas do sítio da Web que não estão em conformidade informam o utilizador que existe uma versão em conformidade disponível e fornecem um link para a página inicial. Contudo, o utilizador tem de procurar a versão em conformidade da página no sítio da Web e, como tal, a funcionalidade não cumpre os requisitos do Critério de Sucesso.

  • Um utilizador consegue utilizar o sítio da Web que não esteja em conformidade para a maioria das páginas. Mas quando o utilizador não consegue aceder a uma determinada página, não existe forma de encontrar a versão em conformidade da página.

Testes

Procedimento

  1. Identifique uma página que não esteja em conformidade que tenha uma versão alternativa em conformidade.

  2. Verifique se a página que não está em conformidade fornece um link para a versão em conformidade.

Resultados Esperados

  1. Se o passo 2 for falso, o conteúdo não cumpre o Critério de Sucesso.


F20: Falha dos Critérios de Sucesso 1.1.1 e 4.1.2 devido à não actualização de alternativas em texto quando ocorrem alterações em conteúdos não textuais

Aplicabilidade

Aplica-se a todas as tecnologias.

Esta falha está relacionada com:

Descrição

O objectivo desta condição de falha é abordar situações em que o conteúdo não textual é actualizado, mas a alternativa em texto não é actualizada ao mesmo tempo. Se a alternativa em texto não puder ser utilizada em vez do conteúdo não textual sem perder as informações ou a função, não cumpre o Critério de Sucesso, uma vez que deixa de ser uma alternativa em texto para o conteúdo não textual.

Exemplos

  • Exemplo de Falha 1: Um gráfico de vendas é actualizado para os resultados de Outubro, mas a alternativa em texto ainda descreve os resultados de Setembro.

  • Exemplo de Falha 2: As imagens de uma página inicial mudam diariamente, mas as alternativas em texto não são actualizadas ao mesmo tempo.

  • Exemplo de Falha 3: O atributo source das imagens numa página é actualizado periodicamente utilizando um script, mas as alternativas em texto não são actualizadas ao mesmo tempo.

Recursos

Não existem recursos disponíveis para esta técnica.

(actualmente, não existe nenhuma indicada)

Testes

Procedimento

  1. Verifique se cada alternativa em texto descreve conteúdo que não seja o conteúdo não textual actualmente apresentado.

Resultados Esperados

  • Se o passo 1 for verdadeiro, a alternativa em texto não está actualizada com o item actual, aplica-se esta condição de falha e o conteúdo não cumpre estes Critérios de Sucesso.


F22: Falha do Critério de Sucesso 3.2.5 devido à apresentação de janelas que não são solicitadas pelo utilizador

Aplicabilidade

Geral.

Esta falha está relacionada com:

Descrição

Falha devido à apresentação de novas janelas quando o utilizador não está à espera. As novas janelas afastam o foco do que o utilizador estiver a ler ou a fazer. Isto não constitui qualquer problema se o utilizador tiver interagido com uma secção da Interface de Utilizador e estiver a contar com a apresentação de uma nova janela, tal como uma caixa de diálogo de opções. A falha acontece quando as janelas de pop-up surgem inesperadamente.

Exemplos

Exemplo de Falha 1:

Quando um utilizador navega até uma página, é apresentada uma nova janela sobre a janela existente do agente de utilizador, e o foco é deslocado para a nova janela.

Exemplo de Falha 2:

Um utilizador clica num link e é apresentada uma nova janela. O link original não tem nenhum texto associado a indicar que será apresentada uma nova janela.

Exemplo de Falha 3:

Um utilizador clica no corpo de uma página e é apresentada uma nova janela. Não existe nenhuma indicação de que a área onde o utilizador clicou possui essa função.

Exemplo de Falha 4:

Um utilizador clica no texto existente na página e é apresentada uma nova janela. A página não inclui nenhuma indicação visível de que a área onde o utilizador clicou possui essa função.

Recursos

Não existem recursos disponíveis para esta técnica.

Testes

Procedimento

  1. Carregue a página Web.

  2. Verifique se são apresentadas novas (adicionais) janelas.

  3. Encontre todos os elementos accionáveis, tais como links e botões, na página Web.

  4. Active cada um dos elementos.

  5. Verifique se ao activar o elemento é apresentada uma nova janela.

  6. Verifique se os elementos que abrem novas janelas dispõem de texto associado a indicar que tal vai acontecer. O texto pode ser apresentado no link, ou estar disponível através de uma associação oculta, tal como um atributo title HTML.

Resultados Esperados

  • Se o passo 2 for verdadeiro, aplica-se a condição de falha e o conteúdo não cumpre o Critério de Sucesso.

  • Se o passo 5 for verdadeiro e o passo 6 for falso, aplica-se a condição de falha e o conteúdo não cumpre o Critério de Sucesso.


F23: Falha do Critério de Sucesso 1.4.2 devido à reprodução de um som durante mais de 3 segundos e em que não existe um mecanismo para o desligar

Aplicabilidade

Aplica-se a todas as tecnologias, excepto as que necessitam de interacção de voz.

Esta falha está relacionada com:

Descrição

Esta técnica descreve uma condição de falha para Critérios de Sucesso que envolvam sons. Se o som não se desligar automaticamente em 3 segundos, e não existir forma de desligar o som, o Critério de Sucesso 1.4.2 não será cumprido. Os sons que tocam durante mais de 3 segundos, sem existir qualquer mecanismo que permita desligar o som incluído no conteúdo, inserem-se nesta condição de falha.

Exemplos

Exemplo 1

  • Um sítio da Web que toca música de fundo continuamente.

Exemplo 2

  • Um sítio da Web com um narrador que fala mais de 3 segundos antes de parar, e não existe qualquer mecanismo para pará-lo.

Recursos

Não existem recursos disponíveis para esta técnica.

(actualmente, não existe nenhuma indicada)

Testes

Procedimento

  1. Verifique se existe alguma forma numa página Web para desligar qualquer som que toque automaticamente durante mais de três segundos.

Resultados Esperados

  • Se o passo 1 não for verdadeiro, o conteúdo não cumpre o Critério de Sucesso 1.4.2.


F24: Falha dos Critérios de Sucesso 1.4.3, 1.4.6 e 1.4.8 devido à especificação de cores de primeiro plano sem especificar as cores de fundo e vice-versa

Aplicabilidade

Todas as tecnologias que permitam aos agentes de utilizador controlarem as cores de primeiro plano e de fundo através de folhas de estilo pessoais ou outros meios.

Esta falha está relacionada com:

Descrição

Os utilizadores com perda de visão ou incapacidades cognitivas, de linguagem e de aprendizagem preferem, muitas vezes, combinações específicas de cores de primeiro plano e de fundo. Em alguns casos, as pessoas com baixa visão vão achar muito mais fácil ver uma página Web que tenha texto a branco num fundo a preto, e podem ter definido o seu agente de utilizador para apresentar este contraste. Muitos agentes de utilizador permitem aos autores escolher uma preferência relativamente às cores de primeiro plano e de fundo que pretendem ver sem sobrepor todos os estilos especificados pelo autor. Isto permite que os utilizadores visualizem páginas em que as cores não foram especificadas pelo autor na sua combinação de cores preferida.

A menos que um autor especifique as cores de primeiro plano e de fundo, não poderá garantir que o utilizador obtenha um contraste que cumpra os respectivos requisitos. Por exemplo, se o autor especificar que o texto deve estar a cinzento, pode sobrepor as definições do agente de utilizador e apresentar a página que tenha o texto a cinzento (especificado pelo autor) num fundo a cinzento claro (definido pelo utilizador no seu agente de utilizador). Este princípio também funciona ao contrário. Se o autor definir a cor branca para o fundo, o fundo branco especificado pelo autor pode ser semelhante em termos de cor à preferência de cor do texto definida pelo utilizador no seu agente de utilizador, apresentando assim uma página inutilizável ao utilizador. Uma vez que um autor não pode prever a forma como um utilizador configurou as suas preferências, se o autor especificar uma cor de texto de primeiro plano, também deve especificar uma cor de fundo que tenha um contraste suficiente com o primeiro plano e vice-versa.

Não é necessário que as cores de primeiro plano e de fundo sejam ambas definidas na mesma regra CSS. Uma vez que as propriedades de cor de CSS são herdadas a partir dos elementos ancestor, é suficiente que ambas as cores de primeiro plano e de fundo sejam definidas directamente ou através de herança quando a cor for aplicada a um determinado elemento.

Nota: O procedimento recomendado é incluir todos os estados do texto. Por exemplo, o texto, o texto do link, o texto do link visitado, o texto do link sob o ponteiro do rato e o foco do teclado, etc.

Exemplos

Exemplo de Falha 1: Especificar apenas a cor de fundo com bgcolor em HTML

No exemplo abaixo, a cor de fundo é definida no elemento body, contudo a cor de primeiro plano não é definida. Por conseguinte, o exemplo não cumpre o Critério de Sucesso.

Código Exemplo:

                                            
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
      <html>
          <head>
              <title>A study of population dynamics</title>
          </head>
          <body bgcolor="white">
              <p> ... document body...</p>
          </body>
  </html>

Exemplo de Falha 2: Especificar apenas a cor de primeiro plano com color em HTML

No exemplo abaixo, a cor de primeiro plano é definida no elemento body, contudo a cor de fundo não é definida. Por conseguinte, o exemplo não cumpre o Critério de Sucesso.

Código Exemplo:

                                          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
 <title>A study of population dynamics</title>

</head>
<body color="white">
  <p>... document body...</p>
</body>
</html>

Exemplo de Falha 3: Especificar apenas a cor de fundo com CSS

No exemplo abaixo, a cor de fundo é definida na folha de estilo CSS, contudo a cor de primeiro plano não é definida. Por conseguinte, o exemplo não cumpre o Critério de Sucesso.

Código Exemplo:

                                           <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
 <title>Setting the canvas background</title>
    <style type="text/css">

       body {background-color:white}
    </style>
  </head>
  <body>
    <p>My background is white.</p>
  </body>
</html>

Exemplo de Falha 4: Especificar apenas a cor de fundo com CSS

No exemplo abaixo, a cor de primeiro plano é definida na folha de estilo CSS, contudo a cor de fundo não é definida. Por conseguinte, o exemplo não cumpre o Critério de Sucesso.

Código Exemplo:

                                          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
 <title>Setting the canvas background</title>
    <style type="text/css">
       body {color:white}
    </style>
  </head>

  <body>
    <p>My foreground is white.</p>
  </body>
</html>

Exemplo de Falha 5: Especificar a cor de fundo do texto do link com CSS

No exemplo abaixo, a cor do texto do link (de primeiro plano) é definida no elemento body. Contudo, a cor de fundo não é definida. Por conseguinte, o exemplo não cumpre o Critério de Sucesso.

Código Exemplo:

                                           <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
 <title>A study of population dynamics</TITLE>
 <style type="text/css">
  a:link { color: red }
  a:visited { color: maroon }
  a:active { color: fuchsia }
 </style>

</head>
<body>
  <p>... document body... <a href="foo.htm">Foo</a></p>
</body>
</html>

Recursos

Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.

Testes

Procedimento

  1. Verifique o código da página Web.

  2. Verifique se existe uma cor de primeiro plano especificada pelo autor.

  3. Verifique se existe uma cor de fundo especificada pelo autor.

Nota 1: As cores e a cor de fundo podem ser especificadas em qualquer nível da cascata de selectores precedentes, através de folhas de estilo externas ou de regras de herança.

Nota 2: A cor de fundo também pode ser especificada utilizando uma imagem de fundo com a propriedade 'background-image' (imagem de fundo) de CSS ou com a propriedade 'background' (fundo) de CSS (com o URI da imagem, por ex., 'background: url("images/bg.gif")'). Com as imagens de fundo, ainda é necessário especificar uma cor de fundo, uma vez que os utilizadores podem ter imagens desactivadas no seu browser, mas a imagem de fundo e a cor de fundo têm de ser verificadas.

Resultados Esperados

Se o passo 2 for verdadeiro, mas o passo 3 for falso, OU se o passo 3 for verdadeiro, mas o passo 2 for falso, aplica-se esta condição de falha e o conteúdo não cumpre estes Critérios de Sucesso.


F25: Falha do Critério de Sucesso 2.4.2 devido ao título de uma página Web não identificar os conteúdos

Aplicabilidade

Todas as tecnologias.

Esta falha está relacionada com:

Descrição

Esta técnica descreve a condição de falha que resulta quando a página Web tem um título que não identifica os conteúdos nem a finalidade da página Web.

Exemplos

Exemplo de Falha 1

Os exemplos de texto que não são títulos incluem:

  • Títulos predefinidos da ferramenta de autor, tais como:

    • "Introduza o título do seu documento HTML aqui,"

    • "Documento sem Título"

    • "Sem Título"

    • "Página sem Título"

    • "Nova Página 1"

  • Nomes de ficheiros que não são descritivos no seu próprio direito, tais como "report.html" or "spk12.html"

  • Texto vazio

  • Texto de preenchimento ou de marcador de posição

Exemplo de Falha 2

Um sítio da Web criado utilizando modelos inclui o mesmo título para cada página no referido sítio. Assim, o título não pode ser utilizado para distinguir as páginas.

Recursos

Não existem recursos disponíveis para esta técnica.

Testes

Procedimento

  1. Verifique se o título de cada página Web identifica os conteúdos ou a finalidade da página Web.

Resultados Esperados

  • Se o passo 1 for falso, aplica-se esta condição de falha e o conteúdo não cumpre este Critério de Sucesso.


F26: Falha do Critério de Sucesso 1.3.3 devido à utilização de apenas um símbolo gráfico para transmitir informação

Aplicabilidade

Todas as tecnologias.

Esta falha está relacionada com:

Descrição

O objectivo desta técnica é demonstrar como a utilização de um símbolo gráfico para transmitir informação pode tornar o conteúdo difícil de compreender. Um símbolo gráfico pode ser uma imagem, uma imagem de texto ou um símbolo de carácter decorativo ou pictórico (glifo) que transmite informação de uma forma não verbal. Os exemplos de símbolos gráficos incluem uma imagem de um círculo vermelho com uma linha que o atravessa, um "sorriso" ou um glifo que representa uma marca de verificação, seta ou outro símbolo, mas que não é o carácter com esse significado. Os utilizadores de tecnologias de apoio podem ter dificuldade em determinar o significado do símbolo gráfico. Se for utilizado um símbolo gráfico para transmitir informação, forneça uma alternativa utilizando funcionalidades da tecnologia ou utilize um mecanismo diferente que possa ser marcado com uma alternativa para representar o símbolo gráfico. Por exemplo, uma imagem com uma alternativa em texto pode ser utilizada em vez do glifo.

Exemplos

Exemplo de Falha 1: Glifos Utilizados para Indicar o Estado

Um carrinho de compras utiliza dois glifos simples para indicar se um artigo está disponível para expedição imediata. Uma marca de verificação indica que o artigo existe em stock e está pronto para ser expedido. Um "x" indica que, actualmente, o artigo não está disponível em stock, nem está disponível para ser expedido. Um utilizador de tecnologia de apoio não pode determinar o estado do artigo actual.

Recursos

Não existem recursos disponíveis para esta técnica.

Testes

Procedimento

  1. Verifique se a página contém marcas não textuais que transmitam informação.

  2. Verifique se existem outros meios para determinar a informação transmitida pelas marcas não textuais.

Resultados Esperados

  • Se o passo 2 for falso, aplica-se esta condição de falha e o conteúdo não cumpre este Critério de Sucesso.


F30: Falha dos Critérios de Sucesso 1.1.1 e 1.2.1 devido à utilização de alternativas em texto que não são alternativas (por ex., nomes de ficheiros ou texto de marcador de posição)

Aplicabilidade

Aplica-se a todas as tecnologias.

Esta falha está relacionada com:

Descrição

Esta técnica descreve a condição de falha para todas as técnicas que envolvam alternativas em texto. Se o texto na "alternativa em texto" não puder ser utilizado em vez do conteúdo não textual sem perder a informação ou função, falha porque, de facto, não é uma alternativa ao conteúdo não textual.

Exemplos

Exemplo de Falha 1

Os exemplos de texto que não são alternativas em texto incluem:

  • texto de marcador de posição, tal como " " ou "separador" ou "imagem", etc., que é colocado no local da 'alternativa em texto' sobre as imagens.

  • referências de programação que não transmitem a informação ou função do conteúdo não textual, tais como "imagem1", "imagem2" ou "0001", "0002" ou "Intro1", "Intro2".

  • nomes de ficheiros que não são alternativas em texto válidas no seu próprio direito, tais como "Oct.jpg" ou "Chart.jpg" ou "sales\\oct\\top3.jpg"

Recursos

Não existem recursos disponíveis para esta técnica.

(actualmente, não existe nenhuma indicada)

Testes

Procedimento

  1. Verifique todas as alternativas em texto para determinar se são, na realidade, uma alternativa em texto para o conteúdo não textual.

Resultados Esperados

  • Se o passo 1 for verdadeiro, aplica-se esta condição de falha e o conteúdo não cumpre este Critério de Sucesso.


F31: Falha do Critério de Sucesso 3.2.4 devido à utilização de duas etiquetas diferentes para a mesma função em páginas Web diferentes num conjunto de páginas Web

Aplicabilidade

Aplica-se a todas as tecnologias.

Esta falha está relacionada com:

Descrição

Os componentes que têm a mesma função em páginas Web diferentes são reconhecidos mais facilmente se forem etiquetados de forma consistente. Se os nomes não forem consistentes, alguns utilizadores podem ficar confusos.

Nota: As alternativas em texto que são "consistentes" nem sempre são "idênticas". Por exemplo, pode existir uma seta gráfica no fundo da página Web para aceder à página Web seguinte. A alternativa em texto pode indicar "Avançar para a página 4". É óbvio que não é apropriado repetir esta mesma alternativa em texto na página Web seguinte. É mais apropriado indicar "Avançar para a página 5". Embora estas alternativas em texto não sejam idênticas, são consistentes e, desta forma, não constituem falhas para este Critério de Sucesso.

Exemplos

Exemplo de Falha 1:

Um dos exemplos mais comuns da utilização de etiquetas não consistentes para componentes com a mesma função é utilizar um botão intitulado "Procurar" numa página e um botão intitulado "Localizar" noutra página, quando ambos têm uma função idêntica.

Exemplo de Falha 2:

Uma ferramenta de autor online que utiliza um botão intitulado "Guardar página" numa página e "Guardar" noutra página, em ambos os casos para a mesma função.

Recursos

Não existem recursos disponíveis para esta técnica.

(actualmente, não existe nenhuma indicada)

Testes

Procedimento

  1. Num conjunto de páginas Web, localize os componentes com a mesma função que estejam repetidos em várias páginas Web.

  2. Para cada componente com a mesma função indicado no passo 1, verifique se o nome é consistente.

Resultados Esperados

Se o passo 2 for falso, aplica-se esta condição de falha e o conteúdo não cumpre este Critério de Sucesso.


F32: Falha do Critério de Sucesso 1.3.2 devido à utilização de caracteres de espaço em branco para controlar o espaçamento numa palavra

Aplicabilidade

Todas as tecnologias.

Esta falha está relacionada com:

Descrição

O objectivo desta técnica é descrever como a utilização de caracteres de espaço em branco, tais como o espaço, a tabulação, a quebra de linha ou o símbolo de retorno, para formatar visualmente palavras isoladas pode ser uma falha na apresentação correcta de sequências com significação. Quando os caracteres em branco são introduzidos para controlar o espaçamento entre letras numa palavra, podem alterar a interpretação da palavra ou fazer com que não seja reconhecida de forma programática como uma única palavra.

A introdução de caracteres de espaço em branco em iniciais não é um exemplo desta falha, visto que o espaço em branco não altera a interpretação das iniciais e pode facilitar a sua compreensão.

A utilização do espaço em branco entre palavras para a formatação visual não é uma falha, visto que não altera a interpretação das palavras.

Exemplos

Exemplo de Falha 1: Falha devido à adição de um espaço em branco no meio de uma palavra

Este exemplo tem espaços em branco numa palavra para espaçar as letras num cabeçalho. Os leitores de ecrã podem ler cada letra individualmente em vez da palavra "Welcome" (Bem-vindo).

Código Exemplo:

<h1>W e l c o m e</h1>

&nbsp; pode também ser utilizado para acrescentar espaços em branco, produzindo falhas semelhantes.

Código Exemplo:

<h1>H&nbsp;E&nbsp;L&nbsp;L&nbsp;O</h1>

Exemplo de Falha 2: Um espaço em branco no meio de uma palavra, alterando o seu significado

Em japonês, os caracteres Han (Kanji) podem ter várias leituras com significados muito diferentes. Neste exemplo, a palavra é lida incorrectamente porque os leitores de ecrã podem não reconhecer estes caracteres como sendo uma palavra, devido ao espaço em branco entre eles. Os caracteres significam "Tokyo" (Tóquio), mas os leitores de ecrã lêem "Higashi Kyo".

Código Exemplo:

<h1>東 京</h1>

Exemplo de Falha 3: Utilizar caracteres de quebra de linha para formatar texto na vertical

Na célula de cabeçalho de linha de uma tabela de dados contendo texto em japonês, os autores frequentemente criam texto na vertical utilizando os caracteres de quebra de linha. Contudo, os leitores de ecrã não conseguem ler correctamente as palavras no texto na vertical, visto que as quebras de linha ocorrem na palavra. No exemplo seguinte, "東京都"(Tokyo-to) lê-se "Higashi Kyo Miyako".

Código Exemplo:

<table>
<caption>表1. 都道府県別一覧表</caption>
<tr>
<td></td>
<th scope="col">(見出しセル 1.)</th>
<th scope="col">(見出しセル 2.)</th>
</tr>
<tr>
<th scope="row">東<br />京<br />都</th>
<td>(データセル 1.)</td>
<td>(データセル 2.)</td>
</tr>
・・・・・・
</table>

Recursos

Não existem recursos disponíveis para esta técnica.

Testes

Procedimento

Para cada palavra que pareça ter um espaçamento não padrão entre caracteres:

  1. Verifique se existem palavras no texto do conteúdo que contêm caracteres de espaço em branco.

Resultados Esperados

  • Se o passo 1 for verdadeiro, aplica-se esta condição de falha e o conteúdo não cumpre este Critério de Sucesso.


F33: Falha dos Critérios de Sucesso 1.3.1 e 1.3.2 devido à utilização de caracteres de espaço em branco para criar várias colunas em conteúdo de texto simples

Aplicabilidade

Todas as tecnologias.

Esta falha está relacionada com:

Descrição

O objectivo desta técnica é descrever como a utilização de caracteres de espaço em branco, tais como o espaço, a tabulação, a quebra de linha ou o símbolo de retorno, para formatar colunas de dados em conteúdo de texto é uma falha na utilização correcta da estrutura. As tecnologias de apoio interpretam o conteúdo na ordem de leitura do idioma actual. A utilização de caracteres de espaço em branco para criar várias colunas não fornece a informação numa ordem de leitura natural. Assim, a informação não é apresentada ao utilizador da tecnologia de apoio de uma forma compreensível.

O texto simples não é adequado para apresentar várias colunas de texto. Modifique o conteúdo para apresentar os dados numa disposição diferente. Em alternativa, utilize uma tecnologia que forneça elementos estruturais para representar os dados em colunas.

Exemplos

Exemplo de Falha 1

O exemplo seguinte utiliza incorrectamente os caracteres de espaço em branco para formatar um parágrafo em duas colunas.

Código Exemplo:

Web Content Accessibility Guidelines      including blindness and low vision, 
2.0 (WCAG 2.0) covers a wide range of     deafness and hearing loss, learning 
issues and recommendations for making     difficulties, cognitive limitations, limited 
Web content more accessible. This         movement, speech difficulties, and 
document contains principles,             others. Following these guidelines will 
guidelines, Success Criteria, benefits,   also make your Web content more 
and examples that define and explain      accessible to the vast majority of users, 
the requirements for making Web-based     including older users. It will also enable
information and applications accessible.  people to access Web content using 
"Accessible" means usable to a wide       many different devices - including a 
range of people with disabilities,        wide variety of assistive technologies.

Se esta tabela for interpretada e falada por um leitor de ecrã, terá a seguinte ordem [por motivos de coerência de leitura, o texto não é traduzido]:

  • Web Content Accessibility Guidelines including blindness and low vision,

  • 2.0 (WCAG 2.0) covers a wide range of deafness and hearing loss, learning

  • issues and recommendations for making difficulties, cognitive limitations, limited

  • Web content more accessible. This movement, speech difficulties, and

  • (as linhas adicionais foram eliminadas por razões de brevidade)

Se o texto refluir, ou mudar de um tipo de letra fixo para um tipo de letra variável, ou aumentar de tamanho até as linhas não caberem na página, irão surgir problemas de interpretação semelhantes na apresentação visual.

Recursos

Não existem recursos disponíveis para esta técnica.

(actualmente, não existe nenhuma indicada)

Testes

Procedimento

  1. Verifique se o documento contém dados ou informação apresentada num formato em colunas.

  2. Verifique se as colunas são criadas utilizando caracteres de espaço em branco para apresentar a informação.

Resultados Esperados

  • Se o passo 2 for verdadeiro, aplica-se esta condição de falha e o conteúdo não cumpre estes Critérios de Sucesso.


F34: Falha dos Critérios de Sucesso 1.3.1 e 1.3.2 devido à utilização de caracteres de espaço em branco para criar várias colunas em conteúdo de texto simples

Aplicabilidade

Todas as tecnologias.

Esta falha está relacionada com:

Descrição

O objectivo desta técnica é descrever como a utilização de caracteres de espaço em branco, tais como o espaço, a tabulação, a quebra de linha ou o símbolo de retorno, para formatar tabelas em conteúdo de texto é uma falha na utilização correcta da estrutura. Quando as tabelas são criadas deste modo, não há forma de indicar se a finalidade da célula é ser uma célula de cabeçalho, de associar as células de cabeçalho de uma tabela às células dos dados da tabela, nem de navegar directamente para uma determinada célula numa tabela.

Além disso, as tecnologias de apoio interpretam o conteúdo na ordem de leitura do idioma actual. A utilização de espaços em branco para organizar os dados numa tabela visual não fornece a informação numa ordem de leitura natural no documento de origem. Assim, a informação não é apresentada ao utilizador da tecnologia de apoio numa ordem de leitura lógica.

O texto simples não é adequado para apresentar informação complexa como, por ex., tabelas, visto que não é possível compreender a estrutura da tabela. Em vez de se utilizar a formatação visual para representar as relações dispostas em tabelas, a informação disposta em tabelas necessita de ser apresentada utilizando uma tecnologia diferente, ou de ser apresentada linearmente. (Consulte Apresentar informação disposta em tabelas em texto simples)

Exemplos

Exemplo de Falha 1

O exemplo seguinte utiliza o espaço em branco de forma incorrecta para formatar um Menu como uma tabela visual.

Código Exemplo:

Menu
         Breakfast        Lunch           Dinner

Monday   2 fried eggs    tomato soup     garden salad
         bacon           hamburger       Fried Chicken
         toast           onion rings     green beans
                         Oatmeal cookie  mashed potatoes

Tuesday   Pancakes       vegetable soup  Caesar salad
          sausage        hot dogs        Spaghetti with meatballs
          orange juice   potato salad    Italian bread
                         brownie         ice cream

Se esta tabela for interpretada e lida por um leitor de ecrã, terá a seguinte ordem [por motivos de coerência de leitura, o texto não é traduzido]:

  • Menu

  • Breakfast Lunch Dinner

  • Monday 2 fried eggs tomato soup garden salad

  • bacon hamburger Fried Chicken

  • toast onion rings green beans

  • Oatmeal cookie mashed potatoes

Esta ordem de leitura não faz sentido, visto que não existe uma estrutura na tabela para que a tecnologia de apoio possa identificá-la como tal. Se o texto refluir, ou mudar de um tipo de letra fixo para um tipo de letra variável, ou aumentar de tamanho até as linhas não caberem na página, irão surgir problemas semelhantes na apresentação visual.

Recursos

Não existem recursos disponíveis para esta técnica.

Testes

Procedimento

  1. Verifique se o documento contém tabelas formatadas visualmente.

  2. Verifique se as tabelas são criadas utilizando caracteres de espaço em branco para dispor os dados em tabelas.

Resultados Esperados

  • Se o passo 2 for verdadeiro, aplica-se esta condição de falha e o conteúdo não cumpre estes Critérios de Sucesso.


F36: Falha do Critério de Sucesso 3.2.2 devido à submissão automática de um formulário e à apresentação de novo conteúdo sem aviso prévio quando é introduzido um valor no último campo do formulário

Aplicabilidade

HTML e XHTML.

Esta falha está relacionada com:

Descrição

Os formulários são frequentemente concebidos para submeter os dados automaticamente quando o utilizador preenche todos os campos, ou quando o foco é removido do último campo. Existem dois problemas com esta abordagem. Primeiro, um utilizador com incapacidade que necessite de mais contexto pode deslocar o foco do campo para as instruções de preenchimento do formulário, ou para outro texto, submetendo acidentalmente o formulário. O segundo problema é que, com alguns elementos de formulário, o valor do campo altera à medida que se navega para outros itens utilizando o teclado, mais uma vez submetendo acidentalmente o formulário. É aconselhável depender do comportamento de formulário padrão do botão Submeter e da tecla Enter.

Exemplos

Exemplo de Falha 1:

Este exemplo de falha submete um formulário quando o utilizador sai do último campo de um formulário de números de telefone com três campos. O formulário é submetido se o utilizador sair do campo depois de o editar, retrocedendo na ordem de tabulação. Os programadores não devem utilizar este método para submeter um formulário. Em vez disso, devem utilizar um botão Submeter, ou depender do comportamento predefinido do formulário de submeter quando o utilizador pressiona Enter num campo de texto.

Código Exemplo:

                                 
<form method="get" id="form1">
  <input type="text" name="text1" size="3" maxlength="3"> - 
  <input type="text" name="text2" size="3" maxlength="3"> - 
  <input type="text" name="text3" size="4" maxlength="4" onchange="form1.submit();">
</form> 

Exemplo de Falha 2:

Este é um exemplo que submete um formulário quando o utilizador selecciona uma opção a partir do menu, quando não existe um aviso prévio em relação a este comportamento. O formulário é submetido assim que um item do menu for seleccionado. Um utilizador de teclado não será capaz de navegar para além do primeiro item no menu. Os utilizadores cegos e os utilizadores com tremor das mãos podem enganar-se facilmente a escolher o item no menu pendente, sendo direccionados para o destino errado antes de o poderem corrigir.

Código Exemplo:

                                 
<form method="get" id="form2">
 <input type="text" name="text1">
  <select name="select1" onchange="form2.submit();">
    <option>one</option>
    <option>two</option>
    <option>three</option>
    <option>four</option>
  </select>
</form>

Recursos

Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.

Testes

Procedimento

  1. Introduza os dados em todos os campos na página, a começar do topo.

  2. Introduza os dados no último campo e saia dele (utilizando a tecla de tabulação).

  3. Verifique se sair do último campo provoca uma alteração de contexto.

Resultados Esperados

  • Se o passo 3 for verdadeiro, aplica-se esta condição de falha e o conteúdo não cumpre este Critério de Sucesso.


F37: Falha do Critério de Sucesso 3.2.2 devido à apresentação de uma nova janela sem aviso prévio quando o estado de um botão de opção, caixa de verificação ou lista de selecção é alterado

Aplicabilidade

HTML e XHTML.

Esta falha está relacionada com:

Notas de Apoio para o Agente de Utilizador e para a Tecnologia de Apoio

O Internet Explorer 6 também acciona o evento onclick quando um botão de opção com onclick recebe o foco; adicionar outros processadores de eventos (atributos onxxx) para evitar isto não funciona.

Descrição

Este documento descreve uma falha que ocorre quando a alteração do estado de um botão de opção, caixa de verificação ou lista de selecção faz com que se abra uma nova janela. É possível utilizar scripting para criar um elemento input que provoca a alteração de contexto (submeter o formulário, abrir uma nova página, uma nova janela) quando o elemento é seleccionado. Em vez disso, os programadores podem utilizar um botão Submeter (consulte G80: Fornecer um botão Submeter para iniciar uma alteração de contexto) ou indicar claramente a acção esperada.

Exemplos

Exemplo de Falha 1:

O exemplo abaixo não cumpre o Critério de Sucesso porque processa o formulário quando um botão de opção é seleccionado, em vez de utilizar um botão Submeter.

Código Exemplo:

                                  
<script type="text/JavaScript"> 
  function goToMirror(theInput) {
   var mirrorSite = "http://download." + theInput.value + "/"; 
   window.open(mirrorSite); 
  }
</script>
  …
<form name="mirror_form" id="mirror_form" action="" method="get">
       <p>Please select a mirror download site:</p> 
       <p> 
       <input type="radio" onclick="goToMirror(this);" name="mirror" 
       id="mirror_belnet" value="belnet.be" /> 
       <label for="mirror_belnet">belnet (<abbr>BE</abbr>)</label><br /> 
       <input type="radio" onclick="goToMirror(this);" name="mirror" 
       id="mirror_surfnet" value="surfnet.nl" /> 
       <label for="mirror_surfnet">surfnet (<abbr>NL</abbr>)</label><br /> 
       <input type="radio" onclick="goToMirror(this);" name="mirror" 
       id="mirror_puzzle" value="puzzle.ch" /> 
       <label for="mirror_puzzle">puzzle (<abbr>CH</abbr>)</label><br /> 
       <input type="radio" onclick="goToMirror(this);" name="mirror" 
       id="mirror_voxel" value="voxel.com" /> 
       <label for="mirror_voxel">voxel (<abbr>US</abbr>)</label><br /> 
       </p> 
</form>

Recursos

Não existem recursos disponíveis para esta técnica.

(actualmente, não existe nenhuma indicada)

Testes

Procedimento

  1. Localize cada formulário numa página.

  2. Para cada controlo de formulário que seja um botão de opção, uma caixa de verificação ou um item numa lista de selecção, verifique se alterar o estado do controlo abre uma nova janela.

  3. Para cada nova janela resultante do passo 2, verifique se o utilizador é avisado previamente.

Resultados Esperados

Se o passo 3 for falso, aplica-se esta condição de falha e o conteúdo não cumpre este Critério de Sucesso.


F38: Falha do Critério de Sucesso 1.1.1 devido à omissão do atributo alt para conteúdo não textual utilizado apenas para fins decorativos em HTML

Aplicabilidade

HTML e XHTML.

Esta falha está relacionada com:

Descrição

Esta técnica descreve a condição de falha para alternativas em texto para imagens que devem ser ignoradas pela tecnologia de apoio. Se não existir nenhum atributo alt, as tecnologias de apoio não serão capazes de ignorar o conteúdo não textual. O atributo alt tem de ser provado e ter um valor nulo (i.e., alt="" ou alt=" ") para evitar o não cumprimento deste Critério de Sucesso.

Nota: Embora alt=" " seja válido, recomendamos o atributo alt="" .

Exemplos

  • Exemplo de Falha 1: Imagens decorativas que não têm nenhum atributo alt .

Recursos

Não existem recursos disponíveis para esta técnica.

(actualmente, não existe nenhuma indicada)

Testes

Procedimento

  1. Identifique quaisquer elementos img e applet que sejam utilizados para conteúdo meramente decorativo.

  2. Verifique se o atributo alt para estes elementos existe.

  3. Verifique se o atributo alt para estes elementos é nulo.

Resultados Esperados

  • Se o passo 2 ou 3 forem falsos, aplica-se esta condição de falha e o conteúdo não cumpre este Critério de Sucesso.


F39: Falha do Critério de Sucesso 1.1.1 devido ao fornecimento de uma alternativa em texto que não é nula (por ex., alt="separadora" ou alt="imagem") para imagens que devem ser ignoradas pela tecnologia de apoio

Aplicabilidade

Aplica-se a HTML e XHTML.

Esta falha está relacionada com:

Descrição

Esta técnica descreve a condição de falha para alternativas em texto para imagens que devem ser ignoradas pela tecnologia de apoio. Se não existir nenhum atributo alt, as tecnologias de apoio não serão capazes de ignorar o conteúdo não textual. O atributo alt tem de ser provado e ter um valor nulo (i.e., alt="" ou alt=" ") para evitar o não cumprimento deste Critério de Sucesso.

Nota: Embora alt=" " seja válido, recomendamos o atributo alt="" .

Exemplos

  • Exemplo de Falha 1: Imagens decorativas que não têm nenhum atributo alt .

Recursos

Não existem recursos disponíveis para esta técnica.

(actualmente, não existe nenhuma indicada)

Testes

Procedimento

  1. Identifique quaisquer elementos img e applet que sejam utilizados para conteúdo meramente decorativo.

  2. Verifique se o atributo alt para estes elementos existe.

  3. Verifique se o atributo alt para estes elementos é nulo.

Resultados Esperados

  • Se o passo 2 ou 3 forem falsos, aplica-se esta condição de falha e o conteúdo não cumpre este Critério de Sucesso.


F40: Falha dos Critérios de Sucesso 2.2.1 e 2.2.4 devido à utilização de um meta redirect com um limite de tempo

Aplicabilidade

Todas as páginas.

Esta falha está relacionada com:

Descrição

metahttp-equiv de {time-out}; url=... é muitas vezes utilizado para redireccionar os utilizadores automaticamente. Quando isto ocorre após um tempo de espera, é uma alteração de contexto inesperada, que pode interromper o utilizador.

É aceitável utilizar o elemento meta para criar um redireccionamento quando o tempo limite excedido é definido para zero, visto que o redireccionamento é instantâneo e não será entendido como uma alteração de contexto. Contudo, é preferível utilizar métodos do lado do servidor para o obter. Consulte SVR1: Implementar redireccionamentos automáticos no lado do servidor em vez de no lado do cliente (SERVIDOR).

Exemplos

Exemplo de Falha 1

A página abaixo é uma falha porque redirecciona para o URI http://www.example.com/newpage após um limite de tempo de 5 segundos.

Código Exemplo:

<html xmlns="http://www.w3.org/1999/xhtml">
   <head>     
      <title>Do not use this!</title>     
      <meta http-equiv="refresh"
      content="5; url=http://www.example.com/newpage" />   
   </head>   
   <body>     
      <p>       
         If your browser supports Refresh, you'll be       
         transported to our        
         <a href="http://www.example.com/newpage">new site</a>        
         in 5 seconds, otherwise, select the link manually.     
      </p>   
   </body> 
</html>

Recursos

Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.

Testes

Procedimento

  1. Visualize uma página.

  2. Verifique se a página não é redireccionada após um limite de tempo excedido.

Resultados Esperados

  1. O passo 2 é verdadeiro.


F41: Falha dos Critérios de Sucesso 2.2.1, 2.2.4 e 3.2.5 devido à utilização de um meta refresh com um tempo limite excedido

Aplicabilidade

HTML e XHTML.

Esta falha está relacionada com:

Descrição

metahttp-equiv de actualização é muitas vezes utilizado para actualizar as páginas periodicamente ou redireccionar os utilizadores para outra página. Se o intervalo de tempo for muito curto, as pessoas cegas não têm tempo suficiente para que os seus leitores de ecrã leiam a página antes de a página actualizar inesperadamente, fazendo com que o leitor de ecrã comece a ler no topo. Os utilizadores sem problemas de visão podem também ficar desorientados com a actualização inesperada.

Exemplos

Exemplo de Falha 1

Este é um exemplo preterido que altera a página do utilizador a intervalos regulares. Os programadores de conteúdo não devem utilizar esta técnica para simular a tecnologia "push". Os programadores não conseguem prever o tempo que um utilizador vai necessitar para ler uma página; uma actualização prematura pode desorientar os utilizadores. Os programadores de conteúdo devem evitar as actualizações periódicas e permitir que os utilizadores escolham quando pretendem a informação mais actual. (O número no atributo content é o intervalo de actualização em segundos).

Código Exemplo:

<html xmlns="http://www.w3.org/1999/xhtml">   
  <head>     
    <title>HTML Techniques for WCAG 2.0</title>     
    <meta http-equiv="refresh" content="60" />   
  </head>   
  <body>
    ...     
  </body> 
</html>

Exemplo de Falha 2

Este é um exemplo preterido que redirecciona o utilizador para outra página após alguns segundos. Recomendamos que os programadores de conteúdo utilizem redireccionamentos do lado do servidor. (O número no atributo content é o intervalo de actualização em segundos).

Código Exemplo:

<html xmlns="http://www.w3.org/1999/xhtml">   
  <head>     
    <title>The Tudors</title>     
    <meta http-equiv="refresh" content="10;URL='http://example.com/'" />   
  </head>   
  <body>
    <p>This page has moved to a <a href="http://example.com/">
    example.com</a>. Please note that we now have our own 
    domain name and will redirect you in a few seconds. Please update 
    your links and bookmarks.</p>
  </body> 
</html>

Testes

Procedimento

  1. Localize os elementos meta no documento.

  2. Para cada elemento meta, verifique se contém o atributo http-equiv com o valor "refresh" (não sensível a maiúsculas e minúsculas) e o atributo content com um número (a representar os segundos) superior a 0.

Resultados Esperados

  • Se o passo 2 for verdadeiro, aplica-se esta condição de falha e o conteúdo não cumpre estes Critérios de Sucesso.


F42: Falha dos Critérios de Sucesso 1.3.1 e 2.1.1 devido à utilização de eventos de scripting para emular links de um modo que não é determinável de forma programática

Aplicabilidade

HTML e XHTML com Scripting.

Esta falha está relacionada com:

Descrição

Esta falha ocorre quando os processadores de eventos JavaScript estão anexados a elementos para ''emular links''. Um controlo ou link criado desta forma não pode ser acedido através da tecla de tabulação a partir do teclado e não recebe o foco do teclado como os outros controlos e/ou links. Se os eventos de scripting forem utilizados para emular links, os agentes de utilizador, incluindo a tecnologia de apoio, podem não conseguir identificar os links no conteúdo como sendo links. Podem não ser reconhecidos como controlos interactivos pela tecnologia de apoio, ou podem ser reconhecidos como controlos interactivos mas não links. Estes elementos não surgem na lista de links gerada pelos agentes de utilizador ou pela tecnologia de apoio.

A finalidade dos elementos <a href> e <area> é marcar os links.

Anexar os processadores de eventos a elementos que normalmente não são interactivos, tais como span e div, pode ser bastante confuso para os utilizadores. Mesmo se houver cuidado em fornecer acesso a estes elementos através do teclado, os utilizadores podem ter dificuldade em descobrir que existem controlos interactivos no conteúdo, ou compreender qual o comportamento que podem esperar dos referidos controlos. Por exemplo, os utilizadores podem não saber quais os batimentos de tecla que são suportados pelo script para activar o elemento. Além disso, estes elementos não geram os mesmos eventos do sistema operativo que os elementos interactivos, por isso a tecnologia de apoio pode não ser notificada quando o utilizador os activa.

Exemplos

Exemplo de Falha 1: Utilizar scripts num elemento <span>

O processamento de eventos que suporta scripts é adicionado a um elemento span para que funcione como um link quando se clica sobre o mesmo com um rato. A tecnologia de apoio não reconhece este elemento como um link.

Código Exemplo:

<span onclick="this.location.href='newpage.html'">
    Fake link
</span>

Exemplo de Falha 2: Utilizar scripts num elemento <img>

O processamento de eventos que suporta scripts é adicionado a um elemento img para que funcione como um link quando se clica sobre o mesmo com um rato. A tecnologia de apoio não reconhece este elemento como um link.

Código Exemplo:

                                   src="go.gif" 
   alt="go to the new page" 
   onclick="this.location.href='newpage.html'"

Exemplo de Falha 3: Utilizar scripts num elemento <img>, com suporte de teclado.

O processamento de eventos que suporta scripts é adicionado a um elemento img para que funcione como um link. Neste exemplo, a funcionalidade do link pode ser invocada com o rato ou através da tecla Enter, se o agente de utilizador incluir o elemento na sequência de tabulação. Contudo, o elemento não é reconhecido como link.

Código Exemplo:

function doNav(url)
{
   window.location.href = url;
}

function doKeyPress(url)
{
   //if the enter key was pressed
   if (window.event.type == "keypress" &&
       window.event.keyCode == 13)
   {
      doNav(url);
   }
}

A marcação para a imagem é a seguinte:

Código Exemplo:

<p>
	<img src="bargain.jpg"
		tabindex="0" 
		alt="View Bargains"
		onclick="doNav('viewbargains.html');"
		onkeypress="doKeyPress('viewbargains.html');"
	>
</p>

Exemplo de Falha 4: Utilizar scripts num elemento <div>

Este exemplo utiliza o script para fazer com que o elemento div se comporte como um link. Embora o autor forneça o acesso total através do teclado e separe os processadores de eventos da marcação para permitir uma nova finalidade do conteúdo, o elemento div não é reconhecido como um link pela tecnologia de apoio.

Código Exemplo:

window.onload = init;

function init()
{
	var objAnchor = document.getElementById('linklike');

	objAnchor.onclick = function(event){return changeLocation(event,
'surveyresults.html');};
	objAnchor.onkeypress = function(event){return changeLocation(event,
'surveyresults.html');};
}

function changeLocation(objEvent, strLocation)
{
	var iKeyCode;

	if (objEvent && objEvent.type == 'keypress')
	{
		if (objEvent.keyCode)
			iKeyCode = objEvent.keyCode;
		else if (objEvent.which)
			iKeyCode = objEvent.which;

		if (iKeyCode != 13 && iKeyCode != 32)
			return true;
	}

	window.location.href = strLocation;
}

A marcação para o elemento div é a seguinte:

Código Exemplo:

<div id="linklike">
View the results of the survey.
</div>

Recursos

Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.

Testes

Procedimento

  1. Verifique se existem processadores de eventos JavaScript num elemento que emule um link.

  2. Verifique se função determinada de forma programática do elemento é um link.

Resultados Esperados

  • Se o passo 1 for verdadeiro e o passo 2 for falso, aplica-se esta condição de falha e o conteúdo não cumpre o Critério de Sucesso.


F43: Falha do Critério de Sucesso 1.3.1 devido à utilização de marcação estrutural de uma forma que não representa as relações no conteúdo

Aplicabilidade

HTML e XHTML.

Esta falha está relacionada com:

Descrição

O objectivo desta técnica é descrever uma falha que ocorre quando a marcação estrutural é utilizada para se obter um efeito de apresentação, mas indica relações que não existem no conteúdo. Isto é confuso para os utilizadores que dependem dessas relações para navegar no conteúdo ou compreender a relação entre uma parte do conteúdo e outra. Note que a utilização de tabelas HTML para esquemas não é um exemplo desta falha, desde que a tabela de esquema não inclua marcação estrutural inadequada como, por exemplo, elementos <th> ou <caption> .

Exemplos

Exemplo de Falha 1: Um cabeçalho utilizado apenas para efeito visual

Neste exemplo, um elemento heading é utilizado para apresentar um endereço num tipo de letra ampliado, a negrito. Contudo, o endereço não identifica uma nova secção do documento, por isso não deve ser marcado como um cabeçalho.

Código Exemplo:

<p>Interested in learning more? Write to us at</p> 
<h4>3333 Third Avenue, Suite 300 · New York City</h4>

<p>And we'll send you the complete informational packet absolutely Free!</p>

Exemplo de Falha 2: Utilizar elementos heading para efeito de apresentação

Neste exemplo, a marcação do cabeçalho é utilizada de duas formas diferentes: para transmitir a estrutura do documento e criar efeitos visuais. Os elementos h1 e h2 são utilizados correctamente para marcar o início do documento como um todo e o início da sinopse. Contudo, os elementos h3 e h4 entre o título e a sinopse são utilizados apenas para efeito visual – para controlar os tipos de letra utilizados para apresentar os nomes dos autores e a data.

Código Exemplo:

<h1>Study on the Use of Heading  Elements in Web Pages</h1>
<h3>Joe Jones and Mary Smith<h3>
<h4>March 14, 2006</h4>
<h2>Abstract</h2>
<p>A study was conducted in early 2006 ...
</p>

Exemplo de Falha 3: Utilizar elementos blockquote para fornecer um avanço adicional

O exemplo seguinte utiliza blockquote para texto que não é uma citação, para o destacar através de avanço, quando é apresentado nos browsers gráficos.

Código Exemplo:

<p>After extensive study of the company Web site, the task force 
identified the following common problem.</p>

<blockquote>
<p>The use of markup for presentational effects made Web 
pages confusing to screen reader users.</p>
</blockquote>

<p>The committee lists particular examples of the problems 
introduced by this practice below.</p>

Exemplo de Falha 4: Utilizar os elementos fieldset e legend para acrescentar uma margem ao texto

Código Exemplo:

<fieldset>
<legend>Bargain Corner</legend>
<p>Buy today, and save 20%</p>
</fieldset>

Recursos

Não existem recursos disponíveis para esta técnica.

Testes

Procedimento

  1. Verifique se o significado semântico de cada elemento é apropriado para o conteúdo do elemento.

Resultados Esperados

  • Se o passo 1 for falso, aplica-se esta condição de falha e o conteúdo não cumpre este Critério de Sucesso.


F44: Falha do Critério de Sucesso 2.4.3 devido à utilização de tabindex para criar uma ordem de tabulação que não preserve o significado e a operabilidade

Aplicabilidade

HTML e XHTML.

Esta falha está relacionada com:

Descrição

Este documento descreve uma falha que ocorre quando a ordem de tabulação não segue as relações e sequências lógicas no conteúdo.

Os elementos que podem receber o foco, tais como links e elementos de formulário, têm um atributo tabindex . Os elementos recebem o foco por ordem ascendente do valor do atributo tabindex . Quando os valores do atributo tabindex são atribuídos numa ordem diferente à das relações e sequências no conteúdo, a ordem de tabulação não segue as relações e sequências no conteúdo.

Uma das causas mais comuns desta falha ocorre ao editar uma página, na qual tenha sido utilizado o atributo tabindex . É fácil a ordem de tabulação e a ordem do conteúdo não corresponderem quando o conteúdo é editado, mas os atributos tabindex não são actualizados de modo a reflectirem as alterações ao conteúdo.

Exemplos

Exemplo de Falha 1

O exemplo seguinte utiliza o tabindex incorrectamente para especificar uma ordem de tabulação alternativa:

Código Exemplo:

<ul>
   <li><a href="main.html" tabindex="1">Homepage</a></li>
   <li><a href="chapter1.html" tabindex="4">Chapter 1</a></li>
   <li><a href="chapter2.html" tabindex="3">Chapter 2</a></li>
   <li><a href="chapter3.html" tabindex="2">Chapter 3</a></li>
</ul>

Se se navegar nesta lista através da tecla de tabulação, a ordem seguida é "Homepage", "chapter 3", "chapter 2", "chapter 1", que não segue a sequência no conteúdo.

Exemplo de Falha 2

A ordem de tabulação é definida explicitamente numa página Web, fornecendo atributos tabindex para todos os campos. Mais tarde, a página é actualizada para adicionar um novo campo no centro da página, mas o autor esquece-se de adicionar um atributo tabindex ao novo campo. Como consequência, o novo campo encontra-se no final na ordem de tabulação.

Recursos

Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.

Testes

Procedimento

  1. Se for utilizado tabindex, verifique se a ordem de tabulação especificada pelos atributos tabindex segue as relações no conteúdo.

Resultados Esperados

  • Se o passo 1 for falso, aplica-se esta condição de falha e o conteúdo não cumpre este Critério de Sucesso.


F46: Falha do Critério de Sucesso 1.3.1 devido à utilização de elementos th, caption, ou atributos summary não vazios em tabelas de esquema

Aplicabilidade

HTML e XHTML.

Esta falha está relacionada com:

Descrição

O objectivo desta técnica é descrever uma falha que ocorre quando uma tabela utilizada apenas para um esquema inclui elementos th, um atributo summary ou um elemento caption . Isto é uma falha porque utiliza marcação estrutural (ou semântica) apenas para apresentação. A finalidade dos elementos de tabela em HTML e XHTML é apresentar os dados.

Embora não seja normalmente utilizada numa tabela de esquema, a seguinte marcação estrutural é também uma falha do Critério de Sucesso 1.3.1, caso sejam utilizados os seguintes atributos numa tabela de esquema:

  • headers

  • scope

As tecnologias de apoio utilizam a estrutura de uma tabela HTML ou XHTML para apresentar os dados ao utilizador de uma forma lógica. O elemento th é utilizado para marcar os cabeçalhos das colunas e linhas da tabela. Um leitor de ecrã utiliza a informação nos elementos th para ler a informação do cabeçalho que é alterada à medida que o utilizador navega na tabela. O atributo summary no elemento table fornece uma descrição textual da tabela, descrevendo a sua finalidade e função. As tecnologias de apoio disponibilizam a informação do atributo summary aos utilizadores. O elemento caption faz parte da tabela e identifica-a.

Embora as WCAG 2 não proíbam a utilização de tabelas de esquema, recomendamos as disposições baseadas em CSS para manter o significado semântico definido dos elementos da tabela em HTML e para cumprir a regra de codificação de separar a apresentação do conteúdo. Quando uma tabela é utilizada para fins de esquema, o elemento th não deve ser utilizado. Visto que a tabela não apresenta dados, não é necessário marcar quaisquer células como cabeçalhos de colunas ou linhas. Da mesma forma, não é necessária uma descrição adicional de uma tabela que é utilizada apenas para apresentar o conteúdo. Não inclua um atributo summary nem utilize o atributo summary para descrever a tabela como, por exemplo, "tabela de esquema". Quando lida, a informação não fornece o valor e só distrai os utilizadores que navegam no conteúdo utilizando um leitor de ecrã. Os atributos summary vazios são aceitáveis em tabelas de esquema, mas não são recomendados.

Exemplos

Exemplo de Falha 1

Este é um exemplo simples que utiliza uma tabela para apresentar o conteúdo num formato de três colunas. A barra de navegação está na coluna da esquerda, o conteúdo principal na coluna do meio e existe uma barra lateral à direita. No topo da página está o título da mesma. O exemplo marca o título da página como <th>, e fornece um atributo summary que indica que a tabela é uma tabela de esquema.

Código Exemplo:

                                 <table summary="layout table">
 <tr>
   <th colspan=3>Page Title</th>
 </tr>
 <tr>
   <td><div>navigation content</div></td>
   <td><div>main content</div></td>
   <td><div>right sidebar content</div></td>
 </tr>
 <tr>
   <td colspan=3>footer</td>
 </tr>
 </table>

Recursos

Não existem recursos disponíveis para esta técnica.

Testes

Procedimento

  1. Verifique se o código fonte do documento HTML ou XHTML tem o elemento table .

  2. Se a tabela for utilizada apenas para dispor visualmente os elementos no conteúdo,

    1. Verifique se a tabela não contém quaisquer elementos th .

    2. Verifique se o elemento table não contém um atributo summary não vazio.

    3. Verifique se o elemento table não contém um elemento caption .

Resultados Esperados

  • Se algum dos passos acima for falso, aplica-se esta condição de falha e o conteúdo não cumpre o Critério de Sucesso.


F47: Falha do Critério de Sucesso 2.2.2 devido à utilização do elemento blink

Aplicabilidade

HTML e XHTML.

Esta falha está relacionada com:

Notas de Apoio para o Agente de Utilizador e para a Tecnologia de Apoio

O elemento blink não é suportado pelo Internet Explorer 6 no Windows. É suportado na família Netscape/Mozilla de agentes de utilizadores e no Opera no Windows.

Descrição

O elemento blink, embora não faça parte da especificação oficial HTML ou XHTML, é suportado por vários agentes de utilizador. Faz com que qualquer texto dentro do elemento fique em modo intermitente a uma velocidade predeterminada, não podendo ser interrompido pelo utilizador nem desactivado como uma preferência. Enquanto a página estiver a ser apresentada, a intermitência continua. Por conseguinte, o conteúdo que utilizar o blink não cumpre o Critério de Sucesso, uma vez que a intermitência pode exceder a duração de três segundos.

Exemplos

Exemplo de Falha 1

Uma página com uma lista de produtos utiliza o elemento blink para chamar a atenção para os preços de venda, não cumprindo assim o Critério de Sucesso, uma vez que os utilizadores não conseguem controlar a intermitência.

Código Exemplo:

<p>My Great Product <blink>Sale! $44,995!</blink></p>

Testes

Procedimento

  1. Verifique se o código tem o elemento blink .

Resultados Esperados

  • Se o passo 1 for verdadeiro, o conteúdo não cumpre o Critério de Sucesso.


F48: Falha do Critério de Sucesso 1.3.1 devido à utilização do elemento pre para marcar informações dispostas em tabelas

Aplicabilidade

HTML e XHTML.

Esta falha está relacionada com:

Descrição

Este documento descreve uma falha provocada pela utilização do elemento pre HTML para marcar informações dispostas em tabelas. O elemento pre mantém apenas a formatação visual. Se o elemento pre for utilizado para marcar as informações dispostas em tabelas, as relações lógicas visualmente implícitas entre as células de tabela e os cabeçalhos são perdidas se o utilizador não puder ver o ecrã ou se a apresentação visual for alterada significativamente.

Em alternativa, o elemento table HTML destina-se a apresentar os dados dispostos em tabelas. As tecnologias de apoio utilizam a estrutura de uma tabela HTML para apresentar dados ao utilizador de uma forma lógica. Esta estrutura não está disponível ao utilizar o elemento pre .

Exemplos

Exemplo de Falha 1: Uma agenda formatada com separadores entre colunas

Código Exemplo:

                         <pre>
 	Monday	Tuesday	Wednesday	Thursday	Friday
 8:00-
 9:00	Meet with Sam				
 9:00-
 10:00			Dr. Williams	Sam again	Leave for San Antonio
 </pre>

Exemplo de Falha 2: Resultados de uma eleição apresentados utilizando texto pré-formatado

Código Exemplo:

                         <pre>
   CIRCUIT COURT JUDGE BRANCH 3
                                                  W
                                                   R
                                          M R E     I
                                           A . L     T
                                     M L    R   B     E
                                      I A    Y   E     -
                                       K N        R     I
                                        E G        T     N
                                       -----   -----   -----
0001 TOWN OF ALBION WDS 1-2               22      99       0
0002 TOWN OF BERRY WDS 1-2                52     178       0
0003 TOWN OF BLACK EARTH                  16      49       0
0004 TOWN OF BLOOMING GROVE WDS 1-3       44     125       0
0005 TOWN OF BLUE MOUNDS                  33     117       0
0006 TOWN OF BRISTOL WDS 1-3             139     639       1
0007 TOWN OF BURKE WDS 1-4                80     300       0
0008 TOWN OF CHRISTIANA WDS 1-2           22      50       0

 </pre>

Recursos

Não existem recursos disponíveis para esta técnica.

Testes

Procedimento

  1. Certifique-se de que o elemento pre é utilizado.

  2. Para cada ocorrência do elemento pre, verifique se as informações inclusas estão dispostas em tabelas.

Resultados Esperados

  • Se o passo 2 for verdadeiro, aplica-se esta condição de falha e o conteúdo não cumpre o Critério de Sucesso.


F49: Falha do Critério de Sucesso 1.3.2 devido à utilização de uma tabela de esquema HTML que não faz sentido quando linearizada

Aplicabilidade

HTML e XHTML.

Esta falha está relacionada com:

Notas de Apoio para o Agente de Utilizador e para a Tecnologia de Apoio

Os primeiros leitores de ecrã liam, literalmente, o conteúdo da Web a partir do ecrã, o que conduzia a problemas quando eram utilizadas tabelas para esquemas, em que uma célula de tabela deveria ser lida na sua totalidade antes de passar para a célula de tabela seguinte. Actualmente, os leitores de ecrã trabalham com a marcação subjacente, o que significa que lêem uma célula de tabela na sua totalidade antes de passar para a célula seguinte, mas as tabelas de esquema podem continuar a originar problemas inadvertidamente com a leitura natural do conteúdo.

Descrição

Embora as WCAG 2 não proíbam a utilização de tabelas de esquema, são recomendados os esquemas baseados em CSS para manter o significado semântico definido dos elementos table HTML e para estar em conformidade com a regra de codificação de separar a apresentação do conteúdo. Contudo, se for utilizada uma tabela de esquema, é importante que o conteúdo faça sentido quando linearizado.

Esta falha ocorre quando uma sequência com significação do conteúdo transmitida através da apresentação é perdida porque as tabelas HTML utilizadas para controlar a colocação visual do conteúdo não "linearizaram" correctamente. As tabelas apresentam o conteúdo em duas dimensões visuais, horizontal e vertical. Contudo, os leitores de ecrã apresentam este conteúdo bidimensional na ordem linear do conteúdo na origem, começando pela primeira célula na primeira linha e terminando com a última célula na última linha. O leitor de ecrã lê a tabela do início ao fim, lendo todos os conteúdos de cada linha antes de passar para a linha seguinte. O conteúdo completo de cada célula em cada linha é lido, incluindo todo o conteúdo de qualquer tabela encaixada numa célula. Chama-se a isto linearização.

Imagine que uma página Web é disposta utilizando uma tabela com 9 colunas e 22 linhas. O leitor de ecrã lê o conteúdo da célula na Coluna 1, Linha 1 seguido pelas células nas colunas 2, 3, 4 e assim sucessivamente até à coluna 9. Contudo, se nenhuma célula incluir uma tabela encaixada, o leitor de ecrã irá ler toda a tabela encaixada antes de ler a célula seguinte da tabela original (externa). Por exemplo, se a célula na coluna 3, linha 6 incluir uma tabela com 6 colunas e 5 linhas, todas as células serão lidas antes da Coluna 4, Linha 6 da tabela original (externa). Como resultado, a sequência com significação transmitida através de apresentação visual pode não ser perceptível quando o conteúdo é lido através de um leitor de ecrã.

Exemplos

Exemplo de Falha 1: Uma tabela de esquema que não lineariza correctamente

Um anúncio utiliza de forma inteligente o posicionamento visual, mas o seu significado é alterado quando linearizado.

Código Exemplo:

<table>
<tr>
  <td ><img src="logo.gif" alt="XYZ mountaineering"></td>
  <td rowspan="2" valign="bottom">top!</td>
</tr>
<tr>
  <td>XYZ gets you to the</td>
</tr>
</table>

A ordem de leitura deste exemplo seria:

  • XYZ montanhismo topo!

  • XYZ leva-o ao

Exemplo de Falha 2: Uma tabela de esquema que separa uma sequência com significação quando linearizada

Uma página Web da exposição de um museu posiciona uma barra de navegação com uma longa lista de links no lado esquerdo da página. À direita da barra de navegação está uma imagem de um dos quadros da exposição. À direita da imagem está o texto do "letreiro" que poderia ver na parede junto ao quadro se estivesse no museu. Abaixo do texto está um cabeçalho que indica: "Descrição" e abaixo desse cabeçalho está uma descrição da imagem. A imagem, o texto do letreiro, o cabeçalho Descrição e o texto da descrição formam uma sequência com significação.

É utilizada uma tabela de esquema para posicionar os elementos da página. Os links na barra de navegação são divididos em células diferentes na coluna mais à esquerda.

Código Exemplo:

<table>
<tr>
	<td><a href="#">Link 1</a></td>
	<td rowspan="20"><img src="img.png" alt="Museum Picture"></td>
	<td rowspan="6"><img src="placard.png" alt="Placard text"></td> 
</tr> 
<tr>
	<td><a href="#">Link 2</a></td>
</tr>
<tr>
	<td><a href="#">Link 3</a></td>
</tr>
<tr>
	<td><a href="#">Link 4</a></td>
</tr>
<tr>
	<td><a href="#">Link 5</a></td>
</tr>
<tr>
	<td><a href="#">Link 6</a></td>
</tr>
<tr>
	<td><a href="#">Link 7</a></td>
	<td rowspan="2"><h2>Image Heading</h2></td> 
</tr> 
<tr>
	<td><a href="#">Link 8</a></td>
</tr>
<tr>
	<td><a href="#">Link 9</a></td>
	<td rowspan="12">Description of the image</td> 
</tr> 
<tr>
	<td><a href="#">Link 10</a></td>
</tr>
 ...
<tr>
	<td><a href="#">Link 20</a></td>
</tr>
</table>

A ordem de leitura deste exemplo seria:

  • Link 1

  • Imagem

  • Texto do Letreiro

  • Link 2

  • Link 3

  • Link 4

  • Link 5

  • Link 6

  • Link 7

  • Cabeçalho da Imagem

  • Link 8

  • Link 9

  • Link 10

  • ...

  • Link 20

Uma vez que os links da barra de navegação estão intercalados com o conteúdo que descreve a imagem, os leitores de ecrã não conseguem apresentar o conteúdo numa sequência com significação correspondente à sequência apresentada visualmente.

Recursos

Não existem recursos disponíveis para esta técnica.

Testes

Procedimento

  1. Linearize o conteúdo de uma das seguintes formas:

    • Apresente o conteúdo na ordem do código fonte.

    • Remova a marcação da tabela em torno do conteúdo.

  2. Verifique se a ordem de leitura linear corresponde a qualquer sequência com significação transmitida através de apresentação.

Resultados Esperados

  • Se o passo 2 for falso, aplica-se esta condição de falha e o conteúdo não cumpre este Critério de Sucesso.


F50: Falha do Critério de Sucesso 2.2.2 devido a um script que provoca um efeito intermitente sem um mecanismo para parar o modo intermitente ao fim de 5 segundos ou menos

Aplicabilidade

Tecnologias que suportem o modo intermitente do conteúdo controlado por script.

Esta falha está relacionada com:

Descrição

Os scripts podem ser utilizados para colocar o conteúdo em modo intermitente, activando e desactivando a visibilidade do conteúdo em intervalos regulares. É uma falha para o script não incluir um mecanismo para parar a intermitência em 5 segundos ou menos. Para obter informações sobre como modificar a técnica para parar o modo intermitente, consulte SCR22: Utilizar scripts para controlar o modo intermitente e pará-lo em cinco segundos ou menos (Scripting).

Exemplos

Exemplo de Falha 1

O exemplo seguinte utiliza o script no conteúdo em modo intermitente, mas a intermitência continua indefinidamente em vez de parar após cinco segundos.

Código Exemplo:

...
<script type="text/javascript">
<!--
// blink "on" state
function show()
{
	if (document.getElementById)
	document.getElementById("blink1").style.visibility = "visible";
	settime-out("hide()", 450);
}
// blink "off" state
function hide()
{
	if (document.getElementById)
	document.getElementById("blink1").style.visibility = "hidden";
	settime-out("show()", 450);
}
// kick it off
show();
//-->
</script>
 ...
<span id="blink1">This content will blink</span>

Testes

Procedimento

Para cada ocorrência de conteúdo em modo intermitente:

  1. Verifique se a intermitência pára em 5 segundos ou menos.

Resultados Esperados

Se o passo 1 for falso, o conteúdo não cumpre o Critério de Sucesso.


F52: Falha do Critério de Sucesso 3.2.1 devido à apresentação de uma nova janela assim que uma página nova é carregada

Aplicabilidade

Aplica-se quando é utilizado scripting para abrir novas janelas.

Esta falha está relacionada com:

Descrição

Alguns sítios da Web abrem uma nova janela quando uma página é carregada, para publicitar um produto ou serviço. O objectivo desta técnica é garantir que as páginas não confundam os utilizadores abrindo uma ou mais novas janelas assim que uma página é carregada.

Exemplos

Nota: Existem vários métodos através dos quais esta falha pode ser accionada. Dois dos exemplos comuns que são suportados de forma diferente em várias versões dos agentes de utilizador são indicados nos exemplos abaixo.

Exemplo de Falha 1:

O exemplo seguinte é, normalmente, utilizado em HTML 4.01 para abrir novas janelas quando as páginas são carregadas.

Código Exemplo:

window.onload = showAdvertisement;
 function showAdvertisement()
 {
  window.open('advert.html', '_blank', 'height=200,width=150');
 }

Exemplo de Falha 2:

O exemplo seguinte é, normalmente, utilizado em XHTML para abrir novas janelas quando as páginas são carregadas.

Código Exemplo:

if (window.addEventListener) { 
    window.addEventListener("load", showAdvertisement, true);
}
if (window.attachEvent) {
    window.attachEvent("onload", showAdvertisement);
}
function showAdvertisement()
{
window.open('noscript.html', '_blank', 'height=200,width=150');
}

Recursos

Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.

Testes

Procedimento

  1. Carregue uma nova página.

  2. Certifique-se de que uma nova janela foi aberta como resultado de carregar a nova página.

Resultados Esperados

  • Se o passo 2 for verdadeiro, aplica-se esta condição de falha e o conteúdo não cumpre o Critério de Sucesso.


F54: Falha do Critério de Sucesso 2.1.1 devido à utilização apenas de processadores de evento específicos do dispositivo apontador (incluindo gestos) para uma função

Aplicabilidade

Tecnologias que disponham de processadores de evento específicos dos dispositivos apontadores.

Notas de Apoio para o Agente de Utilizador e para a Tecnologia de Apoio

  • Nenhuma indicada.

Esta falha está relacionada com:

Descrição

Quando os processadores de eventos específicos do dispositivo apontador são o único mecanismo disponível para invocar uma função do conteúdo, os utilizadores cegos (que não podem utilizar dispositivos, tais como o rato, que necessitam de coordenação dos olhos com a mão), bem como os utilizadores que têm de utilizar teclados alternativos ou dispositivos de entrada que funcionem como emuladores de teclado não poderão aceder à função do conteúdo.

Exemplos

Exemplo de Falha 1

O exemplo seguinte é de uma imagem que responde a um clique do rato para avançar para outra página. Trata-se de uma falha porque o teclado não pode ser utilizado para avançar para a página seguinte. <p><img onmousedown="nextPage();" src="nextarrow.gif" alt="Go to next page"></p>

Recursos

Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.

Testes

Procedimento

  1. Certifique-se de que os processadores de evento específicos do dispositivo apontador são os únicos meios de invocar funções de scripting.

Resultados Esperados

  • Se não existir nenhum, aplica-se esta condição de falha e o conteúdo não cumpre p Critério de Sucesso.


F55: Falha dos Critérios de Sucesso 2.1.1, 2.4.7 e 3.2.1 devido à utilização de script para remover o foco quando o foco é recebido

Aplicabilidade

Aplica-se a todo o conteúdo que suporte script.

Notas de Apoio para o Agente de Utilizador e para a Tecnologia de Apoio

  • Nenhuma indicada.

Esta falha está relacionada com:

Descrição

É possível remover o foco do conteúdo que é acedido através do teclado mediante a utilização de scripting. Por vezes, isto é efectuado quando o programador considera que o indicador de foco do sistema é desagradável à vista. Contudo, o indicador de foco do sistema é uma parte importante da acessibilidade para os utilizadores de teclado. Além disso, esta prática remove o foco completamente, o que significa que o conteúdo só pode ser acedido através de um dispositivo apontador, tal como um rato.

Exemplos

Exemplo de Falha 1

Código Exemplo:

<input type="submit" onFocus="this.blur();"> 

Exemplo de Falha 2

Código Exemplo:

<a onFocus="this.blur()" href="Page.html"><img src="myImage.gif"></a> 

Exemplo de Falha 3

Código Exemplo:

<a href="link.html" onfocus="if(this.blur)this.blur();">Link Phrase</a> 

Recursos

Não existem recursos disponíveis para esta técnica.

(actualmente, não existe nenhuma indicada)

Testes

Procedimento

  1. Utilize o teclado para verificar se pode chegar a todos os elementos interactivos utilizando o teclado.

  2. Verifique se quando o foco é colocado em cada um dos elementos permanece nesse sítio até o utilizador o deslocar.

Resultados Esperados

  • Se o passo 2 for falso, aplica-se esta condição de falha e o conteúdo não cumpre o Critério de Sucesso.


F58: Falha do Critério de Sucesso 2.2.1 devido à utilização de técnicas do lado do servidor para redireccionar páginas automaticamente após um tempo limite excedido

Aplicabilidade

  • Qualquer linguagem de scripts do lado do servidor.

  • Conteúdo que não cumpra as excepções do Critério de Sucesso para limites de tempo permitidos.

Esta falha está relacionada com:

Notas de Apoio para o Agente de Utilizador e para a Tecnologia de Apoio

O cabeçalho Actualizar não está definido em HTTP/1.1 ou HTTP/1.0, mas é largamente suportado pelos browsers (testado no Firefox 1.0 e IE 6 no Windows).

Descrição

As linguagens de scripts do lado do servidor permitem aos programadores definir o cabeçalho HTTP não normal "Actualizar" com um tempo limite (em segundos) e um URI para o qual o browser é redireccionado após o tempo limite especificado. Se o intervalo de tempo for demasiado curto, as pessoas cegas não terão tempo suficiente para fazer com que os seus leitores de ecrã leiam a página antes de a página actualizar inesperadamente e o leitor de ecrã começar a ler do início. Os utilizadores sem problemas de visão também podem ficar confusos com a actualização inesperada.

O cabeçalho HTTP que é definido é Refresh: {time in seconds}; url={URI of new location}. Também é possível omitir o URI e obter uma página actualizada periodicamente, que origina o mesmo problema. O cabeçalho HTTP que é definido é Refresh: {time in seconds}.

Exemplos

Exemplo de Falha 1

O exemplo seguinte é uma falha, uma vez que foi implementado um redireccionamento temporizado do lado do servidor em Java Servlets ou JavaServer Pages (JSP).

Código Exemplo:

public void doGet (HttpServletRequest request, HttpServletResponse response)
      throws IOException, ServletException {
        response.setContentType("text/html");
	PrintWriter out = response.getWriter();
	response.setHeader("Refresh", "10; URL=TargetPage.html");
	out.println("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"
	 \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">");
	out.println("<html><head><title>Redirect</title></head><body>");
	out.println("<p>This page will redirect you in 10 seconds.</p>");
	out.println("</body></html>");
  }

Exemplo de Falha 2

O exemplo seguinte é uma falha, uma vez que foi implementado um redireccionamento temporizado do lado do servidor em Active Server Pages (ASP) com VBScript.

Código Exemplo:

                         <% @Language = "VBScript" %>
 <% option explicit 
 Response.Clear
 Response.AddHeader "Refresh", "5; URL=TargetPage.htm"
 %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 …
 <!--HTML code for content that is shown before the redirect is triggered--> 

Recursos

Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.

Testes

Procedimento

  1. Quando uma página Web for apresentada, certifique-se de que redirecciona automaticamente para outra página após um determinado período de tempo sem qualquer acção por parte do utilizador.

Resultados Esperados

  • Se existir esse redireccionamento, aplica-se esta condição de falha e o conteúdo não cumpre o Critério de Sucesso.


F59: Falha do Critério de Sucesso 4.1.2 devido à utilização de script para tornar div ou span num controlo da interface de utilizador em HTML

Aplicabilidade

HTML e XHTML com scripting.

Esta falha está relacionada com:

Descrição

Esta falha demonstra como a utilização de elementos HTML genéricos para criar controlos da interface de utilizador pode tornar os controlos inacessíveis à tecnologia de apoio. As tecnologias de apoio dependem do conhecimento da função e do estado actual de um componente para fornecer essa informação ao utilizador. Muitos elementos HTML têm funções bem definidas, tais como links, botões, campos de texto, etc. Os elementos genéricos, tais como div e span não têm funções predefinidas. Quando estes elementos genéricos são utilizados para criar controlos da interface de utilizador em HTML, a tecnologia de apoio poderá não ter as informações necessárias para descrever e interagir com o controlo.

Para obter links para especificações que descrevem mecanismos para fornecer as informações necessárias sobre a função e o estado para criar controlos da interface de utilizador totalmente acessíveis, consulte a secção Recursos abaixo.

Exemplos

Exemplo 1

O exemplo seguinte falha, uma vez que cria uma caixa de verificação utilizando um span e uma imagem.

Código Exemplo:

                          <p> 
  <span  onclick="toggleCheckbox('chkbox')"> 
  <img src="unchecked.gif"  id="chkbox" alt=""> Include Signature 
  </span> 
  </p>

Exemplo 2

Este é o código de script que altera a origem da imagem quando o utilizador clica no span com o rato.

Código Exemplo:

                         
  var CHECKED = "check.gif"; 
  var UNCHECKED = "unchecked.gif"; 
  function toggleCheckbox(imgId) { 
  var theImg = document.getElementById(imgId); 
  if ( theImg.src.lastIndexOf(CHECKED)!= -1 ) { 
  theImg.src = UNCHECKED; 
  // additional code to implement unchecked action 
  } 
  else { 
  theImg.src = CHECKED; 
  // additional code to implement checked action 
  } 
  } 

Uma caixa de verificação criada desta forma não irá funcionar com a tecnologia de apoio, uma vez que não existe nenhuma informação que a identifique como uma caixa de verificação. Além disso, este exemplo também não é operável a partir do teclado e não irá cumprir a directriz 2.1.

Recursos

Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.

Testes

Procedimento

  1. Verifique o código fonte dos elementos que têm processadores de evento na marcação ou através de scripting.

  2. Se esses elementos estiverem a funcionar como controlos da interface de utilizador, verifique se a função do controlo está definida.

Resultados Esperados

Se o passo 2 for falso e o controlo da interface de utilizador criado não tiver informações sobre a função, aplica-se esta condição de falha.


F60: Falha do Critério de Sucesso 3.2.5 devido à apresentação de uma nova janela quando um utilizador introduz texto num campo de entrada de dados

Aplicabilidade

Geral.

Esta falha está relacionada com:

Descrição

Este documento descreve uma falha que ocorre quando é criada uma nova janela, em resposta ao preenchimento de um campo de texto por parte do utilizador, sem ser para comunicação de erros.

Exemplos

Exemplo de Falha 1:

Este é um exemplo desaprovado que mostra uma falha: Um utilizador está a introduzir o seu endereço de correio. Quando introduz o seu código postal, é apresentada uma nova janela com anúncios de serviços disponíveis na sua cidade.

Exemplo 2:

Este exemplo é aceitável: Um utilizador está a introduzir o seu endereço de correio num formulário. Quando preenche o campo do código postal, é executado um script para verificar se é um código postal válido. Se o valor não for válido, é apresentada uma janela com instruções sobre como preencher o campo.

Recursos

Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.

Testes

Procedimento

  1. Localize todos os campos de formulário de entrada de texto.

  2. Altere o valor em cada campo de formulário.

  3. Verifique se são apresentadas novas janelas.

  4. Para qualquer nova janela que seja apresentada, verifique se inclui uma mensagem de erro e um botão que feche a janela devolvendo o foco ao elemento de formulário inicial.

Resultados Esperados

  • Se o passo 3 for verdadeiro e o passo 4 for falso, aplica-se a condição de falha e o conteúdo não cumpre este Critério de Sucesso.


F61: Falha do Critério de Sucesso 3.2.5 devido à alteração total do conteúdo principal através de uma actualização automática que o utilizador não consegue desactivar a partir do conteúdo

Aplicabilidade

Geral.

Esta falha está relacionada com:

Descrição

Este documento descreve uma falha que ocorre quando o conteúdo que ocupa toda a janela do utilizador é automaticamente actualizado, e o conteúdo não inclui opções para desactivar este comportamento.

Exemplos

Exemplo de Falha 1:

Um sítio da Web de notícias é actualizado automaticamente para garantir que inclui as notícias do dia mais recentes. Não existe nenhuma opção para desactivar este comportamento.

Exemplo de Falha 2:

Uma apresentação de diapositivos ocupa toda a janela e avança automaticamente para o diapositivo seguinte. Não existe nenhum botão Parar.

Recursos

Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.

(actualmente, não existe nenhuma indicada)

Testes

Procedimento

  1. Abra o conteúdo.

  2. Deixe o conteúdo aberto durante 24 horas.

  3. Verifique se o conteúdo sofreu alterações.

  4. Confirme se o conteúdo não inclui nenhumas definições para desactivar as alterações automáticas.

Resultados Esperados

  1. Se os passos 3 e 4 forem verdadeiros, aplica-se esta condição de falha e o conteúdo não cumpre este Critério de Sucesso.


F62: Falha dos Critérios de Sucesso 1.3.1 e 4.1.1 devido a informações insuficientes no DOM para determinar relações específicas em XML

Aplicabilidade

Aplica-se ao Modelo de Objecto de Documento (DOM) para XML.

Esta falha está relacionada com:

Descrição

O objectivo desta técnica é garantir que as páginas Web possam ser interpretadas de forma consistente pelos agentes de utilizador, incluindo as tecnologias de apoio. Se determinadas relações numa página Web forem ambíguas, diferentes agentes de utilizador, incluindo as tecnologias de apoio, podem apresentar informações diferentes aos utilizadores. Por exemplo, os utilizadores de tecnologias de apoio podem visualizar informações diferentes dos utilizadores de outros agentes de utilizador convencionais. Alguns elementos e atributos nas linguagens de marcação têm de ter valores exclusivos e, se este requisito não for cumprido, o resultado pode ser conteúdo irregular ou não determinado de forma exclusiva.

Exemplos

Exemplo de Falha 1

  • Um valor de atributo id que não é exclusivo.

  • Um documento SVG utiliza atributos id nos elementos title (para texto alternativo) para reutilizar noutras localizações. Contudo, um dos elementos title tem um id que também é utilizado noutra localização do documento e, assim, o documento é ambíguo.

  • Um documento DAISY utiliza o atributo imgref no elemento caption para associar legendas a imagens através de links. Contudo, o valor de atributo imgref não faz referência ao atributo id do elemento img ao qual pertence e, desta forma, o agente de utilizador não consegue encontrar a legenda para essa imagem.

Recursos

Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.

(actualmente, não existe nenhuma indicada)

Testes

Procedimento

  1. Verifique se todos os valores id no documento (conforme definido pelo esquema) são exclusivos.

  2. Verifique se os elementos ou atributos que fazem referência a identificadores exclusivos dentro do mesmo documento têm um valor id correspondente.

Tenha em atenção que, para tipos de documento XML definidos por um DTD, isto refere-se a atributos de tipo ID, IDREF ou IDREFS. Para tipos de documento XML definidos por um W3C XML Schema, isto refere-se a elementos ou atributos de tipo ID, IDREF ou IDREFS. (Por questões de compatibilidade, os tipos ID, IDREF e IDREFS só devem ser utilizados em atributos, mas é possível utilizá-los em elementos, de acordo com XML Schema Parte 2: Datatypes Segunda Edição (página em inglês).) Para outras linguagens de esquema, verifique os mecanismos correspondentes para especificar IDs e referências a IDs.

Resultados Esperados

  • Se o passo 1 ou o passo 2 forem falsos, aplica-se esta condição de falha e o conteúdo não cumpre o Critério de Sucesso.


F63: Falha do Critério de Sucesso 2.4.4 devido ao fornecimento de contexto do link apenas em conteúdo que não esteja relacionado com o link

Aplicabilidade

Todas as tecnologias.

Esta falha está relacionada com:

Descrição

Esta técnica descreve uma condição de falha quando o contexto necessário para compreender a finalidade de um link se encontra num conteúdo que não é contexto do link determinado de forma programática. Se o contexto para o link não estiver na mesma frase, parágrafo, item de lista ou célula de tabela do link, o utilizador não conseguirá descobrir com facilidade qual o destino do link. Se o utilizador tiver de deixar o link para procurar o contexto, o contexto não é contexto do link determinado de forma programática e ocorre esta condição de falha.

Exemplos

Exemplo de Falha 1: Um Serviço de Notícias

Um serviço de notícias indica as primeiras frases de um artigo num parágrafo. O parágrafo seguinte inclui o link "Ler Mais...". Uma vez que o link não se encontra no mesmo parágrafo da primeira frase, o utilizador não consegue descobrir facilmente o que poderá ler mais se clicar no link.

Código Exemplo:

<p>A British businessman has racked up 2 million flyer miles and plans to 
travel on the world's first commercial tourism flights to space.</p>

<p><a href="ff.html">Read More...</a></p>

Exemplo de Falha 2: Transferir um Leitor Gratuito

Um sítio da Web de áudio fornece links para locais onde é possível transferir o seu leitor. As informações sobre o que pode ser transferido através do link encontram-se na linha precedente da tabela de esquema, que não é contexto determinado de forma programática para o link.

Código Exemplo:

                         <table>
   <tr> 
       <td>Play music from your browser</td>
   </tr>
   <tr>
       <td>
       <a href="http://www.example.com/download.htm">
       <img src="download.jpg" width="165" height="32" alt="Download now"></a>
       </td>
   </tr>
 </table>

Exemplo de Falha 3: Utilizar uma Lista de Definições

Em HTML e XHTML, as listas de definições fornecem uma associação programática entre o termo e a sua definição. Por isso, teoricamente, um link fornecido numa definição pode utilizar o termo da definição como o seu contexto. Contudo, o suporte é particularmente mau para listas de definições, e não há forma de os utilizadores das actuais tecnologias de apoio descobrirem o contexto utilizando apenas uma lista de definições. As listas de definições são um mecanismo útil para fornecer relações associativas, mas neste momento não podem ser consideradas suficientes para o Critério de Sucesso 2.4.2.

Código Exemplo:

<dl>
    <dt>Harry Potter and the Chamber of Secrets</dt>
    <dd>Story of a boy with magical powers who has to face Lord Voldemort.</dd>
    <dd><a href="potter.php?id=123">Buy now</a></dd>
    <dt>Harry Potter and the Goblet of Fire</dt>
    <dd>Harry finds himself selected as an underaged competitor in a dangerous multi-wizardry school competition.</dd>
    <dd><a href="potter.php?id=124">Buy now</a></dd>
    <dt>Harry Potter and the Prisoner of Azkaban</dt>
    <dd>
Something wicked this way comes. It's Harry's third year at Hogwarts; 
not only does he have a new "Defense Against the Dark Arts" teacher, 
but there is also trouble brewing. Convicted murderer Sirius Black has 
escaped the Wizards' Prison and is coming after Harry.
    </dd>
    <dd><a href="potter.php?id=125">Buy now</a></dd>
</dl> 

Recursos

Não existem recursos disponíveis para esta técnica.

(actualmente, não existe nenhuma indicada)

Testes

Procedimento

  1. Localize o conteúdo necessário para compreender como o texto do link descreve a finalidade do link.

  2. Verifique se o conteúdo está incluído na mesma frase, parágrafo, item de lista ou célula de tabela ou no cabeçalho precedente.

Resultados Esperados

  • Se o passo 2 for falso, o conteúdo não cumpre o Critério de Sucesso.


F65: Falha do Critério de Sucesso 1.1.1 devido à omissão do atributo alt em elementos img, elementos area e elementos input do tipo "imagem"

Aplicabilidade

HTML e XHTML.

Esta falha está relacionada com:

Descrição

Esta técnica descreve uma condição de falha para alternativas em texto nas imagens. Se não existir nenhum atributo alt, as tecnologias de apoio não conseguem identificar a imagem nem transmitir a sua finalidade ao utilizador.

Algumas Tecnologias de Apoio podem tentar compensar o texto alt em falta lendo o nome de ficheiro da imagem. Mas, por várias razões, não é suficiente basear-se apenas no nome do ficheiro. Por exemplo, os nomes de ficheiros podem não ser descritivos (por ex., images/nav01.gif), e as especificações da tecnologia não necessitam de nomes de ficheiros descritivos. Algumas tecnologias de apoio podem não ler o nome do ficheiro se o texto alt estiver em falta.

Exemplos

Exemplo 1: Texto alt em falta

No código exemplo abaixo, a pessoa que utilizar um leitor de ecrã não saberá a finalidade da imagem.

Código Exemplo:

<img src="../images/animal.jpg" />

Recursos

Não existem recursos disponíveis para esta técnica.

Testes

Procedimento

  1. Identifique quaisquer elementos img, area e input de tipo "imagem".

  2. Verifique se existe o atributo alt para estes elementos.

Resultados Esperados

  • Se o passo 2 for falso, aplica-se esta condição de falha e o conteúdo não cumpre o Critério de Sucesso.


F66: Falha do Critério de Sucesso 3.2.3 devido à apresentação de links de navegação numa ordem relativa diferente em páginas diferentes

Aplicabilidade

Aplica-se a todas as tecnologias.

Esta falha está relacionada com:

Descrição

Esta técnica descreve uma condição de falha para todas as técnicas que envolvem mecanismos de navegação que se repetem em várias páginas Web num conjunto de páginas Web (Critério de Sucesso 3.2.3). Se o mecanismo apresentar a ordem dos links numa ordem diferente em duas ou mais páginas, a falha é accionada.

Exemplos

Exemplo 1: Um menu XHTML com uma série de links que estão numa ordem relativa diferente em duas páginas diferentes

Exemplos de um mecanismo de navegação que apresenta links numa ordem diferente.

Menu da Página 1

Código Exemplo:

<div id="menu"> 
    <a href="Brazil.htm">Brazil</a><br />
    <a href="Canada.htm">Canada</a><br />
    <a href="Germany.htm">Germany</a><br />
    <a href="Poland.htm">Poland</a> 
</div>

Menu da Página 2

Código Exemplo:

<div id="menu"> 
    <a href="Canada.htm">Canada</a><br />
    <a href="Brazil.htm">Brazil</a><br />
    <a href="Germany.htm">Germany</a><br />
    <a href="Poland.htm">Poland</a> 
</div>

Recursos

Não existem recursos disponíveis para esta técnica.

(actualmente, não existe nenhuma indicada)

Testes

Procedimento

  1. Certifique-se de que está a ser utilizado um mecanismo de navegação em mais de uma página Web.

  2. Verifique a apresentação predefinida do mecanismo de navegação em cada página para ver se a lista de links está na mesma ordem relativa em cada página Web.

Nota: "Mesma ordem relativa" significa que os itens de navegação secundários podem estar entre os itens do link em algumas páginas. Podem estar presentes sem afectar o resultado deste teste.

Resultados Esperados

  • Se o passo 1 for verdadeiro e o passo 2 for falso, aplica-se esta condição de falha e o conteúdo não cumpre o Critério de Sucesso.


F67: Falha dos Critérios de Sucesso 1.1.1 e 1.2.1 devido ao fornecimento de uma descrição extensa para conteúdo não textual que não serve a mesma finalidade ou não apresenta as mesmas informações

Aplicabilidade

Todas as tecnologias.

Esta falha está relacionada com:

Descrição

O objectivo desta técnica é descrever a falha que ocorre quando a descrição extensa para o conteúdo não textual não serve a mesma finalidade ou não apresenta as mesmas informações do conteúdo não textual. Isto pode originar problemas para pessoas que não conseguem interpretar o conteúdo não textual, porque se baseiam na descrição extensa para fornecer as informações necessárias transmitidas pelo conteúdo não textual. Sem uma descrição extensa que forneça informações completas, uma pessoa pode não ser capaz de compreender ou interagir com a página Web.

Exemplos

  • Uma imagem que mostra os locais dos eventos dos Jogos Olímpicos num mapa da cidade. A imagem também inclui um ícone para cada tipo de evento desportivo realizado em cada local. A descrição extensa indica: "Mapa que mostra o local de cada evento Olímpico. Os eventos de patinagem, hóquei e curling são realizados no Winter Park Ice Arena, os eventos de saltos e esqui Downhill são realizados na Snow Mountain, os eventos de ginástica são realizados na JumpUp Arena, os eventos de esqui Cross Country são realizados na Kilometer Forest". Embora esta descrição forneça informações úteis, não transmite as mesmas informações da imagem, uma vez que não fornece informações específicas do local, tais como o endereço ou a distância de cada local em relação a um determinado ponto. Tenha em atenção que as descrições extensas nem sempre necessitam de estar em forma de prosa; por vezes é melhor apresentar as informações numa tabela ou noutro formato alternativo.

Recursos

Não existem recursos disponíveis para esta técnica.

Testes

Procedimento

Para todo o conteúdo não textual que necessita de uma descrição extensa:

  1. Verifique se a descrição extensa serve a mesma finalidade ou apresenta as mesmas informações do conteúdo não textual.

Resultados Esperados

  • Se o passo 1 for falso, aplica-se esta condição de falha e o conteúdo não cumpre este Critério de Sucesso.


F68: Falha dos Critérios de Sucesso 1.3.1 e 4.1.2 devido à associação de controlos de etiqueta e de interface de utilizador que não são determináveis de forma programática

Aplicabilidade

Controlos HTML e XHTML que utilizem etiquetas visíveis.

Esta falha está relacionada com:

Descrição

Esta falha descreve um problema que ocorre quando não é utilizado nenhum elemento label para associar explicitamente um controlo de formulário a uma etiqueta, em que o design visual utiliza uma etiqueta.

Nota 1: Os elementos que utilizam etiquetas explicitamente associadas são:

  • input type="text"

  • input type="checkbox"

  • input type="radio"

  • input type="file"

  • input type="password"

  • textarea

  • select

Nota 2: O elemento label não é utilizado para o seguinte, uma vez que as etiquetas para estes elementos são fornecidas através do atributo value (para botões Submeter e Repor), do atributo alt (para botões de imagem) ou do próprio conteúdo do elemento (botão).

  • Botões Submeter e Repor (input type="submit" ou input type="reset")

  • Botões de imagem (input type="image")

  • Campos de entrada ocultos (input type="hidden")

  • Botões de script (elementosbutton ou <input type="button">)

Exemplos

Exemplo de Falha 1:

O exemplo seguinte demonstra um formulário que apresenta visualmente tabelas para controlos de formulário, mas não utiliza o elemento label para associá-las aos respectivos controlos. O código exemplo abaixo é uma falha, uma vez que a tecnologia de apoio pode não conseguir determinar que label está associado a que controlo.

Código Exemplo:

<form>
 First name: 
 <input type="text" name="firstname">
 <br />
 Last name: 
 <input type="text" name="lastname">
 <br />
 I have a dog <input type="checkbox" name="pet" value="dog" />
 I have a cat <input type="checkbox" name="pet" value="cat" />
</form>

Exemplo de Falha 2:

Nos seguintes códigos exemplo, os nomes associados aos controlos de entrada de texto não são correctamente determinados pela tecnologia de apoio.

Código Exemplo:

<form action="..." method="post">
<p>
<label>
   First Name
   <input type="text" name="firstname">
</label>
<label>
   <input type="text" name="lastname">
   Last Name
</label>
</p>
</form>

Código Exemplo:

<form action="..." method="post"> 
<p> 
<label>First Name </label>
<input type="text" name="firstname"> 
<label>Last Name</label> 
<input type="text" name="lastname"> 
</p> 
</form>

Exemplo de Falha 3:

A caixa de texto de procura no seguinte código exemplo não tem nenhum nome. O nome pode ser fornecido com o atributo title ou com um elemento label oculto com CSS.

Código Exemplo:

<input type="text" value="Type your search here"><input type="submit" type="submit" value="Search">

Testes

Procedimento

Para todos os elementos input de tipo radio, checkbox, text, file ou password, para todos os textareas e para todos os elementos select existentes na página Web:

  1. Verifique se o design visual utiliza uma etiqueta de texto que identifique a finalidade do controlo.

  2. Verifique se um elemento label associa o texto ao elemento input.

Resultados Esperados

  • Se o passo 2 for verdadeiro e o passo 2 for falso, aplica-se esta condição de falha e o conteúdo não cumpre estes Critérios de Sucesso.


F69: Falha do Critério de Sucesso 1.4.4 quando redimensionar o texto visualmente apresentado para 200% fizer com que o texto, a imagem ou os controlos fiquem cortados, truncados ou sobrepostos

Aplicabilidade

HTML, XHTML e CSS.

Esta falha está relacionada com:

Descrição

O objectivo desta condição de falha é descrever um problema que ocorre quando a alteração do tamanho do texto faz com que o texto seja cortado, truncado ou sobreposto, deixando de estar disponível ao utilizador. No geral, esta falha ocorre quando não há forma de o motor de apresentação de um agente de utilizador cumprir todas as sugestões de apresentação no HTML no novo tamanho de letra. Algumas das formas nas quais esta situação pode ocorrer incluem:

  • Definir a propriedade overflow do elemento incluso para hidden

  • Utilizar conteúdo totalmente posicionado.

  • Criar janelas de pop-up que não sejam suficientemente grandes para o conteúdo no novo tamanho de letra.

Exemplos

Exemplo de Falha 1:

O tamanho de letra é definido de uma forma ajustável, mas a caixa é definida para um tamanho de pixéis fixo. Um contorno cinzento mostra os limites da caixa de texto. Quando o texto é redimensionado, sai fora da caixa e sobrepõe o parágrafo seguinte.

Código Exemplo:

<div style="font-size:100%; width:120px; height:100px; border: thin solid gray;> 
  Now is the time for all good men to come to the aid of their country. 
</div>
<p>Now is the time for all good men to come to the aid of their country.</p>

Ilustração do exemplo 1:

Exemplo que mostra texto a sair da respectiva caixa, sobrepondo-se a outro texto na página.

Exemplo de Falha 2:

Este exemplo é idêntico ao último, com a excepção de que a caixa foi definida para cortar o texto. O texto já não está a passar para o parágrafo seguinte, mas encontra-se truncado. Isto também é uma falha.

Código Exemplo:

<div style="font-size:100%; width:120px; height:100px; overflow: hidden; border: thin solid gray;>
 Now is the time for all good men to come to the aid of their country. 
</div>
<p>Now is the time for all good men to come to the aid of their country.</p>

Ilustração do exemplo 2:

Exemplo que mostra texto truncado devido ao texto redimensionado.

(actualmente, não existe nenhuma indicada)

Testes

Procedimento

  1. Aumente o tamanho do texto do conteúdo até 200%.

  2. Verifique se não existe texto cortado, truncado ou sobreposto.

Resultados Esperados

  • Se o passo 2 for falso, aplica-se esta condição de falha e o conteúdo não cumpre estes Critérios de Sucesso.


F70: Falha do Critério de Sucesso 4.1.1 devido à utilização incorrecta de marcas de início e de fim ou marcação de atributo

Aplicabilidade

Linguagens de marcação: HTML, XHTML e outras tecnologias SGML ou baseadas em XML.

Esta falha está relacionada com:

Descrição

O objectivo desta falha é identificar exemplos de erros de marcação em marcas de elemento que possam fazer com que a tecnologia de apoio não seja capaz de gerar um modelo satisfatório da página. Diferentes agentes de utilizador podem implementar uma heurística diferente para recuperar de erros, resultando em apresentações inconsistentes da página entre agentes de utilizador.

Alguns tipos comuns de problemas com marcas de início e de fim que conduzem a esta condição de falha (embora esta não seja uma lista exaustiva):

  • Marcas de abertura e de fecho que não têm os parênteses angulares de abertura < e de fecho >.

  • Marca de fecho que não tem a / inicial para indicar que se trata de uma marca de fecho.

  • Os valores de atributo que têm aspas de abertura, mas não têm aspas de fecho. Os valores de atributo têm de estar entre aspas ou, em algumas linguagens de marcação, podem não ter aspas.

  • Falta um espaço em branco entre os atributos.

  • Valores de atributo sem aspas que têm um espaço em branco no valor.

  • Falha ao fornecer uma marca de fecho de elemento para elementos que não aceitam uma sintaxe de elemento vazio.

Exemplos

Exemplo de Falha 1: Faltam parênteses angulares em XHML

O código seguinte falha porque falta um parêntese angular na marca de abertura, e o limite da marca não é claro.

Código Exemplo:

<p This is a paragraph</p>

Exemplo de Falha 2: Falta uma barra na marca de fecho em XHTML

O código seguinte falha porque falta a barra na marca de fecho, dando a sensação de que se trata de outra marca de abertura.

Código Exemplo:

<p>This is a paragraph<p>

Exemplo de Falha 3: Faltam aspas no atributo

O código seguinte falha porque faltam as aspas de fecho no valor de atributo, o que torna o limite do par valor-atributo pouco claro.

Código Exemplo:

<input title="name type="text">

Exemplo de Falha 4: Falta um espaço em branco entre os atributos

O código seguinte falha porque não existe um espaço em branco entre os atributos, o que torna o limite entre os pares atributo-valor pouco claro.

Código Exemplo:

<input title="name"type="text">

Exemplo de Falha 5: Atributo sem aspas com um valor de espaço em branco

O código seguinte falha porque um valor de atributo não tem aspas e contém um espaço em branco, o que torna o limite do par atributo-valor pouco claro.

Código Exemplo:

<input title=Enter name here type=text>

Exemplo de Falha 6: Faltam marcas de fim em XHTML

O código seguinte falha porque falta a marca de fim no primeiro parágrafo, tornando pouco claro se o segundo parágrafo é secundário ou está relacionado com o primeiro.

Código Exemplo:

<p>This is a paragraph
<p>This is another paragraph</p>

(actualmente, não existe nenhuma indicada)

Testes

Procedimento

  1. Verifique o código fonte de páginas implementadas em linguagens de marcação.

  2. Verifique se existem marcas de abertura, marcas de fecho ou atributos incorrectamente formados.

Resultados Esperados

  • Se o passo 2 for verdadeiro, aplica-se a condição de falha e o conteúdo não cumpre este Critério de Sucesso.


F71: Falha do Critério de Sucesso 1.1.1 devido à utilização de conteúdo semelhante a texto para representar texto sem fornecer uma alternativa em texto

Aplicabilidade

Todas as tecnologias.

Esta falha está relacionada com:

Descrição

O objectivo desta condição de falha é evitar a substituição de caracteres cujos glifos são semelhantes ao carácter pretendido, para esse carácter pretendido. O conjunto de caracteres Unicode define milhares de caracteres, abrangendo dezenas de sistemas de escrita. Embora os glifos para alguns destes caracteres possam parecer os glifos para outros caracteres na apresentação visual, não são processados da mesma forma pelas ferramentas de texto para fala.

Por exemplo, os caracteres U+0063 e U+03F2 são ambos parecidos com a letra "c", contudo o primeiro é do alfabeto ocidental e o segundo é do alfabeto grego e não é utilizado em idiomas ocidentais. Os caracteres U+0033 e U+04E0 são parecidos com o número "3", contudo o segundo é, na realidade, uma letra do alfabeto cirílico.

Nota: Esta falha também se aplica à utilização de entidades de caracteres. Trata-se do carácter incorrecto devido à sua representação de glifos que inclui uma falha e não ao mecanismo através do qual o carácter foi implementado.

Exemplos

Exemplo de Falha 1: Caracteres

Nos browsers com o suporte de tipo de letra apropriado, a seguinte palavra assemelha-se à palavra inglesa "cook", contudo é composta pela cadeia U+03f2 U+043E U+03BF U+006B, em que apenas uma é uma letra do alfabeto ocidental. Esta palavra não será processada com significação e não será fornecida uma alternativa em texto.

Código Exemplo:

ϲоοk

Exemplo de Falha 2: Entidades de caracteres

O exemplo seguinte, tal como o exemplo acima, irá assemelhar-se à palavra inglesa "cook" quando apresentado em browsers com suporte de tipo de letra apropriado. Neste caso, os caracteres são implementados com entidades de caracteres, mas a palavra continuará a não ser processada com significação e não será fornecida uma alternativa em texto.

Código Exemplo:

&#x03F2;&#x043E;&#x03BF;&#x006B;

Exemplo Prático: "ϲоοk"

(actualmente, não existe nenhuma indicada)

Testes

Procedimento

  1. Verifique os caracteres ou as entidades de caracteres utilizadas para representar o texto.

  2. Se os caracteres utilizados não corresponderem aos caracteres apropriados para os glifos apresentados no idioma humano do conteúdo, estão a ser utilizados glifos parecidos.

Resultados Esperados

  • Se estiverem a ser utilizados glifos parecidos, e não existir uma alternativa em texto para blocos de texto que utilizem glifos parecidos, o conteúdo não cumpre o Critério de Sucesso.


F72: Falha do Critério de Sucesso 1.1.1 devido à utilização da arte ASCII sem fornecer uma alternativa em texto

Aplicabilidade

Todas as tecnologias.

Esta falha está relacionada com:

Descrição

O objectivo desta condição de falha é evitar a utilização de arte ASCII quando não é fornecida uma alternativa em texto. Embora a arte ASCII seja implementada como uma cadeia de caracteres, o seu significado provém do padrão de glifos formado por uma apresentação visual dessa cadeia e não do próprio texto. Por conseguinte, a arte ASCII é conteúdo não textual e necessita de uma alternativa em texto. As alternativas em texto, ou os links para as mesmas, devem ser colocadas junto à arte ASCII de modo a serem associadas a ela.

Exemplos

Exemplo de Falha 1: Gráfico de arte ASCII sem uma alternativa em texto

O seguinte gráfico de arte ASCII não tem uma alternativa em texto e, por conseguinte, não cumpre o Critério de Sucesso 1.1.1. Tenha em atenção que este exemplo de falha origina uma falha nesta página, mas o utilizador pode ignorar o exemplo.

Código Exemplo:

<pre>
  %   __ __ __ __ __ __ __ __ __ __ __ __ __ __   
100 |             *                             |
 90 |                *  *                       |
 80 |          *           *                    |
 70 |             @           *                 |
 60 |          @                 *              |
 50 |       *        @              *           |
 40 |                   @              *        |
 30 |    *  @              @  @           *     |
 20 |                                           |
 10 |    @                       @  @  @  @     |
      0  5 10 15 20 25 30 35 40 45 50 55 60 65 70
      Flash frequency (Hz)
</pre>

(actualmente, não existe nenhuma indicada)

Testes

Procedimento

  1. Aceda a uma página com arte ASCII.

  2. Para cada ocorrência de arte ASCII, verifique se tem uma alternativa em texto.

Resultados Esperados

  • Se o passo 2 for falso, aplica-se esta condição de falha e o conteúdo não cumpre este Critério de Sucesso.


F73: Falha do Critério de Sucesso 1.4.1 devido à criação de links que não são visualmente evidentes sem percepção de cores

Aplicabilidade

Todas as tecnologias.

Esta falha está relacionada com:

Descrição

Esta falha ajuda a garantir que as pessoas que não conseguem distinguir diferenças de cor possam identificar links. São necessários links sublinhados ou outra distinção visual sem cores. Embora alguns links possam ser visualmente evidentes a partir do design da página e do contexto, tais como links de navegação, os links no texto, muitas vezes, distinguem-se visualmente apenas pelos seus atributos de visualização. Remover o sublinhado e deixar apenas a diferença de cor para esse tipo de links seria uma falha, porque não haveria mais nenhuma outra indicação visual (para além da cor) de que se trata de um link.

Nota 1: Se o sinal de aviso sem cor só ocorrer quando o ponteiro do rato estiver sobre o link ou quando o link receber o foco, continua a ser uma falha.

Nota 2: Se o link tiver uma cor diferente, colocá-lo a negrito não resultaria numa falha, porque o negrito não é dependente da cor.

Exemplos

Exemplo de Falha 1:

Uma página Web inclui um grande número de links no corpo do texto. Os links são estilizados de modo a não terem sublinhados e a serem muito semelhantes em termos de cor ao corpo do texto. Isto seria uma falha, uma vez que os utilizadores não seriam capazes de distinguir os links do corpo do texto.

Exemplo de Falha 2:

O código seguinte é um exemplo da remoção do sublinhado de um link numa frase ou parágrafo sem fornecer outro sinal de aviso visual para além da cor.

Código Exemplo:

<head>
<style type="text/css">
p a:link {text-decoration: none}
p a:visited {text-decoration: none}
p a:active {text-decoration: none}
p a:hover {text-decoration: underline; color: red;}
</style>
</head>

<body>

<p>To find out more about the <a href="rain_in_spain.htm">rain in spain</a>there are many resources.</p>

</body>

Nota: Se o sinal de aviso visual só for fornecido mediante o efeito hover (como no exemplo acima), continuará a falhar.

(actualmente, não existe nenhuma indicada)

Testes

Procedimento

  1. Verifique se cada link existente no texto que faça parte de uma sequência ou parágrafo (ou outra área onde possa ser confundido com texto sem links) da página está sublinhado ou, de outra forma, identificado visualmente (i.e., a negrito, itálico) como um link sem utilizar uma cor (tonalidade).

Resultados Esperados

  • Se o passo 1 for falso, aplica-se esta condição de falha e o conteúdo não cumpre este Critério de Sucesso.


F74: Falha dos Critérios de Sucesso 1.2.2 e 1.2.8 devido a não classificar uma alternativa em multimédia sincronizada ao texto como uma alternativa

Aplicabilidade

Páginas que forneçam alternativas em multimédia sincronizada ao texto.

Esta falha está relacionada com:

Descrição

O objectivo desta falha é evitar situações em que as alternativas em multimédia sincronizada não estejam identificadas com o texto para o qual são alternativas. As alternativas em multimédia sincronizada fornecem um acesso melhorado aos utilizadores para os quais a multimédia sincronizada é um formato mais eficaz do que o texto. Uma vez que são alternativas ao texto, não necessitam de ter alternativas ao texto redundantes. Contudo, necessitam de estar claramente identificadas com o texto para o qual são alternativas, de modo a que os utilizadores possam encontrá-las e que os utilizadores que normalmente esperam alternativas em texto para multimédia sincronizada não as procurem.

Exemplos

Exemplo de Falha 1: Alternativas em multimédia sincronizada fornecidas em qualquer outra parte da página

Uma página com instruções para preencher um formulário de impostos fornece uma descrição escrita dos campos a preencher, dos dados a fornecer, etc. Além disso, uma alternativa em multimédia sincronizada fornece instruções faladas, com um vídeo de uma pessoa a preencher a secção que está a ser abordada no áudio. Embora ambas as versões sejam fornecidas na página, a versão em multimédia sincronizada é fornecida em qualquer outra parte da página e não está claramente identificada com a parte do texto para a qual é uma alternativa. Isto dificulta a sua localização por parte dos utilizadores que encontram o texto, e faz com que os utilizadores que encontram o vídeo não saibam onde está a alternativa em texto.

(actualmente, não existe nenhuma indicada)

Testes

Procedimento

  1. Verifique as páginas que fornecem alternativas em multimédia sincronizada ao texto.

  2. Verifique se a multimédia sincronizada está claramente identificada com o texto para o qual é uma alternativa.

Resultados Esperados

  • Se o passo 2 for falso, aplica-se esta condição de falha e o conteúdo não cumpre estes Critérios de Sucesso.


F75: Falha do Critério de Sucesso 1.2.2 ao fornecer multimédia sincronizada sem legendas quando a multimédia sincronizada apresenta mais informações do que as apresentadas na página

Aplicabilidade

Todas as tecnologias.

Esta falha está relacionada com:

Descrição

O objectivo desta falha é evitar situações em que as alternativas em multimédia sincronizada fornecem mais informações do que o texto para o qual são alternativas, mas não fornecem as suas próprias alternativas em texto para permitir o acesso às informações adicionais. As alternativas em multimédia sincronizada fornecem um acesso melhorado aos utilizadores para quem a multimédia sincronizada é um formato mais eficaz do que o texto. Uma vez que são alternativas ao texto, não necessitam de alternativas ao texto redundantes na forma de legendas, áudio-descrições ou alternativas em texto completo. Contudo, se fornecerem mais informações do que o texto para o qual são uma alternativa, são mais do que simples alternativas, mas são conteúdo em multimédia sincronizada por direito próprio. Neste caso, estão sujeitas a todos os requisitos do Critério de Sucesso 1.2.2 para fornecer legendas e aos Critérios de Sucesso 1.2.2 e 1.2.3.

Exemplos

(actualmente, não existe nenhuma indicada)

Testes

Procedimento

  1. Verifique se existem legendas nas alternativas em multimédia sincronizada.

  2. Verifique se a alternativa em multimédia sincronizada não fornece mais informações do que as apresentadas no texto da página.

    Nota: As alternativas em multimédia sincronizada utilizam, muitas vezes, palavras diferentes para apresentar o que se encontra na página, mas não devem apresentar novas informações no tópico da página.

Resultados Esperados

  • Se o passo 2 for falso, aplica-se esta condição de falha e o conteúdo não cumpre estes Critérios de Sucesso.


F76: Falha do Critério de Sucesso 3.2.2 devido ao fornecimento de material de instrução sobre a alteração de contexto, alterando a definição num elemento da interface de utilizador numa localização que os utilizadores possam ignorar

Aplicabilidade

Aplica-se a todas as tecnologias.

Esta falha está relacionada com:

Descrição

Por vezes, uma alteração de contexto inesperada devido a uma alteração nas definições da interface de utilizador pode confundir os utilizadores. Os utilizadores têm de receber instruções nesse sentido. Fornecer instruções de modo a que o utilizador possa não ter a oportunidade de rever pode originar confusão.

Exemplos de falhas:

  • Não fornecer instruções na página Web antes do elemento da interface de utilizador que origina uma alteração de contexto devido a uma alteração nas definições.

  • Não fornecer instruções numa parte do processo antes do passo em que pode surgir essa alteração de contexto, no caso de um processo com vários passos em que os utilizadores têm de executar determinados passos para alcançar o elemento da interface de utilizador, no qual uma alteração nas definições pode originar uma alteração de contexto.

  • Não fornecer instruções obrigatórias sobre a alteração de contexto no caso de uma aplicação Web na Intranet.

Testes

Procedimento

  1. Encontre ocorrências de alterações de contexto devido a uma alteração nas definições da interface de utilizador.

  2. Encontre instruções que todos os utilizadores tenham de rever antes de encontrarem alterações de contexto.

Resultados Esperados

  • Se o passo 1 for verdadeiro e o passo 2 for falso, aplica-se esta condição de falha e o conteúdo não cumpre o Critério de Sucesso.


F77: Falha do Critério de Sucesso 4.1.1 devido à duplicação de valores do tipo ID

Aplicabilidade

Todas as linguagens de marcação baseadas em XML, incluindo HTML 4.01 e XHTML 1.x.

Esta falha está relacionada com:

Descrição

Esta técnica descreve uma condição de falha em que os erros de ID duplicados costumam originar problemas nas tecnologias de apoio quando estão a tentar interagir com o conteúdo. Os valores duplicados de tipo ID podem ser problemáticos para os agentes de utilizador que dependem deste atributo para transmitir de forma precisa as relações entre partes diferentes do conteúdo aos utilizadores. Por exemplo, um leitor de ecrã pode utilizar valores de ID para identificar o conteúdo do cabeçalho aplicável para uma célula de dados numa tabela de dados, ou um controlo de entrada ao qual se aplica uma determinada etiqueta. Se estes valores não forem exclusivos, o leitor de ecrã não conseguirá determinar de forma programática quais os cabeçalhos que estão associados a que células de dados ou que controlo está associado a que etiqueta ou nome.

É possível verificar se esses valores de atributo ID são exclusivos num documento validando o documento em relação ao seu esquema, uma vez que o esquema define os atributos que contêm identificadores exclusivos ao nível do documento.

Nota 1: Na maioria das linguagens de marcação, os valores ID são valores de atributo, por exemplo em HTML e XHTML.

Nota 2: Nos documentos XML que utilizam apenas o atributo xml:id como um atributo ID, é suficiente analisar o documento XML com um analisador de validação que suporte a especificação xml:id .

Exemplos

Exemplo 1

Um autor utiliza um serviço de validação online para verificar se todos os valores de atributo id são exclusivos.

Exemplo 2

Um programador utiliza funcionalidades na ferramenta de autor para garantir que os valores de atributo id são exclusivos.

Recursos

Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.

Testes

Procedimento

  1. Verifique se todos os valores de tipo ID são exclusivos na página Web.

Resultados Esperados

  • Se o passo 1 for falso, aplica-se esta condição de falha e o conteúdo não cumpre o Critério de Sucesso.


F78: Falha do Critério de Sucesso 2.4.7 devido à estilização de contornos e limites do elemento de uma forma que remova ou torne o indicador do foco invisível

Aplicabilidade

Todas as tecnologias.

Esta falha está relacionada com:

Descrição

Esta técnica descreve uma condição de falha que ocorre quando a indicação visual do foco do teclado predefinida do agente de utilizador é desactivada ou apresentada sem estar visível por outro estilo na página sem fornecer um indicador de foco visual disponibilizado pelo autor. Desactivar o indicador de foco indica ao agente de utilizador para não apresentar o indicador de foco. Outros estilos podem dificultar a visualização do indicador de foco, apesar de o mesmo estar presente, tais como contornos que são semelhantes ao contorno do foco, ou margens que têm a mesma cor do indicador de foco, não permitindo distingui-los.

Exemplos

Exemplo 1: O indicador de foco está desactivado com CSS

O seguinte exemplo de CSS irá remover o indicador de foco predefinido, que não cumpre o requisito de fornecer um indicador de foco visível.

Código Exemplo:

:focus {outline: none}

Exemplo 2: O contorno dos elementos é visualmente semelhante ao indicador de foco

O seguinte exemplo de CSS irá criar um contorno em torno dos links semelhante ao indicador de foco. Isto impossibilita aos utilizadores determinar qual recebe, na realidade, o foco, apesar de o agente de utilizador mover o indicador de foco.

Código Exemplo:

a {outline: thin dotted black}

Exemplo 3: Os elementos têm um contorno que tapa o indicador de foco

O seguinte exemplo CSS cria um contorno em torno dos links que não tem contraste suficiente para permitir a visualização do indicador de foco quando se encontra sobre os links. Neste caso, o indicador de foco é colocado fora do contorno, mas como ambos estão a preto e o contorno tem uma espessura maior do que o indicador de foco, a definição de "visível" deixa de ser cumprida.

Código Exemplo:

a {border: medium solid black}

Recursos

Não existem recursos disponíveis para esta técnica.

Testes

Procedimento

  1. Defina o foco para todos os elementos que podem receber foco numa página.

  2. Verifique se o indicador de foco está visível.

Resultados Esperados

  • O passo 2 é verdadeiro.


F79: Falha do Critério de Sucesso 4.1.2 devido ao estado de foco de um componente de interface de utilizador não ser determinável de forma programática ou não existirem notificações de alteração do estado do foco disponíveis

Aplicabilidade

Todas as tecnologias.

Esta falha está relacionada com:

Descrição

O facto de um componente da interface de utilizador receber foco é uma faceta particularmente importante do seu estado. Muitos tipos de tecnologias de apoio baseiam-se no seguimento do foco de teclado actual. Os leitores de ecrã movem o ponto de atenção do utilizador para o componente da interface de utilizador, e os ampliadores de ecrã alteram a apresentação do conteúdo, de modo a que o componente que recebe o foco fique visível. Se a tecnologia de apoio não for notificada quando o foco se deslocar para um novo componente, o utilizador irá ficar confuso quando tentar interagir com o componente errado.

Enquanto os agentes de utilizador costumam utilizar esta funcionalidade para controlos normais, os componentes da interface de utilizador personalizados por scripts são responsáveis por utilizar as APIs de acessibilidade para tornar as notificações e as informações sobre o foco disponíveis.

Exemplos

Um menu personalizado apresenta itens de menu de forma explícita, controlando o rato e os eventos essenciais directamente e realçando o item de menu actualmente seleccionado. O programador não expõe o item de menu que recebe o foco através da API de Acessibilidade e, como tal, a tecnologia de apoio só consegue determinar que o foco se encontra algures no menu, mas não consegue determinar qual o item de menu que recebe o foco.

Recursos

Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.

Testes

Procedimento

  1. Utilizando o verificador de acessibilidade para a tecnologia (ou, se não estiver disponível, verifique o código ou teste com uma tecnologia de apoio), certifique-se de que os controlos expõem o estado do foco através da API de acessibilidade.

  2. Utilizando o verificador de acessibilidade para a tecnologia (ou, se não estiver disponível, verifique o código ou teste com uma tecnologia de apoio), verifique se a tecnologia de apoio é notificada quando o foco se desloca de um controlo para outro.

Resultados Esperados

  • Se o passo 1 ou o passo 2 forem falsos, aplica-se esta condição de falha e o conteúdo não cumpre este Critério de Sucesso.


F80: Falha do Critério de Sucesso 1.4.4 quando os controlos de formulário baseados em texto não forem redimensionados quando o texto visualmente apresentado for aumentado para 200%

Aplicabilidade

HTML, XHTML e CSS.

Esta falha está relacionada com:

Descrição

O objectivo desta condição de falha é descrever um problema que ocorre quando a alteração no tamanho do texto não provoca um redimensionamento em conformidade dos controlos de formulário baseados em texto. Isto significa que o utilizador pode ter dificuldade em introduzir texto e em ler os dados introduzidos, uma vez que o texto não é apresentado no tamanho de texto pretendido pelo utilizador.

Os controlos de formulário baseados em texto incluem caixas de entrada (texto e área do texto), bem como botões.

Exemplos

Exemplo de Falha 1: Um Formulário de Contacto

Um formulário Contacte-nos inclui algumas informações introdutórias e controlos de formulário para os utilizadores introduzirem o nome próprio, o apelido, o número de telefone e o endereço de e-mail. O cabeçalho, o texto introdutório e as etiquetas de controlo de formulário foram implementados de uma forma ajustável, contrariamente aos controlos de formulário por si só.

O componente XHTML:

Código Exemplo:

                                                     <h1>Contact Us</h1>
 <p>Please provide us with your details and we will contact you as soon as we can. Note that all of the form fields are required.</p>
 <label for="fname">First Name</label><input type="text" name="fname" id="fname" /><br />
 <label for="lname">Last Name</label><input type="text" name="lname" id="lname" /><br />
 <label for="phone">Telephone</label><input type="text" name="phone" id="phone" /><br />
 <label for="email">Email</label><input type="text" name="email" id="email" /><br />
 <input type="submit" name="Submit" value="Submit" id="Submit" />

O componente CSS:

Código Exemplo:

                                                     h1 { font-size: 2em; }
 p, label { font-size: 1em; }
 input {font-size: 12pt}

Recursos

Não existem recursos disponíveis para esta técnica.

(actualmente, não existe nenhuma indicada)

Testes

Procedimento

  1. Introduza algum texto nos controlos de formulário baseados em texto que recebam texto introduzido pelo utilizador.

  2. Aumente o tamanho do texto do conteúdo para 200%.

  3. Verifique se o texto nos controlos de formulário baseados em texto aumentou para 200%.

Resultados Esperados

  • Se o passo 3 for falso, aplica-se a condição de falha e o conteúdo não cumpre estes Critérios de Sucesso.


F81: Falha do Critério de Sucesso 1.4.1 devido à identificação de campos obrigatórios ou campos de erro utilizando apenas cores diferentes

Aplicabilidade

Todas as tecnologias.

Esta falha está relacionada com:

Descrição

O objectivo desta técnica é descrever a falha que ocorre quando um campo obrigatório ou um campo de erro estão assinalados apenas com cores diferentes, sem uma forma alternativa de identificar qual o campo obrigatório ou o campo de erro. Isto pode originar problemas para as pessoas cegas ou com cegueira para cores, uma vez que podem não conseguir distinguir as cores diferentes que indicam qual o campo obrigatório ou o campo que originou o erro.

Exemplos

  • Um utilizador está a preencher um formulário online, e o campo do número de telefone é obrigatório. Para indicar que o campo do número de telefone é obrigatório, a etiqueta "Número de Telefone" é apresentada apenas com o texto a azul, sem qualquer outra indicação de que "Número de Telefone" é um campo obrigatório. Um utilizador cego ou com cegueira para cores pode não conseguir identificar que "Número de Telefone" é um campo obrigatório.

  • Um utilizador submete um formulário online e deixa um campo obrigatório em branco, resultando num erro. O campo de formulário que originou o erro é indicado apenas com o texto a vermelho, sem nenhuma indicação adicional sem cores de que o campo originou um erro.

Testes

Procedimento

Para todos os campos obrigatórios ou campos de erro existentes na página Web que estejam identificados por cores diferentes:

  1. Verifique se é fornecida uma forma sem utilizar cores para identificar o campo obrigatório ou o campo de erro.

Resultados Esperados

  • Se o passo 1 for falso, aplica-se esta condição de falha e o conteúdo não cumpre o Critério de Sucesso.


F82: Falha do Critério de Sucesso 3.3.2 devido à formatação visual de um conjunto de campos de números de telefone que não incluem uma etiqueta de texto

Aplicabilidade

Todas as tecnologias.

Esta falha está relacionada com:

Descrição

Esta falha garante que as pessoas com incapacidades visuais ou cognitivas irão reconhecer campos de números de telefone e compreender com que informações devem preenchê-los. Os números de telefone estão frequentemente formatados de formas fixas e distintas, e os autores podem achar que é suficiente fornecer apenas a formatação visual para os identificar. Contudo, mesmo que todos os campos tenham nomes determinados de forma programática, também tem de existir uma etiqueta de texto a identificar o conjunto de campos como um número de telefone.

Exemplos

Exemplo de Falha 1:

Nos Estados Unidos, os números de telefone estão divididos num indicativo de três dígitos, num prefixo de três dígitos e numa extensão de quatro dígitos. Uma página Web cria campos de entrada de texto com um comprimento fixo para as três partes do número de telefone, colocando parênteses no primeiro campo e separando o segundo do terceiro com um travessão. Devido a esta formatação, alguns utilizadores reconhecem os campos como um número de telefone. Contudo, não existe nenhuma etiqueta de texto para o número de telefone na página Web. Isto acontece porque a etiqueta para cada campo seria o texto precedente mais próximo e, assim, os três campos estariam assinalados com "(", ")" e "-" respectivamente.

Testes

Procedimento

  1. Para cada conjunto de campos de números de telefone na página Web que representa um único número de telefone, verifique se o conjunto de campos está identificado com uma etiqueta de texto visível posicionada junto ao conjunto de campos de números de telefone.

  2. Para cada conjunto de campos de números de telefone na página Web que representa um único número de telefone, são fornecidas instruções sobre como preencher os campos.

Resultados Esperados

  • Se os passos 1 e 2 forem ambos falsos, aplica-se esta condição de falha e o conteúdo não cumpre este Critério de Sucesso.


F83: Falha dos Critérios de Sucesso 1.4.3 e 1.4.6 devido à utilização de imagens em plano de fundo que não fornecem contraste suficiente com o texto em primeiro plano (ou imagens de texto)

Aplicabilidade

Todas as tecnologias.

Esta falha está relacionada com:

Descrição

Esta falha ocorre quando as pessoas com baixa visão não conseguem ler o texto apresentado sobre uma imagem de fundo. Quando não existe contraste suficiente entre a imagem de fundo e o texto, as funcionalidades da imagem de fundo podem ser confundidas com o texto, dificultando a leitura precisa do mesmo.

Para cumprir os Critérios de Sucesso 1.4.3 e 1.4.6, tem de existir contraste suficiente entre o texto e o respectivo fundo. Para imagens, isto significa que é necessário existir contraste suficiente entre o texto e as partes da imagem que se parecem com o texto e que estão por trás dele.

Exemplos

Exemplo 1: Exemplo de Falha 1

Texto a preto que se sobrepõe a uma imagem com linhas a preto. As linhas atravessam-se atrás das letras fazendo com que a letra "F" pareça um "E", etc.

Exemplo 2: Exemplo de Falha 2

Texto a preto que se sobrepõe a uma imagem com áreas a cinzento-escuro. Sempre que o texto transpõe uma área a cinzento-escuro, o contraste é tão mau que não é possível ler o texto.

Testes

Procedimento

  1. Quickcheck (Verificação Rápida): Primeiro, efectue uma verificação rápida para ver se o contraste entre o texto e a área da imagem mais escura (para texto escuro) ou mais clara (para texto claro) cumpre ou excede os requisitos do Critério de Sucesso (1.4.3 ou 1.4.5). Se o contraste cumprir ou exceder o contraste especificado, não existe nenhuma falha.

  2. Se o Quickcheck for falso, certifique-se de que o fundo atrás de cada letra contrasta suficientemente com a mesma.

Resultados Esperados

  • Se o Quickcheck for falso e o passo 2 também for falso, aplica-se esta condição de falha e o conteúdo não cumpre o Critério de Sucesso de contraste.


F84: Falha do Critério de Sucesso 2.4.9 devido à utilização de um link não específico, tal como "clique aqui" ou "mais" sem um mecanismo para alterar o texto do link para texto específico

Aplicabilidade

HTML e XHTML.

Esta falha está relacionada com:

Descrição

Esta falha descreve uma condição comum em que os links, tais como "clique aqui" ou "mais", são utilizados como elementos anchor, em que é necessário ter o texto circundante para compreender a sua finalidade, e em que não existe nenhum mecanismo para tornar o destino claro por si só, tal como um botão para expandir o texto do link.

Muitas pessoas cegas que utilizam leitores de ecrã solicitam uma caixa de diálogo com uma lista de links existentes na página e utilizam-na para decidir qual o link a seleccionar. Mas se muitos dos links dessa lista indicarem simplesmente "clique aqui" ou "mais", os utilizadores não conseguirão utilizar esta funcionalidade no leitor de ecrã, que é uma estratégia de navegação fundamental. O não fornecimento de qualquer forma que permita aos utilizadores saberem o destino a partir apenas do texto do link origina uma falha no cumprimento do Critério de Sucesso 2.4.9. O mesmo acontece com os utilizadores que utilizam a tecla de tabulação para percorrer os links, pois irão ficar confusos se, à medida que percorrerem o documento, só ouvirem "clique aqui, clique aqui, clique aqui, etc.".

Exemplos

Exemplo 1

Código Exemplo:

<a href="file110.htm">Click here</a> for more information on the Rocky Mountains.

Exemplo 2

Código Exemplo:

<h2>News headlines</h2>
The middle east peace meetings have yielded fruitful dialogue. 
<a href="r4300.htm">read more</a>

Testes

Procedimento

  1. Verifique cada link existente na página.

  2. Certifique-se de que existe um link não descritivo, tal como "clique aqui" ou "mais", cuja finalidade possa ser determinada a partir do texto circundante, mas não a partir apenas do texto do link.

  3. Certifique-se de que existe um mecanismo na página que transforma todos os links não descritivos existentes na página em links descritivos.

Resultados Esperados

  • Se o passo 2 for verdadeiro e o passo 3 for falso, aplica-se esta condição de falha e o conteúdo não cumpre o Critério de Sucesso.


F85: Falha do Critério de Sucesso 2.4.3 devido à utilização de caixas de diálogo ou menus que não estão adjacentes ao respectivo controlo accionador na ordem de navegação sequencial

Aplicabilidade

Todas as tecnologias.

Esta falha está relacionada com:

Descrição

Esta técnica descreve a condição de falha que ocorre quando uma página Web abre uma caixa de diálogo ou um menu incorporados numa página de uma forma que, devido à posição na ordem de navegação sequencial, um utilizador de teclado tenha dificuldade em utilizar. Quando o utilizador abre a caixa de diálogo ou o menu incorporados na página, mediante activação de um botão ou link, a sua próxima acção será interagir com a caixa de diálogo ou menu. Se estes não estiverem adjacentes ao controlo accionador na ordem de navegação sequencial, o utilizador de teclado terá dificuldade em utilizá-los.

Exemplos

Exemplo 1: Uma caixa de diálogo ou um menu incorporados na página são adicionados no fim da ordem de navegação sequencial

Quando uma caixa de diálogo ou um menu DHTML são activados, são criados de forma dinâmica, posicionados visualmente junto ao accionador e adicionados no fim do DOM, ficando, assim, no fim da ordem de navegação sequencial. O utilizador tem de utilizar a tecla de tabulação para percorrer o resto da página Web antes de poder interagir com a caixa de diálogo ou o menu.

Exemplo 2: Rejeitar um menu incorporado na página coloca o foco no documento

Quando um menu DHTML é rejeitado, é removido ou ocultado da página Web e o foco é colocado no documento. O utilizador tem de utilizar a tecla de tabulação desde o início da sequência de navegação para chegar ao ponto a partir do qual o menu foi aberto.

Testes

Procedimento

Para cada menu ou caixa de diálogo incorporados numa página Web que sejam apresentados através de um controlo accionador:

  1. Active o controlo accionador através do teclado.

    • Verifique se o foco se encontra no menu ou na caixa de diálogo.

    • Verifique se avançar o foco na ordem de navegação sequencial o coloca no menu ou na caixa de diálogo.

  2. Rejeite o menu ou a caixa de diálogo.

    • Verifique se o foco se encontra no controlo accionador.

    • Verifique se retroceder o foco na ordem de navegação sequencial o coloca no controlo accionador.

Resultados Esperados

  • Se o passo 1a e 1b forem ambos falsos, aplica-se esta condição de falha e o conteúdo não cumpre este Critério de Sucesso.

  • Se o passo 2a e 2b forem ambos falsos, aplica-se esta condição de falha e o conteúdo não cumpre este Critério de Sucesso.


F86: Falha do Critério de Sucesso 4.1.2 devido ao não fornecimento de nomes para cada parte de um campo de formulário formado por múltiplas partes, tal como um número de telefone dos E.U.A.

Aplicabilidade

Geral.

Esta falha está relacionada com:

Descrição

Esta técnica descreve uma condição de falha do Critério de Sucesso 4.1.2, em que algumas ou todas as partes do campo de formulário com várias partes não têm nomes. Existe, muitas vezes, uma etiqueta para o campo com várias partes, que está associada de forma programática à primeira parte, ou não está associada de forma programática a nenhuma das partes.

Nota: Um nome não tem necessariamente de ser visível, mas é visível para as tecnologias de apoio.

Exemplos

Exemplo de Falha 1

Os números de telefone dos Estados Unidos consistem num indicativo de 3 dígitos, num prefixo de 3 dígitos e num sufixo de 4 dígitos. Normalmente, estão formatados da seguinte forma ([indicativo]) [prefixo]-[sufixo], tal como (206) 555-1212. Muitas vezes, os formulários que solicitam um número de telefone incluem 3 campos separados, mas com uma única etiqueta, tal como:

Código Exemplo:

Phone number: 
(<input type="text" size="3">) <input type="text" size="3">-<input type="text" size="4">

A falha ocorre quando não existe um nome para cada um dos 3 campos na API de Acessibilidade. Um utilizador de tecnologias de apoio verá estes campos como três campos de texto indefinidos. Algumas tecnologias de apoio irão ler a pontuação como a identificação dos campos de texto, o que pode ser ainda mais confuso. No caso de um número de telefone dos E.U.A. com 3 campos, algumas tecnologias de apoio iriam identificar os campos como "(", ")" e "-", o que não é muito útil.

Exemplo de Falha 2

O mesmo número de telefone dos E.U.A. Neste caso, a etiqueta não está associada de forma programática a nenhuma das partes. Número de telefone:

Código Exemplo:

(<input type="text" size="3">) <input type="text" size="3">-<input type="text" size="4">

Um utilizador de tecnologias de apoio verá estes campos como três campos de texto indefinidos.

Exemplo de Falha 3

O mesmo número de telefone dos E.U.A. Neste caso, a etiqueta está associada de forma programática à primeira parte.

Código Exemplo:

<label for="area">Phone number:</label> 
(<input id="area" type="text" size="3">) <input type="text" size="3">-<input type="text" size="4">

Um utilizador de tecnologias de apoio será induzido a pensar que o primeiro campo se destina a todo o número de telefone, e verá o segundo e terceiro campos como campos de texto indefinidos.

Recursos

Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.

Testes

Procedimento

Procedimento Geral:

  1. Instale uma ferramenta que permita ver a API de acessibilidade para a plataforma (consulte a secção Recursos).

  2. Localize cada controlo de formulário.

  3. Verifique se a propriedade name de cada controlo está preenchida.

Procedimento Alternativo para HTML e XHTML:

  1. Localize cada elemento input, selecte textarea na origem HTML.

  2. Verifique se existe um atributo title no elemento.

  3. Verifique se existe um elemento label associado.

Resultados Esperados

Procedimento Geral:

  • Se o passo 3 for falso, aplica-se a condição de falha e o conteúdo não cumpre este Critério de Sucesso.

Procedimento Alternativo para HTML e XHTML:

  • Se os passos 2 e 3 forem falsos, aplica-se esta condição de falha e o conteúdo não cumpre o Critério de Sucesso.


F87: Falha do Critério de Sucesso 1.3.1 devido à introdução de conteúdo não decorativo utilizando pseudo-elementos :before e :after e a propriedade 'content' em CSS

Aplicabilidade

Todas as tecnologias que suportem CSS.

Esta falha está relacionada com:

Notas de Apoio para o Agente de Utilizador e para a Tecnologia de Apoio

:before e :after não são suportados pelo IE7 e anterior.

Descrição

Os pseudo-elementos :before e :after de CSS especificam a localização do conteúdo antes e depois do conteúdo em árvore do documento de um elemento. A propriedade content, em conjunto com estes pseudo-elementos, especifica o que é introduzido. Para os utilizadores que necessitam de personalizar ou desactivar as informações sobre o estilo para ver o conteúdo de acordo com as suas necessidades, as tecnologias de apoio podem não conseguir aceder às informações introduzidas utilizando CSS. Por conseguinte, a utilização destas propriedades para introduzir conteúdo não decorativo representa uma falha.

Exemplos

Exemplo de Falha 1

No exemplo seguinte, são utilizados :before e :after para indicar alterações do orador e para inserir aspas num guião.

O CSS contém:

Código Exemplo:

                                                     p.jim:before {	content: "Jim: " }
p.mary:before { content: "Mary: " }

q:before { content: open-quote }
q:after  { content: close-quote }

É utilizado neste excerto:

Código Exemplo:

                                                     <p class="jim">
 <q>Do you think he's going to make it?</q>
</p>
<p class="mary">
 <q>It's not looking good.</q>
</p>

Exemplo de Falha 2

Neste exemplo, é utilizado :before para distinguir factos de opiniões.

O CSS contém:

Código Exemplo:

                                                     p.fact:before { content: "Fact: "; font-weight: bold; }
 p.opinion:before { content: "Opinion: "; font-weight: bold; }

É utilizado neste excerto:

Código Exemplo:

                                                     <p class="fact">
 The defendant was at the scene of the crime when it occurred. 
</p>
<p class="opinion">
 The defendant committed the crime. 
</p>

Recursos

Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.

Testes

Procedimento

  1. Verifique todo o conteúdo introduzido através da utilização dos pseudo-elementos :before e :after e da propriedade content .

  2. Verifique se o conteúdo é decorativo.

  3. Se o conteúdo introduzido não for decorativo, verifique se as informações são fornecidas às tecnologias de apoio e se também estão disponíveis quando o CSS é desactivado.

Resultados Esperados

  • Se os passos 2 ou 3 forem falsos, aplica-se esta condição de falha e o conteúdo não cumpre este Critério de Sucesso.


F88: Falha do Critério de Sucesso 1.4.8 devido à utilização de texto justificado (alinhado às margens esquerda e direita)

Aplicabilidade

Todas as tecnologias.

Esta falha está relacionada com:

Descrição

Muitas pessoas com incapacidades cognitivas têm grandes problemas com blocos de texto justificados (alinhados às margens esquerda e direita). As páginas ficam com espaços desiguais entre as palavras, o que pode dificultar a leitura do texto para algumas pessoas. Esta falha descreve situações em que ocorre esta disposição de texto confusa. A melhor forma para evitar este problema é criar uma disposição do texto totalmente justificada (alinhada às margens esquerda e direita).

Exemplos

Exemplo de Falha 1

No seguinte exemplo de falha, é utilizado o atributo align HTML para criar texto justificado.

Código Exemplo:

                                                     
<p align="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum sit amet pede. Phasellus 
nec sem id mauris vehicula tincidunt. Morbi ac arcu. Maecenas vehicula velit et orci. Donec 
ullamcorper porttitor velit. Sed arcu lorem, cursus sit amet, auctor eu, convallis ut, purus. 
Vivamus imperdiet accumsan nunc. Maecenas pellentesque nunc a libero. Vestibulum ante ipsum 
primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur pharetra commodo 
justo. Nulla facilisi. Phasellus nulla lacus, tempor quis, tincidunt ac, rutrum et, mauris.
</p>

Exemplo de Falha 2

No seguinte exemplo de falha, é utilizada a propriedade text-align de CSS para criar texto justificado.

Código Exemplo:

                                                     
 ...
p {text-align: justify}

 ...

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum sit amet pede. Phasellus 
nec sem id mauris vehicula tincidunt. Morbi ac arcu. Maecenas vehicula velit et orci. Donec 
ullamcorper porttitor velit. Sed arcu lorem, cursus sit amet, auctor eu, convallis ut, purus. 
Vivamus imperdiet accumsan nunc. Maecenas pellentesque nunc a libero. Vestibulum ante ipsum 
primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur pharetra commodo 
justo. Nulla facilisi. Phasellus nulla lacus, tempor quis, tincidunt ac, rutrum et, mauris.</p>

Testes

Procedimento

  1. Abra a página num browser comum.

  2. Verifique se o conteúdo não está justificado (alinhado às margens esquerda e direita).

Resultados Esperados

  • Se o passo 2 for falso, aplica-se esta condição de falha e o conteúdo não cumpre o Critério de Sucesso 1.4.8.


F89: Falha dos Critérios de Sucesso 2.4.4, 2.4.9 e 4.1.2 devido à utilização de alt nulo numa imagem em que a imagem é o único conteúdo num link

Aplicabilidade

Conteúdo que contenha links.

Esta falha está relacionada com:

Notas de Apoio para o Agente de Utilizador e para a Tecnologia de Apoio

Diferentes tecnologias de apoio utilizam diferentes estratégias de reparação ao lidar com links que não têm alternativas em texto. Para HTML, podem utilizar o atributo title do elemento anchor, se existir, ou podem utilizar o valor do atributo src do elemento img .

Descrição

Esta condição de falha ocorre quando um link contém apenas conteúdo não textual, tal como uma imagem, e o conteúdo não textual tiver sido implementado de modo a poder ser ignorado pela tecnologia de apoio. Como um link é um controlo interactivo, o utilizador pode utilizar a tecla de tabulação para percorrer até ao link e activá-lo. Uma vez que não existe nenhum conteúdo de texto no link para ser utilizado como o nome, a tecnologia de apoio utiliza uma variedade de técnicas de reparação para encontrar algum nome para utilizar para o link.

Muitas vezes, o texto e as imagens são utilizados numa página para conduzir ao mesmo destino. Isto provoca um efeito "stuttering" (de gaguez) quando dois links muito próximos têm o mesmo nome e o autor tenta eliminar a redundância, fornecendo um atributo alt nulo para a imagem. Infelizmente, este procedimento costuma piorar ainda mais o problema. H2: Combinar a imagem adjacente e os links de texto para o mesmo recurso (HTML) é a abordagem recomendada para reduzir o número de links separados e a redundância indesejada.

Exemplos

Exemplo de Falha 1: Resultados de Procura HTML

Um sítio da Web de procura devolve resultados de procura que incluem um link de texto e uma imagem para corresponder ao sítio da Web. A imagem tem um atributo alt nulo, uma vez que o resultado já inclui um link com uma descrição em texto. Contudo, o leitor de ecrã não ignora o link da imagem, mas utiliza a heurística para encontrar algum texto que possa descrever a finalidade do link. Por exemplo, o leitor de ecrã pode indicar: "football dot gif Football Scorecard".

Código Exemplo:

                                                     <a href="scores.html">
   <img src="football.gif" alt="" />
 </a>
 <a href="scores.html">
   Football Scoreboard
 </a>
}

Recursos

Testes

Procedimento

  1. Verifique se o link contém conteúdo não textual.

  2. Verifique se o conteúdo não textual foi implementado de modo a poder ser ignorado pelas tecnologias de apoio.

Resultados Esperados

  • Se todos os passos forem verdadeiros, aplica-se esta condição de falha e o conteúdo não cumpre o Critério de Sucesso.