BOTÓN DE ACCESIBILIDAD
Laboratorio de Tecnologías Inclusivas · SCyT · Chubut
Versión 1.1

======================================================================
QUÉ HAY EN ESTA CARPETA
======================================================================

  accesibilidad-lti.js ... el botón (necesario si lo subís a tu sitio)
  accesibilidad-lti.min.js ... el mismo botón, en una versión más liviana
  ejemplo.html ........... una página de prueba: abrila con doble clic
                           para ver cómo funciona
  ejemplo-min.html ....... una página de prueba con la versión más
                           liviana: abrila con doble clic
  ejemplo-cdn.html ....... una página de prueba que carga el botón
                           desde internet: abrila con doble clic
  CÓMO INSTALAR.txt ...... estas instrucciones


======================================================================
INSTALACIÓN EN 2 PASOS (subiendo el archivo a tu sitio)
======================================================================

1) Subí el archivo "accesibilidad-lti.js" a tu sitio web, en la misma
   carpeta donde están tus páginas (con el administrador de archivos
   de tu hosting o por FTP).

2) En cada página donde quieras el botón, pegá esta línea justo antes
   de </body>:

      <script src="accesibilidad-lti.js" defer></script>

   Si pusiste el archivo en otra carpeta, cambiá la ruta. Por ejemplo:

      <script src="/js/accesibilidad-lti.js" defer></script>

Listo. El botón de accesibilidad (un círculo verde azulado) aparece abajo
a la derecha de la página.


======================================================================
INSTALACIÓN CON LA VERSIÓN MINIFICADA (más liviana)
======================================================================

El archivo "accesibilidad-lti.min.js" tiene las mismas funciones que
"accesibilidad-lti.js", pero ocupa menos espacio. Podés usar cualquiera
de los dos; no hace falta cargar ambos.

1) Subí "accesibilidad-lti.min.js" a tu sitio web, en la misma carpeta
   donde están tus páginas.

2) En cada página donde quieras el botón, pegá esta línea justo antes
   de </body>:

      <script src="accesibilidad-lti.min.js" defer></script>

   Si pusiste el archivo en otra carpeta, cambiá la ruta. Por ejemplo:

      <script src="/js/accesibilidad-lti.min.js" defer></script>

Para probarlo, abrí "ejemplo-min.html" con doble clic.
Si después modificás el archivo original, volvé a generar la versión
minificada para que los dos tengan los mismos cambios.


======================================================================
INSTALACIÓN CON CDN (sin subir el archivo a tu sitio)
======================================================================

Si preferís cargar el botón desde internet, en cada página donde lo
quieras pegá esta línea justo antes de </body>:

      <script src="https://sisciencia.chubut.gov.ar/static/js/accesibilidad-lti.min.js" charset="utf-8" defer></script>

Listo. No hace falta subir el archivo "accesibilidad-lti.js" o su versión minificada a tu sitio.
El botón se carga desde el servidor de la Secretaría de Ciencia y
Tecnología del Chubut, así que necesitás conexión a internet y que
ese servidor esté disponible.

Para probarlo, abrí "ejemplo-cdn.html" con doble clic.
Elegí una sola forma de instalación: si usás el CDN, no agregues
también la línea que carga el archivo de tu sitio.


======================================================================
SI TU SITIO ES WORDPRESS (u otro sistema donde no podés subir .js)
======================================================================

1) Instalá un plugin para agregar código, por ejemplo "WPCode"
   (Insert Headers and Footers).
2) Creá un fragmento nuevo para el PIE de página (Footer).
3) Pegá la línea completa del apartado "INSTALACIÓN CON CDN".
   Si preferís usar el contenido del archivo, escribí <script>, pegá
   debajo TODO el contenido de accesibilidad-lti.js (abrilo con el
   Bloc de notas, Ctrl+A, Ctrl+C) y terminá con </script>. Queda así:

      <script>
      ... todo el contenido del archivo ...
      </script>

