Documentación de Usabilis
Versión: 3.6.0 | Última actualización: 23 Dicembre 2025
Usabilis es una solución completa para hacer tu sitio más accesible.
Qué es Usabilis
Usabilis es un plugin de WordPress que añade un widget de accesibilidad avanzado a tu sitio, permitiendo a los usuarios personalizar su experiencia de navegación según sus necesidades específicas.
Características principales
35+ Funciones de Accesibilidad
Perfiles preconfigurados, control de texto, colores, navegación, síntesis de voz y mucho más.
Rendimiento Optimizado
Widget ligero que no ralentiza tu sitio web.
Fácil de Configurar
Instalación simple y panel de control intuitivo.
Requisitos del sistema
| Requisito |
Mínimo |
Recomendado |
| WordPress |
5.0 |
6.0 o superior |
| PHP |
7.2 |
8.0 o superior |
| MySQL |
5.6 |
8.0 o superior |
| Navegador |
Chrome, Firefox, Safari, Edge (versiones recientes) |
Tipos de licencia
- 1 dominio
- Todos los controles de accesibilidad
- Soporte por email
- 5 dominios
- Todos los controles de accesibilidad
- Personalización de colores
- Tamaño del icono del widget
- Soporte prioritario
- Dominios ilimitados
- Todos los controles de accesibilidad
- Personalización de colores
- Tamaño del icono del widget
- CSS personalizado
- Soporte prioritario
- White label
Instalación
Importante:: Importante: Asegúrate de tener una licencia válida antes de proceder con la instalación.
Método 1: Subir desde WordPress
- Descarga el archivo ZIP del plugin desde tu área de cliente
- Accede al panel de administración de WordPress
- Ve a Plugins → Añadir nuevo
- Haz clic en Subir plugin
- Selecciona el archivo ZIP y haz clic en Instalar ahora
- Activa el plugin
Método 2: Subir vía FTP
- Extrae el archivo ZIP del plugin
- Conéctate a tu servidor vía FTP
- Sube la carpeta
usabilis a /wp-content/plugins/
- Accede al panel de WordPress y ve a Plugins
- Encuentra Usabilis y haz clic en Activar
Post-instalación
Después de activar el plugin:
- Ve a Ajustes → Usabilis
- Introduce tu clave de licencia
- Configura los ajustes del widget
- Verifica que el widget aparece correctamente en el frontend
Configuración
Activación de licencia
- Accede a Ajustes → Usabilis
- Introduce la clave de licencia en el campo correspondiente
- Haz clic en Guardar Licencia
- Verifica que el estado muestra "Licencia Activa"
Configuración del widget
Posición del botón
Puedes elegir dónde posicionar el botón de apertura del widget:
- Abajo a la derecha (predeterminado)
- Abajo a la izquierda
- Centro derecha
- Centro izquierda
Email de soporte
Introduce el email que se mostrará en la declaración de accesibilidad para permitir a los usuarios contactarte.
Activar/Desactivar el widget
Puedes desactivar temporalmente el widget desmarcando la opción "Mostrar panel de accesibilidad en el frontend".
Nuevas Opciones de Visibilidad (v3.3.0+)
NUEVO! ¡Nuevo! Desde la versión 3.3.0 puedes controlar dónde y cómo mostrar el widget con mayor precisión.
Ocultar en Móvil
Esta opción te permite ocultar completamente el widget en dispositivos móviles. Útil si:
- Tienes una app móvil dedicada con funciones de accesibilidad integradas
- Tu diseño móvil usa enfoques diferentes para la accesibilidad
- Quieres optimizar el rendimiento en dispositivos con recursos limitados
Advertencia:: Advertencia: Si ocultas el widget en móvil, asegúrate de proporcionar alternativas de accesibilidad para usuarios móviles.
Gestión de Secciones
Ahora puedes elegir exactamente qué secciones del widget mostrar a tus usuarios:
Perfiles de Accesibilidad
Modos preestablecidos para diferentes discapacidades (Deficiencia Visual, TDAH, Epilepsia, etc.)
Sección CONTENIDO
Controles para texto, fuente, espaciado y alineación
Sección COLORES
Controles para contraste, brillo, saturación e inversión de colores
Sección ORIENTACIÓN
Herramientas de navegación como línea de lectura, máscara y resaltado
Cómo configurar:
- Ve a Ajustes → Usabilis
- Encuentra la sección "Configuración del Widget"
- Marca/desmarca las casillas de cada sección
- Haz clic en "Guardar Configuración"
Importante:: Importante: Al menos una sección debe permanecer activa. El sistema impedirá desactivar todas las secciones.
Características del Widget
Perfiles de accesibilidad
| Perfil |
Descripción |
Ajustes aplicados |
| Modo Deficiencia Visual |
Mejora la visibilidad del sitio |
Texto más grande, fuente legible, saturación aumentada |
| Perfil Seguro contra Convulsiones |
Elimina destellos y reduce el color |
Escala de grises, desactivar animaciones |
| Modo Amigable para TDAH |
Navegación enfocada, sin distracciones |
Saturación aumentada, máscara de lectura |
| Modo Usuarios Ciegos |
Optimizado para lectores de pantalla |
Alto contraste, brillo máximo |
| Modo Seguro para Epilepsia |
Atenúa colores y elimina destellos |
Escala de grises, detener animaciones |
Controles de contenido
Texto más grande
Aumenta el tamaño del texto hasta un 130%
Cursor
Cambia el tipo de cursor (puntero, cruz, texto)
Altura de línea
Aumenta el espacio entre líneas para mejorar la legibilidad
Espaciado de letras
Aumenta el espacio entre letras
Fuente legible
Reemplaza las fuentes con Arial para máxima legibilidad
Fuente para dislexia
Aplica la fuente OpenDyslexic optimizada para disléxicos
Controles de color
Invertir colores
Invierte todos los colores de la página
Brillo
Ajusta el brillo general del sitio
Contraste
Aumenta o disminuye el contraste
Saturación
Ajusta la intensidad del color
Herramientas de orientación
Línea de lectura
Muestra una línea horizontal que sigue al ratón
Navegación por teclado
Resalta elementos al navegar con TAB
Resaltar títulos
Enfatiza todos los títulos (H1-H6)
Máscara de lectura
Oscurece las áreas arriba y abajo del punto de lectura
Herramientas avanzadas de accesibilidad
Leer la página
Permite hacer clic en cualquier texto de la página para escucharlo a través de síntesis de voz. Incluye:
- Lectura de texto, enlaces, botones y etiquetas
- Soporte multilingüe automático
- Mini reproductor con control de parada
- Resaltado del texto que se está leyendo
Desactivar animaciones
Detiene todas las animaciones CSS y JavaScript en el sitio para usuarios sensibles al movimiento. Incluye:
- Detener animaciones CSS
- Bloquear efectos parallax
- Desactivar transiciones
- Soporte para prefers-reduced-motion
Personalización
Las funciones de personalización están disponibles para licencias Pro y Enterprise.
Personalización de colores (Pro/Enterprise)
Con una licencia Pro o Enterprise puedes personalizar:
- Color principal: El color del botón y elementos activos
- Tamaño del icono: Pequeño, Mediano, Grande o Muy Grande
// Los ajustes se guardan automáticamente
// y se aplican al widget en tiempo real
CSS personalizado (Enterprise)
Disponible solo para licencias Enterprise
Con una licencia Enterprise puedes añadir CSS personalizado para modificar completamente la apariencia del widget:
/* Ejemplo: Cambiar radio del borde del widget */
.wpap-section {
border-radius: 0 !important;
}
/* Ejemplo: Fuente personalizada para título */
.wpap-sidebar-header h2 {
font-family: 'Montserrat', sans-serif !important;
}
/* Ejemplo: Animación personalizada para botón */
.wpap-toggle-button {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
/* Ejemplo: Personalizar mini reproductor de lectura */
.wpap-reading-mini-player {
background: #1a202c !important;
border-radius: 20px !important;
}
/* Ejemplo: Estilo para texto resaltado durante la lectura */
.wpap-reading-active {
background: rgba(52, 179, 228, 0.2) !important;
padding: 2px 4px !important;
border-radius: 4px !important;
}
White Label (Enterprise)
Las licencias Enterprise eliminan automáticamente el branding "Desarrollado por STUDIO 09" del widget.
Control de Visibilidad y Secciones
NUEVO v3.3.0: Nuevo v3.3.0: ¡Ahora tienes control completo sobre dónde y cómo mostrar el widget!
Visibilidad de Dispositivo
Ocultar en Móvil
El widget puede ocultarse completamente en dispositivos móviles. Esto es útil para:
- Apps Móviles: Si tienes una app con funciones de accesibilidad integradas
- Diseño Responsivo: Si tu diseño móvil usa enfoques diferentes
- Rendimiento: Para optimizar la carga en dispositivos con conexiones lentas
¿Cómo funciona la detección móvil?
El sistema usa tres métodos para identificar dispositivos móviles:
- User Agent: Detecta Android, iOS, Windows Phone, etc.
- Pantalla Táctil: Verifica capacidades táctiles
- Tamaño de Pantalla: Considera móviles dispositivos con ancho ≤ 768px
// El widget verifica automáticamente si está en móvil
if (config.hideOnMobile && isMobileDevice()) {
// Widget no se carga
return;
}
Control Granular de Secciones
¿Por qué controlar secciones?
No todos los sitios tienen las mismas necesidades. Algunos ejemplos:
- Blog minimalista: Quizás solo quieras controles de texto
- Sitio corporativo: Solo perfiles preestablecidos para simplicidad
- E-commerce: Enfoque en contraste y legibilidad
- Portal educativo: Todas las funciones activas
Mejores Prácticas
- Analiza las necesidades de tus usuarios
- Comienza con todas las secciones activas
- Elimina gradualmente las no utilizadas
- Monitorea el feedback de usuarios
- Desactivar demasiadas secciones a la vez
- Ocultar en móvil sin alternativas
- Ignorar necesidades de accesibilidad
- Basarse solo en suposiciones
Ejemplos de Configuración
Configuración "Esencial"
✓ Perfiles de Accesibilidad
✗ Sección CONTENIDO
✗ Sección COLORES
✗ Sección ORIENTACIÓN
Ideal para: Sitios con diseño ya optimizado que solo quieren ofrecer perfiles rápidos.
Configuración "Lectura"
✗ Perfiles de Accesibilidad
✓ Sección CONTENIDO
✗ Sección COLORES
✓ Sección ORIENTACIÓN
Ideal para: Blogs, sitios de noticias, portales de documentación.
Configuración "Visual"
✗ Perfiles de Accesibilidad
✗ Sección CONTENIDO
✓ Sección COLORES
✗ Sección ORIENTACIÓN
Ideal para: Galerías, portfolios, sitios con fuerte componente visual.
Preguntas Frecuentes
No, el widget está optimizado para el rendimiento. Se carga de forma asíncrona y es muy ligero. Además, utiliza un CDN global para garantizar tiempos de carga rápidos.
Depende del tipo de licencia:
- Basic: 1 dominio
- Pro: hasta 5 dominios
- Enterprise: dominios ilimitados
Puedes gestionar tus dominios desde el panel de cliente.
Sí, el widget cumple completamente con el RGPD. Las preferencias del usuario se guardan solo en el navegador local (localStorage) y no se envían a servidores externos. Las estadísticas de uso son anónimas y agregadas.
¡Sí! Desde la versión 3.3.0 puedes activar la opción "Ocultar en Móvil" en los ajustes del widget. El widget no se cargará en dispositivos con pantallas menores de 768px o que se detecten como dispositivos táctiles móviles.
¡Por supuesto! Con la versión 3.3.0 puedes elegir qué secciones mostrar:
- Perfiles de Accesibilidad: Los modos preestablecidos
- CONTENIDO: Controles de texto
- COLORES: Gestión de color y contraste
- ORIENTACIÓN: Herramientas de navegación
Al menos una sección debe permanecer activa para que el widget funcione.
¡Al contrario! Las nuevas opciones mejoran el rendimiento:
- Al desactivar secciones innecesarias, el widget se vuelve más ligero
- La carga condicional reduce el impacto en las métricas Core Web Vitals
¡Sí! La función de síntesis de voz utiliza automáticamente el idioma del sitio detectado por WordPress. Actualmente soportamos:
- Italiano (it-IT)
- Inglés (en-US)
- Español (es-ES)
- Francés (fr-FR)
- Alemán (de-DE)
La calidad de la voz depende del navegador y sistema operativo del usuario.
La función añade la clase wpap-no-animations al body y establece animation: none !important en todos los elementos. Si tienes animaciones críticas que deben permanecer activas, puedes excluirlas añadiendo reglas CSS más específicas en tu tema.
Solución de Problemas
El widget no aparece en el sitio
- Verifica que el plugin está activo
- Comprueba que la licencia es válida y está activa
- Asegúrate de que la opción "Mostrar panel de accesibilidad" está activa
- Limpia la caché del sitio y del navegador
- Revisa la consola del navegador en busca de errores JavaScript
Error "Licencia inválida"
- Verifica que has copiado correctamente la clave de licencia
- Comprueba que la licencia no ha expirado
- Asegúrate de que el dominio está autorizado para esta licencia
- Intenta hacer clic en "Verificar Ahora" para actualizar el estado
La función "Leer la página" no funciona
- Verifica que el navegador soporta Web Speech API (ver tabla de compatibilidad)
- Comprueba que el audio no está silenciado en el navegador
- En algunos navegadores móviles, la síntesis de voz requiere interacción del usuario antes de funcionar
- Asegúrate de que no hay extensiones del navegador bloqueando la síntesis de voz
Conflictos con otros plugins
Si encuentras problemas de compatibilidad:
- Desactiva temporalmente otros plugins uno por uno
- Identifica qué plugin causa el conflicto
- Contacta al soporte con los detalles del conflicto
Problemas de rendimiento
Si notas ralentizaciones después de la instalación:
- Verifica que tu hosting cumple los requisitos mínimos
- Usa un plugin de caché (W3 Total Cache, WP Rocket)
- Habilita la compresión GZIP en el servidor
- Considera usar un CDN
- Si usas "Desactivar animaciones", algunas funciones como línea de lectura y lupa podrían desactivarse automáticamente
Modo debug
Para habilitar el modo debug y obtener más información:
// wp-config.php
define('WPAP_DEBUG', true);
Changelog
🌐 Declaración de Accesibilidad Multilingüe
- Soporte para 5 idiomas: Italiano 🇮🇹, English 🇬🇧, Deutsch 🇩🇪, Français 🇫🇷, Español 🇪🇸
- Interfaz con pestañas: Edita los textos de la declaración para cada idioma directamente desde el panel de administración
- Textos predeterminados: Cada idioma tiene textos profesionales predeterminados listos para usar
- Detección automática: El widget muestra la declaración en el idioma del sitio WordPress
- Fallback inteligente: Si un idioma no está configurado, se usan los valores predeterminados
✨ Nuevas funcionalidades
- Secciones personalizables por idioma: Compromiso, Enfoque, Funcionalidades, Comentarios, Limitaciones
- Lista completa de funcionalidades con las 24 características del plugin
- Campos comunes (organización, nivel de conformidad, fecha) compartidos entre todos los idiomas
🐛 Corrección de errores
- Corregida la codificación UTF-8 para emojis en las notificaciones de administración
- Resuelto el problema de las barras invertidas automáticas de WordPress en los campos textarea
- Corregida la casilla de declaración personalizada que no se guardaba correctamente
- Mejorado el MutationObserver para prevenir duplicaciones de la declaración
Nuevas Funcionalidades
- Personalización de icono Enterprise: Se añadió la posibilidad de cambiar el icono del widget para los planes Enterprise
Corrección de Errores
- Resolución de errores menores
🎉 Nuevas Funciones de Accesibilidad
- 🎙️ "Leer la página" (Clic para Leer):
- Haz clic en cualquier texto para escucharlo a través de síntesis de voz
- Soporte multilingüe automático basado en el idioma del sitio
- Mini reproductor con control de parada durante la lectura
- Resaltado visual del texto que se está leyendo
- Reconocimiento contextual (anuncia "Enlace:", "Botón:", etc.)
- Soporte para textos alternativos de imágenes
- 🚫 "Desactivar animaciones":
- Detiene todas las animaciones CSS y JavaScript
- Bloquea efectos parallax
- Soporte nativo para prefers-reduced-motion
- Desactiva automáticamente el smooth scroll
- Optimizado para usuarios con trastornos vestibulares
🌍 Soporte Multilingüe Completo
- Nuevos Idiomas Soportados:
- 🇪🇸 Español (es_ES)
- 🇫🇷 Francés (fr_FR)
- 🇩🇪 Alemán (de_DE)
- Además de 🇮🇹 Italiano e 🇬🇧 Inglés ya presentes
- Integración con WPML: Detección automática del idioma del sitio con compatibilidad completa para WPML, Polylang, TranslatePress y otros plugins multilingües
- Sistema de Fallback Inteligente:
- Coincidencia exacta de locale (ej: es_ES)
- Coincidencia parcial para variantes regionales (ej: es_* para cualquier español)
- Fallback primario a italiano, secundario a inglés
🎯 Traducciones Completas
- Todas las cadenas de UI traducidas profesionalmente
- Declaración de accesibilidad localizada en cada idioma
- Etiquetas, descripciones y mensajes completamente traducidos
- Soporte para caracteres especiales y formato local
- Mensajes específicos para nuevas funciones en todos los idiomas
💻 Mejoras Técnicas
- Detección automática del locale de WordPress vía
get_locale()
- Carga dinámica de traducciones sin impacto en el rendimiento
- Gestión optimizada de event listeners para nuevas funciones
- Compatibilidad mejorada con lectores de pantalla cuando "Leer la página" está activo
🐛 Correcciones de Errores
- Manejo mejorado de caracteres UTF-8 en todos los idiomas
- Problemas de codificación con apóstrofes y caracteres especiales corregidos
- Conflictos con algunas animaciones de terceros corregidos
- Manejo de síntesis de voz en Safari iOS corregido
- Problema de resaltado de texto en elementos complejos corregido
⚡ Rendimiento
- Las nuevas funciones añaden solo ~8KB al peso del widget
- Carga diferida de síntesis de voz solo cuando es necesaria
- Optimizaciones para reducir el uso de CPU cuando las animaciones están desactivadas
✅ Compatibilidad Probada
- WPML 4.6+
- Polylang 3.5+
- TranslatePress 2.6+
- Weglot 4.0+
- WordPress Multisite con diferentes idiomas por sitio
- Todos los principales lectores de pantalla (JAWS, NVDA, VoiceOver)
🎉 Nuevas Funciones
- Control de Visibilidad Móvil: Nueva opción para ocultar completamente el widget en dispositivos móviles
- Gestión Personalizada de Secciones: Capacidad de activar/desactivar individualmente cada sección del widget:
- Perfiles de Accesibilidad
- Sección CONTENIDO
- Sección COLORES
- Sección ORIENTACIÓN
- Generador de Código Embed Mejorado: Nueva pestaña "Visibilidad" para sitios no WordPress
💻 Mejoras
- Interfaz de administración rediseñada con nuevas opciones de visibilidad
- Validación inteligente que asegura al menos una sección activa
- Rendimiento optimizado 30% en móvil cuando el widget está oculto
- Detección mejorada de dispositivos móviles (user agent + táctil + tamaño de pantalla)
- Mensajes de feedback más claros en el panel de administración
🐛 Correcciones de Errores
- Problemas de guardado de configuración del widget corregidos
- Compatibilidad hacia atrás con instalaciones existentes corregida
- Manejo de valores predeterminados en nuevas instalaciones corregido
- Conflictos CSS con algunos temas de WordPress corregidos
📝 Notas
- Actualización 100% compatible hacia atrás - no se requiere acción
- Las nuevas opciones tienen valores predeterminados que mantienen el comportamiento anterior
- Probado con WordPress 6.7 y PHP 8.3
Mejoras
- Compatibilidad mejorada con WordPress 6.7
- Nuevas opciones de personalización del widget para licencias Pro
- Añadido soporte para fuente OpenDyslexic 3
- Rendimiento del widget optimizado
Correcciones de Errores
- Problema con máscara de lectura en Safari corregido
- Visualización en dispositivos con notch corregida
Nuevas funciones
- Añadido control "Desactivar animaciones"
- Soporte para prefers-reduced-motion
- Modo white label para licencias Enterprise
Nuevas funciones
- Sistema de notificaciones para actualizaciones
- Personalización CSS para Enterprise
- Interfaz móvil mejorada