TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
Las etiquetas <ul> y <ol> solo permiten elementos <li> como hijos directos. Inyectar un <div> o un <p> rompe el cálculo matemático del árbol de accesibilidad, anunciando a la persona usuaria un total incorrecto de elementos.
La fragilidad de la estructura de lista
En el afán de aplicar estilos visuales complejos o dividir la lista en columnas, es común que se introduzcan etiquetas <div> como contenedores intermedios entre la lista y los ítems. Esta práctica viola abiertamente la especificación W3C HTML5 y, consecuentemente, el Criterio WCAG 1.3.1.
El patrón erróneo: Código Accesible Deficiente
En este bloque, el lector de pantalla calculará erróneamente que la lista tiene menos elementos de los reales, omitiendo los ocultos en sub-capas no válidas.
<!-- MAL: Anidamiento ilegal en el DOM -->
<ul class="steps">
<div class="column-left">
<li>Paso 1</li>
<li>Paso 2</li>
</div>
<div class="column-right">
<li>Paso 3</li>
</div>
</ul>La Solución Accesible: Código Recomendado
Si requieres dividir en columnas, aplica CSS Grid/Flexbox directamente sobre el contenedor <ul>, garantizando que todos los hijos sean obligatoriamente <li>.
<!-- BIEN: Estructura sintáctica rigurosa -->
<ul class="steps grid-2-cols">
<li>Paso 1</li>
<li>Paso 2</li>
<li>Paso 3</li>
</ul>Metodología de Verificación y Testing
Pruebas Manuales con Lectores de Pantalla
Con NVDA, presionar L para saltar a la lista. Si contiene divs intermedios, NVDA puede anunciar un conteo incorrecto de elementos (ej: "Lista con 1 elemento" cuando hay 3). Con la estructura válida, anunciará "Lista con 3 elementos".
Inspección del Árbol de Accesibilidad
En Chrome DevTools, inspeccionar la estructura del DOM y verificar que todos los hijos directos de <ul>/<ol> sean exclusivamente <li>. El Accessibility Tree mostrará nodos con rol listitem huérfanos si hay contenedores intermedios no válidos.
Herramientas Automatizadas
El validador HTML del W3C (validator.w3.org) reporta directamente violaciones del modelo de contenido. Axe DevTools: la regla list verifica que <ul>/<ol> solo contengan hijos <li>, <script> o <template>.
