C7Usar CSS para ocultar una parte del texto del enlace

Aplicabilidad

Todas las tecnologías compatibles con CSS.

Descripción

El objetivo de esta técnica es complementar el texto del enlace añadiendo texto adicional que describa la función concreta del enlace, y aplicar a ese texto adicional un estilo que impida que los agentes de usuario compatibles con CSS lo muestren en pantalla. Cuando se necesita información del contexto circundante para interpretar el texto del enlace que se muestra, esta técnica proporciona una descripción completa de la función del enlace al mismo tiempo que permite mostrar el texto menos completo.

Esta técnica funciona creando un selector CSS que apunta al texto que se quiere ocultar. El conjunto de reglas del selector coloca el texto que se va a ocultar en una caja de 1 píxel con overflow:hidden. Esto garantiza que el texto no se muestre en pantalla pero siga siendo accesible para las tecnologías de asistencia, como los lectores de pantalla y las líneas braille. Tenga en cuenta que la técnica no usa las propiedades visibility:hidden ni display:none, ya que estas tienen el efecto de ocultar el texto a las tecnologías de asistencia, además de impedir que se muestre en pantalla.

Esta técnica no es un método para ocultar enlaces completos, sino solo una parte del texto dentro de un enlace. La sección de recursos incluye métodos para ocultar y mostrar enlaces dirigidos a los usuarios de lectores de pantalla.

Ejemplos

Los siguientes ejemplos usan el selector y el conjunto de reglas CSS que se muestran a continuación:

.visually-hidden {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

<p>Washington has announced plans to stimulate economic growth.
  <a href="/washington-growth/"><span class="visually-hidden">Washington stimulates
   economic growth </span>Full Story</a>
</p>

<dl>
  <dt>Winnie the Pooh</dt>
  <dd><a href="winnie-the-pooh.html">
    <span class="visually-hidden">Winnie the Pooh </span>HTML</a></dd>
  <dd><a href="winnie_the_pooh.pdf">
    <span class="visually-hidden">Winnie the Pooh </span>PDF</a></dd>
  <dt>War and Peace</dt>
  <dd><a href="war-and-peace.html">
    <span class="visually-hidden">War and Peace </span>HTML</a></dd> 
  <dd><a href="war_and_peace.pdf">
    <span class="visually-hidden">War and Peace </span>PDF</a></dd>
</dl>

Pruebas

Técnicas relacionadas

• G91: Proporcionar un texto de enlace que describa el propósito del enlace
• H33: Complementar el texto del enlace con el atributo title

Recursos

• HTML5 Accessibility Chops: hidden and aria-hidden
• CSS in Action: Invisible Content Just for Screen Reader Users (contenido invisible solo para usuarios de lectores de pantalla)