Accessibility widget Svelte

You wrap the application in the AccessibilityProvider component with the site token; it loads the widget once for all views. The accessibilityStore store gives any component the widget's instance and whether it is ready.

What the widget offers

Visitors open the widget with its button and adjust the page to their needs:

• contrast, colours and saturation,
• text size, letter spacing and line height,
• a font for people with dyslexia and reading aloud,
• turning animations off and a larger cursor,
• ready-made profiles, among others for people who are blind or have low vision, colour blindness, dyslexia, epilepsy or ADHD.

Simple setup

The code carries only the site token. The widget's look, the accessibility options and the accessibility statement are set in your DockAccess account, so changing them never means editing the code again.

Privacy

The widget collects no personal data of visitors. Only the IP address and the user agent are recorded to count views.

For your visitors

The widget appears on every page of the application inside the provider. Visitors open it with its button or with Ctrl + U, and the widget remembers their choices on the next visit.

Settings in your account

In your DockAccess account, pick the site in My sites and open its Accessibility widget tab. There you set the colours, the position and size of the button (also separately for narrow screens), the maximum zoom, the features and profiles on offer, your own selectors and the accessibility statement. The preview shows a change before you save it, and the package does not have to be installed again.

Domains and the limit

The widget works on the domains of the site in your account, so add every address the website runs under. The free plan covers 5,000 widget views a month for all the sites of the account. Once they are used up, the widget does not show until the 1st of the next month or until a plan with a higher limit is active.

Control it from code

In a component, $accessibilityStore.accessibility is the instance once $accessibilityStore.ready is true. Through it you change the settings, for example setContrast(true), setFontSize(4), setLanguage("en") or resetAll(), and listen to the widget, for example with onMenuOpen(). The widget also sends events when an option, the profile or the language changes and when its menu opens or closes; the Knowledge base articles tab lists them.