Accessibility widget with flexible design

Try the reading aids yourself

Open the “Reading tools” button at the bottom right or press Alt + A. Choose a profile or click through the levels of text size, contrast and reading guide. Under “Page” you jump straight to any heading. “Reset all settings” restores the original display.

The display adjustments complement an accessible website. They do not replace fixing barriers in the source code.

Three areas: Profiles, Adjust and Page

The “Reading tools” launcher appears at the bottom right of every page with the widget by default. With Alt + A you can also open and close the menu from the keyboard; Esc closes it. The menu opens on the “Adjust” tab.

ProfilesSix profiles for typical needs, on their own or combined.
AdjustStart view27 tiles in three groups plus fine-tuning.
PagePage headings, reading selected text aloud and your browser assistant.

Tiles with levels

Each click on a tile moves it up one level; after the last level it switches off again. Small bars show the current level, and screen readers announce the state, for example “Level 2 of 3”. Tiles such as Contrast or Pointer switch between named variants.

Text

Text size3 levels
Line height3 levels
Spacing3 levels
Readable fontClear, Mono
HeadingsOn or Off
LinksUnderlined, Highlighted
Bold textOn or Off
Paragraphs3 levels
Text widthOn or Off

Colors & media

ContrastHigh, Dark, Light, Inverted
SaturationMuted, Monochrome
Images offDecorative, All
Dim2 levels
Grey imagesOn or Off
Image textOn or Off
MediaPaused, Silent
Backgrounds offOn or Off
Less transparencyOn or Off

Orientation

Reading guideLine, Mask
Animations offOn or Off
FocusOutline, Dim others
StructureOn or Off
ControlsButtons, All
PointerLarge, Dark, Light
Skip linkOn or Off
LabelsOn or Off
Calm scrollingOn or Off

Six profiles for typical needs

A profile switches on several suitable settings at once. You can combine profiles and then adjust each tile individually; the switch shows whether all settings of a profile are still active.

Low vision: Larger text, high contrast and a clear focus
Dyslexia: Readable font, more line and letter spacing, reading guide
ADHD: Reading mask, calm backgrounds, no animations
Epilepsy and seizures: Stops animations and media, calm scrolling
Motor impairments: Clear focus, skip link, highlighted buttons and fields
Less color: Muted colors, links easy to spot

With “Follow system preferences”, the widget uses reduced motion and increased contrast from the operating system and responds when these settings change.

Fine-tuning for precise values

The fine-tuning section at the end of the “Adjust” tab contains seven sliders: text size, line spacing, letter spacing, word spacing, paragraph spacing, color saturation and brightness. There is also text alignment and the “More text spacing” switch for letter, word and line spacing as in WCAG 1.4.12.

Visitors can also change how the menu looks for them there: a light, dark or automatic menu theme, the icon and the position of the launcher.

Page: headings and reading aloud

The “Page” tab shows all headings on the current page; one click jumps straight to the section. The browser reads selected text aloud with a local voice if it supports this feature.

“Reset all settings” restores the original display. The selection is only stored in the visitor’s browser. The website’s existing settings are restored when the widget is removed.

German, English, Spanish and your design

The menu detects German, English and Spanish from the page language and lets visitors choose their own language. Five design templates and a live preview help you match the widget to your brand. Customise colours, font, menu width, corners and shadows. Choose an icon or a labelled launcher and your own menu texts. Four positions and separate edge spacing for desktop and smartphone leave room for navigation and cookie banners.

Save your design in the project so that every page with the widget picks it up automatically. In the WordPress plugin you can also design locally. All design options are available on the Free plan; the Accessonaut brand link stays visible there. Visitors can save their personal reading settings in their own browser. These take precedence over design settings. Illegible colour combinations are adjusted for display.

Add approved image descriptions

Scans record missing image descriptions in the workspace. You review suggestions or write your own texts and explicitly approve them. Only when you switch on publishing does the widget add matching missing alt attributes on the registered website. If you also activate the separate automation in the workspace, new suggestions explicitly marked as unreviewed can be applied there without individual approval; this setting is off by default.

Page, finding and image source must match. Existing alt attributes are kept, including empty descriptions for decorative images. Adding a description later in the browser does not replace a permanent fix in the CMS and can behave differently from text already present in the HTML.

See saved findings right on your website

Account owners and administrators can create a personal authorisation for the browser assistant in the workspace. On the website you start it explicitly in the widget, which opens the “Page” tab for it. It shows the saved findings of the last completed scan for the current page and highlights elements that can still be found.

The one-time authorisation is valid for ten minutes and only for the exact registered origin, i.e. protocol, hostname and port. The following session lasts at most 30 minutes and stays in the memory of the open tab. Private findings do not appear in the public widget configuration. Changed or removed elements may no longer be found; start a new scan if needed.

Fix barriers at the source

The widget offers personal display options and does not automatically make all content or all processes accessible. Faulty forms, incomprehensible texts, inaccessible documents and missing controls must be fixed in the source code or in the original. Complement automated scans with manual keyboard and screen reader tests.

Add it to your system

There is a plugin for WordPress and WooCommerce. On every other system, you add the embed code once to the shared layout. Choose your system for the matching step-by-step guide.

Install

One script. Optional reading aids.

Add the code before the closing body tag of your website. The widget offers personal display options and does not replace fixing barriers in the source code.

HTML · before </body>

Preparing snippet…

Free shows a visible Accessonaut link; with an active Standard, Pro or Business plan the widget branding is removed automatically. The reading aid loads the plan configuration without cookies. Its settings stay in the browser.

Guide for your platform

Accessibility widget for personal reading aids