TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
Un elemento <li> que no es hijo directo de un <ul>, <ol> o <menu> es semánticamente inválido. Esto rompe la capacidad de los lectores de pantalla para anunciar el número total de ítems y la posición actual de la persona usuaria, causando desorientación cognitiva.
La fragmentación de la jerarquía semántica
El uso de frameworks basados en componentes a veces fomenta el renderizado de fragmentos sueltos, lo que deriva en elementos de lista huérfanos inyectados directamente en el DOM o envueltos en <div>s genéricos. Esto viola el principio fundamental de jerarquía de HTML5 y el Criterio 1.3.1 (Información y Relaciones) de la WCAG.
El patrón erróneo: Código Accesible Deficiente
Envolver elementos <li> en contenedores genéricos (o no envolverlos en absoluto) destruye la agrupación lógica.
<!-- MAL: sin un padre de lista -->
<div class="card-list">
<li>Paso 1: Validar identidad</li>
<li>Paso 2: Subir documentos</li>
</div> La Solución Accesible: Código Recomendado
Asegurar que todo <li> tenga un contenedor padre válido de bloque de lista.
<!-- BIEN: Jerarquía semántica estricta -->
<ol class="card-list">
<li>Paso 1: Validar identidad</li>
<li>Paso 2: Subir documentos</li>
</ol>Matriz de Soporte y Comportamiento
| Lector de Pantalla | Comportamiento con <li> huérfano | Comportamiento Nativo (<ul>/<ol>) |
|---|---|---|
| NVDA | Lee como texto plano. Falla al anunciar "lista de X elementos". | Anuncia: "Lista con 2 elementos. Uno... Dos..." |
| VoiceOver (iOS) | Ignora la viñeta y trata el contenido como texto desorganizado. | Agrupa el rotor correctamente y permite saltar por listas. |
Metodología de Verificación y Testing
Pruebas Manuales con Lectores de Pantalla
Con NVDA, presionar L para saltar entre listas. Si los elementos <li> están huérfanos (dentro de un <div>), NVDA no detectará ninguna lista en la página. Con la estructura correcta (<ol>), el lector anunciará "Lista con 2 elementos. 1. Paso 1... 2. Paso 2...".
Inspección del Árbol de Accesibilidad
En Chrome DevTools, inspeccionar el nodo del <li> huérfano: su rol en el Accessibility Tree será generic o text en vez de listitem. Verificar que el padre directo tenga rol list.
Herramientas Automatizadas
Axe DevTools: la regla listitem detecta elementos <li> que no son hijos directos de <ul>, <ol> o <menu>. El validador HTML del W3C (validator.w3.org) también reporta este error como violación del modelo de contenido.
