TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
Una lista de descripciones HTML consta de un contenedor padre <dl>, el cual solo puede alojar como hijos directos a los términos <dt> y sus respectivas definiciones <dd> (además de divs contenedores de pares agrupados en HTML5.2). Romper esta secuencia destruye el mapeo lógico en los lectores de pantalla.
La desconexión semántica de los metadatos
Este error abunda en perfiles de persona usuaria y comprobantes de pago. Un desarrollador utiliza una etiqueta <dl> por su semántica, pero para maquetar el término y el valor lado a lado (Flexbox), introduce ambos dentro de un <div> genérico no permitido, o peor, usa <p>. Esto viola la WCAG 1.3.1.
El patrón erróneo: Código Accesible Deficiente
El lector de pantalla enuncia el inicio de la lista, pero al encontrar etiquetas hijas no válidas, interrumpe la lectura y pierde la relación semántica.
<!-- MAL: Inyección de hijos inválidos en la raíz de DL -->
<dl>
<p class="row">
<dt>Número de Radicado:</dt>
<dd>1234567</dd>
</p>
</dl>La Solución Accesible: Código Recomendado
Respeta la jerarquía estricta. HTML5 permite agrupar pares <dt> y <dd> dentro de un <div> hijo directo si es necesario para aplicar estilos CSS, pero nunca otros elementos como <p> o <section>.
<!-- BIEN: Sintaxis válida usando DIV como agrupador legal (HTML5.2) -->
<dl class="receipt-list">
<div class="flex-row">
<dt>Número de Radicado:</dt>
<dd>1234567</dd>
</div>
</dl>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.
