TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
Si declaras un contenedor semántico como <ul>, <nav> o <table> y este no contiene ningún hijo válido debido a lógica de renderizado, el lector de pantalla anunciará un elemento interactivo que resulta estar totalmente vacío, rompiendo la confianza de la persona usuaria.
El problema del renderizado condicional incompleto
En aplicaciones modernas (React, Angular), es común renderizar la "cáscara" de un componente mientras se esperan los datos. Si los datos regresan vacíos, el contenedor <ul> suele quedar renderizado sin ningún <li> interno. Esto desencadena una parada cognitiva donde la persona usuaria escucha "Lista", intenta entrar, y choca contra la nada.
El patrón erróneo: Código Accesible Deficiente
Declarar el esqueleto estructural independiente de la existencia real de los datos.
<!-- MAL: Contenedor semántico vacío -->
<h3>Documentos Adjuntos</h3>
<ul class="document-list">
<!-- Array de documentos está vacío, no se renderiza nada aquí -->
</ul>La Solución Accesible: Código Recomendado
Aplicar lógica condicional estricta: Si no hay elementos hijos, la etiqueta padre no debe existir en el DOM. En su lugar, proveer un mensaje de estado claro.
<!-- BIEN: Ocultar el contenedor si no hay datos -->
<h3>Documentos Adjuntos</h3>
<p>No hay documentos adjuntos en este trámite.</p>
<!-- El <ul> nunca fue renderizado -->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 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.
