TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
La especificación ARIA tiene roles compuestos que exigen una relación estricta de padre-hijo (ej: menu > menuitem, o tablist > tab). Si declaras un hijo huérfano sin su contenedor padre obligatorio, el lector de pantalla no podrá calcular el tamaño del grupo ni tu posición relativa.
La ruptura del contrato estructural
Los menús desplegables y sistemas de pestañas (Tabs) creados desde cero con Javascript requieren una arquitectura ARIA compleja. Un error catastrófico (WCAG 1.3.1) es inyectar role="menuitem" a los enlaces pero olvidar envolverlos en un <div role="menu">. La persona usuaria escuchará un ítem, pero nunca se le notificará que ha entrado a un menú.
El patrón erróneo: Código Accesible Deficiente
El componente hijo exige un ecosistema que el desarrollador no proveyó, dejando al lector de pantalla sin contexto espacial.
<!-- MAL: Rol hijo huérfano flotando en un div común -->
<div class="dropdown-panel">
<a href="/perfil" role="menuitem">Perfil</a>
<a href="/ajustes" role="menuitem">Ajustes</a>
</div>La Solución Accesible: Código Recomendado
Completar siempre la matriz jerárquica de la especificación WAI-ARIA asegurando el contenedor padre explícito.
<!-- BIEN: Relación padre-hijo correctamente definida -->
<div class="dropdown-panel" role="menu" aria-label="Opciones de persona usuaria">
<a href="/perfil" role="menuitem">Perfil</a>
<a href="/ajustes" role="menuitem">Ajustes</a>
</div>Metodología de Verificación y Testing
Pruebas Manuales con Lectores de Pantalla
Con NVDA, presionar D para saltar entre landmarks (puntos de referencia). Verificar que las regiones semánticas sean detectadas correctamente y que sus nombres sean descriptivos. En JAWS, usar R para navegar entre regiones. En VoiceOver (macOS), abrir el Rotor (VO+U) y verificar la lista de "Puntos de referencia".
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 1.3.1.
Herramientas Automatizadas
Ejecutar Axe DevTools: las reglas relacionadas con estructura (ej: list, listitem, landmark-*) son altamente confiables para detectar violaciones del Criterio 1.3.1. Complementar con el validador HTML del W3C para errores de modelo de contenido.
