Resultados do Validador eXaminator da UMIC – Agência para a Sociedade do Conhecimento, IP.
notas técnicas: validador eXaminator | índice web@x | logótipo dinâmico "Certified Accessibility".
179 elementos em http://www.acessibilidade.gov.pt/w3/TR/WCAG20-TECHS/C7.html
A calcular os resultados. (cálculos efectuados com sucesso)
A efectuar ligação a http://validator.w3.org para verificar o código (X)HTML.
A efectuar ligação a http://jigsaw.w3.org/css-validator para verificar as folhas de estilo CSS. (o eXaminator conseguiu estabelecer ligação ao validator de CSS do W3C)
Esta página passa a bateria de testes do eXaminator para as prioridades 1, 2 e 3 (conformidade "aaa")
Índice web@X (0-10): 10.0 (o índice deve ser usado apenas como referência dos responsáveis pelos conteúdos do sítio web)
Se o presente código não corresponde ao que observa no seu navegador web, então há algo que está a dificultar a observação correcta por parte do eXaminator. Verifique, nomeadamente, se o URI fornecido não foi alvo de quaisquer redireccionamentos. Se for o caso, submeta o URI redireccionado.
<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="pt-PT" lang="pt-PT">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>C7: Utilizar CSS para ocultar uma parte do texto do link | Técnicas para as WCAG 2.0</title>
<link rel="stylesheet" type="text/css" href="../WCAG20/W3C-WG-NOTE.css" />
<link rel="stylesheet" type="text/css" href="additional.css" />
<link rel="stylesheet" type="text/css" href="slicenav.css" />
</head>
<body class="slices">
<div id="masthead">
<p class="logo"><a href="http://www.w3.org/"><img width="72" height="48" alt="W3C" src="../WCAG20/w3c_home.png" /></a></p>
<p class="collectiontitle"><a href="./">Técnicas para as WCAG 2.0</a></p>
</div>
<div id="skipnav">
<p class="skipnav"><a href="#maincontent">Ir para o conteúdo (Pressione a tecla Enter)</a></p>
</div>
<a name="top" id="top"></a>
<ul id="navigation">
<li><strong><a href="Overview.html#contents">Ãndice</a></strong></li>
<li><strong><a href="intro.html" title="Introdução às Técnicas para as WCAG 2.0"><abbr title="Introdução">Intro</abbr></a></strong></li>
<li><a title="C6: Colocar conteúdo baseado em marcação estrutural" href="C6.html"><strong>Anterior:</strong> Técnica C6</a></li>
<li><a title="C7: Utilizar letter-spacing CSS para controlar o espaçamento numa palavra" href="C8.html"><strong>Próximo:</strong> Técnica C8</a></li>
</ul>
<div class="navtoc">
<p>Nesta página:</p>
<ul id="navbar">
<li><a href="#C7-applicability">Aplicabilidade</a></li>
<li><a href="#C7-description">Descrição</a></li>
<li><a href="#C7-examples">Exemplos</a></li>
<li><a href="#C7-resources">Recursos</a></li>
<li><a href="#C7-related-techs">Técnicas Relacionadas</a></li>
<li><a href="#C7-tests">Testes</a></li>
</ul>
</div>
<div class="skiptarget"><a id="maincontent" name="maincontent">-</a></div>
<h1><a name="C7" id="C7"></a>C7: Utilizar CSS para ocultar uma parte do texto do link</h1>
<div class="applicability">
<h2 id="C7-applicability">Aplicabilidade</h2>
<div class="textbody">
<p>Todas as tecnologias que suportem CSS.</p>
</div>
</div>
<p class="referenced">Esta técnica está relacionada com:</p>
<ul>
<li><a href="../WCAG20/index.html#navigation-mechanisms-refs">Critério de Sucesso 2.4.4 (Finalidade do Link (Em Contexto))</a>
<ul>
<li><a href="http://www.acesso.umic.pt/w3/TR/WCAG20-quickref/#navigation-mechanisms-refs">Como Cumprir o 2.4.4 (Finalidade do Link (Em Contexto))</a></li>
<li><a href="../UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html">Noções sobre o Critério de Sucesso 2.4.4 (Finalidade do Link (Em Contexto))</a></li>
</ul>
</li>
<li><a href="../WCAG20/index.html#navigation-mechanisms-link">Critério de Sucesso 2.4.9 (Finalidade do Link (Apenas o Link))</a>
<ul>
<li><a href="http://www.acesso.umic.pt/w3/TR/WCAG20-quickref/#navigation-mechanisms-link">Como Cumprir o 2.4.9 (Finalidade do Link (Apenas o Link))</a></li>
<li><a href="../UNDERSTANDING-WCAG20/navigation-mechanisms-link.html">Noções sobre o Critério de Sucesso 2.4.9 (Finalidade do Link (Apenas o Link))</a></li>
</ul>
</li>
</ul>
<h2 id="C7-description">Descrição</h2>
<div class="textbody">
<p>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.</p>
<p>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 <code>visibility:hidden</code> nem <code>display:none</code>, 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ã.</p>
<div class="note">
<p class="prefix"><em>Nota 1:</em> 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.</p>
<p class="prefix"><em>Nota 2:</em> 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 <a href="../WCAG20/index.html#conforming-alternate-versiondef">versão alternativa em conformidade</a> para conteúdo que não esteja em conformidade. Para mais informações, consulte <a href="#C29"><em>C29: Utilizar um comutador de estilo para fornecer uma versão alternativa em conformidade</em></a> e <a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance.html#uc-conforming-alt-versions-head">Noções sobre Versões Alternativas em Conformidade</a> .</p>
</div>
</div>
<h2 class="small-head" id="C7-examples">Exemplos</h2>
<p>Os seguintes exemplos utilizam o selector CSS e o seguinte conjunto de regras:</p>
<code>a span { height: 1px; width: 1px; position: absolute; overflow: hidden; top: -10px; }</code>
<h3 class="small-head" id="C7-ex1">Exemplo 1</h3>
<div class="example">
<div class="textbody">
<p>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.</p>
</div>
<div class="code">
<p><strong>Código Exemplo:</strong></p>
<pre>
<code><?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></code>
</pre></div>
</div>
<h3 class="small-head" id="C7-ex2">Exemplo 2</h3>
<div class="example">
<div class="textbody">
<p>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.</p>
</div>
<div class="code">
<p><strong>Código Exemplo:</strong></p>
<pre>
<code><?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></code>
</pre></div>
</div>
<h2 id="C7-resources">Recursos</h2>
<div class="textbody">
<p>Os recursos são indicados apenas a tÃtulo informativo, não implica que tenham sido aprovados.</p>
<ul>
<li>
<p><a href="http://www.rnib.org.uk/wacblog/css/hidden-barriers-out-of-sight/">Barreiras Ocultas – longe da vista (página em inglês)</a></p>
</li>
<li>
<p><a href="http://webaim.org/techniques/css/invisiblecontent/">CSS em Acção: Conteúdo InvisÃvel Apenas para Utilizadores de Leitores de Ecrã (página em inglês)</a></p>
</li>
</ul>
</div>
<h2 id="C7-related-techs">Técnicas Relacionadas</h2>
<div class="textbody">
<ul>
<li><a href="../WCAG20-TECHS/G91.html">G91: Fornecer texto de link que descreva a finalidade de um link</a></li>
<li><a href="../WCAG20-TECHS/H33.html">H33: Fornecer suplementos ao texto do link com o atributo title</a></li>
</ul>
</div>
<h2 id="C7-tests">Testes</h2>
<div class="textbody">
<h3 class="small-head" id="C7-procedure">Procedimento</h3>
<p>Para cada elemento <code>anchor</code> que utilize esta técnica:</p>
<ol class="enumar">
<li>
<p>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.</p>
</li>
<li>
<p>Verifique se o elemento dessa classe está incluÃdo no conteúdo do <code>anchor</code></p>
</li>
<li>
<p>Verifique se o conteúdo associado do <code>anchor</code> descreve a finalidade do link.</p>
</li>
</ol>
<h3 class="small-head" id="C7-results">Resultados Esperados</h3>
<ul>
<li>
<p>Todos os passos acima são verdadeiros.</p>
</li>
</ul>
</div>
<ul id="navigationbottom">
<li><strong><a href="#top">Topo</a></strong></li>
<li><strong><a href="Overview.html#contents">Ãndice</a></strong></li>
<li><strong><a href="intro.html" title="Introdução às Técnicas para as WCAG 2.0"><abbr title="Introdução">Intro</abbr></a></strong></li>
<li><a title="C6: Colocar conteúdo baseado em marcação estrutural" href="C6.html"><strong>Anterior:</strong> Técnica C6</a></li>
<li><a title="C7: Utilizar letter-spacing CSS para controlar o espaçamento numa palavra" href="C8.html"><strong>Próximo:</strong> Técnica C8</a></li>
</ul>
<div class="footer">
<p class="copyright">Esta página Web é parte integrante do <a href="Overview.html">Técnicas e Falhas para as Directrizes de Acessibilidade para o Conteúdo da Web 2.0</a>. A totalidade do documento encontra-se também disponÃvel num <a href="complete.html">único ficheiro HTML</a>. Veja <a href="http://www.w3.org/WAI/intro/wcag20" lang="en" xml:lang="en">Os Documentos das WCAG 2.0</a> para uma explanação sobre como o presente documento se articula com os diversos documentos da versão 2.0 das Directrizes de Acessibilidade para o Conteúdo da Web (WCAG).</p>
<p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" lang="en" xml:lang="en">Copyright</a> © 2008 <a href="http://www.w3.org/" lang="en" xml:lang="en"><acronym title="World Wide Web Consortium">W3C</acronym></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute of Technology">MIT</acronym></a>, <a href="http://www.ercim.org/"><acronym title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>, <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer" lang="en" xml:lang="en">liability</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks" lang="en" xml:lang="en">trademark</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-documents" lang="en" xml:lang="en">document use</a> rules apply.</p>
</div>
</body>
</html>O índice web@X resulta da utilização do validador de Acessibilidade Web eXaminator.
Última actualização: 20 Setembro de 2009.
Programa ACESSO da UMIC - Agência para a Sociedade do Conhecimento, I.P.
