Rol Punto de referencia

`contentinfo`

El punto de referencia del pie de sitio — derechos de autor, contacto, enlaces legales. El elemento <footer> de nivel superior lleva este rol automáticamente. Solo puede existir un contentinfo por página.

Cuándo utilizarlo

Se utiliza <footer> como hijo directo de <body>. Cuando <footer> se encuentra en el nivel superior, el navegador lo expone automáticamente como punto de referencia contentinfo. Cuando está anidado dentro de <article>, <section>, <main> o <aside>, es simplemente un grupo genérico, no un punto de referencia.

role="contentinfo" en un <div> solo es adecuado cuando no es posible utilizar <footer> (CMS heredado).

No debe haber más de un contentinfo por página. Si los artículos individuales tienen sus propios pies (créditos de autoría, botones para compartir), se debe usar <footer> anidado dentro de <article> — no serán puntos de referencia, lo cual es el resultado correcto.

Cuándo añadir etiqueta

Un único contentinfo no necesita etiqueta — los lectores de pantalla lo anuncian como «información del contenido». Si parece necesaria una etiqueta, suele ser señal de que existen dos contentinfo y uno de ellos no debería ser un pie de nivel superior.

Errores frecuentes

Dos elementos <footer> en el nivel superior. Dos puntos de referencia contentinfo; los usuarios de lectores de pantalla no pueden distinguir cuál es el real.
role="contentinfo" en un <footer> anidado dentro de <article> o <main>. El rol anula el comportamiento predeterminado de no ser punto de referencia y añade ruido innecesario.
Colocar enlaces de «navegación secundaria» en <footer> como lista plana. Deben envolverse en <nav aria-label="Pie de página"> para que aparezcan como punto de referencia de navegación.
Banner de cookies de todo el sitio colocado dentro de <footer> — es un diálogo o una región, no forma parte del contentinfo.
<footer> vacío dejado en el DOM como marcador de posición de diseño — el punto de referencia contentinfo existe sin contenido.

Ejemplo

<body>
  <header>…</header>
  <main>…</main>
  <footer>
    <nav aria-label="Pie de página">
      <a href="/about">Acerca de</a>
      <a href="/privacy">Privacidad</a>
      <a href="/contact">Contacto</a>
    </nav>
    <p>&copy; 2026 Disability World</p>
  </footer>
</body>