4) Guardá y activá el fragmento.


======================================================================
OPCIONES (no son obligatorias)
======================================================================

Se agregan dentro de la misma línea <script> que usaste para instalar
el botón. Los ejemplos usan el archivo de tu sitio; si usás la versión
minificada, cambiá el nombre por accesibilidad-lti.min.js. Si usás el
CDN, conservá la dirección completa, charset="utf-8" y defer, y agregá
la opción en esa misma línea:

  Esquina inicial del botón (abajo-derecha, abajo-izquierda,
  arriba-derecha o arriba-izquierda):
      <script src="accesibilidad-lti.js" data-posicion="abajo-izquierda" defer></script>

  Igual, cada persona puede moverlo a otra esquina: haciendo clic en
  el botón y usando las flechas del teclado, o desde el panel en
  "Mis preferencias > Posición del botón".

  Compartir las preferencias entre varios sitios del mismo dominio
  (por ejemplo, todas las páginas terminadas en chubut.gov.ar):
      <script src="accesibilidad-lti.js" data-dominio="chubut.gov.ar" defer></script>


======================================================================
QUÉ HACE EL BOTÓN
======================================================================

- Perfiles rápidos: Baja visión, Dislexia, Concentración y
  Lectura asistida (narrador por voz).
- Texto: tamaño, espaciado, fuente legible o para dislexia,
  alinear a la izquierda.
- Color: contraste oscuro/claro, corrección de daltonismo,
  saturación, fondo crema.
- Navegación: resaltar enlaces y títulos, foco del teclado,
  cursor grande, guía o máscara de lectura.
- Contenido: detener animaciones, ocultar imágenes y subtítulos en
  videos (ver más abajo).
- Las opciones que elige cada persona se guardan en su navegador
  y se aplican solas la próxima vez que entra.
- El botón se puede llevar a cualquiera de las 4 esquinas de la pantalla
  para que no tape lo que se está leyendo (flechas del teclado o panel).
- Atajo de teclado: Alt + A abre y cierra el menú.


======================================================================
SUBTÍTULOS EN VIDEOS
======================================================================

Con la opción "Subtítulos en videos" activada:

1. Si el video ya tiene subtítulos, se muestran más grandes y en blanco
   sobre negro.
   Truco: para agregarle subtítulos a un video sin tocar la página,
   subí un archivo .vtt con el mismo nombre al lado del video.
   Ejemplo: charla.mp4  ->  charla.vtt  (o charla.es.vtt)

2. Los videos de YouTube y Vimeo muestran sus subtítulos en español.

3. Los videos propios sin subtítulos reciben subtítulos automáticos
   en vivo mientras se reproducen, con el reconocimiento de voz del
   navegador. No descarga nada, pero:
   - funciona en Google Chrome actualizado, con internet;
   - en Microsoft Edge no se usa, porque su reconocedor de voz
     escribe texto equivocado: ahí se ofrecen los Subtítulos en vivo
     de Windows (ver punto 4);
   - el audio del video se procesa en el servicio de voz de Google
     (debajo del video aparece un aviso);
   - pueden tener errores. Para videos importantes conviene publicar
     un .vtt revisado (programas gratuitos: Buzz o Subtitle Edit).

4. Si no se puede (Edge, Firefox o videos de otros sitios), se explica cómo
   activar los Subtítulos en vivo del sistema (Windows 11: tecla
   Windows + Ctrl + L).


======================================================================
PARA TENER EN CUENTA
======================================================================

- El narrador usa las voces del navegador. La voz argentina "Elena"
  está en Microsoft Edge. En Chrome se usa "Google español".
- Las tipografías se cargan desde Google Fonts, así que la página
  necesita conexión a internet.
- Este botón complementa, pero no reemplaza, que la página esté
  hecha de forma accesible (pautas WCAG 2.2).

Consultas: Laboratorio de Tecnologías Inclusivas
Secretaría de Ciencia y Tecnología del Chubut