Skip to main content
The accessibility widget adds a button to a corner of your site. It opens a panel where a visitor can change how the page looks for them: text size, a readable font, line and letter spacing, text alignment, dark, light, high-contrast or inverted colours, saturation, highlighted links, headings, focus and hover, a large cursor, a reading guide, stopped animations, hidden images and muted sounds. It is free on every plan.
The widget changes how the page looks for the visitor who asks. It does not find or fix accessibility problems, and installing it does not make your site conform to WCAG, EN 301 549 or the European Accessibility Act. To find real problems, use the accessibility results from your scans.

​
Prerequisites

  • A domain added in Katla. The widget does not need a completed scan.

​
Installation

Open your site’s Accessibility page in the dashboard and choose Install widget. Pick a corner, add your statement and feedback links, and copy the tag. The dialog shows a live preview of the real widget. Paste the tag once on every page, just before </body>:
The widget sets no cookies and blocks nothing, so it does not have to come first on the page and does not wait for consent. Keep it a plain <script> tag: it reads its settings from its own attributes, so bundling it or loading it as a module drops them. If Katla’s consent banner is in the same corner, the button stacks above it.

​
Options

The European Accessibility Act expects a site to publish an accessibility statement and a way to report barriers. The two links appear at the bottom of the panel, where a visitor who has just hit a barrier will look.

​
Colours

The widget uses your site’s branding: your primary colour for the button, and your background and text colours for the panel. These are the same colours as your cookie banner, set on the site’s Appearance page, so the two always match. Change them there and the widget follows, without touching the tag. Until you set branding, it uses Katla violet. Your branding has light and dark colours, and the widget uses both the same way the banner does. If the banner’s theme is System, the panel follows each visitor’s light or dark setting. If it is set to always light or always dark, the widget is too. A site whose own theme toggle puts a dark or light class on <html> is followed as well. The icon on the button switches between white and dark to stay readable on your colour, and links in the panel are lightened or darkened until they are readable on it. To give the widget different colours from your banner, set data-accent, or theme and darkTheme in window.KatlaA11y below. Colours on the page override your branding and no longer follow it. If you set theme without darkTheme, the widget stays light so your colours are used, unless you also set mode.

​
Labels, colours and language

The panel is in English by default. To translate it, or to override the panel colours for this page, declare window.KatlaA11y in a script above the tag:
Anything set there wins over the attributes. Only the labels you pass change. The same object also takes site, position, mode, shortcut, skipLink, statementUrl and feedbackUrl. Colours must be hex. If your footer already has an “Accessibility” link, point it at the panel instead of adding a second control:

​
Keyboard access

A visually hidden “Accessibility settings” button is the first tab stop on every page, so a keyboard user does not have to tab through the whole site to reach it. Alt + Shift + A opens the panel from anywhere, and Escape closes it.

​
What is stored

A visitor’s choices are saved in their browser’s localStorage under katla-a11y. They are not a cookie, never leave the device, and need no consent. Visitors who have reduce motion or increase contrast switched on in their system settings start with those options already selected.

​
Branding

On the Free and Starter plans the panel shows a “Powered by Katla” line. Pro and above drop it. The tag is the same on every plan.

​
Content Security Policy

Allow https://cdn.katla.app in both script-src and connect-src.

​
Installing with an AI agent

With the Katla MCP server connected, ask your agent to add the accessibility widget. It reads the katla-accessibility-widget skill and gets the tag from katla_get_accessibility_widget_snippet, so it uses your real site ID and settings.