Validación HTML: El rol "form" es innecesario para el elemento "form".

Acerca de este problema HTML

Muchos elementos HTML vienen con roles ARIA incorporados (implícitos) que los navegadores y tecnologías asistivas ya reconocen. El elemento <form> se mapea nativamente al rol ARIA form, lo que significa que los lectores de pantalla y otras herramientas ya lo entienden como un punto de referencia de formulario sin ningún atributo extra. Cuando añades explícitamente role="form" a un elemento <form>, le estás diciendo al navegador algo que ya sabe.

Esta redundancia es problemática por varias razones:

Claridad del código: Los atributos innecesarios hacen que tu HTML sea más difícil de leer y mantener. Otros desarrolladores pueden preguntarse si el rol explícito está ahí para sobreescribir algo o si sirve un propósito especial.
Intención engañosa: Los roles ARIA explícitos se reservan típicamente para casos donde necesitas sobreescribir o complementar la semántica predeterminada de un elemento. Usarlos innecesariamente puede señalar a futuros mantenedores que algo inusual está pasando cuando no es así.
Mejores prácticas de ARIA: La primera regla de ARIA es “no uses ARIA si puedes usar un elemento HTML nativo o atributo con la semántica y comportamiento que necesitas.” Añadir roles ARIA redundantes va contra este principio.

Vale la pena señalar que el rol form implícito del elemento <form> solo lo expone como un punto de referencia cuando el formulario tiene un nombre accesible (p. ej., a través de aria-label o aria-labelledby). Si necesitas que tu formulario aparezca como una región de punto de referencia, proporciona un nombre accesible en lugar de añadir un rol redundante.

Para arreglar este problema, simplemente elimina role="form" de cualquier elemento <form>. Si quieres que el formulario funcione como un punto de referencia con nombre para usuarios de tecnología asistiva, añade un nombre accesible en su lugar.

Ejemplos

❌ Incorrecto: `role="form"` redundante

<form role="form" action="/subscribe" method="post">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <button type="submit">Subscribe</button>
</form>

Esto activa la advertencia del validador porque role="form" duplica el rol implícito del elemento.

✅ Correcto: sin rol explícito

<form action="/subscribe" method="post">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <button type="submit">Subscribe</button>
</form>

El elemento <form> ya comunica su rol nativamente. No se necesita ningún atributo ARIA.

✅ Correcto: formulario con nombre accesible para navegación por puntos de referencia

<form action="/subscribe" method="post" aria-label="Newsletter subscription">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <button type="submit">Subscribe</button>
</form>

Si quieres que el formulario sea descubrible como un punto de referencia con nombre por usuarios de lector de pantalla, proporciona un atributo aria-label o aria-labelledby — no un role redundante.

Otros elementos con roles implícitos

El mismo principio se aplica a muchos otros elementos HTML. Evita añadir roles redundantes como estos:

<!-- ❌ Roles redundantes -->

<nav role="navigation">...</nav>
<main role="main">...</main>
<header role="banner">...</header>
<footer role="contentinfo">...</footer>
<button role="button">Click me</button>

<!-- ✅ Deja que la semántica nativa haga el trabajo -->

<nav>...</nav>
<main>...</main>
<header>...</header>
<footer>...</footer>
<button>Click me</button>

Confía en la semántica nativa de los elementos HTML. Solo usa roles ARIA explícitos cuando realmente necesites cambiar o complementar el comportamiento predeterminado de un elemento.