Fallo común WCAG 2.2

F63Enlaces cuyo sentido se explica en otro párrafo o en otra celda

Nombre oficial en el W3C: Fallo del criterio de conformidad 2.4.4 debido a proporcionar el contexto del enlace únicamente en contenido que no está relacionado con el enlace

En pocas palabras

Este fallo ocurre cuando un enlace como «Leer más» solo se entiende gracias a un texto que está en otro párrafo, otro elemento de lista u otra celda. El navegador y los lectores de pantalla no pueden relacionar ese texto con el enlace. La explicación debe estar en el propio enlace o en la misma frase, párrafo, elemento de lista o celda.

Por qué es importante

Un lector de pantalla es un programa que lee en voz alta lo que hay en la pantalla. Muchas personas que lo usan saltan de enlace en enlace o piden una lista de todos los enlaces.

Si el enlace dice «Leer más» y la explicación está en el párrafo de al lado, oirán «Leer más» sin saber de qué. Tendrán que salir del enlace y buscar el texto que lo explica. Con varias noticias en la misma página, todos los enlaces suenan igual.

Cómo evitarlo

Lo mejor: escriba un texto de enlace que se entienda solo, como «Leer más sobre las ayudas al alquiler».
Si usa un enlace corto, póngalo en la misma frase, párrafo o elemento de lista que el texto que lo explica.
En una tabla de datos, póngalo en la misma celda o asegúrese de que el encabezado de su columna o fila lo explica.
Si el diseño obliga a separarlos, una el enlace con su contexto mediante aria-labelledby o aria-describedby.
No use tablas para maquetar enlaces y sus explicaciones en filas distintas.

Cómo comprobarlo

Localice los enlaces genéricos: «Leer más», «Descargar», «Aquí», «Ver».
Para cada uno, mire si el texto que lo explica está en la misma frase, párrafo, elemento de lista o celda.
Si no lo está, revise con las herramientas del navegador (F12, pestaña Accesibilidad) si el enlace tiene un nombre o una descripción que lo aclare.
Con NVDA, abra la lista de enlaces (Insert + F7) y compruebe que cada uno se entiende. Si alguno no se entiende por ninguna vía, hay fallo.

Ejemplo

En el primer bloque el enlace queda en un párrafo aparte; en el segundo, el texto del enlace se explica solo.

<!-- Fallo: el enlace está en otro párrafo -->
<p>Abierto el plazo de las ayudas al alquiler para jóvenes.</p>
<p><a href="/ayudas-alquiler">Leer más</a></p>

<!-- Correcto: el enlace se entiende por sí mismo -->
<p>Abierto el plazo de las ayudas al alquiler para jóvenes.
  <a href="/ayudas-alquiler">Leer más sobre las ayudas al alquiler</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 F63 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

HTML

Descripción

Este documento describe una condición de fallo que se da cuando el contexto necesario para entender el propósito de un enlace se encuentra en contenido que no es contexto del enlace determinable por software. Si el contexto del enlace no se proporciona de una de las siguientes formas:

en la misma frase, párrafo, elemento de lista o celda de tabla que el enlace
mediante una propiedad ARIA adecuada, como aria-label o aria-labelledby

el usuario no podrá averiguar con facilidad adónde lleva el enlace. Si el usuario tiene que abandonar el enlace para buscar el contexto, dicho contexto no es contexto del enlace determinable por software y se produce esta condición de fallo.

Ejemplos

Un enlace en un párrafo adyacente

Un servicio de noticias muestra las primeras frases de un artículo en un párrafo. El párrafo siguiente contiene el enlace "Read More..." (Leer más...). Como el enlace no está en el mismo párrafo que la entradilla, el usuario no puede descubrir fácilmente sobre qué le permitirá leer más el enlace.

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

Un enlace en una celda adyacente de una tabla de maquetación

Un sitio de audio ofrece enlaces para descargar su reproductor. La información sobre qué se descargaría con el enlace está en la fila anterior de la tabla de maquetación, que no es contexto determinable por software para el enlace.

<table>
  <tr> 
    <td>Play music from your browser</td>
  </tr>
  <tr>
    <td>
      <a href="https://www.example.com/download.htm">
        <img src="download.jpg" width="165" height="32" alt="Download now">
      </a>
    </td>
  </tr>
</table>

Pruebas

Procedimiento

Localizar los enlaces en los que se necesita algún contexto adicional para entender el propósito del enlace. Para cada enlace:

Comprobar si el contexto está contenido en la misma frase, párrafo, elemento de lista o celda de tabla, o en los encabezados de tabla asociados.
Comprobar si el contexto del enlace puede determinarse por software de alguna otra manera, por ejemplo, mediante una propiedad de WAI-ARIA como aria-label, aria-labelledby o aria-describedby en el enlace, que proporcione el contexto suficiente.

Resultados esperados

Si las comprobaciones n.º 1 Y n.º 2 son falsas, el contenido falla el criterio de conformidad.

Recursos

Accessible Rich Internet Applications (WAI-ARIA)
WAI-ARIA Authoring Practices Guide (guía de prácticas de autor de WAI-ARIA)

Cómo lo comprobamos en ADDAW

Este error es uno de los que buscamos en cada auditoría de ADDAW. Se lo entregamos con capturas y la forma de corregirlo.

Solicitar una auditoría

Basado en la técnica F63 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.