Área: Accesibilidad / Semántica
Severidad: Alta
Puntaje actual: 6/10 | Potencial: 9/10
---
Síntoma
Los 12 nombres de estilos musicales (Nationalism, Serialism, Atonalism, Baroque, etc.) aparecen concatenados en un solo nodo del árbol de accesibilidad:
r=group t="NationalismView AllSerialismView AllAtonalismView AllBaroqueView AllClassicismView All..."
Sin separación entre nombres. Sin elementos individuales por sección.
Evidencia
eval-sections.mjs — Semantic dump:
r=group t="NationalismView AllSerialismView AllAtonalismView AllBaroqueView AllSt" (0,1120)
w=1120px h=662px
⚠ H2: 3+ section names concatenated with View All in same sem node
Impacto
Factor | Detalle --------|--------- Screen readers | No pueden navegar por estilo musical. Todo el texto es ilegible como frase continua Testing automatizado | No se puede identificar qué sección está visible. sems.find(s => s.text === 'Baroque') nunca encuentra match exacto View All buttons | Cada "View All" está pegado al nombre de sección anterior sin separación. No se puede clickear individualmente i18n | Si los nombres cambian de idioma, la concatenación empeora Causa raíz
Flutter's
Semantics widget para cada sección no tiene un nodo contenedor por sección. El ListView.builder que renderiza las secciones usa un solo grupo semántico para todo el scrollable. Los textos de los títulos de sección y los botones "View All" se fusionan en un solo nodo de texto plano.Reproducción
export DISPLAY=:99
cd /home/admin/fluttwebfaris
node eval-sections.mjs
# Buscar en output: "r=group t=" con múltiples nombres
Fix sugerido (Flutter)
1. Envolver cada sección en un widget
Semantics con label propio2. Usar
excludeSemantics: true en los children y addSemantics: true solo en el header3. Configurar
MergeSemantics apropiadamente en el scrollable4. Cada "View All" debe ser un botón semántico independiente con label
Tiempo estimado de fix
1-2h (cambios en Flutter semantics tree)
Referencias
•
eval-sections.mjs — Section scroll + semantic analysis•
NOTAS-ERRORES.md línea 25-37