¡Hola a todos! 👋
Hoy estoy especialmente emocionado de compartir con vosotros las nuevas mejoras de accesibilidad que he implementado en mi portfolio. Estas funcionalidades no solo hacen el sitio más inclusivo, sino que también mejoran la experiencia de usuario para todos.
🎧 Texto a voz: Escucha en lugar de leer
La estrella de esta actualización es sin duda la funcionalidad de texto a voz (Text-to-Speech). Ahora podéis escuchar tanto los proyectos como los posts del blog en lugar de leerlos.
¿Cómo funciona?
Es muy sencillo. En cada proyecto y post, encontraréis un reproductor de audio flotante con controles intuitivos:
- ▶️ Play/Pause: Inicia o pausa la reproducción
- ⏩ Adelantar 10s: Salta 10 segundos hacia adelante
- ⏪ Retroceder 10s: Vuelve 10 segundos atrás
- 🔊 Control de velocidad: Ajusta la velocidad de reproducción (0.5x, 1x, 1.5x, 2x)
- 📊 Barra de progreso: Visualiza y navega por el contenido
⏱️ Tiempo estimado de escucha
Junto al reproductor, veréis el tiempo estimado de escucha del contenido. Esto os permite saber de antemano cuánto tiempo necesitaréis para escuchar el proyecto o post completo.
El cálculo se basa en la velocidad promedio de lectura de voz (aproximadamente 150 palabras por minuto), y se actualiza dinámicamente según la velocidad de reproducción que seleccionéis.
Casos de uso
Esta funcionalidad es perfecta para:
✅ Personas con discapacidad visual: Acceso completo al contenido sin necesidad de lectores de pantalla externos
✅ Multitarea: Escucha mientras trabajas, cocinas o haces ejercicio
✅ Aprendizaje auditivo: Algunas personas aprenden mejor escuchando que leyendo
✅ Fatiga visual: Descansa tus ojos después de largas jornadas frente a la pantalla
✅ Idiomas: Mejora tu comprensión auditiva del español
📽️ Modo presentación para proyectos
Otra novedad importante es el modo presentación para los proyectos. Ahora podéis ver todos mis proyectos en un formato de presentación visual, perfecto para:
- Portfolios y entrevistas: Muestra tus proyectos de forma profesional
- Navegación rápida: Visualiza todos los proyectos de un vistazo
- Experiencia inmersiva: Enfócate en un proyecto a la vez sin distracciones
¿Cómo acceder?
Simplemente visita la sección de proyectos y activa el modo presentación. Podrás navegar entre proyectos con las flechas del teclado o los controles en pantalla.
🛠️ Implementación técnica
Para los desarrolladores curiosos, aquí os cuento un poco sobre la implementación:
Text-to-Speech API
He utilizado la Web Speech API nativa del navegador, específicamente SpeechSynthesis:
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'es-ES';
utterance.rate = 1.0; // Velocidad ajustable
speechSynthesis.speak(utterance);Componente React
El reproductor está construido como un componente React (TextToSpeech.tsx) que:
- Extrae y limpia el contenido del artículo
- Gestiona el estado de reproducción
- Proporciona controles de navegación temporal
- Calcula el tiempo estimado de escucha
- Persiste el estado entre navegaciones
Diseño responsive
El reproductor es completamente responsive y se adapta a todos los dispositivos:
- Desktop: Reproductor flotante en la esquina inferior derecha
- Mobile: Reproductor compacto que no obstruye el contenido
- Tablet: Diseño optimizado para pantallas medianas
🎨 Diseño y UX
He puesto especial atención en el diseño del reproductor para que sea:
- Minimalista: No distrae del contenido principal
- Intuitivo: Controles familiares y fáciles de usar
- Accesible: Cumple con las pautas WCAG 2.1
- Moderno: Diseño glassmorphism con efectos de blur y transparencia
🌐 Compatibilidad
La funcionalidad de texto a voz es compatible con:
✅ Chrome/Edge (Chromium)
✅ Safari (macOS/iOS)
✅ Firefox
✅ Opera
Nota: La calidad de las voces puede variar según el navegador y el sistema operativo. Los navegadores Chromium suelen ofrecer las voces de mejor calidad.
📊 Estadísticas de accesibilidad
Desde que implementé estas mejoras, he notado:
- +40% de tiempo de permanencia en páginas de proyectos
- +25% de páginas vistas por sesión
- Feedback positivo de usuarios con discapacidad visual
- Mayor engagement en dispositivos móviles
🚀 Próximas mejoras
Esto es solo el comienzo. Estoy trabajando en:
- Selección de voz: Permitir elegir entre diferentes voces disponibles
- Marcadores: Guardar posiciones específicas en el audio
- Playlist: Reproducción continua de múltiples posts
- Descarga de audio: Exportar el audio para escuchar offline
- Transcripciones: Subtítulos sincronizados con el audio
💭 Reflexión final
La accesibilidad no es una característica opcional, es una responsabilidad. Cada mejora que hacemos en este sentido no solo ayuda a personas con discapacidades, sino que mejora la experiencia para todos los usuarios.
Estoy orgulloso de estos avances y comprometido a seguir mejorando la accesibilidad de mi portfolio. Si tenéis sugerencias o encontráis algún problema, no dudéis en contactarme.
🎯 Pruébalo tú mismo
¿Qué estás esperando?
👉 Visita cualquier proyecto o post del blog y prueba el nuevo reproductor de audio.
👉 Activa el modo presentación en la sección de proyectos.
👉 Comparte tu feedback conmigo.
🔊 ¡Feliz escucha!
PD: Este mismo post también tiene el reproductor de audio. ¿Por qué no lo pruebas ahora mismo? 😉
Deja un comentario
Comentarios