Integration

Add the accessibility widget to Joomla.

Output the embed code as a custom module at the end of every page. The reading aids complement your work on an accessible website.

Guide checked on

What you need

A Super User account or a user group whose text filter allows script tags. Your template must output a module position at the end of the page. In Accessonaut, first create a project with your actual website domain and open the installation page in the project.

Step by step

  1. In your user profile, temporarily set the editor to “Editor - None”. The default editor does not allow certain HTML tags such as scripts.
  2. Open System → Site Modules, choose New and the module type “Custom”. Paste the unchanged embed code and hide the module title.
  3. Choose a position at the end of the page. In the default Cassiopeia template, the debug position sits directly before the closing body tag. Under Menu Assignment, choose “On all pages”.
  4. Save the module and switch your editor back. If the page cache is active, clear the Joomla cache and check several public pages.

What the embed looks like

Use the ready-made code from your project. The example needs your real project ID and the publicly reachable service address.

<script src="https://accessonaut.com/widget.js"
  data-project-id="YOUR_PROJECT_ID"
  data-language="en" defer></script>

Match the design to your website

In your Accessonaut project, open “Reading-aid widget”. Five templates and a live preview help you with the design: colours, fonts, menu width, corners, shadows, an icon or labelled opener and your own texts. Position and edge spacing can be set separately for desktop and smartphone. After saving, your existing embed code picks up the project design automatically; the public configuration is cached for up to one minute.

In the WordPress plugin you can choose local settings instead. These take priority over the project design. Design options are available on all plans. On the Free plan, the Accessonaut notice stays visible. Your visitors’ personal reading settings take priority over design defaults.

Keep in mind

By default, only Super Users can save script tags unfiltered. For other groups, the text filters in the Global Configuration remove such tags. Other templates name their module positions differently; check the position after every template change. Do not edit the Cassiopeia files directly, as updates overwrite them.

Common questions about Joomla

What do I need to consider on a multilingual site?

Set the module’s Language field to “All”. Otherwise the module only appears in one language. With data-language="auto", the widget follows the page’s lang attribute. It speaks German, English and Spanish.

Why don’t I see changes straight away?

If the “System - Page Cache” plugin is active, Joomla serves cached pages. According to Joomla, a content change does not clear this cache automatically. So clear the cache under System → Maintenance → Clear Cache.

What do I need to do with a Content Security Policy?

Joomla ships CSP options, switched off by default. Depending on the version, you find them in the “System - HTTP Headers” plugin or in the Content Security Policy options. Add your service address to script-src and connect-src. The widget inserts style elements without a nonce; style-src must allow inline styles. Test in report-only mode first.

How do I remove the widget again?

Unpublish the module or move it to the trash. Empty the trash if you want to delete it for good. Then clear the page cache.

If something does not work

The module only contains text, and the script is missing from the source.

Cause: The editor or your user group’s text filter removed the script tag.

Fix: Switch the editor to “Editor - None”, paste the code again and save as Super User. Check the text filters in the Global Configuration.

The widget only appears on some pages.

Cause: The module’s menu assignment is restricted, or the Language field is set to a single language.

Fix: Set the menu assignment to “On all pages” and the language to “All”.

The widget is gone after switching templates.

Cause: The new template does not know the selected module position.

Fix: Assign the module to a position at the end of the page in the new template.

Check the installation

  • Open the public website in a private window. The widget appears exactly once.
  • Reach the button with the keyboard. Open the panel, change the text size and close it again.
  • Check the homepage, a subpage, a form and the mobile view. The widget must not cover any important controls.
  • In the Network tab, check that widget.js and the project configuration load from your service address. If there are errors, check the domain, project ID and CSP.
  • For Free projects, the visible Accessonaut notice remains part of the widget. Permissions come from your project.

Privacy and limits

When it loads, the visitor’s browser fetches the script and the project configuration from the Accessonaut service. This involves the IP address, browser request data and the website hostname. Display preferences are stored locally in the browser. Cover the integration in your privacy notice and check your specific configuration.

The reading aids do not guarantee conformance. Also check barriers in the source code and complete user journeys, both automatically and manually.

Official platform documentation

Joomla: Site module “Custom”

Practical knowledge for your next steps

All articles in the knowledge base