Oksigenia is a small open-source software firm based in Spain. One of our products is an accessibility panel packaged as a vanilla web component, already shipped as a WordPress plugin and a Moodle plugin. Several Ghost users have asked whether it can be installed on Ghost too. It can, and the setup is one Code Injection block.
Go to Settings → Code injection → Site Footer and paste:
<oksigenia-access-panel locale="en" position="bottom-left"></oksigenia-access-panel>
<script type="module" src="https://cdn.jsdelivr.net/npm/@oksigenia/access-panel/dist/web-component.js"></script>
Save. A floating accessibility button appears on every page, and the panel opens on click.
What the visitor gets
- 4 one-click profile presets: Low Vision, Dyslexia, Motor, No Distractions. Each one applies a bundle of related toggles.
- 17 atomic controls in three groups:
- Text: size (4 levels), line height, alignment, readable font, dyslexia font, letter spacing.
- Vision: high contrast, grayscale, hide images, highlight links, colorblind filters (Protanopia, Deuteranopia, Tritanopia).
- Orientation: reading guide, reading mask, big cursor, big targets (44×44 hit-area, WCAG 2.5.5), pause animations, focus outlines.
- 8 locales: English, Spanish, French, Italian, German, Dutch, Swedish, and Guaraní.
- Preferences persist in the visitor’s localStorage. No cookies, no server calls, no account, no telemetry.
What it does not do
The panel does not “fix” the site’s accessibility. There is no automatic alt-text rewriting, no opaque overlay claiming WCAG compliance, no auto-magic. It gives visitors a familiar floating widget to adapt the rendered page to their own needs. Real accessibility still requires real work on the content, the markup and the theme.
Privacy note
The snippet above loads the bundle from jsDelivr, a third-party CDN that logs requests. To stay fully first-party, download dist/web-component.js from npm (or GitHub), upload it as a theme asset in assets/ of the active Ghost theme, and point the <script src=…> at that path on the own domain. Same component, no third-party hop.
Configuration
Attributes on the tag (all optional):
| Attribute | Default | Values |
|---|---|---|
locale |
navigator.language |
en, es, gn, fr, it, de, nl, sv |
position |
mid-left |
top-left, top-right, mid-left, mid-right, bottom-left, bottom-right |
position-mobile |
inherits position |
same values; applies on viewports ≤768px |
trigger-icon |
vitruvian |
vitruvian, wheelchair, eye, universal |
Links
- npm: https://www.npmjs.com/package/@oksigenia/access-panel
- GitHub (issues, source): GitHub - OksigeniaSL/oksigenia-web-libs: Privacy-first, zero-dependency web libraries from Oksigenia. Accessibility panel (15 controls, 8 locales incl. Guaraní) and social share buttons. Web components, MIT. · GitHub
- License: MIT
Feedback and bug reports welcome on GitHub.