Funcionalidades
9 herramientas de accesibilidad integradas en un solo widget
Tamaño de texto
Aumenta o reduce el tamaño de la fuente de toda la página. De -6px hasta +12px.
Alto contraste
Incrementa el contraste de la página para facilitar la lectura a personas con baja visión.
Escala de grises
Convierte la página a escala de grises, útil para personas con sensibilidad al color.
Subrayar enlaces
Subraya todos los enlaces para que sean fácilmente identificables en el contenido.
Tipografía legible
Cambia la fuente a OpenDyslexic, diseñada para facilitar la lectura a personas con dislexia.
Cursor grande
Aumenta el tamaño del cursor del ratón para que sea más visible en pantalla.
Detener animaciones
Pausa todas las animaciones y transiciones de la página para reducir estímulos visuales.
Guía de lectura
Muestra una línea horizontal que sigue al ratón, ayudando a mantener el enfoque en la línea de lectura.
Espaciado de texto
Aumenta el espaciado entre letras, palabras y líneas para mejorar la legibilidad del texto.
Características Técnicas
Ligero
Un solo archivo JavaScript (~15KB). Sin dependencias externas. No necesita jQuery, Bootstrap ni frameworks.
Persistente
Las preferencias del usuario se guardan en localStorage y se aplican automáticamente en cada visita.
Accesible
Compatible con lectores de pantalla (ARIA). Navegación por teclado. Focus trap. Respeta prefers-reduced-motion.
Responsivo
Se adapta a cualquier pantalla. Optimizado para móviles y tabletas.
Sin conflictos
Estilos encapsulados con ID único. No interfiere con los estilos de tu sitio.
Print-ready
Se oculta automáticamente al imprimir. No afecta documentos PDF ni impresiones.
Pruébalo ahora
El widget ya está activo en esta página. Búscalo en la esquina inferior derecha.
Texto de ejemplo
Este es un párrafo de ejemplo para que pruebes las diferentes opciones de accesibilidad. Ajusta el tamaño de fuente, activa el alto contraste o la guía de lectura y observa cómo cambia este contenido.
La accesibilidad web es un derecho fundamental. Todas las personas deben poder navegar e interactuar con la información en línea sin barreras.
Haz clic en el botón ♿ de la esquina inferior derecha para probar el widget
Instalación
Integra el widget en tu sitio web en menos de un minuto
Opción A: Cargar desde UNAPDI (recomendado)
Copia y pega esta línea antes del cierre de </body> en tu HTML:
<script src="https://unapdi.unam.mx/js/unapdi-accesibilidad.js"></script>
Opción B: Descargar y alojar tú mismo
Descarga el archivo, súbelo a tu servidor, y referéncialo:
<!-- Ajusta la ruta al archivo en tu servidor -->
<script src="/ruta/a/unapdi-accesibilidad.js"></script>
¡Listo!
No se requiere configuración adicional. El widget aparecerá automáticamente en la esquina inferior derecha de tu sitio. Las preferencias de los usuarios se guardan automáticamente.
Ejemplo completo
Así se ve un HTML mínimo con el widget integrado
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mi sitio web</title>
</head>
<body>
<h1>Bienvenido a mi sitio</h1>
<p>Contenido de ejemplo...</p>
<!-- Widget de Accesibilidad UNAPDI -->
<script src="https://unapdi.unam.mx/js/unapdi-accesibilidad.js"></script>
</body>
</html>
Preguntas Frecuentes
#unapdi-acc-widget), por lo que no interfieren con tus estilos. Las clases de accesibilidad solo se aplican cuando el usuario las activa explícitamente.
localStorage del navegador. Cuando el usuario regresa a tu sitio, sus opciones de accesibilidad se aplican automáticamente. Los datos se guardan exclusivamente en el navegador del usuario — no se envía nada a ningún servidor.
Haz tu sitio más accesible hoy
La accesibilidad web es un derecho, no un privilegio.
Con una línea de código puedes hacer la diferencia.