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.
Todas as tecnologias que suportem CSS.
Esta falha está relacionada com:
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.
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.
Não existem recursos disponíveis para esta técnica.
Para conteúdo que utilize CSS para posicionamento:
Remova as informações sobre estilo do documento ou desactive a utilização de folhas de estilo no agente de utilizador.
Verifique se a ordem de leitura do conteúdo está correcta e o significado do conteúdo é mantido.
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.
Todas as tecnologias que suportem imagens ou marcação de apresentação.
Esta falha está relacionada com:
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.
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.
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>
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>
Não existem recursos disponíveis para esta técnica.
Para imagens de texto:
Verifique se são utilizadas algumas imagens de texto para transmitir informações estruturais do documento.
Verifique se é utilizada a estrutura semântica correcta (por ex., cabeçalhos HTML) com o texto para transmitir as informações.
Para texto estilizado que transmita informações:
Verifique se existe algum texto estilizado que transmita informações estruturais.
Verifique se, além da estilização, é utilizada a estrutura semântica correcta com o texto para transmitir as informações.
Se o passo 1.1 for verdadeiro, o passo 1.2 é verdadeiro.
Se o passo 2.1 for verdadeiro, o passo 2.2 é verdadeiro.
Todas as tecnologias que suportem CSS.
Esta falha está relacionada com:
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.
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>
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>
Não existem recursos disponíveis para esta técnica.
Verifique todas as imagens adicionadas ao conteúdo através de CSS.
Verifique se as imagens não transmitem informações importantes.
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.
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.
Folhas de Estilo em Cascata.
Esta falha está relacionada com:
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).
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.
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>
Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.
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".
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.
Se os passos 1 e 2 forem verdadeiros, o conteúdo não cumpre o Critério de Sucesso.
Tecnologias que suportem conteúdo em modo intermitente num objecto, applet ou plug-in.
Esta falha está relacionada com:
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.
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.
Para cada página que tenha conteúdo em modo intermitente num plug-in ou numa applet:
Verifique se o conteúdo continua em modo intermitente durante mais de 5 segundos.
Verifique se existe uma forma de colocar em pausa o conteúdo em modo intermitente.
Se o passo 1 for verdadeiro e o passo 2 for falso, o conteúdo não cumpre o Critério de Sucesso.
Aplica-se a todas as tecnologias.
Esta falha está relacionada com:
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.
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
Não existem recursos disponíveis para esta técnica.
(actualmente, não existe nenhuma indicada)
Visualize o conteúdo com as legendas activadas.
Verifique se todo o diálogo é acompanhado por uma legenda.
Verifique se todos os sons importantes são legendados.
Os passos 2 e 3 são verdadeiros.
Geral.
Esta falha está relacionada com:
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.
O utilizador percorre o formulário preenchendo os campos por ordem. Quando passa do terceiro campo para o quarto, o formulário é submetido.
Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.
Encontre todos os elementos de formulário.
Percorra-os por ordem.
Verifique se o formulário é submetido quando passa de um campo para o seguinte.
Verifique se são apresentadas novas janelas ao passar de um campo para o seguinte.
Verifique se é conduzido a outro ecrã ao passar de um campo para o seguinte.
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.
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:
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.
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.
Não existem recursos disponíveis para esta técnica.
Navegue no conteúdo utilizando um teclado.
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.
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.
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:
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.
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.
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:
Forneça os dados conforme necessário, mas deixe que a sessão expire e, em seguida, submeta o formulário.
Quando solicitado, efectue a nova autenticação com o servidor.
Verifique se a função é executada utilizando os dados anteriormente submetidos.
Se o passo 3 for falso, o sítio da Web não cumpre o Critério de Sucesso.
Todas as tecnologias.
Esta falha está relacionada com:
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.
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.
Não existem recursos disponíveis para esta técnica.
Para todas as imagens existentes no conteúdo que transmitam informações através de cores diferentes:
Verifique se as informações transmitidas através de cores diferentes não estão incluídas na alternativa em texto para a imagem.
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.
Todas as tecnologias.
Esta falha está relacionada com:
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ã.
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.
Não existem recursos disponíveis para esta técnica.
Verifique se existem referências textuais ao conteúdo na página Web.
Verifique se as referências não se baseiam apenas na forma ou localização do conteúdo.
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.
Aplica-se a todas as tecnologias que suportem uma API de acessibilidade.
Esta falha está relacionada com:
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.
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.
Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.
(actualmente, não existe nenhuma indicada)
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.
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.
Todas as tecnologias que suportem deslocamento ou movimento visual.
Esta falha está relacionada com:
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.
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.
Numa página com conteúdo em movimento ou em deslocamento:
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.
Utilize esse mecanismo para colocar em pausa o conteúdo em movimento ou em deslocamento.
Verifique se o conteúdo em movimento ou em deslocamento parou e não reinicia automaticamente.
Verifique se é fornecido um mecanismo na página Web ou no agente de utilizador para reiniciar o conteúdo colocado em pausa.
Utilize esse mecanismo para reiniciar o conteúdo em movimento.
Verifique se o conteúdo em movimento ou em deslocamento foi retomado a partir do ponto em que foi parado.
Se os passos 1, 3, 4 ou 6 forem falsos, o conteúdo não cumpre o Critério de Sucesso.
Aplica-se ao Modelo de Objecto de Documento (DOM) para HTML e XHTML.
Esta falha está relacionada com:
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).
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
Não existem recursos disponíveis para esta técnica.
(actualmente, não existe nenhuma indicada)
Verifique se existem valores id e accesskey no documento que não sejam exclusivos.
Verifique se os valores de atributo que têm um valor idref têm um valor id correspondente.
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.
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.
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.
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:
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.
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.
Identifique uma página que não esteja em conformidade que tenha uma versão alternativa em conformidade.
Verifique se a página que não está em conformidade fornece um link para a versão em conformidade.
Se o passo 2 for falso, o conteúdo não cumpre o Critério de Sucesso.
Aplica-se a todas as tecnologias.
Esta falha está relacionada com:
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.
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.
Não existem recursos disponíveis para esta técnica.
(actualmente, não existe nenhuma indicada)
Verifique se cada alternativa em texto descreve conteúdo que não seja o conteúdo não textual actualmente apresentado.
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.
Geral.
Esta falha está relacionada com:
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.
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.
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.
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.
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.
Não existem recursos disponíveis para esta técnica.
Carregue a página Web.
Verifique se são apresentadas novas (adicionais) janelas.
Encontre todos os elementos accionáveis, tais como links e botões, na página Web.
Active cada um dos elementos.
Verifique se ao activar o elemento é apresentada uma nova janela.
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.
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.
Aplica-se a todas as tecnologias, excepto as que necessitam de interacção de voz.
Esta falha está relacionada com:
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.
Um sítio da Web que toca música de fundo continuamente.
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.
Não existem recursos disponíveis para esta técnica.
(actualmente, não existe nenhuma indicada)
Verifique se existe alguma forma numa página Web para desligar qualquer som que toque automaticamente durante mais de três segundos.
Se o passo 1 não for verdadeiro, o conteúdo não cumpre o Critério de Sucesso 1.4.2.
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:
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.
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>
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>
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>
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>
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>
Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.
Verifique o código da página Web.
Verifique se existe uma cor de primeiro plano especificada pelo autor.
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.
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.
Todas as tecnologias.
Esta falha está relacionada com:
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.
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
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.
Não existem recursos disponíveis para esta técnica.
Verifique se o título de cada página Web identifica os conteúdos ou a finalidade da página Web.
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.
Todas as tecnologias.
Esta falha está relacionada com:
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.
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.
Não existem recursos disponíveis para esta técnica.
Verifique se a página contém marcas não textuais que transmitam informação.
Verifique se existem outros meios para determinar a informação transmitida pelas marcas não textuais.
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.
Aplica-se a todas as tecnologias.
Esta falha está relacionada com:
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.
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"
Não existem recursos disponíveis para esta técnica.
(actualmente, não existe nenhuma indicada)
Verifique todas as alternativas em texto para determinar se são, na realidade, uma alternativa em texto para o conteúdo não textual.
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.
Aplica-se a todas as tecnologias.
Esta falha está relacionada com:
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.
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.
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.
Não existem recursos disponíveis para esta técnica.
(actualmente, não existe nenhuma indicada)
Num conjunto de páginas Web, localize os componentes com a mesma função que estejam repetidos em várias páginas Web.
Para cada componente com a mesma função indicado no passo 1, verifique se o nome é consistente.
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.
Todas as tecnologias.
Esta falha está relacionada com:
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.
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>
pode também ser utilizado para acrescentar espaços em branco, produzindo falhas semelhantes.
Código Exemplo:
<h1>H E L L O</h1>
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>
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>
Não existem recursos disponíveis para esta técnica.
Para cada palavra que pareça ter um espaçamento não padrão entre caracteres:
Verifique se existem palavras no texto do conteúdo que contêm caracteres de espaço em branco.
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.
Todas as tecnologias.
Esta falha está relacionada com:
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.
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.
Não existem recursos disponíveis para esta técnica.
(actualmente, não existe nenhuma indicada)
Verifique se o documento contém dados ou informação apresentada num formato em colunas.
Verifique se as colunas são criadas utilizando caracteres de espaço em branco para apresentar a informação.
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.
Todas as tecnologias.
Esta falha está relacionada com:
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)
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.
Não existem recursos disponíveis para esta técnica.
Verifique se o documento contém tabelas formatadas visualmente.
Verifique se as tabelas são criadas utilizando caracteres de espaço em branco para dispor os dados em tabelas.
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.
HTML e XHTML.
Esta falha está relacionada com:
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.
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>
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>
Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.
Introduza os dados em todos os campos na página, a começar do topo.
Introduza os dados no último campo e saia dele (utilizando a tecla de tabulação).
Verifique se sair do último campo provoca uma alteração de contexto.
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.
HTML e XHTML.
Esta falha está relacionada com:
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.
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.
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>
Não existem recursos disponíveis para esta técnica.
(actualmente, não existe nenhuma indicada)
Localize cada formulário numa página.
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.
Para cada nova janela resultante do passo 2, verifique se o utilizador é avisado previamente.
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.
HTML e XHTML.
Esta falha está relacionada com:
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="" .
Exemplo de Falha 1: Imagens decorativas que não têm nenhum atributo
alt .
Não existem recursos disponíveis para esta técnica.
(actualmente, não existe nenhuma indicada)
Identifique quaisquer elementos img e applet
que sejam utilizados para conteúdo meramente decorativo.
Verifique se o atributo alt para estes elementos existe.
Verifique se o atributo alt para estes elementos é nulo.
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.
Aplica-se a HTML e XHTML.
Esta falha está relacionada com:
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="" .
Exemplo de Falha 1: Imagens decorativas que não têm nenhum atributo
alt .
Não existem recursos disponíveis para esta técnica.
(actualmente, não existe nenhuma indicada)
Identifique quaisquer elementos img e applet
que sejam utilizados para conteúdo meramente decorativo.
Verifique se o atributo alt para estes elementos existe.
Verifique se o atributo alt para estes elementos é nulo.
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.
Todas as páginas.
Esta falha está relacionada com:
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).
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>
Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.
Visualize uma página.
Verifique se a página não é redireccionada após um limite de tempo excedido.
O passo 2 é verdadeiro.
HTML e XHTML.
Esta falha está relacionada com:
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.
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>
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>
Localize os elementos meta no documento.
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.
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.
HTML e XHTML com Scripting.
Esta falha está relacionada com:
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.
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>
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'"
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>
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>
Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.
Verifique se existem processadores de eventos JavaScript num elemento que emule um link.
Verifique se função determinada de forma programática do elemento é um link.
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.
HTML e XHTML.
Esta falha está relacionada com:
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> .
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>
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>
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>
Código Exemplo:
<fieldset>
<legend>Bargain Corner</legend>
<p>Buy today, and save 20%</p>
</fieldset>
Não existem recursos disponíveis para esta técnica.
Verifique se o significado semântico de cada elemento é apropriado para o conteúdo do elemento.
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.
HTML e XHTML.
Esta falha está relacionada com:
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.
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.
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.
Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.
Se for utilizado tabindex, verifique se a ordem de
tabulação especificada pelos atributos tabindex segue as
relações no conteúdo.
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.
th, caption, ou
atributos summary não vazios em tabelas de esquemaHTML e XHTML.
Esta falha está relacionada com:
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.
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>
Não existem recursos disponíveis para esta técnica.
Verifique se o código fonte do documento HTML ou XHTML tem o elemento
table .
Se a tabela for utilizada apenas para dispor visualmente os elementos no conteúdo,
Verifique se a tabela não contém quaisquer elementos
th .
Verifique se o elemento table não contém um
atributo summary não vazio.
Verifique se o elemento table não contém um
elemento caption .
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.
HTML e XHTML.
Esta falha está relacionada com:
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.
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.
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>
Verifique se o código tem o elemento blink .
Se o passo 1 for verdadeiro, o conteúdo não cumpre o Critério de Sucesso.
pre para marcar informações
dispostas em tabelasHTML e XHTML.
Esta falha está relacionada com:
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 .
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>
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>
Não existem recursos disponíveis para esta técnica.
Certifique-se de que o elemento pre é utilizado.
Para cada ocorrência do elemento pre, verifique se as
informações inclusas estão dispostas em tabelas.
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.
HTML e XHTML.
Esta falha está relacionada com:
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.
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ã.
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
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.
Não existem recursos disponíveis para esta técnica.
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.
Verifique se a ordem de leitura linear corresponde a qualquer sequência com significação transmitida através de apresentação.
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.
Tecnologias que suportem o modo intermitente do conteúdo controlado por script.
Esta falha está relacionada com:
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).
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>
Para cada ocorrência de conteúdo em modo intermitente:
Verifique se a intermitência pára em 5 segundos ou menos.
Se o passo 1 for falso, o conteúdo não cumpre o Critério de Sucesso.
Aplica-se quando é utilizado scripting para abrir novas janelas.
Esta falha está relacionada com:
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.
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.
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');
}
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');
}
Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.
Carregue uma nova página.
Certifique-se de que uma nova janela foi aberta como resultado de carregar a nova página.
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.
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:
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.
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>
Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.
Certifique-se de que os processadores de evento específicos do dispositivo apontador são os únicos meios de invocar funções de scripting.
Se não existir nenhum, aplica-se esta condição de falha e o conteúdo não cumpre p Critério de Sucesso.
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:
É 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.
Código Exemplo:
<input type="submit" onFocus="this.blur();">
Código Exemplo:
<a onFocus="this.blur()" href="Page.html"><img src="myImage.gif"></a>
Código Exemplo:
<a href="link.html" onfocus="if(this.blur)this.blur();">Link Phrase</a>
Não existem recursos disponíveis para esta técnica.
(actualmente, não existe nenhuma indicada)
Utilize o teclado para verificar se pode chegar a todos os elementos interactivos utilizando o teclado.
Verifique se quando o foco é colocado em cada um dos elementos permanece nesse sítio até o utilizador o deslocar.
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.
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:
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).
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}.
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>");
}
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-->
Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.
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.
Se existir esse redireccionamento, aplica-se esta condição de falha e o conteúdo não cumpre o Critério de Sucesso.
HTML e XHTML com scripting.
Esta falha está relacionada com:
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.
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>
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.
Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.
Verifique o código fonte dos elementos que têm processadores de evento na marcação ou através de scripting.
Se esses elementos estiverem a funcionar como controlos da interface de utilizador, verifique se a função do controlo está definida.
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.
Geral.
Esta falha está relacionada com:
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.
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.
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.
Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.
Localize todos os campos de formulário de entrada de texto.
Altere o valor em cada campo de formulário.
Verifique se são apresentadas novas janelas.
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.
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.
Geral.
Esta falha está relacionada com:
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.
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.
Uma apresentação de diapositivos ocupa toda a janela e avança automaticamente para o diapositivo seguinte. Não existe nenhum botão Parar.
Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.
(actualmente, não existe nenhuma indicada)
Abra o conteúdo.
Deixe o conteúdo aberto durante 24 horas.
Verifique se o conteúdo sofreu alterações.
Confirme se o conteúdo não inclui nenhumas definições para desactivar as alterações automáticas.
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.
Aplica-se ao Modelo de Objecto de Documento (DOM) para XML.
Esta falha está relacionada com:
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.
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.
Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.
(actualmente, não existe nenhuma indicada)
Verifique se todos os valores id no documento (conforme definido pelo esquema) são exclusivos.
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.
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.
Todas as tecnologias.
Esta falha está relacionada com:
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.
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>
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>
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>
Não existem recursos disponíveis para esta técnica.
(actualmente, não existe nenhuma indicada)
Localize o conteúdo necessário para compreender como o texto do link descreve a finalidade do link.
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.
Se o passo 2 for falso, o conteúdo não cumpre o Critério de Sucesso.
HTML e XHTML.
Esta falha está relacionada com:
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.
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" />
Não existem recursos disponíveis para esta técnica.
Identifique quaisquer elementos img, area e
input de tipo "imagem".
Verifique se existe o atributo alt para estes elementos.
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.
Aplica-se a todas as tecnologias.
Esta falha está relacionada com:
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 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>
Não existem recursos disponíveis para esta técnica.
(actualmente, não existe nenhuma indicada)
Certifique-se de que está a ser utilizado um mecanismo de navegação em mais de uma página Web.
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.
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.
Todas as tecnologias.
Esta falha está relacionada com:
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.
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.
Não existem recursos disponíveis para esta técnica.
Para todo o conteúdo não textual que necessita de uma descrição extensa:
Verifique se a descrição extensa serve a mesma finalidade ou apresenta as mesmas informações do conteúdo não textual.
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.
Controlos HTML e XHTML que utilizem etiquetas visíveis.
Esta falha está relacionada com:
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">)
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>
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>
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">
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:
Verifique se o design visual utiliza uma etiqueta de texto que identifique a finalidade do controlo.
Verifique se um elemento label associa o texto ao elemento input.
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.
HTML, XHTML e CSS.
Esta falha está relacionada com:
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.
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:
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:
(actualmente, não existe nenhuma indicada)
Aumente o tamanho do texto do conteúdo até 200%.
Verifique se não existe texto cortado, truncado ou sobreposto.
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.
Linguagens de marcação: HTML, XHTML e outras tecnologias SGML ou baseadas em XML.
Esta falha está relacionada com:
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.
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>
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>
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">
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">
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>
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)
Verifique o código fonte de páginas implementadas em linguagens de marcação.
Verifique se existem marcas de abertura, marcas de fecho ou atributos incorrectamente formados.
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.
Todas as tecnologias.
Esta falha está relacionada com:
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.
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
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:
ϲоοk
Exemplo Prático: "ϲоοk"
(actualmente, não existe nenhuma indicada)
Verifique os caracteres ou as entidades de caracteres utilizadas para representar o texto.
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.
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.
Todas as tecnologias.
Esta falha está relacionada com:
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.
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)
Aceda a uma página com arte ASCII.
Para cada ocorrência de arte ASCII, verifique se tem uma alternativa em texto.
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.
Todas as tecnologias.
Esta falha está relacionada com:
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.
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.
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)
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).
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.
Páginas que forneçam alternativas em multimédia sincronizada ao texto.
Esta falha está relacionada com:
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.
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)
Verifique as páginas que fornecem alternativas em multimédia sincronizada ao texto.
Verifique se a multimédia sincronizada está claramente identificada com o texto para o qual é uma alternativa.
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.
Todas as tecnologias.
Esta falha está relacionada com:
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.
(actualmente, não existe nenhuma indicada)
Verifique se existem legendas nas alternativas em multimédia sincronizada.
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.
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.
Aplica-se a todas as tecnologias.
Esta falha está relacionada com:
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.
Encontre ocorrências de alterações de contexto devido a uma alteração nas definições da interface de utilizador.
Encontre instruções que todos os utilizadores tenham de rever antes de encontrarem alterações de contexto.
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.
Todas as linguagens de marcação baseadas em XML, incluindo HTML 4.01 e XHTML 1.x.
Esta falha está relacionada com:
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 .
Um autor utiliza um serviço de validação online para verificar se todos os valores de atributo id são exclusivos.
Um programador utiliza funcionalidades na ferramenta de autor para garantir que os valores de atributo id são exclusivos.
Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.
xml:id Versão 1.0 - Recomendação W3C de 9 de Setembro de 2005.
Extensible Markup Language (XML) 1.0 (Quarta Edição): Limitação de validade: ID
HTML 4.01: atributo id
Verifique se todos os valores de tipo ID são exclusivos na página Web.
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.
Todas as tecnologias.
Esta falha está relacionada com:
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.
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}
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}
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}
Não existem recursos disponíveis para esta técnica.
Defina o foco para todos os elementos que podem receber foco numa página.
Verifique se o indicador de foco está visível.
O passo 2 é verdadeiro.
Todas as tecnologias.
Esta falha está relacionada com:
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.
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.
Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.
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.
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.
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.
HTML, XHTML e CSS.
Esta falha está relacionada com:
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.
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}
Não existem recursos disponíveis para esta técnica.
(actualmente, não existe nenhuma indicada)
Introduza algum texto nos controlos de formulário baseados em texto que recebam texto introduzido pelo utilizador.
Aumente o tamanho do texto do conteúdo para 200%.
Verifique se o texto nos controlos de formulário baseados em texto aumentou para 200%.
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.
Todas as tecnologias.
Esta falha está relacionada com:
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.
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.
Para todos os campos obrigatórios ou campos de erro existentes na página Web que estejam identificados por cores diferentes:
Verifique se é fornecida uma forma sem utilizar cores para identificar o campo obrigatório ou o campo de erro.
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.
Todas as tecnologias.
Esta falha está relacionada com:
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.
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.
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.
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.
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.
Todas as tecnologias.
Esta falha está relacionada com:
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.
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.
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.
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.
Se o Quickcheck for falso, certifique-se de que o fundo atrás de cada letra contrasta suficientemente com a mesma.
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.
HTML e XHTML.
Esta falha está relacionada com:
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.".
Código Exemplo:
<a href="file110.htm">Click here</a> for more information on the Rocky Mountains.
Código Exemplo:
<h2>News headlines</h2>
The middle east peace meetings have yielded fruitful dialogue.
<a href="r4300.htm">read more</a>
Verifique cada link existente na página.
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.
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.
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.
Todas as tecnologias.
Esta falha está relacionada com:
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.
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.
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.
Para cada menu ou caixa de diálogo incorporados numa página Web que sejam apresentados através de um controlo accionador:
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.
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.
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.
Geral.
Esta falha está relacionada com:
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.
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.
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.
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.
Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.
Microsoft Active Accessibility 2.0 SDK (página em inglês). Inclui Inspect32.exe e outras ferramentas MSAA.
Gnome Accessibility Toolkit - Documentação (página em inglês)
Gnome Accessibility QA - Documentação e ferramentas (página em inglês)
Barra de Ferramentas de Programação do Microsoft Internet Explorer (página em inglês). Permite a verificação do DOM gerado por scripts no Microsoft Internet Explorer.
Firebug (página em inglês). Permite a verificação do DOM gerado por scripts no Firefox.
Procedimento Geral:
Instale uma ferramenta que permita ver a API de acessibilidade para a plataforma (consulte a secção Recursos).
Localize cada controlo de formulário.
Verifique se a propriedade name de cada controlo está preenchida.
Procedimento Alternativo para HTML e XHTML:
Localize cada elemento input, selecte
textarea na origem HTML.
Verifique se existe um atributo title no elemento.
Verifique se existe um elemento label associado.
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.
Todas as tecnologias que suportem CSS.
Esta falha está relacionada com:
:before e :after não são suportados pelo IE7 e
anterior.
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.
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>
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>
Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.
Verifique todo o conteúdo introduzido através da utilização dos
pseudo-elementos :before e :after e da propriedade content
.
Verifique se o conteúdo é decorativo.
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.
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.
Todas as tecnologias.
Esta falha está relacionada com:
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).
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>
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>
Abra a página num browser comum.
Verifique se o conteúdo não está justificado (alinhado às margens esquerda e direita).
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.
Conteúdo que contenha links.
Esta falha está relacionada com:
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 .
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.
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>
}
Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.
Verifique se o link contém conteúdo não textual.
Verifique se o conteúdo não textual foi implementado de modo a poder ser ignorado pelas tecnologias de apoio.
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.