Técnica CSS WCAG 2.2

C7Completar el texto de un enlace con una parte oculta visualmente

Nombre oficial en el W3C: Usar CSS para ocultar una parte del texto del enlace

En pocas palabras

Enlaces como «Leer más» o «PDF» no dicen adónde llevan si se oyen sueltos. Esta técnica añade dentro del enlace un texto extra que no se ve en pantalla, pero que sí leen los lectores de pantalla. Por ejemplo: «Leer más sobre las becas de comedor». El texto se oculta con CSS, nunca con display: none.

Por qué es importante

Las personas ciegas usan un lector de pantalla (programa que lee en voz alta lo que hay en la pantalla). Muchas sacan una lista con todos los enlaces de la página. Si diez enlaces dicen «Leer más», no hay forma de distinguirlos.

Con el texto oculto, cada enlace explica su destino. Y el diseño visual no cambia.

Cómo se hace

Deje visible el texto corto al principio del enlace, por ejemplo «Leer más». Así coincide con lo que dice quien usa control por voz.
Añada detrás, dentro del mismo enlace, un <span> con el resto: «sobre las becas de comedor».
Oculte ese <span> con una clase que lo deja en un recuadro de 1 píxel con overflow: hidden.
No use display: none ni visibility: hidden. Esas propiedades también lo ocultan a los lectores de pantalla.
Úselo con moderación. Si los textos ocultos son largos y se repiten mucho, la lectura se hace pesada.

Cómo comprobarlo

Localice los enlaces cuyo texto visible no se entiende solo («Leer más», «Aquí», «PDF»).
Inspeccione el enlace con las herramientas del navegador (F12). En el panel «Accesibilidad», el nombre debe incluir el texto oculto.
Con NVDA, abra la lista de enlaces (Insert + F7). Cada enlace debe entenderse por sí mismo.
Compruebe que el texto oculto no aparece en pantalla ni deja huecos.

Ejemplo

Enlace «Leer más» de una noticia, completado con un texto que solo oyen los lectores de pantalla.

<style>
  .oculto {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
</style>
<p>Abierto el plazo de las becas de comedor.
  <a href="/becas-comedor">Leer más<span class="oculto"> sobre las becas de comedor</span></a>
</p>

Ver el texto completo del W3C (traducción al español)

Esta es una traducción no oficial al español de la técnica C7 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.

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.

Esta técnica para ocultar texto de enlaces ha sido defendida por algunos usuarios de lectores de pantalla y por autores de webs corporativas. Ha demostrado ser eficaz en algunos sitios web. Otros usuarios de lectores de pantalla y expertos en accesibilidad no la recomiendan como técnica general, porque el resultado puede ser excesivamente verboso y limitar la capacidad del usuario experimentado de lector de pantalla para controlar la verbosidad. El grupo de trabajo considera que la técnica puede ser útil en páginas web que no tengan contenido repetitivo en las zonas de texto oculto.

Esta técnica puede usarse en combinación con una técnica de cambio de estilos para presentar una página que sea una versión alternativa conforme de un contenido no conforme. Consulte C29 y Comprender las versiones alternativas conformes para obtener más información.

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;
}

Un sitio de noticias con enlaces de «full story»

Este ejemplo describe un sitio de noticias que tiene una serie de breves resúmenes de noticias seguidos de un enlace que dice «full story» (noticia completa). El texto oculto del enlace describe el propósito del enlace.


<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>

Una lista de libros en distintos formatos

Este ejemplo describe un recurso que tiene libros electrónicos en distintos formatos. El título de cada libro va seguido de enlaces que dicen «HTML» y «PDF». Un texto oculto visualmente describe el propósito de cada enlace.

<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

Procedimiento

Para cada elemento de anclaje que use esta técnica:

Comprobar que se ha definido un elemento que limita su presentación a un píxel y oculta el texto.
Comprobar que el elemento de esa clase está incluido en el contenido del anclaje.
Comprobar que el contenido combinado del anclaje describe el propósito del enlace.

Resultados esperados

Todas las comprobaciones anteriores son verdaderas.

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)

Cómo lo comprobamos en ADDAW

En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.

Solicitar una auditoría

Basado en la técnica C7 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.