TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
El elemento <details> es excelente para accesibilidad nativa, pero su gatillo (<summary>) debe contener obligatoriamente el título de lo que se va a expandir. Si solo colocas un ícono de '+' dentro del summary, el lector dirá "Botón contraído", forzando a la persona usuaria a abrir todos los paneles uno por uno para adivinar su contenido.
La fatiga de la navegación exploratoria ciega
En las secciones de Preguntas Frecuentes (FAQ), es imperativo que la persona usuaria pueda escanear los títulos antes de decidir si vale la pena expandir el texto. Un componente que oculta información pero no anuncia el "título" del secreto que guarda, viola el principio de Nombre Accesible estipulado en la WCAG 4.1.2.
El patrón erróneo: Código Accesible Deficiente
El botón de divulgación (disclosure button) es operable, pero su naturaleza es un absoluto misterio para las tecnologías asistivas.
<!-- MAL: Resumen mudo dependiente solo del ícono visual -->
<details>
<summary><i class="icon-plus"></i></summary>
<p>Para radicar la solicitud, debe traer su documento original...</p>
</details>La Solución Accesible: Código Recomendado
Insertar texto explícito y visible dentro de la etiqueta <summary>, o al menos proveer un aria-label si el diseño prohíbe el texto (práctica desaconsejada).
<!-- BIEN: Promesa explícita del contenido a revelar -->
<details>
<summary><i class="icon-plus" aria-hidden="true"></i> ¿Cuáles son los requisitos de radicación?</summary>
<p>Para radicar la solicitud, debe traer su documento original...</p>
</details>Metodología de Verificación y Testing
Pruebas Manuales con Lectores de Pantalla
Con NVDA, tabular hasta el componente interactivo. Verificar que el lector anuncie correctamente su nombre, tipo (ej: "botón contraído" o "diálogo") y estado actual. Presionar Enter o Espacio para activarlo y confirmar que el cambio de estado sea anunciado dinámicamente.
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.
