Addaw, ir a inicio Donar

Técnica HTML WCAG 2.2 obsoleta

H59Usar link rel="prev" y rel="next" para navegar (obsoleta)

Nombre oficial en el W3C: Usar el elemento link y las herramientas de navegación

Técnica obsoleta: el W3C ya no la recomienda. prev and next typically have no effect on browser navigation controls.

En pocas palabras

Esta técnica está obsoleta. Proponía poner en la cabecera de la página elementos link con rel="prev" y rel="next" para señalar la página anterior y la siguiente de una serie. Los navegadores actuales no usan esa información para ayudar a navegar. Hoy se ponen enlaces visibles y se indica dónde está el usuario.

Por qué es importante

Cuando un contenido se reparte en varias páginas, como un manual por capítulos o un trámite por pasos, el usuario necesita saber dónde está. También necesita ir con facilidad a la página anterior o a la siguiente. Ayuda a todos, y sobre todo a personas con discapacidad cognitiva o que usan lector de pantalla.

Esta técnica dejaba esa tarea al navegador, pero los navegadores no muestran estos enlaces. Por eso ya no sirve para cumplir. La necesidad sigue en los criterios 2.4.5 (varias formas de llegar) y 2.4.8 (saber dónde se está).

Cómo se hace

  1. No confíe en <link rel="prev"> ni en <link rel="next"> para la navegación. Puede dejarlos si ya existen, pero no bastan.
  2. Ponga enlaces visibles a la página anterior y a la siguiente, con texto claro: «Siguiente: 3. Requisitos».
  3. Indique dónde está el usuario: una ruta de navegación (migas de pan) o un texto como «Paso 2 de 4».
  4. Ofrezca otras formas de llegar a cada página: un índice, un mapa del sitio o un buscador.

Cómo comprobarlo

  1. En una serie de páginas, compruebe que hay enlaces visibles para ir a la anterior y a la siguiente.
  2. Compruebe que se puede saber en qué página o paso se está.
  3. Recorra esos enlaces con el teclado (Tab). Compruebe que su texto dice adónde llevan.

Ejemplo

La alternativa actual: enlaces visibles a la página anterior y a la siguiente, y la posición dentro de la serie.

<nav aria-label="Capítulos de la guía">
  <p>Capítulo 2 de 5</p>
  <a href="capitulo-1.html">Anterior: 1. Presentación</a>
  <a href="capitulo-3.html">Siguiente: 3. Requisitos</a>
</nav>
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 H59 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

El objetivo de esta técnica es describir cómo el elemento link puede proporcionar metadatos sobre la posición de una página HTML dentro de un conjunto de páginas web o puede ayudar a localizar contenido dentro de un conjunto de páginas web. El valor del atributo rel indica qué tipo de relación se describe, y el atributo href proporciona un enlace al documento que tiene esa relación. Se usan distintos valores de rel del elemento link para crear relaciones:

  • next: hace referencia al documento siguiente en una secuencia lineal de documentos.
  • prev: hace referencia al documento anterior en una serie ordenada de documentos.

Ejemplos

Una página web correspondiente al capítulo 2 de un libro en línea podría contener los siguientes enlaces dentro de la sección head.

<link rel="prev" href="Chapter01.html" title="01. Why Volunteer?">
<link rel="next" href="Chapter03.html" title="03. Who Volunteers?" />

Pruebas

Procedimiento

Para una página web que forma parte de una secuencia o colección de páginas web:

  1. Comprobar que todos los elementos link relativos a la navegación aparecen en la sección head del documento.
  2. Para cada elemento link de la sección head del documento que esté relacionado con la navegación, comprobar que contiene al menos:

    1. un atributo rel que identifica el tipo de enlace
    2. un atributo href válido para localizar el recurso correspondiente

Resultados esperados

  • Todas las comprobaciones anteriores son verdaderas.

Recursos

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