TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
HTML prohíbe terminantemente anidar elementos interactivos. Si colocas un <a> dentro de un <button>, el navegador no sabrá a cuál elemento debe asignar el foco al presionar Tabulador, causando comportamientos impredecibles, bucles de foco y el colapso del Árbol de Accesibilidad.
La superposición de eventos del teclado
A nivel de desarrollo visual, poner un enlace dentro de un botón (ej: una tarjeta clicable que tiene un enlace dentro) puede parecer fácil de controlar con Javascript. Sin embargo, para una persona usuaria de teclado, al presionar Tab, ¿quién recibe el foco? ¿El botón exterior o el enlace interior? Esta ambigüedad viola el principio de Robustez.
El patrón erróneo: Código Accesible Deficiente
El Árbol de Accesibilidad (AOM) se corrompe porque los roles de interacción se superponen, imposibilitando que las tecnologías asistivas determinen la acción primaria.
<!-- MAL: Anidamiento ilegal de controles interactivos -->
<button class="card-wrapper" onclick="expandCard()">
<h3>Título de Tarjeta</h3>
<p>Detalles...</p>
<a href="/detalles">Leer artículo completo</a>
</button>La Solución Accesible: Código Recomendado
Separar absolutamente los controles. Si necesitas una "tarjeta clickeable" entera, debes utilizar técnicas avanzadas de CSS (como pseudo-clases ::before que se expanden sobre la tarjeta) sin anidar múltiples etiquetas interactivas en el HTML.
<!-- BIEN: Controles separados como hermanos en el DOM -->
<div class="card-wrapper">
<h3>Título de Tarjeta</h3>
<p>Detalles...</p>
<div class="actions">
<button onclick="expandCard()">Expandir vista</button>
<a href="/detalles">Leer artículo completo</a>
</div>
</div>Metodología de Verificación y Testing
Pruebas Manuales con Lectores de Pantalla
Desactivar el ratón y navegar la página exclusivamente con Tab, Shift+Tab, Enter y las teclas de flecha. Verificar que todos los elementos interactivos sean alcanzables, que el indicador de foco sea visible, y que no existan trampas de foco donde el cursor quede atrapado.
Inspección del Árbol de Accesibilidad
En Chrome DevTools, seleccionar el elemento afectado en el panel Elements, luego abrir la pestaña Accessibility. Verificar que las propiedades Role, Name y State reflejen correctamente la intención del componente según el criterio WCAG 4.1.2.
Herramientas Automatizadas
Ejecutar Axe DevTools: las reglas aria-* y *-name detectan violaciones del Criterio 4.1.2 (Nombre, Función, Valor). WAVE marca controles sin nombre accesible. Limitación: La sincronización de estados dinámicos (JS) no siempre es verificable de forma automatizada.
