Acerca de este problema HTML
La especificación HTML mapea ciertos elementos a roles ARIA implícitos. El elemento <footer>, cuando se usa como hijo directo de <body> (es decir, no anidado dentro de un elemento <article>, <aside>, <main>, <nav>, o <section>), automáticamente lleva el rol de landmark contentinfo. Esto significa que los lectores de pantalla y otras tecnologías de asistencia ya lo anuncian como un landmark de información de contenido sin ningún marcado adicional.
Añadir role="contentinfo" a un elemento <footer> es redundante porque:
- Duplica la semántica incorporada. Los navegadores ya exponen el rol correcto al árbol de accesibilidad. Repetirlo no añade ningún beneficio y desordena tu marcado.
- Puede causar confusión a los desarrolladores. Ver un rol explícito podría sugerir que el elemento no tiene uno por defecto, llevando a malentendidos sobre cómo funcionan las semánticas de HTML.
- Viola la primera regla del uso de ARIA. La guía “Using ARIA” del W3C establece: “Si puedes usar un elemento o atributo HTML nativo con la semántica y comportamiento que requieres ya incorporados, en lugar de reutilizar un elemento y añadir un rol, estado o propiedad ARIA para hacerlo accesible, entonces hazlo.”
Vale la pena señalar que cuando un <footer> está anidado dentro de un elemento de sección como <article> o <section>, no lleva el rol contentinfo — se mapea a un rol genérico en su lugar. En ese contexto, añadir role="contentinfo" realmente cambiaría la semántica del elemento en lugar de ser redundante, aunque hacerlo generalmente no es apropiado ya que cada página debería tener solo un landmark contentinfo.
Si estás trabajando con un <div> que sirve como footer (quizás en código heredado), el mejor enfoque es reemplazarlo con un elemento semántico <footer> en lugar de aplicar role="contentinfo" al <div>.
Ejemplos
❌ Rol redundante en <footer>
Esto activa la advertencia del validador porque el rol ya es implícito:
<footer role="contentinfo">
<p>© 2024 Example Corp. All rights reserved.</p>
</footer>
✅ Corregido: <footer> sin rol redundante
Simplemente elimina el atributo role="contentinfo":
<footer>
<p>© 2024 Example Corp. All rights reserved.</p>
</footer>
✅ Usando un <div> como footer (patrón heredado)
Si no puedes usar un elemento <footer> por alguna razón, aplicar role="contentinfo" a un <div> es válido y significativo ya que el <div> no tiene rol implícito:
<div role="contentinfo">
<p>© 2024 Example Corp. All rights reserved.</p>
</div>
Sin embargo, reemplazar el <div> con un <footer> es siempre el enfoque preferido.
✅ Footer anidado dentro de una sección
Cuando <footer> aparece dentro de un elemento de sección, no lleva el rol contentinfo. Tampoco se necesita un rol explícito aquí — simplemente representa contenido de footer para esa sección:
<article>
<h2>Blog Post Title</h2>
<p>Article content here.</p>
<footer>
<p>Published on January 1, 2024</p>
</footer>
</article>Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.