OpenAccessible

Setup guide

What is Open Accessible?

Open Accessible is a lightweight accessibility widget that adds an on-page control panel so visitors can adjust how they see and use your site — without changing your core design. It helps you reach more users and align with WCAG-oriented best practices.

The widget appears as a small icon (usually in a corner). When users click it, they get options for text size, contrast, navigation aids, and more. Settings can be remembered in the browser so returning visitors keep their preferences.

Everything is on GitHub. Widget source, Shopify and WordPress integrations, docs, and install files all live in the OpenAccessible organization. Use jsDelivr to load from GitHub, or download and self-host.

Features at a glance

  • Text adjustments (font size, readability)
  • Contrast controls and high-contrast mode
  • Navigation aids (cursor, link highlighting, focus indicators)
  • Optional: dark mode, text-to-speech, dyslexia-friendly fonts

Quick links by platform

  • Normal / HTML — jsDelivr CDN or download from GitHub
  • Shopify — Upload asset, add snippet, render in theme
  • WordPress — Plugin or script in your theme
  • WooCommerce — Open Accessibility plugin on WordPress

Dictionary API

If your integration uses the dictionary feature (e.g. lookups when users double-click a word), you may need API access. Open-source projects can get free access after approval; otherwise paid plans apply.

How open-source projects request free API access

  1. Go to openaccessible.com/dashboard, then open Key gen.
  2. Choose Mark as open source project and enter your project’s github.com/ link (e.g. https://github.com/YourOrg/YourRepo).
  3. Make sure the repository is active (public and maintained).
  4. Submit the request. An admin will manually review it; once approved, your project gets free API access.

Non–open-source projects can create and manage API keys from the same dashboard; paid plans apply.

Other APIs & tools

ARIA label API

Generate or improve ARIA labels and accessible names for UI elements. Manage access and usage from the dashboard.

Dashboard

Scanner

Scan pages or sites for accessibility issues. Use the scanner to find and fix problems; configure and run scans from the dashboard.

Dashboard

Normal / HTML websites

Plain HTML, static sites, or any site where you can edit the page or layout.

You can load OpenAccessible via jsDelivr (CDN, no download) or download the files from GitHub and host them yourself. One script is enough; no build step or backend required.

1 Option A: jsDelivr CDN (recommended)

Load the widget from jsDelivr (served from GitHub). Add before the closing </body>:

<script src="https://cdn.jsdelivr.net/gh/OpenAccessible/OpenAccessible@main/openaccessible.js"></script>

Replace @main with a release tag (e.g. @1.0.0) to pin a version.

2 Option B: Download from GitHub

Download or clone the repo, then serve the script from your own site. Add before the closing </body> (adjust the path to where you put the file):

<script src="/path/to/openaccessible.js"></script>

Get the files from the main repo:

github.com/OpenAccessible/OpenAccessible

3 Option C: CSS + JS (jsDelivr or GitHub)

If you need the split CSS and JS build, add before the closing </head>. Via jsDelivr:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/OpenAccessible/OpenAccessible@main/src/open-accessible-widget.css">
<script src="https://cdn.jsdelivr.net/gh/OpenAccessible/OpenAccessible@main/src/open-accessible-widget.js"></script>

Or download those files from the repo and host them yourself; then point href and src to your paths.

Where to add the code

  • Single HTML file: paste in the same file as above.
  • Multiple pages: add to your shared layout (e.g. base.html, layout.html).
  • Static site generators (Jekyll, Hugo, Eleventy): add in the default layout.

Tip

If the widget doesn’t appear, check that the script URL loads (e.g. in the Network tab of your browser’s dev tools) and that no content security policy or script blocker is blocking it.

How to install the widget on your Shopify store

Get the widget files from the live repo:

github.com/OpenAccessible/Shopify

You will need two files: openaccessible.js and openaccessible.liquid. Follow the steps below to add the widget to every page of your store.

Open theme code

  • Go to your Shopify Admin.
  • Click Online Store, then Themes.
  • Make a duplicate of your theme for testing.
  • Find your active theme and click the three dots next to it.
  • Click Edit code.

Add the JavaScript file

  • In the left panel, find the folder called Assets.
  • Click Add a new asset.
  • Upload the file called openaccessible.js.

Create the snippet

  • In the left panel, find the folder called Snippets.
  • Click Add a new snippet.
  • Name it: openaccessible
  • Paste the full content of the file called openaccessible.liquid into it.
  • Click Save.

Add the snippet to your layout

  • In the left panel, find the file Layout → theme.liquid.
  • Click on it.
  • Scroll to the bottom of the file.
  • Find the line that says </body>
  • Just above that line, paste this:
{% render 'openaccessible' %}

Click Save.

Test the widget

  • Visit your store website.
  • You should see a small round icon in the bottom-right corner of the screen.
  • Click it to open the accessibility panel.
  • Double-click any word on the page to test the dictionary.

That’s it — the widget is now live on every page of your store.

Troubleshooting

If the icon doesn’t appear, confirm the snippet name is exactly openaccessible (no spaces) and that you added
{% render 'openaccessible' %} above </body> in theme.liquid. Clear your browser cache and reload the store.

WordPress

For WordPress sites (blogs, business sites, portfolios). Use the free plugin or add the widget script in your theme.

The widget will appear across your site. If you run a WooCommerce store, see the WooCommerce section for store-specific details.

Plugin source and install files on GitHub:

github.com/OpenAccessible/WordPress

Install the Open Accessibility plugin

In WordPress admin go to Plugins → Add New. Search for Open Accessibility (by Adam Greenwell). Click Install Now, then Activate.

Or download from WordPress.org and upload the zip via Plugins → Add New → Upload Plugin.

Configure the widget

A new Accessibility menu appears in the admin sidebar. Open it to set the widget position (e.g. bottom right), which features to show, and appearance. Save your settings — the widget will appear on the front end.

Script-only (no plugin)

If you prefer not to use the plugin, add the widget script in your theme's header.php or footer.php (use a child theme). jsDelivr or self-hosted:

<script src="https://cdn.jsdelivr.net/gh/OpenAccessible/OpenAccessible@main/openaccessible.js"></script>

The plugin is recommended for an admin UI and the accessibility statement tool.

WooCommerce

WooCommerce runs on WordPress. Use the same free Open Accessibility plugin; it adds the widget across your whole site, including shop, product, cart, and checkout pages.

The plugin adds the widget across your whole site — including shop, product, cart, and checkout pages — with an admin panel to control position and features.

Plugin source and install files on GitHub:

github.com/OpenAccessible/WooCommerce

Install the plugin

In WordPress admin go to Plugins → Add New. Search for Open Accessibility (by Adam Greenwell). Click Install Now, then Activate.

Or download from WordPress.org and upload the zip via Plugins → Add New → Upload Plugin.

Configure the widget

A new Accessibility menu appears in the admin sidebar. Open it to set the widget position (e.g. bottom right), which features to show, and appearance. Save your settings — the widget will appear on the front end, including all WooCommerce pages.

What the plugin provides

  • Text size, line/letter/word spacing
  • Contrast modes, readable fonts (Atkinson Hyperlegible, OpenDyslexic)
  • Reading guide, focus indicators, link underlining
  • Grayscale, animation control
  • User preferences saved in the browser
  • Built-in accessibility statement generator

Script-only option

If you prefer not to use the plugin, add the widget script in your theme's header.php or before </body> (e.g. in a child theme). The plugin is still recommended for more control and the accessibility statement tool.

<script src="https://cdn.jsdelivr.net/gh/OpenAccessible/OpenAccessible@main/openaccessible.js"></script>

Need help?

Check the GitHub repos for the latest install files, issues, and discussions. For WordPress and WooCommerce, the WordPress plugin support forum is the place to ask questions.

OpenAccessible (main) OpenAccessible Shopify

Resources

github.com/OpenAccessible/OpenAccessible github.com/OpenAccessible/Shopify github.com/OpenAccessible/WordPress github.com/OpenAccessible/WooCommerce

All code and install files are on GitHub. Use the repos above for the widget, Shopify, WordPress, and WooCommerce. Load via jsDelivr (cdn.jsdelivr.net/gh/OpenAccessible/…) or download and self-host.