Acerca de este problema HTML
La especificación HTML define button como un elemento de contenido interactivo que acepta contenido de fraseo como sus hijos, pero prohíbe explícitamente el contenido interactivo como descendiente. Cuando añades un atributo tabindex a un elemento, lo haces enfocable y potencialmente interactivo, lo que viola esta restricción del modelo de contenido.
Esta regla existe por razones importantes. Un elemento button es un único control interactivo — cuando un usuario presiona Tab, todo el botón recibe el foco como una unidad. Si los elementos dentro del botón también tienen tabindex, los lectores de pantalla y los usuarios de teclado encuentran elementos enfocables anidados dentro de lo que debería ser un único objetivo de acción. Esto crea un comportamiento confuso e impredecible: los usuarios pueden hacer Tab dentro de los elementos internos del botón sin entender el contexto, y las tecnologías de asistencia pueden anunciar los elementos internos por separado, rompiendo el patrón de interacción esperado.
Los navegadores también pueden manejar elementos enfocables anidados de manera inconsistente. Algunos pueden ignorar el tabindex interno, mientras que otros pueden permitir el foco en el elemento anidado pero no activar correctamente el manejador de clic del botón, llevando a una funcionalidad rota.
Cómo solucionarlo
La solución más directa es eliminar el atributo tabindex de cualquier elemento dentro del button. Si al elemento interno se le dio tabindex="0" para hacerlo enfocable, no lo necesita — el botón en sí ya es enfocable. Si se le dio tabindex="-1" para gestionar el foco programáticamente, reconsidera si esa gestión de foco es necesaria dentro del contexto de un botón.
Si realmente necesitas múltiples elementos interactivos en la misma área, reestructura tu marcado para que los elementos interactivos sean hermanos en lugar de estar anidados dentro de un button.
Ejemplos
❌ Incorrecto: span con tabindex dentro de un button
<button type="button">
<span tabindex="0">Haz clic aquí</span>
</button>
El span tiene tabindex="0", haciéndolo un descendiente enfocable del button. Esto viola el modelo de contenido.
✅ Correcto: Eliminar tabindex del descendiente
<button type="button">
<span>Haz clic aquí</span>
</button>
El span ya no tiene tabindex, así que el button se comporta como un único control enfocable.
❌ Incorrecto: Múltiples elementos enfocables dentro de un button
<button type="button">
<span tabindex="0" class="icon">★</span>
<span tabindex="-1" class="label">Favorito</span>
</button>
Ambos elementos span internos tienen atributos tabindex, lo cual es inválido independientemente del valor de tabindex.
✅ Correcto: Dar estilo a los elementos internos sin hacerlos enfocables
<button type="button">
<span class="icon">★</span>
<span class="label">Favorito</span>
</button>✅ Correcto: Reestructurar si se necesitan interacciones separadas
Si necesitas un icono y una acción separada lado a lado, usa elementos hermanos en lugar de anidarlos:
<span class="icon" aria-hidden="true">★</span>
<button type="button">Favorito</button>Esto mantiene el botón como un elemento interactivo único y limpio mientras coloca el icono decorativo fuera de él.
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.