Contexto y Desafíos del Proyecto

El modelo Nanbeige 4.1-3B incluye un "terminal de chat de aventura en píxel" con estilo JRPG que ha ganado popularidad. Sin embargo, investigaciones con usuarios revelaron barreras significativas para personas con discapacidad visual. Las interfaces de píxel carecían de etiquetas semánticas, impidiendo la interacción con lectores de pantalla. Además, las pistas visuales en píxel no se traducían a información auditiva, y los efectos de texto dinámicos dificultaban el análisis por herramientas de asistencia.

Diseño de Solución para Accesibilidad

Reestructuración de HTML Semántico

Se mantuvo la estética de píxel miantras se refactorizó el código subyacente para incluir atributos WAI-ARIA, separando elementos visuales de contenido semántico y proporcionando texto exclusivo para lectores de pantalla mediante clases CSS específicas.

<!-- Ejemplo de burbuja de diálogo adaptada -->
<div role="dialog" aria-label="Diálogo del jugador">
  <div class="burbuja-pixel jugador" aria-hidden="true">
    <!-- Contenido visual -->
  </div>
  <p class="solo-lector">Jugador dice: Hola, ¿puedes presentarte?</p>
</div>

Gestión de Contenido Dinámico Accesible

Para los efectos de texto progresivo, se implementó una salida dual que actualiza simultáneamente el contenido visual y el nodo semántico destinado a los lectores de pantalla.

// Sincronización entre renderizado progresivo y accesibilidad
function escribirTextoContinuo(texto, elementoVisual) {
  const nodoLector = document.getElementById('lector-' + elementoVisual.id);
  nodoLector.textContent = texto; // Actualización inmediata para tecnologías asistivas
  
  // Animación visual (lógica original modificada)
  let posicion = 0;
  const temporizador = setInterval(() => {
    if (posicion < texto.length) {
      elementoVisual.innerHTML += texto.charAt(posicion);
      posicion++;
    } else {
      clearInterval(temporizador);
    }
  }, 30);
}

Implementación Técnica Clave

Adaptación de Estilos CSS para Accesibilidad

Se desarrolló un esquema CSS especial que integra descripciones ARIA sin alterar la apariencia visual mediante el uso de pseudoelementos y técnicas de ocultamiento accesible.

/* Compatibilidad entre estilo píxel y accesibilidad */
.marco-pixel {
  border: 4px solid #2C2C2C;
  position: relative;
}

.marco-pixel::after {
  content: attr(aria-description);
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Optimización de Etiquetas de Razonamiento

La etiqueta original `` se transformó en una estructura con roles ARIA para permitir la lectura selectiva de los procesos internos del sistema.

<div class="registro-pensamiento" role="log" aria-live="polite">
  <h3 class="solo-lector">Proceso de razonamiento del sistema</h3>
  <div class="visual-pixel" aria-hidden="true">
    <!-- Elementos gráficos -->
  </div>
  <div class="contenido-pensamiento">
    <!-- Texto del razonamiento -->
  </div>
</div>

Evaluación de Resultados

Pruebas con usuarios con discapacidad visual demostraron mejoras sustanciales en la interacción con la interfaz. A continuación se resumen los cambios observados en funcionalidades críticas:

Recomendaciones para el Desarrollo

Basado en la experiencia del proyecto, se identifican los siguientes principios para el desarrollo accesible:

• Mejora progresiva: Priorizar la funcionalidad básica antes de agregar efectos visuales complejos.
• Retroalimentación dual: Cada elemento visual debe contar con una contraparte no visual para tecnologías asistivas.
• Metodología de pruebas: Validar con lectores de pantalla reales (NVDA/VoiceOver), verificar la estructura HTML sin estilos CSS, y completar flujos completos usando únicamente el teclado.
• Equilibrio de rendimiento: Limitar el uso de aria-live="assertive", emplear role="log" para contenido actualizado frecuentemente, y priorizar la actualización de nodos semánticos en contenido dinámico.

# Ejemplo de componente accesible en Streamlit
def crear_boton_accesible(etiqueta, identificador):
    st.markdown(f"""
    <div class="boton-estilo-pixel" role="button" tabindex="0" 
         aria-label="{etiqueta}" onclick="document.getElementById('{identificador}').click()">
        <span aria-hidden="true">{etiqueta}</span>
        {st.button(etiqueta, key=identificador, disabled=True, visible=False)}
    </div>
    """, unsafe_allow_html=True)

Los resultados obtenidos demuestran que es posible mantener la estética única de las interfaces de píxel mientras se garantiza una experiencia inclusiva para todos los usuariso, sin comprometer la funcionalidad visual original.