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

Acerca de este problema HTML

Cada elemento HTML lleva un rol ARIA implícito que comunica su propósito a las tecnologías de asistencia como los lectores de pantalla. El elemento <button> tiene nativamente el rol button integrado, por lo que añadir explícitamente role="button" es redundante. El validador de W3C marca esto como innecesario porque no añade información — las tecnologías de asistencia ya entienden que un <button> es un botón.

El atributo role existe principalmente para asignar semántica interactiva a elementos que no la tienen nativamente. Por ejemplo, podrías añadir role="button" a un <div> o <span> que ha sido estilizado y programado para comportarse como un botón (aunque usar un <button> nativo siempre es preferible). Cuando lo aplicas a un elemento que ya lleva ese rol por defecto, crea ruido en tu código y puede indicar a otros desarrolladores que algo inusual está ocurriendo — cuando en realidad no es así.

Este principio se aplica ampliamente en HTML. Otros ejemplos de roles redundantes incluyen role="link" en un elemento <a> con un href, role="navigation" en un elemento <nav>, y role="heading" en un elemento <h1> a <h6>. La especificación WAI-ARIA se refiere a estos como “semántica ARIA implícita por defecto”, y la regla general es: no establezcan un rol ARIA que coincida con la semántica nativa del elemento.

Eliminar roles redundantes mantiene tu marcado limpio, más fácil de mantener, y evita confusión potencial durante revisiones de código o auditorías. También se alinea con la primera regla de ARIA: “Si puedes usar un elemento HTML nativo con la semántica y comportamiento que necesitas ya integrados, en lugar de reutilizar un elemento y añadir un rol, estado o propiedad ARIA para hacerlo accesible, entonces hazlo”.

Cómo solucionarlo

Elimina el atributo role="button" de cualquier elemento <button>. No se necesita reemplazo — la semántica nativa ya es correcta.

Si tienes un elemento que no es un botón (como un <div>) que usa role="button", considera reemplazarlo con un elemento <button> real. Esto te proporciona soporte de teclado integrado, gestión de foco y comportamiento de envío de formularios de forma gratuita.

Ejemplos

❌ Rol redundante en un botón

<button role="button">Comprar ahora</button>

<button type="submit" role="button">Enviar</button>

Ambos activan la advertencia del validador porque role="button" duplica lo que el elemento <button> ya comunica.

✅ Botón sin rol redundante

<button>Comprar ahora</button>

<button type="submit">Enviar</button>

Simplemente eliminar el atributo role resuelve el problema. La semántica nativa del elemento maneja todo.

❌ Usar role=”button” en un elemento no semántico

<div role="button" tabindex="0" onclick="handleClick()">Comprar ahora</div>

Aunque esto es técnicamente válido y no activará la misma advertencia, requiere manejo manual de eventos de teclado, estilos de foco y estados de accesibilidad.

✅ Usar un botón nativo en su lugar

<button onclick="handleClick()">Comprar ahora</button>

Un <button> nativo proporciona interacción de teclado (activación con teclas Enter y Espacio), capacidad de foco y anuncio de rol correcto — todo sin atributos adicionales o JavaScript.

Otros roles redundantes comunes a evitar

<!-- ❌ Redundante -->

<a href="/about" role="link">Acerca de</a>
<nav role="navigation">...</nav>
<h1 role="heading">Título</h1>
<input type="checkbox" role="checkbox">

<!-- ✅ Limpio -->

<a href="/about">Acerca de</a>
<nav>...</nav>
<h1>Título</h1>
<input type="checkbox">