The accessibility widget adds a toolbar to your website that lets visitors adjust text, colours and navigation. You configure one widget per website, each with its own settings, key and allowed domains, then publish it and paste one script tag on your site.
You need the Accessibility entry on the rail (a11y.widget:read) to open the page, and a11y.widget:write to make changes.
Add a website
Open Accessibility from the rail.
Select Add website, enter a Name (only you see it, for example "Marketing site") and confirm with Add website.
Use the Website selector at the top to switch between websites later.
The page is a settings rail on the left, with two tabs, Design and Share, beside a live preview of your widget on a stand-in page. The preview has desktop and mobile views.
Design the widget
The Design tab has four collapsible sections. A dot marks a value you changed.
- 1Settings
- 2Preview
- 3Publish
| Section | What you set |
|---|---|
| Language & voice | Panel language: Arabic, English or Match the page (follows each page's lang: Arabic pages get Arabic, every other page, including one with no lang, gets English). Launcher position: Right or Left. The Website Reader voice, one Arabic and one English, which you can listen to before publishing. |
| Appearance | Primary colour (if it's too low-contrast to read, the Publish confirmation warns you, and you can still publish) and Corner style: Sharp, Rounded or Soft. |
| Features | Which of the 19 features visitors get. See Accessibility features. |
| Behaviour | Exceptions: CSS selectors the widget must never touch, such as .no-a11y, #cookie-banner. Matching elements aren't restyled, resized, read aloud or magnified. |
The panel language is the widget's own interface. It doesn't translate your page.
Save and publish
The bar at the top shows the state: Unsaved changes, Draft not published or Live. Once the widget has been published, Live reads "Published" with how long ago.
Select Save draft to keep your edits.
Select Publish. The confirmation says visitors start getting the settings within about five minutes, and that unsaved changes are saved first.
Confirm with Publish.
Until you publish, visitors don't see the widget. If the widget is disabled, the snippet stays inactive even after publishing.
Install the snippet
Open the Share tab. The Embed snippet is a script tag with your widget key. Paste it once on every page, just before the closing body tag:
- 1Embed snippet
- 2Allowed domains
<script async
src="https://YOUR-WIDGET-HOST/a11y/js/natiq-a11y-loader.min.js"
data-token="YOUR_WIDGET_KEY"></script>Attributes on the script tag override the dashboard for that page, so leave data-lang and data-position out unless you want to pin them.
Restrict it to your domains
Under Allowed domains, add the sites the widget may run on:
- Enter a hostname such as
example.com, or one wildcard at the start, such as*.example.com. Enter the hostname only, with nohttps://, port or path, and not an IP address. - You can add up to 50 domains.
- Leave the list empty and any site holding the key works. Add a domain and every other site is blocked.
If the key is copied
Listing your domains blocks the widget everywhere else, and Rotate key revokes the copy for good. After rotating, update the snippet everywhere it's installed. The old key keeps working only until caches expire, up to about 15 minutes.
Rename, disable, switch websites
The This website section lets you Rename the site and Disable widget (it stops loading on your site; settings are kept) or Enable widget. If you try to leave with unsaved changes, Natiq asks before discarding them.