Lo que necesitas
Contao 5.7 o 5.3 LTS o Contao 6.0 con la versión de PHP correspondiente, el Contao Manager o Composer y una cuenta de backend que pueda editar las páginas raíz del sitio web. Para Contao 4.13, usa la inserción manual de las preguntas más abajo. En Accessonaut, crea primero un proyecto con el dominio real de tu web y abre en el proyecto la página de instalación.
Paso a paso
- Instala el bundle desde la sección «El bundle de Contao» más abajo, en el Contao Manager o con Composer.
- Actualiza la base de datos cuando el Contao Manager te lo pida o ejecuta
vendor/bin/contao-console contao:migrate. El bundle añade cuatro campos a la página raíz del sitio web. - En el backend, abre Contenido → Páginas y edita la página raíz del sitio web. En la sección «Ayudas de lectura de Accessonaut», marca «Activar el widget y la conexión con el servicio».
- Introduce el ID público del proyecto de la página de instalación de tu proyecto de Accessonaut y mantén la dirección del servicio https://accessonaut.com. Lee el aviso sobre el servicio externo y guarda. Repite esto en cada página raíz que deba mostrar el widget. Después revisa varias subpáginas públicas en una ventana privada.
El bundle de Contao
El bundle «accessonaut/contao-accessibility» inserta el script por ti, sin cambios en los diseños de página ni en las plantillas. Funciona con Contao 5.7 y 5.3 LTS, así como con 6.0, y empieza desactivado en cada página raíz del sitio web. Solo cuando lo activas e introduces un ID de proyecto válido, el navegador carga algo del servicio. Cada sitio web de una instalación tiene sus propios ajustes. El widget nunca aparece en el backend.
accessonaut-contao-1.0.0.zip
Suma de comprobación SHA-256 · Licencia: GPLv2 o posterior
La inclusión en Packagist y en la lista de extensiones de Contao está preparada. Hasta entonces, sube el archivo ZIP en el Contao Manager en Paquetes → «Subir paquetes», elige «Confirmar subidas» y después «Aplicar cambios». Con Composer lo instalas como paquete local:
mkdir -p packages
cp ~/Downloads/accessonaut-contao-1.0.0.zip packages/
composer config repositories.accessonaut artifact ./packages
composer require accessonaut/contao-accessibility:^1.0
vendor/bin/contao-console contao:migrateSin la extensión o el bundle puedes seguir insertando tú mismo el código de inserción. Aparece en la sección siguiente; las preguntas frecuentes más abajo explican cómo hacerlo.
Así es la inserción
Usa el código listo de tu proyecto. El ejemplo necesita tu ID de proyecto real y la dirección del servicio accesible públicamente.
<script src="https://accessonaut.com/widget.js"
data-project-id="TU_ID_DE_PROYECTO"
data-language="es" defer></script>Adapta el diseño a tu web
En tu proyecto de Accessonaut, abre «Widget de ayudas de lectura». Cinco plantillas y una vista previa en directo te ayudan con el diseño: colores, tipografías, ancho del menú, esquinas, sombras, icono o botón de apertura con texto y textos propios. La posición y los márgenes se ajustan por separado para escritorio y smartphone. Al guardar, tu código de inserción actual adopta automáticamente el diseño del proyecto; la configuración pública se guarda en caché hasta un minuto.
En el plugin de WordPress puedes elegir ajustes locales en su lugar. Estos tienen prioridad sobre el diseño del proyecto. El diseño está disponible en todos los planes. En el plan Free, el aviso de Accessonaut sigue visible. Los ajustes de lectura personales de tus visitantes tienen prioridad sobre las indicaciones de diseño.
Ten en cuenta
Usa un único método de instalación y elimina el código de inserción del código JavaScript propio de tus diseños de página. Si el bundle ya encuentra en una página un script del mismo servicio, no añade un segundo. Inserta el script en la página terminada y por eso no necesita ningún campo en el diseño de página, tampoco con diseños Twig. Los proxies y las CDN intermedios debes vaciarlos tú.
Preguntas frecuentes sobre Contao
¿Cómo integro el widget sin el bundle?
Abre Diseño → Themes y los diseños de página de tu tema. En la sección JavaScript, pega el código de inserción sin cambios en el campo de código JavaScript propio; Contao lo muestra al final de la página. Si tus páginas usan varios diseños, añádelo exactamente una vez en cada uno. El tipo de diseño Twig con slots no tiene ese campo. Esto también vale para Contao 4.13.
¿Qué pasa con varias webs en una misma instalación?
Cada página raíz tiene sus propios ajustes de Accessonaut. Si las webs usan dominios distintos, cada una necesita su propio proyecto de Accessonaut. Introduce su ID de proyecto en la página raíz correspondiente. Las webs sin la casilla marcada no muestran el widget.
¿Qué hago con la Content Security Policy de Contao?
A partir de Contao 5.3, activas la CSP en la página raíz de la web. El campo de la Content Security Policy contiene la cabecera completa. Añade la dirección de tu servicio en script-src y connect-src. El widget inserta elementos style sin nonce; style-src debe permitir estilos incrustados. Prueba primero con el modo de solo informe.
¿Tengo que vaciar la caché después de guardar?
Normalmente no. Contao vincula las páginas en caché con sus páginas superiores. Si guardas la página raíz, Contao descarta de la caché compartida las páginas de esa web. Los proxies y las CDN intermedios los vacías por separado.
¿Cómo vuelvo a quitar el widget?
Desmarca la casilla en la página raíz y guarda. Si quieres eliminar el bundle por completo, desinstálalo en el Contao Manager o con composer remove accessonaut/contao-accessibility. Después, la actualización de la base de datos ofrece borrar los cuatro campos. Elimina también las entradas de CSP que añadiste solo para el widget.
Si algo no funciona
Falta el widget.
Causa: La casilla no está marcada en la página raíz de este dominio, el ID del proyecto tiene un formato no válido o una caché intermedia sigue sirviendo la página antigua.
Solución: Revisa los campos de la página raíz correcta. El ID del proyecto tiene entre 20 y 40 letras minúsculas y cifras. Vacía los proxies y las CDN.
La consola del navegador muestra una infracción de CSP.
Causa: La CSP de la página raíz no permite la dirección de tu servicio o los estilos del widget.
Solución: Añade la fuente que falta en la directiva indicada y guarda la página raíz.
Una inserción anterior sigue funcionando y los cambios en el bundle no surten efecto.
Causa: El código de inserción sigue en el código JavaScript propio de un diseño de página. El bundle no añade entonces un segundo script.
Solución: Borra el código de inserción antiguo de todos los diseños de página y guárdalos.
Comprueba la instalación
- Abre la web pública en una ventana privada. El widget se muestra exactamente una vez.
- Llega al botón con el teclado. Abre el panel, cambia el tamaño del texto y vuelve a cerrarlo.
- Revisa la página de inicio, una subpágina, un formulario y la vista móvil. El widget no debe tapar ningún control importante.
- En la pestaña Red, comprueba que widget.js y la configuración del proyecto se cargan desde la dirección de tu servicio. Si hay errores, revisa el dominio, el ID del proyecto y la CSP.
- En los proyectos Free, el aviso visible de Accessonaut sigue formando parte del widget. Los permisos dependen de tu proyecto.
Privacidad y límites
Al cargarse, el navegador del visitante obtiene el script y la configuración del proyecto del servicio de Accessonaut. Con ello se tratan la dirección IP, los datos de la solicitud del navegador y el nombre de host de la web. Las preferencias de visualización se guardan localmente en el navegador. Ten en cuenta la integración en tu política de privacidad y revisa tu configuración concreta.
Las ayudas de lectura no garantizan la conformidad. Revisa además las barreras en el código fuente y los recorridos completos de los usuarios, de forma automática y manual.