Técnicas para as WCAG 2.0

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

-

C7: Utilizar CSS para ocultar uma parte do texto do link

Aplicabilidade

Todas as tecnologias que suportem CSS.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é fornecer suplementos ao texto do link, adicionando texto que descreva a funcionalidade exclusiva do link, mas estilizando o texto adicional de modo a não ser apresentado no ecrã por agentes de utilizador que suportem CSS. Quando a informação no contexto circundante é necessária para interpretar o texto do link apresentado, esta técnica fornece uma descrição completa da função de entrada de dados do link, permitindo que o texto menos completo seja apresentado.

Esta técnica funciona através da criação de um selector CSS para procurar texto que está oculto. O conjunto de regras para o selector coloca o texto oculto numa caixa com 1 pixel, com o excesso oculto, e posiciona o texto fora da janela. Isto garante que o texto não é visualizado no ecrã, mas que permanece acessível às tecnologias de apoio, tais como leitores de ecrã e apresentações em braille. É de salientar que a técnica não utiliza as propriedades visibility:hidden nem display:none, visto que estas podem ter o efeito não intencional de ocultar o texto às tecnologias de apoio, para além de impedir a apresentação no ecrã.

Nota 1: Esta técnica de ocultar o texto do link tem sido defendida por alguns utilizadores de leitores de ecrã e autores da Web empresariais. A sua eficácia foi comprovada em alguns sítios da Web. Outros utilizadores de leitores de ecrã e peritos em acessibilidade não a recomendam como técnica geral, visto que os resultados podem apresentar demasiada comunicação e limitar a capacidade de um utilizador de leitor de ecrã com experiência de controlar o excesso de palavras. O grupo de trabalho é de opinião que a técnica pode ser útil às páginas Web que não tenham conteúdo repetido nas áreas de texto ocultas.

Nota 2: Esta técnica pode ser utilizada em conjunto com uma técnica de mudança de estilo para apresentar uma página que seja uma versão alternativa em conformidade para conteúdo que não esteja em conformidade. Para mais informações, consulte C29: Utilizar um comutador de estilo para fornecer uma versão alternativa em conformidade e Noções sobre Versões Alternativas em Conformidade .

Exemplos

Os seguintes exemplos utilizam o selector CSS e o seguinte conjunto de regras:

a span { height: 1px; width: 1px; position: absolute; overflow: hidden; top: -10px; }

Exemplo 1

Este exemplo descreve um sítio da Web de notícias que contém uma série de breves resumos de notícias, seguidos de um link que indica "notícia completa". O texto do link oculto descreve a finalidade do link.

Código Exemplo:

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en"> 
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" /> 
<link href="access.css" rel="stylesheet" type="text/css" />
<title>Hidden Link Text</title>
</head>
<body> 
<p>Washington has announced plans to stimulate economic growth.
  <a href="#"> <span>Washington stimulates economic growth </span>
  Full Story</a></p>
</body>
</html>

Exemplo 2

Este exemplo descreve um recurso que contém livros electrónicos em diferentes formatos. O título de cada livro é seguido de links que indicam "HTML" e "PDF”. O texto oculto descreve a finalidade de cada link.

Código Exemplo:

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en"> 
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" /> 
<link href="access.css" rel="stylesheet" type="text/css" />
<title>Hidden Link Text </title>
</head>
<body>
<dl>
<dt>Winnie the Pooh </dt>
   <dd><a href="winnie_the_pooh.html">
      <span>Winnie the Pooh </span>HTML</a></dd>
   <dd><a href="winnie_the_pooh.pdf">
         <span>Winnie the Pooh </span>PDF</a></dd>
<dt>War and Peace</dt>
    <dd><a href="war_and_peace.html">
      <span>War and Peace </span>HTML</a></dd> 
    <dd><a href="war_and_peace.pdf">
      <span>War and Peace </span>PDF</a></dd>
</dl>
</body>
</html>

Recursos

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

Testes

Procedimento

Para cada elemento anchor que utilize esta técnica:

  1. Verifique se foi definido um elemento que limite a sua visualização a um pixel e que coloque o texto fora da visualização, com o excesso oculto.

  2. Verifique se o elemento dessa classe está incluído no conteúdo do anchor

  3. Verifique se o conteúdo associado do anchor descreve a finalidade do link.

Resultados Esperados